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.
Installs into .claude/skills of the current project.
Are you the author of Frontend Design Hatappo?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/diegosouzapw-frontend-design-hatappo)
---
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
