⚡ What Is This?

A growing arsenal of design intelligence — each folder is a standalone Claude skill agent tuned for a specific area of frontend & UI/UX craft. From Tailwind systems to dark UI patterns, from mobile-first layouts to high-end visual polish — this repo turns Claude into a design expert on demand.

These aren't prompts. These are agents with taste.

🚀 Quick Setup

01  —  Clone     02  —  Drop in .agents     03  —  Run Claude

Step 1 — Clone the repo

git clone https://github.com/YOUR_USERNAME/frontend-skills.git

Step 2 — Drop the .agents folder into your project root

your-project/
├── .agents/          ← paste this here
│   └── skills/
│       ├── antigravity-design-expert/
│       ├── design-md/
│       ├── frontend-design/
│       └── ... (all skill folders)
└── src/

💡 .agents must live at the root level so Claude Code auto-detects and loads the skills.

Step 3 — Start your AI agent

Once the .agents folder is in your project root, your AI agent will automatically detect and reference these skills — no extra config needed. Just start working and it will pull design intelligence from the relevant skill folders as context.

✅   Done. Your agent now has taste.

🗂️ Skill Index

	Folder	What It Does
🔷	angular-ui-patterns	Angular-specific component architecture & design patterns
🌌	antigravity-design-expert	Advanced, gravity-defying visual compositions
📐	design-md	Markdown-driven design documentation & system specs
🎨	design-taste-frontend	Opinionated aesthetic direction with real taste
✦	frontend-design	Core UI design principles, layout, and visual systems
🌑	frontend-ui-dark-ts	Dark mode UI with TypeScript-first component design
💎	high-end-visual-design	Luxury-grade, production-quality visual output
✨	magic-ui-generator	Auto-generates UI components with visual flair
◻️	minimalist-ui	Precision minimalism — every pixel justified
📱	mobile-design	Mobile-first patterns, gestures, and responsive layouts
🧱	radix-ui-design-system	Radix UI primitives, accessibility, and system tokens
🧵	stitch-ui-design	Composable, stitched-together UI component systems
🌊	tailwind-design-system	Tailwind CSS design tokens, utilities & scale
🖥️	ui	General-purpose UI reasoning and component patterns
🧠	ui-skills	Meta-skills for UI decision-making
🎭	ui-ux-designer	Full-stack UX thinking from flow to pixel
🚀	ui-ux-pro-max	Elite UI/UX — for when good isn't enough
🔍	ui-visual-validator	Validates visual output against design principles
📏	web-design-guidelines	Opinionated web design standards & best practices
🎬	remotion	Code-driven video & animation design with React

🌐 Design Resources

A curated list of tools, galleries, and component libraries that pair perfectly with these skills.

🎨 Design Inspiration

Resource	Description
refero.design	Real product UI references & design patterns
motionsites.ai	Motion design & animated website inspiration
getdesign.md	Top-tier website design styles & aesthetics
shadergradient.co	Beautiful animated shader gradients for backgrounds

🧩 Components & UI Libraries

Resource	Description
ui.aceternity.com	Stunning animated React components
componentry.fun	Motion-first interactive components
skiper-ui.com	Premium web component collection
cult-ui.com	Components & templates with personality
ui.watermelon.sh	Fresh, modern component templates
typeui.sh	Typography-first UI system
21st.dev	Community-driven component library

🛠️ Dev Resources

Resource	Description
blog.vibecoder.me	Templates, APIs & database patterns
promptweb.design	Web design prompts for AI-assisted building

🤝 Contributing

Found a skill gap? Have a design domain that's underrepresented?

1. Fork the repo
2. Create your skill folder with a well-structured SKILL.md
3. Open a PR with a clear description of what the skill does

Good skills are focused, opinionated, and actionable — not generic advice.

⭐ Support

If this repo saves you time or levels up your UI output — a star goes a long way. It helps others discover these skills and keeps the collection growing.