By name: frontend-designing description: Creates distinctive, production-grade frontend interfaces with high design quality. Use when building web components, landing pages, dashboards, or styling UI. Generates polished code that avoids generic aesthetics.
Frontend Design
When to use this skill
- When requested to build a new UI component, page, or application.
- When styling or "beautifying" an existing interface.
- When the user mentions "premium design", "modern aesthetics", or "striking UI".
Workflow
- [/] Conceptualize: Commit to a bold aesthetic direction (e.g., Brutalist, Glassmorphism, Editorial).
- Plan-Validate: Verify technical constraints (Next.js, Tailwind, etc.) before coding.
- Implementation: Write production-grade code with meticulous detail.
- Refine: Add micro-interactions, motion, and visual textures.
Instructions
Design Thinking
- Tone Selection: Avoid the middle ground. Choose an extreme: Brutally minimal or Maximalist chaos?
- Differentiation: Identify one "unforgettable" element (kinetic typography, unique layout, custom motion).
Aesthetic Guidelines
- Typography: Never use default stacks. Pair a characterful display font with a refined body font.
- Color: Use sharp accents and cohesive palettes. Dominant colors > timid distributions.
- Motion: Prioritize CSS for simple effects; use Framer Motion for complex React interactions. Focus on staggered reveals.
- Layout: Use asymmetry, grid-breaking elements, and generous negative space.
- Visual Texture: Use noise overlays, gradient meshes, or layered transparencies to add depth.
Code Standards
- Use Semantic HTML and ARIA labels.
- Implement responsive design as a first-class citizen.
- Use CSS Variables for all design tokens.