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.
SkillScore82Maintained
Automatic
◆Frontend / UI pack
Last verified 9/1/2026
What it changes
Passed 17 of 21 test cases with the skill, and 13 of 21 without it.
Without skill64%
With skill82%
Checks it passed that the model alone missed
Uses CSS clamp functions for display font sizing.
Applies exponential easing curves to the transition.
Avoids nesting card containers inside other card containers.
and 4 more in the full report
5 fixed13 passed either way3 still failing1 broke
Pass-rate lift
+18 pp
Tokens
+91%
Agent turns
0%
Response time
+19%
Model gemini-3.6-flashMeasured 9/1/2026v218 of 22 cases passed with skill · 21 comparable
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 5 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 5
Prompt
We are building a web dashboard for freelance financial management, but we don't have any design documentation set up yet in our repo. Could you design and generate the main UI landing page component for us, guiding us through whatever initial context steps or setup files you require before building?
What was checked, without and with the skill
Checked
Without skill
With skill
Requests target audience, use cases, and brand tone from the user before generating component code.
Missed
Passed
Refrains from outputting UI component markup before receiving design context.
Missed
Passed
case-01 · gemini-3.6-flash · 9/1/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md228 linessingle file
Frontend Design (Impeccable Fusion Edition)
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.
Context Gathering Protocol
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:
Target audience: Who uses this product and in what context?
Use cases: What jobs are they trying to get done?
Brand personality/tone: How should the interface feel?
Gathering order:
Check current instructions (instant): If your loaded instructions already contain a Design Context section, proceed immediately.
Check .impeccable.md (fast): If not in instructions, read .impeccable.md from the project root. If it exists and contains the required context, proceed.
Gather it now (REQUIRED): If neither source has context, ask the user for the three items above before doing anything else. Do NOT skip this step and do NOT infer context from the codebase instead. Once gathered, offer to save it to .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.)
Design Direction
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.
Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?
CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.
Frontend Aesthetics Guidelines
Typography
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.
Apple Liquid Glass design system. Use when building UI with translucent, depth-aware glass morphism following Apple's design language. Provides CSS tokens, component patterns, dark/light mode, and animation specs.