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 Zugang zu allen Guides, die ich bisher erstellt habe, direkt in deine 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 pnpm dlx skills add shadcn/ui (auch: npm / yarn / bunx) # SOURCE ui.shadcn.com/docs/skills
Trag dich ein und du bekommst Zugang zu allen meinen Guides als Übersicht, sobald die fertig ist. Setup-Anleitungen, Master-Prompts, Workflows, alles an einem Ort.
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.
Wenn die Skills installiert sind, diesen Text an Claude schicken:
Ich will ship-ready UI. Lauf diese Pipeline durch: 1. Check mit dem Shadcnblocks-Skill ob die Komponenten in meinem aktuellen Code durch bessere Production- Blocks ersetzt werden sollten. Wenn ja, tausche sie. 2. Run /audit von Impeccable um den Ist-Zustand zu dokumentieren. Dann /normalize um Design-Tokens auszurichten. Am Ende /polish für Final-Pass. 3. Triggere den Vercel web-design-guidelines Audit gegen alle UI-Dateien. Liste alle Issues mit file:line:column. 4. Fixe jedes Vercel-Issue direkt mit den Impeccable- Commands. Zeig mir am Ende eine Diff-Zusammenfassung. 5. Falls Motion/Animationen vorkommen: nutze Emil Kowalskis Skill für einen Motion-Audit und korrigiere was er findet.
Claude Code Skills können theoretisch Prompt-Injection enthalten (versteckte Anweisungen die Claude im Hintergrund ausführt). Bei den 6 oben ist das ausgeschlossen — alle manuell geprüft. Aber wenn du später andere Skills installierst, achte auf drei Dinge:
Wenn ein Skill-Command nicht funktioniert, frag Claude: "Ist der Skill [name] installiert? Liste mir ~/.claude/skills/ und zeig mir die SKILL.md." Claude prüft selbst und fixt. Du musst nicht im Terminal rumfummeln.
Trag dich mit deiner Email ein. Sobald die Übersicht aller Guides fertig ist, schick ich sie dir direkt zu, Setup-Anleitungen, Master-Prompts, Workflows, alles an einem Ort.