Fähigkeiten architecture-reference
🏗️

architecture-reference

Sicher 🌐 Netzwerkzugriff📁 Dateisystemzugriff⚙️ Externe Befehle

Architekturreferenz für Portfolio Buddy 2 abrufen

Kurzreferenz für die Projektstruktur von Portfolio Buddy 2. Enthält Komponentenhierarchie, Hook-Muster, Utility-Funktionen und Datenflussdokumentation für schnellere Entwicklung.

Unterstützt: Claude Codex Code(CC)
📊 70 Angemessen
1

Die Skill-ZIP herunterladen

2

In Claude hochladen

Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen

3

Einschalten und loslegen

Teste es

Verwendung von "architecture-reference". How do I add a new chart component?

Erwartetes Ergebnis:

  • Create component in src/components/
  • Use Chart.js (not Recharts - it is unused)
  • Import chart type and plugins from react-chartjs-2
  • Hook into useMetrics or usePortfolio for data
  • Add to appropriate section in App.tsx

Sicherheitsaudit

Sicher
v3 • 1/16/2026

Pure documentation skill containing only markdown reference material for Portfolio Buddy 2. No executable code, scripts, network calls, filesystem access, or external command execution. All 94 static findings are false positives: backticks are markdown formatting, and 'sharpe'/'sortino' are financial metrics, not cryptographic algorithms.

2
Gescannte Dateien
551
Analysierte Zeilen
3
befunde
3
Gesamtzahl Audits

Risikofaktoren

🌐 Netzwerkzugriff (1)
skill-report.json:6
📁 Dateisystemzugriff (1)
skill-report.json:6
⚙️ Externe Befehle (71)
SKILL.md:10-45 SKILL.md:45-58 SKILL.md:58-60 SKILL.md:60-63 SKILL.md:63-64 SKILL.md:64-66 SKILL.md:66-78 SKILL.md:78-85 SKILL.md:85-89 SKILL.md:89-100 SKILL.md:100-107 SKILL.md:107-118 SKILL.md:118-125 SKILL.md:125-134 SKILL.md:134-135 SKILL.md:135-136 SKILL.md:136-137 SKILL.md:137-138 SKILL.md:138-139 SKILL.md:139-142 SKILL.md:142-150 SKILL.md:150-153 SKILL.md:153-157 SKILL.md:157-158 SKILL.md:158-159 SKILL.md:159-162 SKILL.md:162-163 SKILL.md:163-164 SKILL.md:164-167 SKILL.md:167-168 SKILL.md:168-169 SKILL.md:169-171 SKILL.md:171-176 SKILL.md:176-192 SKILL.md:192-195 SKILL.md:195-205 SKILL.md:205-208 SKILL.md:208-216 SKILL.md:216-219 SKILL.md:219-229 SKILL.md:229-234 SKILL.md:234-235 SKILL.md:235-236 SKILL.md:236-237 SKILL.md:237-240 SKILL.md:240-246 SKILL.md:246-256 SKILL.md:256-257 SKILL.md:257-258 SKILL.md:258-259 SKILL.md:259-265 SKILL.md:265-268 SKILL.md:268-272 SKILL.md:272-273 SKILL.md:273 SKILL.md:273-274 SKILL.md:274-277 SKILL.md:277-278 SKILL.md:278-280 SKILL.md:280-311 SKILL.md:311-312 SKILL.md:312-313 SKILL.md:313-319 SKILL.md:319-333 SKILL.md:333-335 SKILL.md:335-339 SKILL.md:339-349 SKILL.md:349-354 SKILL.md:354-360 SKILL.md:360-363 SKILL.md:363-368
Auditiert von: claude Audit-Verlauf anzeigen →

Qualitätsbewertung

38
Architektur
100
Wartbarkeit
83
Inhalt
30
Community
100
Sicherheit
91
Spezifikationskonformität

Was du bauen kannst

Onboarding im Codebase

Verstehe Projektstruktur, Komponentenhierarchie und Datenfluss beim Beitritt zu einem neuen Projektteam.

Neue Features hinzufügen

Befolge dokumentierte Muster zum Hinzufügen neuer Metriken, Charts, Hooks und Komponenten zum Codebase.

Architekturkonformität überprüfen

Überprüfe, ob vorgeschlagene Änderungen etablierte Muster für State-Management, TypeScript-Nutzung und Komponentenorganisation einhalten.

Probiere diese Prompts

Komponentenbaum anzeigen 
Zeige mir die Komponentenhierarchie für Portfolio Buddy 2. Was sind die Hauptkomponenten und wie sind sie verschachtelt?
Hook-Nutzung finden 
Wie verwende ich den useMetrics Hook? Welche Daten gibt er zurück und wie sollte ich ihn in meiner Komponente aufrufen?
Datenfluss nachvollziehen 
Führe mich durch den Datenfluss vom CSV-Upload bis zur Metriken-Anzeige. Welche Funktionen und Hooks sind bei jedem Schritt involviert?
Neue Metrik hinzufügen 
Was sind die Schritte zum Hinzufügen einer neuen Metrikenberechnung zu Portfolio Buddy 2? Welche Dateien müssen modifiziert werden?

Bewährte Verfahren

  • Befolge die use-Präfix-Namenskonvention für Custom Hooks in src/hooks/
  • Verwende useMemo für teure Berechnungen und useCallback für stabile Callbacks
  • Füge JSDoc-Kommentare für komplexe Logik hinzu und exportiere alle Interfaces für Type-Sicherheit

Vermeiden

  • Vermeide die Verwendung des TypeScript any-Typs - definiere proper Interfaces für alle Datenstrukturen
  • Installiere oder importiere Recharts nicht - Chart.js ist die etablierte Charting-Bibliothek
  • Vermeide Prop-Drilling durch tiefe Komponentenbäume - verwende Custom Hooks zum Teilen von Logik

Häufig gestellte Fragen

Welche Charting-Bibliothek verwendet Portfolio Buddy 2?
Portfolio Buddy 2 verwendet Chart.js 4.x mit react-chartjs-2 Wrapper. Recharts ist installiert, wird aber nie importiert.
Was ist die maximale Zielkomponentengröße?
Komponenten sollten auf 200 Zeilen oder weniger abzielen. PortfolioSection mit 591 Zeilen ist als Hochprioritäts-Refactor-Kandidat gekennzeichnet.
Greift dieser Skill auf meine Dateien oder mein Projekt zu?
Nein. Diese Skill bietet nur Dokumentationsreferenz. Sie liest, schreibt oder modifiziert keine Dateien in Ihrem Projekt.
Welchen State-Management-Ansatz verwendet das Projekt?
Das Projekt verwendet plain React Hooks (useState, useMemo, useCallback, useRef) ohne globale State-Bibliotheken wie Redux oder Zustand.
Welche Tools unterstützen diese Skill?
Diese Skill funktioniert mit Claude, Codex und Claude Code. Sie bietet Architekturanleitung für all diese KI-Assistenten.
Wie werden Daten vom Upload bis zur Anzeige verarbeitet?
Daten fließen durch: CSV-Parsing, Währungsbereinigung, Supabase-Upload, usePortfolio-Aggregierung, Datumsfilterung, useMetrics-Berechnung, dann MetricsTable-Anzeige.

Entwicklerdetails

Lizenz

MIT

Repository

https://github.com/5MinFutures/futures-arena/tree/main/.claude/skills/architecture-reference

Ref

main

Dateistruktur

📄 SKILL.md