Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →notque/distinctive-frontend-design
Context-driven aesthetic exploration with anti-cliche validation.
Passed 15 of 20 test cases with the skill, and 10 of 20 without it.
and 7 more in the full report
6 fixed11 passed either way5 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 6 test cases the skill fixed. Same model, same prompt, with and without the skill.
Before picking font families or hex colors for a statistics-heavy SaaS landing page called MetricForge, select and record a structural page layout identifier from the catalog.
| Checked | Without skill | With skill |
|---|---|---|
| Outputs a layout macrostructure ID prefixed with macro:. | Missed | Passed |
| Selects macrostructure layout prior to typography and color decisions. | Passed | Passed |
The instructions your model reads when the skill loads.
Systematic aesthetic exploration that produces contextual, validated design specifications. Every design choice flows from project context -- purpose, audience, emotion -- not from defaults or convenience. The workflow enforces exploration before implementation: you cannot write CSS until you have a validated aesthetic direction, typography selection, color palette, animation strategy, and atmospheric background.
Optional capabilities (off unless explicitly enabled by the user): design system generation, full WCAG accessibility auditing, animation performance profiling, dark mode variant generation.
| Signal | Load These Files | Why |
|---|---|---|
| adding motion: page load orchestration, state transitions, scroll reveals, easing | animation-patterns.md | Loads detailed guidance from animation-patterns.md. |
| applying layout rules after Phase 1 surface-type classification (app vs landing) | app-vs-landing-rules.md | Loads detailed guidance from app-vs-landing-rules.md. |
| building backgrounds: gradients, noise, geometric patterns, atmosphere | background-techniques.md | Loads detailed guidance from background-techniques.md. |
| auditing CSS for banned fonts, hardcoded colors, over-animation | css-audit-patterns.md | Loads detailed guidance from css-audit-patterns.md. |
| errors, error handling | error-handling.md | Loads detailed guidance from error-handling.md. |
| brief-level walkthroughs: new landing page, app surface | examples.md | Loads detailed guidance from examples.md. |
| game UI, AAA game, polished game, Steam game, roguelike UI, Slay the Spire | game-ui-polish.md | Loads game-native polish rules that prevent website-like surfaces, excessive gradients, nested boxes, and fake-premium chrome. |
| starter code: design tokens, base styles, React/Tailwind and HTML templates | implementation-examples.md | Loads detailed guidance from implementation-examples.md. |
| performance work | performance-budgets.md | Loads detailed guidance from performance-budgets.md. |
| text animation, kinetic typography, roll text, slot machine, animated headline, rolling label, rolling counter | text-animation.md, then roll-text.md or text-animation-patterns.md per signal | Loads text-animation domain skill and the matching pattern reference. |
| card effects, holographic, foil, shimmer, card glow, shader card, WebGL card, rarity effects, Balatro effect | webgl-card-effects.md, then card-shader-patterns.md or shader-integration-react.md or balatro-shader-breakdown.md per phase | Loads card-effects domain skill and the matching shader reference. |
| HTML slides, browser presentation, web deck, reveal-style, viewport presentation, PPTX conversion, kiosk presentation | frontend-slides.md, then STYLE_PRESETS.md or slide-controller.md or pptx-conversion.md per phase | Loads slides domain skill and the matching slides reference. |
| aesthetic direction examples and expanded phase steps | phase-details.md | Loads detailed guidance from phase-details.md. |
| picking a page structure in Phase 1 | macrostructure-catalog.md | Load only the single chosen macro:* entry by its heading anchor (e.g. #macrostat-led), never the whole file — one entry carries every rule the build needs. |
| before Phase 1: definitions of Hero, Full-bleed, Surface type, and other gating terms | vocabulary.md | Loads detailed guidance from vocabulary.md. |
See references/vocabulary.md for term definitions (Hero, Full-bleed, Narrative brief, Surface type, Linear-style restraint, Decorative-only motion, Brand override). Read these once before Phase 1 so the rules do not feel like jargon when they gate your work.
Goal: Understand the project deeply before making any aesthetic decisions.
Step 1: Read and follow the repository CLAUDE.md, then gather context by asking (adapt based on what is already known):
test cases passed, vs 10 / 20 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.