Frontend Design
If you're tired of Claude generating the same purple gradients and Inter font combos, this forces it to think like an actual designer first. Before writing any code, it commits to a bold aesthetic direction (brutalist, art deco, maximalist chaos, whatever fits) then executes with specific attention to typography, motion, and spatial composition. Works for React components, landing pages, dashboards, anything frontend. The underlying philosophy is solid: distinctive choices beat safe ones, and implementation complexity should match the vision. Whether you want refined minimalism or elaborate maximalism, it pushes for intentional design decisions instead of defaulting to generic AI aesthetics.
- skills.sh installs
- 373
- GitHub stars
- 6K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add galaxy-dawn/claude-scholar --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/galaxy-dawn/claude-scholar
- Categories
- Frontend Development, DevOps & CI/CD, Code Review & Quality, Design & UI/UX
- First seen
- Jun 3, 2026
More from galaxy-dawn/claude-scholar
All 28- Citation Verification1.5K
- Writing Anti Ai782
- Paper Self Review700
- Review Response568
- Results Analysis553
- Research Ideation548
- Ui Ux Pro Max514
- Results Report502
- Zotero Obsidian Bridge487
- Ml Paper Writing469
- Skill Quality Reviewer467
- Kaggle Learner446
- Daily Paper Generator421
- Obsidian Literature Workflow418
- Bug Detective412
- Skill Improver406
- Latex Conference Template Organizer401
- Post Acceptance391
- Architecture Design387
- Uv Package Manager383
- Git Workflow382
- Web Design Reviewer378
- Doc Coauthoring377
- Daily Coding376
Recommended
More Frontend Development
nextjs-server-client-componentswsimmonds/claude-nextjs-skillsGuide for choosing between Server Components and Client Components in Next.js App Router. CRITICAL for useSearchParams (requires Suspense + 'use client'), navig364skills.sh installs
shadcn-uiexistential-birds/beagleshadcn/ui component patterns with Radix primitives and Tailwind styling. Use when building UI components, using CVA variants, implementing compound components, 356skills.sh installs
responsive-design-systempatricio0312rev/skillsImplements responsive design systems with mobile-first breakpoints, container queries, fluid typography, and adaptive layouts using Tailwind CSS. Use when users353skills.sh installs
senior-frontendborghei/claude-skillsFrontend development for React, Next.js, TypeScript, and Tailwind CSS. Use when building React components, optimizing Next.js performance, analyzing bundle size351skills.sh installs
frontend-designerjamesrochabrun/skillsBuild accessible, responsive, and performant frontend components with design system best practices, modern CSS, and framework-agnostic patterns.340skills.sh installs
accelint-react-best-practicesgohypergiant/agent-skillsReact performance optimization and best practices. ALWAYS use this skill when working with any React code - writing components, hooks, JSX; refactoring; optimiz335skills.sh installs