frontend-design Claude Code Skill

This skill gives guidance for producing distinctive, intentional visual design when building or reworking a user interface, rather than defaulting to generic templated looks. It frames the task as acting like a design lead who grounds every choice in the specific subject matter, audience, and purpose of the page, deliberately selecting color, typography, and layout instead of relying on common patterns. It lays out a two-pass workflow: first sketching a compact design plan covering palette, type roles, layout concept, and a single signature element, then critically reviewing that plan against generic AI-typical defaults before writing any code. It also addresses practical implementation issues such as CSS specificity conflicts and baseline accessibility concerns like responsiveness, keyboard focus visibility, and reduced-motion support. Additional guidance covers writing interface copy from the end user's perspective, favoring plain, active-voice language.