frontend-design

Distinctive, production-grade frontend interfaces that avoid generic AI aesthetics through intentional design choices.

- Requires confirmed design context (target audience, use cases, brand personality) before implementation; includes teach-impeccable skill integration for gathering missing context

- Covers five core design areas: typography, color and theming, layout and spacing, visual details, and motion with specific anti-patterns to avoid

- Emphasizes bold aesthetic directions (brutalist, maximalist, minimalist, retro-futuristic, etc.) executed with precision and cohesion rather than safe defaults

- Provides reference guides for typography scales, OKLCH color functions, spatial rhythm, motion timing, responsive design, and UX writing best practices

name: frontend-design
description: DEPRECATED: This skill has been renamed to 'impeccable'. Run /impeccable instead.

This skill has been renamed to impeccable. All design functionality now lives in the /impeccable skill.

Check if the impeccable skill is available:

- If /impeccable exists, use it directly. You can safely inform the user that the frontend-design folder is a deprecated leftover and can be deleted.

- If /impeccable does NOT exist, tell the user to update their skills by running npx impeccable skills update in their terminal.

Do NOT attempt any design work from this skill. Redirect to /impeccable instead.