distinctive-frontend-design

# Distinctive Frontend Design Skill 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. ## Reference Loading Table | 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 walkthrou...