should-i-render

should-i-render ist ein schreibgeschützter MCP-Server zur Auswahl von React-Komponenten aus einem gemessenen, kuratierten Schnappschuss. Es beantwortet Fragen zur Komponenteneignung mit knappen Urteilen und nutzt Fakten anstatt Quellcode-Auszüge zu liefern.

Der gebündelte Schnappschuss enthält aktuell den veröffentlichten should-i-render-Index. Er läuft über stdio, benötigt keinen API-Key, keine Datenbank und keinen Netzwerkzugriff und begrenzt jede Textantwort auf etwa 500 Token.

Die kostenlose Beta unter vibecodng.com liest den Live-Index und umfasst 100 Tool-Aufrufe pro API-Key und UTC-Tag. Erstellen Sie einen Key im Browser und verbinden Sie dann einen HTTP-fähigen MCP-Client mit https://vibecodng.com/mcp. Verwenden Sie dieses npm-Paket, wenn Sie einen privaten, offlinefähigen, versionierten Schnappschuss ohne Kontingent wünschen.

Lokale Nutzung

{
  "mcpServers": {
    "should-i-render": {
      "command": "node",
      "args": ["/path/to/should-i-render/server.js"]
    }
  }
}

Node 20 oder neuer wird benötigt. Führen Sie npm test aus, um den gebündelten Schnappschuss, die Tool-Metadaten, die strukturierten Antworten und die Antwortbegrenzung zu überprüfen.

Mit npm ist kein Checkout erforderlich:

{
  "mcpServers": {
    "should-i-render": {
      "command": "npx",
      "args": ["-y", "should-i-render@0.1.0"]
    }
  }
}

Der gehostete Dienst könnte später kostenpflichtige Pläne für aktuellere Daten, höhere Kontingente und Team-Workflows einführen. Das veröffentlichte Offline-Paket bleibt unter den untenstehenden Lizenzen verfügbar.

Tools

• find_component({task, pattern?, style?, palette?}) bewertet bis zu drei verifizierte, geeignete Rendering-Vorschläge basierend auf Komponentenbeschreibung, Muster, Stil und gemessenen Ergebnissen. Fehlerwarnungen bleiben außerhalb der Empfehlungen. Übergeben Sie einen Paletten-Slug, um dessen CSS-Variablen anzuhängen.

• palette_pick({mood?}) gibt ein bis drei kuratierte, zugängliche Paletten mit Hex-Farbrollen und einem kopierbaren CSS-Variablen-Block zurück.

• check_component({name}) gibt das vollständige Urteil, die Überspringbedingungen und den gemessenen Strip zurück.

• alternatives({name}) bewertet Kandidaten mit demselben Muster.

• install_plan({name}) gibt Abhängigkeiten, Lücken im bloßen Harness, Anbieteranforderungen, Einrichtungshinweise, Lizenz, Autorenangabe, die gemessene Galerieseite, die upstream-Quelle und einen exakten shadcn-Befehl zurück, wenn die Quelle dies unterstützt.

• skip_list({pattern, style?}) listet explizite Fehlerwarnungen und die schlechtesten gemessenen Übeltäter zuerst auf.

Jedes Tool enthält einen Titel, schreibgeschützte Annotationen, ein Ausgabeschema und strukturierte Inhalte neben der begrenzten Textantwort.

Paletten

Das Paket enthält 24 originale Vier-Farben-Paletten. Jede Palette definiert accent, surface, text und muted; jedes Text-auf-Oberfläche-Paar ist mit einem WCAG-AA-Kontrast von mindestens 4,5:1 validiert. Verwenden Sie palette_pick mit einem Paletten-Slug oder Stimmungen wie dark, light, pastel, neon, retro, earth, warm, cold oder mono.

:root {
  --bw-accent: #E85D4A;
  --bw-surface: #FFF7F1;
  --bw-text: #34231F;
  --bw-muted: #775F57;
}

Automatisches Theming wird für Erstanbieter-Komponenten angewendet; Drittanbieter-Einträge benötigen manuelles Mapping.

Was der gemessene Strip bedeutet

RENDERS ist das Ergebnis des vorbereiteten Harness-Mounts. A11Y ist die Summe der aufgezeichneten axe-Verstöße. KB ist die marginale gzip-Bündelgröße über der Harness-Baseline. BARE ist ein zweiter Build-und-Mount-Durchlauf ohne die vorbereiteten shadcn-ähnlichen Helfer. PROVIDER bedeutet, dass ein Mount-Fehler aufgrund eines fehlenden Providers gemessen wurde.

Die Stil-Achse

Muster und Stil beantworten unterschiedliche Fragen. Ein Muster ist, was die Komponente tut, z. B. Button, Kalender, Karussell oder Text-Enthüllung. Ein Stil ist die visuelle Welt, zu der sie gehört, z. B. minimal-flat, Brutalismus, spatial, bento oder dark-futuristic. Die Filterung nach beiden ist nützlich, wenn die Interaktion festgelegt ist, aber die Produktsprache nicht.

Stile sind redaktionelle Klassifikationen, keine Paketfähigkeiten. Zwei Einträge mit demselben Muster und Stil können sich dennoch stark in Abhängigkeiten, Barrierefreiheitsbefunden, Bundle-Kosten, nackter Kompatibilität und Provideranforderungen unterscheiden.

Daten

data/components.json ist ein Punkt-zu-Zeit-Export veröffentlichter Komponentendatensätze. Es enthält Beschreibungen, Messergebnisse, Quell- und Autorenangaben, Lizenzmetadaten, Muster und Stil sowie relative Vorschaupfade. Es enthält keine Vorschaubild- oder Videobytes. data/palettes.json ist der gebündelte Palettenkatalog.

Setzen Sie SHOULD_I_RENDER_DATA=/pfad/zu/components.json, um einen anderen Schnappschuss mit derselben Struktur zu testen.

Einschränkungen

• Das Harness misst derzeit nur React-Komponenten.

• Die Abdeckung ist kuratiert und kein erschöpfender Registrierungsdurchlauf.

• Der Schnappschuss ist ein Punkt-zu-Zeit-Export; upstream-Komponenten-APIs und -Abhängigkeiten können sich nach dem Export ändern.

• Harness-Ergebnisse sind kontrollierte Messungen, keine Produktions-QA. Sie ersetzen keine Browser-, Designsystem-, Barrierefreiheits-, Sicherheits- oder Benutzertests in Ihrer App.

• Demos werden gegen die Quell-API jeder Komponente geschrieben und treiben die Screenshots an. Eine Demo kann den beabsichtigten Zustand abdecken, ohne jede Prop, Interaktion, jedes Serververhalten oder jeden Datenladepfad abzudecken.

• Eine saubere Barrierefreiheitsanzahl bedeutet, dass die aufgezeichnete Demo keine axe-Befunde in diesem Harness hatte. Es ist keine Barrierefreiheitszertifizierung.

• Urteile und Stilbezeichnungen sind redaktionelle Einschätzungen, die auf den aufgezeichneten Messungen und Quell-APIs basieren.

Lizenz

Server-Code ist MIT-lizenziert. Die kompilierten Index-Metadaten sind CC BY 4.0 mit Namensnennung an mrkeyoor.com; einzelne Komponenten-Quellprojekte behalten ihre eigenen Lizenzen und Autorenangaben.

Mitwirken

• Ein falsches Urteil oder einen veralteten Komponenteneintrag gefunden? Eröffnen Sie ein Issue.

• Code-Änderungen für den MCP-Server und die Ranking-Logik sind willkommen. Halten Sie Antworten innerhalb der Begrenzung und führen Sie npm test aus, bevor Sie einen Pull-Request öffnen.

• data/components.json wird aus dem gemessenen vibecodng-Index generiert, daher sollten Datenkorrekturen als Issue beginnen und nicht als direkte Bearbeitung des Schnappschusses.