Was macht shadcn-first?
Jemand pflegt diesen Code nach dir. Jedes handgeschriebene div mit maßgeschneiderten Klassen und jedes style={{}} ist ein Teil, das am Leben erhalten werden muss und das mit der Zeit abweicht. Handgebaute UI verliert auch stillschweigend die Handwerkskunst, die kostenlos mit der Bibliothek geliefert wird: Fokusringe, Hover- und Aktivzustände, Tastaturnavigation, Skelette, Leerzustände, ARIA.
Die Reihenfolge. Überspringe niemals einen Schritt.
- Block.
ui.shadcn.com/blockshat ganze Seitenleisten, Dashboards, Logins, Datentabellen. Installiere den Block. - Komponente. Wenn kein Block passt, verwende eine Komponente aus der Registry.
- Komponiere zwei oder drei Komponenten.
- Schreibe es selbst. Nur hier, und die Commit-Nachricht muss benennen, welchen Block oder welche Komponente du evaluiert hast und warum er nicht gepasst hat.
Passe das Design an die Komponente an, nicht die Komponente an das Design. Marke und visuelle Sprache werden durch Themavariablen in einem Theme erreicht, niemals pro Bildschirm CSS neben der Komponente.
Werkzeuge und welche zu verwenden sind
Es sind zwei MCP-Server konfiguriert. Sie haben unterschiedliche Aufgaben.
shadcn-official (npx shadcn@latest mcp) ist projektbewusst: es liest die components.json des Repos. Verwende es für die eigentliche Arbeit.
| Werkzeug | Nutze es, um |
|---|---|
get_project_registries | zu bestätigen, dass das Projekt überhaupt initialisiert ist |
search_items_in_registries | die richtige Komponente zu finden, unscharf |
list_items_in_registries | alles Verfügbare zu sehen |
view_items_in_registries | den tatsächlichen Quelltext und die Abhängigkeiten einer Komponente zu lesen, bevor du sie verwendest |
get_item_examples_from_registries | ein echtes Nutzungsbeispiel zu kopieren, anstatt die API zu erraten |
get_add_command_for_items | die exakte npx shadcn add …-Zeile zu erhalten und sie dann auszuführen |
get_audit_checklist | nach dem Schreiben von Code auszuführen. Dies ist das Tor. |
shadcn (@jpisnice/shadcn-ui-mcp-server) ist registrierungsweit und kennt Blöcke und Themes: list_blocks, get_block, list_themes, get_theme, get_component_demo. Verwende es für Schritt 1 und für das Theming.
Wenn ein Projekt keine components.json hat, schlagen die offiziellen Werkzeuge fehl. Führe zuerst npx shadcn@latest init aus, dann fahre fort.
Verwende für KI-Chat-Oberflächen prompt-kit (prompt-kit.com, shadcn-kompatibel): chat-container, message, prompt-input, scroll-button, markdown, code-block, loader. Gleiche Regel: installieren statt neu bauen.
Komponenten, die Leute immer wieder neu erfinden, anstatt sie zu installieren
sidebar (einklappbar, mit Benutzermenü in der Fußzeile), command (Cmd+K-Palette), table + TanStack Data-Table-Block, tabs, sheet, dialog, alert-dialog, popover, tooltip, skeleton, sonner (Toasts), form (react-hook-form + zod), breadcrumb, resizable, scroll-area, avatar, badge, separator, dropdown-menu, select, collapsible, chart.
Wenn du dich dabei ertappst, eine dieser Komponenten von Hand zu bauen, höre auf und installiere sie.
Tastaturkürzel
Verwende Cmd+K für die Befehlspalette; das ist die cmdk-Konvention, die die command-Komponente mitbringt. Cmd+L ist vom Browser für die Adressleiste reserviert und kann in Chrome nicht zuverlässig abgefangen werden. Wenn jemand nach Cmd+L fragt, binde Cmd+K, füge Cmd+L opportunistisch hinzu und erkläre warum.
Fertig bedeutet gemessen, nicht behauptet
Bevor du „fertig“ meldest, führe get_audit_checklist aus und berichte die Zahlen:
- Entfernte benutzerdefinierte UI-Zeilen
- Installierte Blöcke und Komponenten
- Verbleibende
style={{}}-Vorkommen (grep -rc 'style={{' src/) - Pro Bildschirm: Elemente aus
components/ui/vs. handgeschriebene
Alles, was noch handgeschrieben ist, muss dort mit einem genannten Grund stehen, nicht übersehen werden. Ein Screenshot ist der Beweis, dass der Bildschirm rendert; die Zählungen sind der Beweis, dass die Regel befolgt wurde. Beides, sonst ist es nicht fertig.
Nicht tun
- Keine Emojis in der UI. Echte SVG-Icons (Lucide wird mit shadcn ausgeliefert).
- Keine Texte-in-Kreisen für Markenlogos. Echte SVG-Pfade beschaffen: SimpleIcons > svgl.app > gilbarbara/logos > Favicon.
- Maximal ein oder zwei Akzentfarben. Keine farbigen linken Rahmen auf Karten. Kein Farbverlauf auf jedem Element.
- Forke keine Komponente, um eine Farbe zu ändern. Ändere die Theme-Variable.