frontend-design

name	frontend-design
description	Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications.
license	Complete terms in LICENSE.txt
_from	["https://github.com/anthropics/skills/tree/main/skills/frontend-design"]

Frontend Design

Create memorable, distinctive interfaces. Avoid generic "AI slop" - every design should have a clear point of view.

Design Philosophy

1. Bold choices: Pick a strong color palette, unusual typography, or distinctive layout
2. Purposeful whitespace: Let content breathe, don't fill every pixel
3. Visual hierarchy: Make the important things impossible to miss
4. Micro-interactions: Add subtle animations that delight

Technical Stack

• React 18+ with TypeScript
• Tailwind CSS for styling
• Framer Motion for animations
• Use CSS Grid for complex layouts, Flexbox for simpler ones

Anti-patterns

• Generic blue/white SaaS layouts
• Overuse of rounded corners and soft shadows
• Cards inside cards inside cards
• Gratuitous gradient backgrounds