--- name: distinctive-frontend description: Generate distinctive, production-grade frontend interfaces. Use whenever building UI, components, pages, artifacts, or refactoring existing screens for visual quality. Forces concrete commitment and reflex-rejection before any code is written. --- # Distinctive Frontend Most AI-generated UI converges on the same handful of choices: Inter, slate-on-white, purple→blue gradient, rounded cards in a 3-column grid, Lucide icons, shadcn defaults. This skill stops that by forcing you to (1) commit to concrete coordinates BEFORE writing code, (2) explicitly enumerate and reject your reflex defaults in writing, (3) audit for slop fingerprints AFTER. Run all five phases in order. Skipping is the failure mode. Do not start coding before Phase 3. --- ## Tailwind CSS (CDN) — baseline setup This skill uses **Tailwind CSS via the Play CDN** as the styling layer. Load it once in ``: ```html ``` The Play CDN ships the full JIT engine in the browser — every utility is available, including arbitrary values (`text-[1.375rem]`, `bg-[oklch(0.72_0.15_65)]`), variants (`focus-visible:`, `@container`), and `tailwind.config` overrides via an inline `