This skill should be used when the user asks to 'build a Next.js app', 'create a dashboard', 'design a landing page', 'build a SaaS frontend', 'create React components', 'style my app', 'design system', 'UI components', or needs distinctive frontend design. Covers App Router, React Server Components, type-safe APIs, Server Actions, and modern styling. Avoids generic 'AI slop' aesthetics (Inter fonts, purple gradients, predictable layouts) - creates memorable, intentional interfaces instead. Triggers on: Next.js projects, e-commerce sites, admin panels, marketing pages, or any frontend needing both architectural excellence and visual distinction.
Create distinctive, production-grade Next.js applications combining expert TypeScript architecture with exceptional visual design.
<frontend_aesthetics> You tend to converge toward generic, "on distribution" outputs. In frontend design, this creates what users call the "AI slop" aesthetic. Avoid this: make creative, distinctive frontends that surprise and delight.
Focus on:
Avoid generic AI-generated aesthetics:
Interpret creatively and make unexpected choices that feel genuinely designed for the context. Vary between light and dark themes, different fonts, different aesthetics. You still tend to converge on common choices (Space Grotesk, for example) across generations. Avoid this: it is critical that you think outside the box! </frontend_aesthetics>
Before writing ANY code, commit to a BOLD aesthetic direction:
CRITICAL: Bold maximalism and refined minimalism both work—the key is intentionality, not intensity. Half-measures produce mediocrity.
For comprehensive design guidance, see: references/design-philosophy.md
NEVER use: Inter, Roboto, Open Sans, Lato, Arial, system fonts
DO use:
Pairing principle: High contrast = interesting. Display + monospace, serif + geometric sans.
Use extremes: Weight 100/200 vs 800/900 (not 400 vs 600). Size jumps of 3x+ (not 1.5x).
// app/layout.tsx - Font setup
import { Bricolage_Grotesque, JetBrains_Mono } from 'next/font/google';
const fontDisplay = Bricolage_Grotesque({
subsets: ['latin'],
variable: '--font-display',
weight: ['200', '400', '800'],
});
const fontMono = JetBrains_Mono({
subsets: ['latin'],
variable: '--font-mono',
});
/* globals.css */
:root {
/* Typography */
--font-display: 'Bricolage Grotesque', sans-serif;
--font-body: 'Source Sans 3', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* Colors - Commit to an aesthetic */
--color-bg: #0a0a0a;
--color-surface: #141414;
--color-text: #e8e8e8;
--color-muted: #6b6b6b;
--color-accent: #ff3e00;
--color-border: #2a2a2a;
/* Animation easings - NEVER use default ease */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Staggered reveal - high impact */
.animate-stagger > * {
opacity: 0;
transform: translateY(20px);
animation: fadeUp 0.6s var(--ease-out-expo) forwards;
}
.animate-stagger > *:nth-child(1) { animation-delay: 0ms; }
.animate-stagger > *:nth-child(2) { animation-delay: 100ms; }
.animate-stagger > *:nth-child(3) { animation-delay: 200ms; }
.animate-stagger > *:nth-child(4) { animation-delay: 300ms; }
@keyframes fadeUp {
to { opacity: 1; transform: translateY(0); }
}
/* Gradient mesh - creates depth */
.hero-bg {
background:
radial-gradient(ellipse at 20% 50%, rgba(120, 119, 198, 0.3), transparent 50%),
radial-gradient(ellipse at 80% 50%, rgba(255, 62, 0, 0.2), transparent 50%),
linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%);
}
/* Noise texture overlay */
.textured::after {
content: '';
position: absolute;
inset: 0;
background: url('/noise.svg');
opacity: 0.03;
pointer-events: none;
}
Before shipping, verify you have NOT:
Typography:
Color:
Layout:
Animation:
ease timing functionBackgrounds:
Design & Aesthetics:
references/design-philosophy.md — Complete aesthetics guide, theme recipes, spatial composition, anti-patternsTechnical Patterns:
references/nextjs-patterns.md — App Router, Server Components, Server Actions, Caching, Streaming, Accessibilityreferences/typescript-patterns.md — Advanced TypeScript patterns, API types, hooksreferences/component-library.md — Production component implementationsreferences/animation-recipes.md — Motion design patterns, scroll effects, Framer MotionIMPORTANT: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
Remember: Claude is capable of extraordinary creative work. Don't hold back—show what can truly be created when thinking outside the box and committing fully to a distinctive vision.