Frontend Enhancer
Enhance Next.js applications with modern visual design, production-ready components, color palettes, animations, and responsive layout templates.
Your Next.js app works perfectly but looks like every other AI-generated template — generic gradients, default shadows, and that same hero section everyone uses. Functional doesn't have to mean forgettable.
Who it's for: full-stack developers who can build but struggle with design, indie hackers wanting polished UIs without hiring a designer, Next.js developers upgrading from default styling, teams replacing generic templates with distinctive design, React developers adding polish before launch
Example
"Make our Next.js dashboard look professional and distinctive" → Production-ready component upgrades with curated color palette, accessible animations, responsive layout templates, and Tailwind configurations — designed to avoid the 'AI-generated' look
CLAUDE.md Template
New here? 3-minute setup guide → | Already set up? Copy the template below.
npx ccplaybooks add frontend-enhancer# Frontend Enhancer
## Your Role
You are my frontend design specialist. Help me enhance Next.js applications with modern visual design, production-ready components, and professional aesthetics.
## Core Capabilities
### Component Library
Pre-built React components with TypeScript and accessibility:
```tsx
// Button Component with VariantsGet new playbooks like this one
One email a week with new Claude Code workflows. Free, like everything here.
No spam. Unsubscribe anytime.
What This Does
Enhance your Next.js applications with modern visual design. Get production-ready components, curated color palettes, accessible animations, and responsive layout templates that avoid generic AI aesthetics.
Quick Start
Step 1: Navigate to Your Project
cd ~/your-nextjs-project
Step 2: Download the Template
Click Download above, then:
mv ~/Downloads/CLAUDE.md ./
Step 3: Enhance Your Frontend
claude
Then ask: "Enhance the visual design of this app"
What's Included
Component Library
Pre-built React components with TypeScript:
- Buttons (primary, secondary, outline, ghost, danger)
- Cards, inputs, modals
- Navigation components
- Form elements
Layout Templates
Responsive patterns:
- Hero sections (centered, split, minimal)
- Feature grids with animations
- Pricing tables
- Footer layouts
Color Palettes
Six professionally curated schemes:
| Palette | Best For |
|---|---|
| Corporate Blue | Business applications |
| Startup Fresh | Modern SaaS products |
| Earthy Natural | Wellness, sustainability |
| Bold Creative | Portfolio, agency sites |
| Minimalist Mono | Developer tools |
| Dark Mode | Developer-focused apps |
Animations
Accessible animation library:
- Fade, slide, scale effects
- Staggered animations
- Respects
prefers-reduced-motion
Example Prompts
- "Add a modern hero section to the homepage"
- "Create a button component with multiple variants"
- "Implement dark mode for this app"
- "Make the layout more responsive"
Design Principles
| Principle | Implementation |
|---|---|
| Visual Hierarchy | Clear typography scale, spacing system |
| Accessibility | WCAG compliant, keyboard navigation |
| Responsiveness | Mobile-first, breakpoints at 320px-1280px+ |
| Performance | Optimized animations, lazy loading |
Enhancement Workflow
- Assess: Review current design state
- Select: Choose design direction and palette
- Foundation: Apply colors, typography, spacing
- Components: Add/enhance UI components
- Polish: Refine animations and interactions
- Review: Verify accessibility and responsiveness