Habilidades Portfolio Buddy 2 - Architecture Reference
🏗️

Portfolio Buddy 2 - Architecture Reference

Seguro

Получить справочник по архитектуре Portfolio Buddy 2

Краткий справочник по структуре проекта Portfolio Buddy 2. Содержит иерархию компонентов, паттерны хуков, утилитарные функции и документацию по потоку данных для ускорения разработки.

Soporta: Claude Codex Code(CC)
⚠️ 62 Deficiente
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

Usando "Portfolio Buddy 2 - Architecture Reference". Как добавить новый компонент графика?

Resultado esperado:

  • • Создать компонент в src/components/
  • • Использовать Chart.js (не Recharts — он не используется)
  • • Импортировать тип графика и плагины из react-chartjs-2
  • • Подключиться к useMetrics или usePortfolio для получения данных
  • • Добавить в соответствующий раздел в App.tsx

Auditoría de seguridad

Seguro
v3 • 1/10/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. Safe for distribution.

1
Archivos escaneados
373
Líneas analizadas
0
hallazgos
3
Auditorías totales
No se encontraron problemas de seguridad
Auditado por: claude Ver historial de auditorías →

Puntuación de calidad

38
Arquitectura
95
Mantenibilidad
83
Contenido
21
Comunidad
100
Seguridad
35
Cumplimiento de la especificación

Lo que puedes crear

Ознакомление с кодовой базой

Понять структуру проекта, иерархию компонентов и поток данных при присоединении к новой команде проекта.

Добавление новых функций

Следовать задокументированным паттернам для добавления новых метрик, графиков, хуков и компонентов в кодовую базу.

Проверка соответствия архитектуре

Проверить, следуют ли предлагаемые изменения установленным паттернам управления состоянием, использования TypeScript и организации компонентов.

Prueba estos prompts

Просмотр дерева компонентов 
Покажите мне иерархию компонентов для Portfolio Buddy 2. Каковы основные компоненты и как они вложены друг в друга?
Поиск использования хуков 
Как использовать хук useMetrics? Какие данные он возвращает и как его вызывать в моём компоненте?
Отслеживание потока данных 
Проведите меня через поток данных от загрузки CSV до отображения метрик. Какие функции и хуки задействованы на каждом этапе?
Добавление новой метрики 
Каковы шаги для добавления нового расчёта метрик в Portfolio Buddy 2? Какие файлы нужно изменить?

Mejores prácticas

  • Следуйте соглашению об именовании с префиксом use для кастомных хуков в src/hooks/
  • Используйте useMemo для дорогостоящих вычислений и useCallback для стабильных колбэков
  • Добавляйте JSDoc-комментарии для сложной логики и экспортируйте все интерфейсы для типобезопасности
  • Держите компоненты под 200 строк, выделяя подкомпоненты при увеличении размера

Evitar

  • Избегайте использования типа any в TypeScript — определяйте правильные интерфейсы для всех структур данных
  • Не устанавливайте и не импортируйте Recharts — Chart.js является установленной библиотекой построения графиков
  • Избегайте передачи пропсов через глубокие деревья компонентов — используйте кастомные хуки для разделения логики

Preguntas frecuentes

Какую библиотеку построения графиков использует Portfolio Buddy 2?
Portfolio Buddy 2 использует Chart.js 4.x с обёрткой react-chartjs-2. Recharts установлен, но никогда не импортируется.
Каков целевой максимальный размер компонента?
Компоненты должны быть размером 200 строк или меньше. PortfolioSection из 591 строки помечен как приоритетный кандидат на рефакторинг.
Имеет ли этот навык доступ к моим файлам или проекту?
Нет. Этот навык предоставляет только справочную документацию. Он не читает, не записывает и не изменяет файлы в вашем проекте.
Какой подход к управлению состоянием использует проект?
Проект использует обычные хуки React (useState, useMemo, useCallback, useRef) без библиотек глобального состояния типа Redux или Zustand.
Какие инструменты поддерживают этот навык?
Этот навык работает с Claude, Codex и Claude Code. Он предоставляет руководство по архитектуре для всех этих AI-ассистентов.
Как обрабатываются данные от загрузки до отображения?
Данные проходят через: парсинг CSV, очистку валюты, загрузку Supabase, агрегацию usePortfolio, фильтрацию по датам, расчёт useMetrics, затем отображение в MetricsTable.

Detalles del desarrollador

Licencia

MIT

Repositorio

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

Ref.

main

Estructura de archivos

📄 SKILL.md