tanmayairbase/narrow-react-prop-types

Was macht narrow-react-prop-types?

Eine KI-Agenten-Fertigkeit zum Eingrenzen von React-Komponenten-Props auf Live-Codepfade.

Beschreibung

Dieses Skill analysiert den Quellcode einer React-Komponente und ermittelt, welche Props tatsächlich an die Komponente übergeben werden (Live-Codepfade). Es ignoriert Props, die zwar in PropTypes oder TypeScript-Typen definiert sind, aber nie verwendet werden. Dadurch entstehen präzise, aufgeräumte Prop-Definitionen.

Hauptmerkmale

• Statische Analyse: Durchsucht die gesamte Codebasis nach Stellen, an denen die Komponente verwendet wird.
• Eingrenzung: Extrahiert nur die Props, die in mindestens einem Live-Codepfad vorkommen.
• Ausgabe: Generiert aktualisierte PropTypes oder TypeScript-Typdefinitionen für die Komponente.
• Unterstützung: Funktioniert mit JavaScript (PropTypes) und TypeScript.

Wie es funktioniert

1. Der KI-Agent erhält die zu analysierende Komponente (z. B. MyComponent).
2. Der Agent sucht im Projekt nach allen Vorkommen von <MyComponent (oder äquivalenten Aufrufen).
3. Für jede Verwendung wird die übergebene Props-Menge erfasst.
4. Die Schnittmenge aller verwendeten Props wird ermittelt.
5. Auf dieser Basis werden neue Prop-Definitionen generiert (z. B. MyComponent.propTypes = { ... } oder ein interface MyComponentProps { ... }).

Beispiel

Vorher (TypeScript):

interface MyComponentProps {
  title: string;
  subtitle?: string;
  icon?: string;
  onClick?: () => void;
  disabled?: boolean;
}

Nachher (nach Analyse):

interface MyComponentProps {
  title: string;
  subtitle?: string;
  icon?: string;
  // onClick und disabled werden nie verwendet → entfernt
}

Voraussetzungen

• Node.js 16+
• React 16.8+
• Der Projektcode muss durchsuchbar sein (kein minimiertes Bundle).

Verwendung mit KI-Agenten

Claude Code

/claude-skill tanmayairbase/narrow-react-prop-types

Dann den Agenten bitten:

"Verwende narrow-react-prop-types für die Komponente src/components/Button.tsx."

Cursor

Füge die Fertigkeit in den Cursor-Regeln hinzu und verwende sie wie oben beschrieben.

Codex

Importiere das Skill und rufe es mit dem Pfad zur Komponente auf.

Konfiguration

Du kannst die Datei narrow-react-prop-types.config.json im Projektstamm anlegen:

{
  "include": ["src/**/*.{tsx,jsx}"],
  "exclude": ["**/*.test.*", "**/*.stories.*"],
  "outputFormat": "typescript"
}

• include: Glob-Muster für zu durchsuchende Dateien.
• exclude: Auszuschließende Dateien.
• outputFormat: "typescript" oder "propTypes".

Einschränkungen

• Dynamische Prop-Übergaben (z. B. {...spread}) werden möglicherweise nicht vollständig erfasst.
• Das Skill erfordert lesbaren Quellcode (kein Code-Transpilation wie minifizierter Output).
• Es analysiert nur die Props, die direkt an die Komponente übergeben werden; abgeleitete oder bedingte Props werden erkannt, wenn sie im selben Aufruf auftauchen.

Lizenz

MIT