01
Claude Code öffnen
Im richtigen Ordner startenÖffne Claude Code im Ordner wo du die Skills nutzen willst.
cd ~/dein-projekt claude
Die meisten Claude-Code-UIs sehen aus wie AI-Slop.
Generische Gradients, Inter-Font, lila auf weiss, identische Hero-Sections. Das liegt nicht an Claude. Das liegt daran, dass ihm das Design-Vokabular fehlt. Diese sechs Skills geben ihm genau das. Trag dich ein und ich schick dir den Guide direkt in die Inbox.
Claude Code öffnen, Magic-Prompt schicken, Claude installiert alle 6 Skills automatisch per GitHub-Clone. Ab jetzt funktionieren Commands wie /polish, /audit, /web-design-guidelines.
Öffne Claude Code im Ordner wo du die Skills nutzen willst.
cd ~/dein-projekt claude
Kopiere den Magic-Prompt (siehe Pro-Tipp unten) und schicke ihn an Claude Code. Er clont alle Skills und speichert sie in ~/.claude/skills/.
1.338 Blocks + 1.189 Components von shadcnblocks.com. Claude wählt, installiert und komponiert die passenden Bausteine. ACHTUNG: Braucht einen API-Key von shadcnblocks.com (paid service) und ein React/Next.js Projekt mit shadcn/ui + Tailwind bereits initialisiert.
# INSTALL claude plugin marketplace add masonjames/Shadcnblocks-Skill claude plugin install shadcnblocks # SOURCE github.com/masonjames/Shadcnblocks-Skill
1 Skill, 18 Slash-Commands (nicht 20), 7 Reference-Files: Typography, Color, Spatial, Motion, Interaction, Responsive, UX-Writing. Favorit ist /polish — Final-Pass vor dem Shippen. Kein CLI-Install: ZIP von impeccable.style laden und nach ~/.claude/skills/ entpacken.
# INSTALL Download ZIP: https://impeccable.style (kein CLI-Install) # SOURCE github.com/pbakaus/impeccable
Audit-Tool, kein Designer. Prüft UI gegen 100+ Regeln für Accessibility, Performance und UX (Focus-States, Forms, Animation, Typography, Images, i18n). Output mit file:line:column — Impeccable und Shadcnblocks können dann genau das fixen was Vercel findet.
# INSTALL npx skills add vercel-labs/agent-skills # SOURCE github.com/vercel-labs/agent-skills
Der offizielle Anthropic-Skill für Frontend-Design. Gibt Claude ein Design-System und eine Philosophie bevor er Code anfasst: bewusste Typografie, klare Farb-Paletten, absichtliche Animationen. Install läuft über Claude Codes Plugin-Marketplace — frontend-design ist im example-skills Plugin enthalten.
# INSTALL /plugin marketplace add anthropics/skills /plugin install example-skills@anthropic-agent-skills # SOURCE github.com/anthropics/skills
Emil arbeitet bei Linear und hat Sonner, Vaul und den 'Animations on the Web'-Kurs gebaut. Sein Skill bringt Claude bei wann man animiert — und wichtiger: wann nicht. Zurückhaltende, schnelle, absichtliche Motion statt flashy AI-Junk.
# INSTALL npx skills add emilkowalski/skill # SOURCE github.com/emilkowalski/skill
Gibt Claude tiefes Wissen über shadcn/ui Komponenten, APIs und Best Practices. Kennt die CLI, framework-spezifische Installations-Patterns für Next.js, Vite, Remix und Astro. Wenn du mit shadcn arbeitest — Pflicht.
# INSTALL (auch: npm / yarn / bunx) pnpm dlx skills add shadcn/ui # SOURCE ui.shadcn.com/docs/skills
Den ganzen Designer-Guide als fertige PDF, plus Zugang zu allen weiteren Guides, die ich bisher erstellt habe. Magic-Prompt zum Reinkopieren inklusive.
Schicke diesen Prompt an Claude Code. Er clont alle Skills und speichert sie in ~/.claude/skills/. Pro-Tip: Wenn du die Skills nur projektspezifisch willst, sag Claude er soll sie nach .claude/skills/ im aktuellen Projekt installieren.
Den ganzen Setup-Guide als PDF, plus Zugang zu allen weiteren Guides, die ich bisher erstellt habe — Master-Prompts, Setup-Anleitungen, Workflows. Trag dich ein und du bekommst alles.