Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. Use this skill when the user asks to build web components, pages, or applications. Covers bold aesthetic direction selection, architectural typography (curated Google Fonts, fluid clamp-based sizing), advanced CSS layout (grid-template-areas, subgrid, intentional overlapping, negative margins), surface and depth (layered shadows, SVG noise textures, grain effects), motion and micro-interactions (staggered animations, custom cubic-bezier easing, scroll-triggered reveals), CSS custom property systems (color palettes, spacing scales, type scales), anti-convergence enforcement (banned defaults, forced variation triggers), and a pre-finalization litmus test. Invoke when: building HTML/CSS pages or components, creating landing pages, designing web layouts, implementing animations or transitions, choosing typography or color palettes for web projects, the user asks for visually distinctive or creative UI, the user wants to avoid generic or cookie-cutter design, or when generating any frontend HTML/CSS that should look professionally designed rather than AI-generated.
From frontend-design-skillnpx claudepluginhub cpike5/cpike-agent-skills --plugin frontend-design-skillThis skill uses the workspace's default tool permissions.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Details PluginEval's skill quality evaluation: 3 layers (static, LLM judge), 10 dimensions, rubrics, formulas, anti-patterns, badges. Use to interpret scores, improve triggering, calibrate thresholds.
Create 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.
Before coding, understand the context and commit to a BOLD aesthetic direction:
CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
Before designing, roll a mental die. Force yourself away from your defaults by explicitly ruling out:
If your design could plausibly appear on any other AI-generated UI, start over.
Banned by default unless explicitly requested:
Forced variation triggers — pick one that fits and commit hard:
On gradients specifically: Default to flat color, solid fills, and sharp contrast. If depth is needed, use shadows, borders, layering, or texture — not gradients. Gradients must be explicitly justified by the aesthetic direction, not used as a default polish move.
Answer each honestly before considering the design done:
The swap test — Could you swap the color scheme and fonts for a different project's and have it still look fine? If yes, the design isn't specific enough to this context.
The screenshot test — If someone posted a screenshot on Twitter/X, would anyone comment on the design itself — for any reason? If the answer is "probably not," it's too forgettable.
The gradient audit — Count the gradients. If the answer is more than zero and they weren't explicitly chosen for a reason you can articulate, remove them.
The font gut-check — Say the font name out loud. Is it one of the first five fonts you'd think of? If yes, go find something else.
The layout test — Cover all the content and look at just the layout skeleton. Does it have any structural personality, or is it just stacked rectangles?
The "what era / what world" test — Could you describe in one sentence what design world this belongs to? (e.g. "1970s technical manual", "brutalist Eastern European poster", "dense Bloomberg terminal"). If you can't, it doesn't have a clear enough point of view.
The detail pass — Zoom into one small area. Is there anything there that shows craft — a subtle rule, a considered spacing choice, an unexpected typographic detail? Or is it just filler?
If you fail more than two: Restart with a different aesthetic direction, not a revision of the current one. Iteration on a bad direction produces a polished bad direction.
Read the relevant docs based on your task for detailed CSS implementations: