designlisted
Install: claude install-skill djnsty23/claude-auto-dev
# Frontend Design
> **Browser access.** Prefer the built-in browser tools (`mcp__Claude_Browser__*`)
> when the session has them — that is the default in the desktop app. The
> `agent-browser` commands below are the terminal-only fallback. The `browser`
> skill owns the driver-selection rule; follow it before running either.
Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics.
## When to Use
- Building web components, pages, or applications
- Creating marketing/landing pages
- UI that needs to look professionally designed
- Any frontend where visual quality matters
## Design Thinking
Before coding, commit to a **bold aesthetic direction**:
1. **Purpose**: What problem does this solve? Who uses it?
2. **Tone**: Pick an extreme:
- Brutally minimal
- Maximalist chaos
- Retro-futuristic
- Organic/natural
- Luxury/refined
- Playful/toy-like
- Editorial/magazine
- Brutalist/raw
- Art deco/geometric
- Soft/pastel
- Industrial/utilitarian
3. **Differentiation**: What makes this unforgettable?
Choose a clear direction and execute with precision. Bold maximalism and refined minimalism both work - the key is **intentionality, not intensity**.
## Implementation
Create working code (React/Vue/HTML) that is:
- Production-grade and functional
- Visually striking and memorable
- Cohesive with clear aesthetic point-of-view
- Meticulously refined in every detail
- **Responsive across mobile (375px), tablet