majiayu000 Plataforma B2B de treinamento técnico corporativo Architecture Skill
Objetivo
Esta skill ativa automaticamente para fornecer conhecimento profundo sobre a arquitetura do Plataforma B2B de treinamento técnico corporativo, ajudando em:
- Decisões arquiteturais consistentes
- Navegação rápida no código
- Entendimento de fluxos de dados
- Manutenção de padrões estabelecidos
Arquitetura Geral
Stack Tecnológica
Frontend:
Framework: React 18.3.1
Build: Vite 5.4.19 (startup 295ms)
Styling: Tailwind CSS 3.4.1
Icons: Lucide React 0.344.0
Markdown: React Markdown 10.1.0
Testing:
Unit: Vitest 3.2.4 + Testing Library 16.3.0
E2E: Playwright 1.56.1
Coverage: ~5% (meta: 80%)
DevOps:
Container: Docker + Nginx Alpine
CI/CD: GitHub Actions
MCP: Chrome DevTools + Playwright
Metrics:
Components: 17
Lines of Code: ~5.500
Modules: 227 (50 C + 24 Rust + 16 Bash + 8 VSCode + 12 Claude Code + 117 outros)
Flash Cards: 39
Hours Content: 692h
Estrutura de Diretórios
app-controle/
├── src/
│ ├── components/ # 17 componentes React
│ │ ├── SistemaEducacionalCompleto.jsx # Root component
│ │ ├── HubView.jsx # Nível 1: Hub
│ │ ├── LearningPathView.jsx # Caminhos de aprendizado
│ │ ├── FlashcardModal.jsx # Modal 3D cards
│ │ │
│ │ ├── *LearningSystem.jsx (5x) # Nível 2: Cursos
│ │ │ ├── BashLearningSystem.jsx
│ │ │ ├── CLearningSystem.jsx
│ │ │ ├── RustLearningSystem.jsx
│ │ │ ├── VSCodeLearningSystem.jsx
│ │ │ └── ClaudeCodeLearningSystem.jsx
│ │ │
│ │ ├── *NotesView.jsx (5x) # Nível 3: Aulas
│ │ │ ├── BashNotesView.jsx
│ │ │ ├── CNotesView.jsx
│ │ │ ├── RustNotesView.jsx
│ │ │ ├── VSCodeNotesView.jsx
│ │ │ └── ClaudeCodeNotesView.jsx
│ │ │
│ │ └── shared/ # Componentes reutilizáveis
│ │ ├── AreaCard.jsx
│ │ ├── CodeBlock.jsx
│ │ ├── ErrorBoundary.jsx
│ │ └── (Breadcrumb.jsx - futuro)
│ │
│ ├── data/ # Dados estruturados (fonte da verdade)
│ │ ├── studyAreas.js # 13 áreas de estudo (MVP: apenas Bash ativo)
│ │ ├── caminhoExemploData.js # Caminhos Propostos (trilhas de cursos)
│ │ ├── cLearningData.js # 50 módulos C
│ │ ├── rustLearningData.js # 24 módulos Rust
│ │ ├── bashLearningData.js # 16 módulos Bash
│ │ ├── vscodeLearningData.js # 8 módulos VSCode
│ │ └── claudeCodeLearningData.js # 12 módulos Claude Code
│ │
│ ├── hooks/ # Hooks customizados (futuro)
│ │ ├── useAutoSaveNotes.js
│ │ ├── useModuleProgress.js
│ │ └── useLocalStorage.js
│ │
│ ├── utils/ # Utilitários
│ │ ├── helpers.js
│ │ └── debugLogger.js
│ │
│ └── tests/ # Testes automatizados
│ ├── setup.js
│ └── components/
│ └── AreaCard.test.jsx
│
├── .claude/ # Configuração Claude Code
│ ├── commands/ # Slash commands
│ │ ├── test.md
│ │ ├── deploy.md
│ │ └── fix.md
│ ├── skills/ # Skills especializadas
│ │ ├── ux-nomenclature/
│ │ ├── component-refactor/
│ │ ├── breadcrumb-impl/
│ │ ├── platform-architecture/
│ │ ├── localStorage-patterns/
│ │ └── learning-path-patterns/
│ ├── agents/ # Agents especializados
│ ├── hooks.toml # Hooks de automação
│ └── settings.local.json # Configurações
│
├── screenshots/ # Evidências visuais
├── docs/ # Documentação técnica
├── dist/ # Build de produção
├── .mcp.json # MCP servers
├── docker-compose.yml
├── Dockerfile
├── nginx.conf
├── vite.config.js
└── PRODUCT-CENTRAL-DOCUMENT.md # PRD + Backlog
Hierarquia de Navegação (4 Níveis)
NÍVEL 1: Hub de Aprendizado
├── Estatísticas: 13 áreas, 39 cards, 227 módulos, 692h
├── Seção: Caminhos Propostos (1 caminho Rust)
└── Seção: Áreas de Estudo (13 cards)
│
└── Card "Bash" (clique)
│
NÍVEL 2: Curso de Bash Shell Scripting
├── Breadcrumb: Hub > Curso de Bash
├── Vídeo Principal (YouTube embed)
├── 📒 Meu Caderno de Notas (textarea + auto-save)
└── Estrutura do Curso
├── Seção 1: Fundamentos (4 aulas)
├── Seção 2: Processamento (4 aulas)
├── Seção 3: Recursos Avançados (4 aulas)
└── Seção 4: Ferramentas (4 aulas)
│
└── Aula 1.1 (clique em "📖 Estudar")
│
NÍVEL 3: Aula 1.1: Introdução ao Shell Scripting
├── Breadcrumb: Hub > Bash > Aula 1.1
├── Subtópicos da Aula (botões expandíveis)
├── Resumo do Conteúdo (markdown)
└── 💡 Praticar com Flash Cards
│
└── (clique em "Começar Prática")
│
NÍVEL 4: Modal Flash Cards
├── Breadcrumb: Hub > Bash > Praticando
├── Card 3D (frente/verso)
├── Navegação (anterior/próximo)
└── Contador (1/2)
Modelo de Caminhos Propostos (US-044)
Conceito Fundamental
Area de Estudo (Curso): Entidade autocontida com video, modulos, notas, flashcards. Caminho Proposto (Trilha): Sequencia ordenada de CURSOS (referencias, nao dados duplicados).
Exemplo: "Desenvolvedor Backend"
1. Bash Shell Scripting (disponivel)
2. Linux Fundamentals (em breve)
3. Docker & Containers (em breve)
4. DevOps Essentials (em breve)
Schema de Caminho (caminhoExemploData.js)
export const caminhoExemplo = {
id: 'backend-developer',
name: 'Desenvolvedor Backend',
icon: 'trilha',
description: 'Caminho para dominar desenvolvimento backend',
badge: 'exemplo',
cursos: [
{
ordem: 1,
areaId: 'bash', // Referencia a studyAreas.js
nome: 'Bash Shell Scripting',
modules: 16,
hours: 32,
disponivel: true, // Clicavel
destaque: 'Padrao de referencia'
},
// ... mais cursos
],
// Getters computados
get totalCursos() { return this.cursos.length; },
get cursosDisponiveis() { return this.cursos.filter(c => c.disponivel).length; }
};
export const caminhosPropostos = {
'backend-developer': caminhoExemplo
};
Navegacao de Caminhos
Hub (/)
|-- Clica em Caminho "Desenvolvedor Backend"
v
LearningPathView (/trilha/backend-developer)
|-- Lista cursos na ordem
|-- Cursos disponiveis: clicaveis (badge verde)
|-- Cursos indisponiveis: desabilitados (badge "Em breve")
|-- Clica em "Bash" (disponivel)
v
BashLearningSystem (/curso/bash)
Skill Relacionada
Para detalhes completos sobre Caminhos de Aprendizado, consulte: .claude/skills/learning-path-patterns/SKILL.md
Fluxo de Dados
Estado Global (SistemaEducacionalCompleto.jsx)
const [currentView, setCurrentView] = useState('hub')
// Valores possíveis:
// - 'hub' → HubView
// - 'learning-path' → LearningPathView
// - 'bash' → BashLearningSystem
// - 'c' → CLearningSystem
// - 'rust' → RustLearningSystem
// - 'vscode' → VSCodeLearningSystem
// - 'claude-code' → ClaudeCodeLearningSystem
const [selectedArea, setSelectedArea] = useState(null)
const [selectedPath, setSelectedPath] = useState(null)
const [selectedModule, setSelectedModule] = useState(null)
LocalStorage Keys
// Notas do usuário (editáveis)
'bash-learning-notes'
'c-learning-notes'
'rust-learning-notes'
'vscode-learning-notes'
'claude-code-learning-notes'
// Progresso de módulos (futuro - US-042)
'bash-progress' // JSON: ["1.1", "1.2", ...]
'c-progress'
'rust-progress'
'vscode-progress'
'claude-code-progress'
Props Drilling Pattern
// HubView → SistemaEducacional
<HubView
studyAreas={studyAreas}
=> setCurrentView(area.key)}
=> {
setSelectedPath(path)
setCurrentView('learning-path')
}}
/>
// BashLearningSystem → SistemaEducacional
<BashLearningSystem
=> setCurrentView('hub')}
=> {
setSelectedModule(module)
setCurrentView('bash-notes')
}}
/>
// BashNotesView → SistemaEducacional
<BashNotesView
module={selectedModule}
=> setCurrentView('bash')}
=> setCurrentView('hub')}
/>
Padrões de Código
Convenções de Nomenclatura
// Componentes: PascalCase
HubView, BashLearningSystem, FlashcardModal
// Arquivos: camelCase
cLearningData.js, studyAreas.js
// Constantes: UPPER_SNAKE_CASE
const MAX_NOTES_SIZE = 50000
// Funções: camelCase
handleNotesChange, toggleModule
// CSS Classes: kebab-case ou Tailwind
breadcrumb-container, flex items-center
Estrutura de Componente Padrão
// 1. Imports
import React, { useState, useEffect } from 'react'
import { ChevronRight } from 'lucide-react'
// 2. Component
export function ComponentName({ prop1, prop2, onAction }) {
// 3. Hooks
const [state, setState] = useState(initialValue)
useEffect(() => {
// Side effects
}, [dependencies])
// 4. Event Handlers
const handleClick = () => {
// Logic
onAction?.()
}
// 5. Render
return (
<div className="container">
{/* JSX */}
</div>
)
}
Estrutura de Dados (studyAreas.js)
export const studyAreas = [
{
name: "Bash",
icon: "🐚",
description: "Shell scripting, automação e linha de comando",
modules: 16,
hours: 32,
badge: "Integrado", // "Integrado" | "Novo" | null
hasIntegratedApp: true,
key: "bash",
flashcards: [
{
id: 1,
category: "basics",
front: "Como criar uma variável em Bash?",
back: "VARIAVEL=\"valor\" (sem espaços ao redor do =)",
code: "NAME=\"João\"\\necho $NAME"
}
]
}
]
Estrutura de Módulos (bashLearningData.js)
export const bashPhases = [
{
id: 1,
title: "Seção 1: Fundamentos Shell Scripting",
description: "História, filosofia software tools e scripts básicos",
modules: [
{
id: "1.1",
title: "Introdução ao Curso + História Unix/Linux",
week: 1,
date: "03/02/2025",
deliverable: "Compreensão da história e contexto do shell scripting",
topics: [
{
title: "Introdução ao Curso",
content: "Objetivos e estrutura do curso"
},
{
title: "História Unix/Linux",
content: "Bell Labs, PDP-11 e evolução dos shells"
}
]
}
]
}
]
Padrões de Estilo (Tailwind)
Cores Principais
/* Gradientes */
bg-gradient-to-br from-purple-500 to-blue-500 /* Cards especiais */
bg-gradient-to-br from-slate-50 to-slate-100 /* Fundo geral */
/* Primárias */
text-purple-600, bg-purple-500 /* Ação principal */
text-blue-600, bg-blue-500 /* Links */
text-green-600, bg-green-500 /* Sucesso */
text-slate-600, bg-slate-100 /* Neutro */
/* Estados */
hover:bg-purple-700 /* Hover buttons */
focus:ring-2 focus:ring-purple-500 /* Focus estados */
Spacing e Layout
/* Containers */
max-w-7xl mx-auto px-4 /* Container principal */
max-w-4xl mx-auto /* Container estreito */
/* Padding padrão */
p-6 /* Cards */
p-4 /* Sections */
py-3 px-4 /* Buttons */
/* Grid */
grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6
Componentes Comuns
/* Card */
bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow
/* Button Primário */
bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700 transition-colors
/* Input */
w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-purple-500
Build e Deploy
Comandos
npm run dev # Dev server (porta 3000)
npm run build # Build produção
npm run preview # Preview build
npm test # Testes Vitest
npm run test:ui # Testes UI
npm run test:coverage # Cobertura
docker-compose up -d # Container
docker-compose down # Parar
Vite Config
// vite.config.js
export default {
build: {
sourcemap: false, // Segurança
minify: 'terser',
terserOptions: {
compress: {
drop_console: true, // Remove console.log
drop_debugger: true
}
},
rollupOptions: {
output: {
manualChunks: {
'react-vendor': ['react', 'react-dom'],
'ui-vendor': ['lucide-react', 'react-markdown']
}
}
}
}
}
Débito Técnico Conhecido
Alta Prioridade
- Duplicação de Código: ~25% (800 linhas em *LearningSystem.jsx)
- Sem React Router: Navegação via estado interno
- LocalStorage: Sem tratamento de erros (QuotaExceededError)
- Progresso não persiste: Reset ao recarregar
Média Prioridade
- Cobertura de Testes: 5% (meta: 80%)
- Sem TypeScript: Projeto em JavaScript puro
- Acessibilidade: Falta ARIA labels consistentes
- Bundle Size: TBD (meta: <200KB)
Roadmap
Sprint 2.4 (Atual - ÉPICO 12)
- US-060: Refatorar Nomenclatura (13 pts)
- US-061: Implementar Breadcrumb (8 pts)
- US-062: Padronizar Botões (5 pts)
- US-063: Unificar Conceito de Notas (5 pts)
Sprint 2.5
- US-064: Melhorar Hierarquia Visual (8 pts)
- US-065: Documentar Arquitetura (3 pts)
Futuro (Release 2.0+)
- US-040: React Router (13 pts)
- US-041: Tratamento erros localStorage (5 pts)
- US-042: Persistir progresso (8 pts)
- US-043: BaseLearningSystem (21 pts)
- US-050: Dark mode (13 pts)
Navegação Rápida
# Encontrar componente
find src/components -name "*Learning*.jsx"
# Ver estrutura de dados
cat src/data/studyAreas.js | grep "name:"
# Buscar uso de hook
grep -r "useState" src/components/
# Ver imports de componente
head -20 src/components/SistemaEducacionalCompleto.jsx
# Contar linhas de código
wc -l src/components/*.jsx
# Listar TODOs
grep -r "TODO" src/
# Ver dependências
cat package.json | jq .dependencies
Referências Críticas
- PRODUCT-CENTRAL-DOCUMENT.md: Fonte única da verdade (PRD + Backlog)
- CLAUDE.md: Instruções para Claude Code
- ARQUITETURA_E_PADROES.md: Padrões técnicos
- README.md: Setup e uso básico
- docs/MCP-CHROME-DEVTOOLS-*.md: Guias MCP (3 docs)
Ativação Automática
Esta skill ativa quando você:
- Precisa entender arquitetura do sistema
- Navega entre componentes
- Toma decisões de design
- Busca padrões estabelecidos
- Implementa novas features
- Refatora código existente
- Escreve documentação técnica