distinctive-frontend-design

Installation
SKILL.md

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
implementation patterns animation-patterns.md Loads detailed guidance from animation-patterns.md.
tasks related to this reference app-vs-landing-rules.md Loads detailed guidance from app-vs-landing-rules.md.
tasks related to this reference background-techniques.md Loads detailed guidance from background-techniques.md.
implementation patterns 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.
example-driven tasks 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.
example-driven tasks implementation-examples.md Loads detailed guidance from implementation-examples.md.
performance work performance-budgets.md Loads detailed guidance from performance-budgets.md.
Related skills
Installs
7
GitHub Stars
366
First Seen
Mar 23, 2026