Frontend Design
This is for when you need Claude to actually design something, not just spit out another purple gradient with Inter. It pushes for bold aesthetic choices upfront (brutalist, retro-futuristic, editorial, whatever fits) then generates production code that commits to that vision. The guidance is opinionated: distinctive fonts over system defaults, animations that matter instead of scattered micro-interactions, layouts that break the grid. It includes checklists for accessibility, responsive behavior, and performance so you're not just getting something pretty but broken. Honestly refreshing to see a skill that explicitly fights against generic AI output patterns.
- skills.sh installs
- 479
- GitHub stars
- 248
- last updated
- Aug 21, 2026
Install
$ npx -y skills add secondsky/claude-skills --skill frontend-design --agent claude-codeInstalls into .claude/skills of the current project.
Files
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
Design Thinking
Before coding, understand the context and commit to a BOLD aesthetic direction:
- Purpose: What problem does this interface solve? Who uses it?
- Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
- Constraints: Technical requirements (framework, performance, accessibility).
- Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/secondsky/claude-skills
- Categories
- Frontend Development, DevOps & CI/CD, Code Review & Quality, Design & UI/UX
- First seen
- Jun 3, 2026
More from secondsky/claude-skills
All 146- Threejs477
- Csrf Protection474
- Ml Model Training474
- Payment Gateway Integration469
- Test Quality Analysis469
- Api Reference Documentation465
- Tanstack Router461
- Systematic Debugging457
- Interaction Design456
- Mutation Testing456
- Api Error Handling455
- Internationalization I18n455
- Security Headers Configuration454
- Seo Optimizer453
- Sequential Thinking448
- Bun Sqlite442
- Websocket Implementation440
- Mobile App Debugging439
- Root Cause Tracing438
- App Store Deployment437
- Database Schema Design437
- Recommendation Engine437
- Seo Keyword Cluster Builder437
- Bun Sveltekit436
Recommended
More Frontend Development
angular-developmentmanutej/luxor-claude-marketplaceComprehensive Angular framework development covering components, directives, services, dependency injection, routing, and reactive programming based on official463skills.sh installssvelte-developmentmanutej/luxor-claude-marketplaceComprehensive Svelte development skill covering reactivity runes, components, stores, lifecycle, transitions, and modern Svelte 5 patterns436skills.sh installs
nuxt-productionsecondsky/claude-skills| Nuxt 4 production optimization: hydration, performance, testing with Vitest, deployment to Cloudflare/Vercel/Netlify, and v4 migration. Use when: debugging hy425skills.sh installs
dribbble-ui-skillsihlamury/design-skillsDribbble's UI design system. Use when building interfaces inspired by Dribbble's aesthetic - light mode, Inter font, 4px grid.413skills.sh installsnotion-ui-skillsihlamury/design-skillsNotion's UI design system. Use when building interfaces inspired by Notion's aesthetic - light mode, Inter font, 4px grid.402skills.sh installs
contributingnuxt/uiGuide for contributing to Nuxt UI. Provides component structure patterns, Tailwind Variants theming, Vitest testing conventions, and MDC documentation guideline400skills.sh installs