frontend-design_skill

Overview

This skill creates distinctive, production-grade frontend interfaces with a strong design point of view. It produces polished, working code for components, pages, posters, and small applications that avoid generic "AI" aesthetics. It enforces a context-first workflow so designs match audience, use cases, and brand tone.

How this skill works

Before producing designs or code, it requires explicit design context: target audience, primary use cases, and brand personality. It then chooses a bold aesthetic direction, defines constraints, and emits production-ready JavaScript/CSS (components, CSS variables, typography scales, and responsive rules). The output includes refined visual details, motion suggestions, accessibility considerations, and implementation notes for integration.

When to use it

• When you need a visually memorable web UI or component beyond templated AI output
• When building prototypes that must feel like production-quality designs
• When you need a clear aesthetic direction and concrete code to implement it
• When reworking a bland interface into something distinctive
• When you want frontend code with careful typography, color, and motion choices

Best practices

• Always provide required design context (audience, use cases, brand tone) before requesting designs
• Pick one clear aesthetic direction and commit—avoid half-measures
• Use fluid type scales (clamp()) and container queries for responsive components
• Prefer perceptual color functions (oklch, color-mix) and tinted neutrals over pure black/white
• Design with reduced-motion and accessibility in mind; include focus and keyboard states
• Treat motion as punctuation: one high-impact sequence beats many small, distracting effects

Example use cases

• Design a landing page with a bold editorial aesthetic and production-ready React components
• Create a distinctive dashboard widget with custom typography, color tokens, and responsive behavior
• Prototype an app onboarding flow with staged motion and optimistic UI patterns
• Generate a poster-style hero section that can be exported as HTML/CSS for marketing
• Refine an existing page to remove generic AI styling and replace it with an unforgettable visual idea