Design and refine web interfaces around their audience, tasks, and brand tone. Covers typography, color, layout, motion, accessibility, and performance, with guided techniques for reviewing existing screens and preparing them for release.
Frontend design skill fused from Impeccable + custom extensions. Covers design philosophy, anti-AI-slop patterns, typography, color (OKLCH), spatial design, motion, interaction, responsive, UX writing, state management, engineering, and 4 style variants. Includes 20 command skills for audit/critique/polish/animate/etc.
Review the instructions the agent will receive before you install.
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. It fuses Impeccable design philosophy with extended knowledge on state management, engineering, and design style systems.
Design skills produce generic output without project context. You MUST have confirmed design context before doing any design work.
Required context — every design skill needs at minimum:
Gathering order:
.impeccable.md from the project root. If it exists and contains the required context, proceed..impeccable.md at the project root so future sessions skip straight to step 2. (The detailed intake playbook lives at impeccable/teach-impeccable/SKILL.md.)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.
Consult typography reference for scales, pairing, and loading strategies.
Choose fonts that are beautiful, unique, and interesting. Pair a distinctive display font with a refined body font.
DO: Use a modular type scale with fluid sizing (clamp) for display text; fixed rem scales for app UIs DO: Vary font weights and sizes to create clear visual hierarchy DON'T: Use overused fonts — Inter, Roboto, Arial, Open Sans, system defaults DON'T: Use monospace typography as lazy shorthand for "technical/developer" vibes DON'T: Put large icons with rounded corners above every heading — they rarely add value
Consult color reference for OKLCH, palettes, and dark mode.
Commit to a cohesive palette. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
DO: Use OKLCH (not HSL) for perceptually uniform, maintainable palettes DO: Tint your neutrals toward your brand hue — even a subtle hint creates subconscious cohesion DON'T: Use gray text on colored backgrounds — use a shade of the background color instead DON'T: Use pure black (#000) or pure white (#fff) — always tint DON'T: Use the AI color palette: cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds DON'T: Use gradient text for "impact" — it's decorative rather than meaningful DON'T: Default to dark mode with glowing accents
Consult spatial reference for grids, rhythm, and container queries.
DO: Create visual rhythm through varied spacing — tight groupings, generous separations DO: Use fluid spacing with clamp() that breathes on larger screens DO: Use asymmetry and unexpected compositions; break the grid intentionally DON'T: Wrap everything in cards — not everything needs a container DON'T: Nest cards inside cards — flatten the hierarchy DON'T: Use identical card grids — same-sized cards with icon + heading + text, repeated endlessly DON'T: Center everything — left-aligned text with asymmetric layouts feels more designed DON'T: Use the same spacing everywhere — without rhythm, layouts feel monotonous
DO: Use intentional, purposeful decorative elements that reinforce brand DON'T: Use glassmorphism everywhere — blur effects used decoratively rather than purposefully DON'T: Use rounded elements with thick colored border on one side — a lazy accent DON'T: Use sparklines as decoration — tiny charts that convey nothing meaningful DON'T: Use rounded rectangles with generic drop shadows — safe, forgettable DON'T: Use modals unless there's truly no better alternative
Consult motion reference for timing, easing, and reduced motion.
DO: Use motion to convey state changes — entrances, exits, feedback DO: Use exponential easing (ease-out-quart/quint/expo) for natural deceleration DO: For height animations, use grid-template-rows transitions DON'T: Animate layout properties (width, height, padding, margin) — use transform and opacity only DON'T: Use bounce or elastic easing — they feel dated and tacky
Consult interaction reference for forms, focus, and loading patterns.
DO: Use progressive disclosure — start simple, reveal sophistication through interaction DO: Design empty states that teach the interface, not just say "nothing here" DO: Make every interactive surface feel intentional and responsive DON'T: Repeat the same information — redundant headers, intros that restate the heading DON'T: Make every button primary — hierarchy matters
Consult responsive reference for mobile-first, fluid design, and container queries.
DO: Use container queries (@container) for component-level responsiveness DO: Adapt the interface for different contexts — don't just shrink it DON'T: Hide critical functionality on mobile — adapt, don't amputate
Consult ux-writing reference for labels, errors, and empty states.
DO: Make every word earn its place DON'T: Repeat information users can already see
Critical quality check: If you showed this interface to someone and said "AI made this," would they believe you immediately? If yes, that's the problem.
A distinctive interface should make someone ask "how was this made?" not "which AI made this?"
Review the DON'T guidelines above — they are the fingerprints of AI-generated work from 2024-2025.
Deep-dive reference documents for each design dimension:
| Reference | Covers |
|---|---|
| typography | Type systems, font pairing, modular scales, OpenType, web font loading |
| color-and-contrast | OKLCH, tinted neutrals, dark mode, accessibility, 60-30-10 |
| spatial-design | 4pt spacing, grids, visual hierarchy, container queries, optical adjustments |
| motion-design | 100/300/500 rule, easing curves, stagger, reduced motion, perceived performance |
| interaction-design | 8 states, focus rings, Popover API, CSS Anchor, modals, keyboard nav |
| responsive-design | Content-driven breakpoints, pointer/hover queries, safe areas, srcset |
| ux-writing | Button labels, error formulas, empty states, voice vs tone, i18n |
| Topic | Document | Covers |
|---|---|---|
| UI Aesthetics | ui-aesthetics.md | HSL color tokens, 8px grid CSS snippets, shadow scales, dark mode CSS |
| Component Patterns | component-patterns.md | CSS Grid/Flexbox layouts, responsive nav, glass card, Framer Motion |
| UX Principles | ux-principles.md | Nielsen 10 heuristics, WCAG, ARIA, keyboard, loading patterns |
| State Management | state-management.md | Redux/Zustand/Jotai/Recoil/Context — decision tree + code templates |
| Frontend Engineering | engineering.md | Web Vitals, code splitting, virtual scroll, Vitest/Playwright, Vite/Webpack |
Specific style variant specs with CSS tokens and component patterns:
| Style | Document | Aesthetic |
|---|---|---|
| Claymorphism | claymorphism/SKILL.md | Soft clay, large radii, dual inner shadows, offset outer shadows |
| Glassmorphism | glassmorphism/SKILL.md | Frosted glass, backdrop-filter, translucency, blur layers |
| Neubrutalism | neubrutalism/SKILL.md | Thick borders, offset solid shadows, high saturation, minimal radius |
| Liquid Glass | liquid-glass/SKILL.md | Apple-style translucent depth, spring animations, ambient response |
These 20 techniques are not separate slash commands — they're this skill's toolbox. Each is a detailed step-by-step playbook at impeccable/<name>/SKILL.md (installed under ~/.claude/skills/ccg/impeccable/). When a task calls for one, read that file and apply it; every playbook assumes the design principles above. Invoke /ccg:frontend-design once and pull in whichever techniques the work needs.
| Technique | What it does |
|---|---|
audit | Technical quality checks (a11y, performance, responsive, theming, anti-patterns) — scored 0-20 |
critique | UX design review with Nielsen heuristics scoring (0-40), persona testing, cognitive load |
teach-impeccable | Intake playbook: gather design context, save to .impeccable.md |
| Technique | What it does |
|---|---|
normalize | Align with design system standards |
polish | Final pass before shipping — 20-item checklist |
distill | Strip to essence, remove unnecessary complexity |
clarify | Improve unclear UX copy, error messages, labels |
optimize | Performance improvements (CWV, bundle, rendering) |
harden | Error handling, i18n, text overflow, edge cases |
| Technique | What it does |
|---|---|
animate | Add purposeful motion and micro-interactions |
colorize | Introduce strategic color to monochromatic designs |
bolder | Amplify boring designs with distinctive impact |
quieter | Tone down overly bold designs to refined sophistication |
delight | Add moments of joy, personality, and surprise |
| Technique | What it does |
|---|---|
extract | Pull into reusable components and design tokens |
adapt | Adapt for different devices and contexts |
onboard | Design onboarding flows and empty states |
typeset | Fix font choices, hierarchy, sizing, readability |
arrange | Fix layout, spacing, visual rhythm |
overdrive | Technically extraordinary effects (shaders, springs, scroll-driven) |
Chain playbooks in sequence for a full pass — e.g. audit → normalize → polish (find issues, fix inconsistencies, final cleanup), or critique → harden (UX review, then add error handling). Read each module's SKILL.md in turn and carry its output into the next.
Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details.
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices across generations.
audit, critique playbooks)adapt playbook)animate, delight playbooks)optimize playbook)polish playbook)clarify playbook)harden playbook)typeset playbook)arrange playbook)No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Adapts existing designs for phones, tablets, desktops, print, and email. Adjusts layouts, navigation, content priorities, and touch controls to suit each context, with guidance for responsive sizing and verification across devices and input methods.
Audit a website for Google AdSense application readiness or ongoing ad-serving issues. Check content, navigation, crawler access, and disclosures against official requirements, then receive evidence-based findings, specific fixes, and a complete checklist with unresolved questions clearly marked.
Routes AI development questions to focused references on agents, language model security, retrieval-augmented generation, which uses retrieved information in answers, and prompt design and evaluation. It also outlines principles for validation, safety boundaries, version control, and ongoing assessment.
Review an interface and add purposeful motion to buttons, forms, navigation, and state changes. Plan and implement animations that clarify actions and provide feedback, while checking performance and supporting users who prefer reduced motion.
Find the relevant architectural guidance for API design, security, cloud infrastructure, message queues, and caching. This skill acts as an index to specialized references and lists principles for structuring software, distributed systems, and access controls.
Improve interface layouts by reviewing spacing, alignment, content density, and visual hierarchy, the cues that show what matters most. Refine repetitive card grids and crowded sections into compositions with consistent spacing and responsive structure.