Ag Referencia Design Library

Design Library — Referencia Obrigatoria para Construcao de Software

> Regra: ANTES de especificar ou implementar qualquer feature, consultar esta library. > Se existe solucao catalogada, USAR como base. Nao reinventar.

3 Niveis de Reutilizacao

A library NAO e apenas UI. Contem 3 niveis:

| Nivel | O que e | Quando consultar | O que reutilizar | |-------|---------|-----------------|-----------------| | Componente UI | Pattern visual (KPI card, tabela, form, app shell) | Fase BUILD do ag-1 | Layout, CSS, props, componente TSX | | Modulo de Produto | Feature completa com tipos, fluxos, estado, API | Fases PRD + SPEC + PLAN do ag-1 | Types, state machine, fluxo de negocio, API contract | | Produto Replicavel | Produto inteiro replicavel como SaaS | ag-6-iniciar ao criar projeto novo | Arquitetura completa, scaffold, integrações |

Classificacao das 24 Solutions

Componentes UI (consultar na fase BUILD):

• 01-dashboard-kpi, 02-table-filters-export, 05-app-shell-sidebar, 08-pageflip-3d, 10-code-editor, 22-tv-realtime-counter

Modulos de Produto (consultar na fase PRD + SPEC):

• 03-forms-multistep, 04-status-workflow-timeline, 06-workflow-builder, 07-chat-ai-streaming, 09-qr-designer, 11-dragdrop-virtual-scroll, 12-document-generation, 13-rag-knowledge-base, 14-social-media-publisher, 16-meeting-transcript-ai, 17-contract-lifecycle, 19-litigation-case-manager, 23-skill-assessment-profiler, 24-contractor-management

Produtos Replicaveis (consultar ao iniciar projeto):

• 15-bi-data-explorer, 18-content-studio-ai, 20-data-catalog-governance, 21-ai-app-builder

Localizacao dos Assets

~/Claude/assets/
├── UI_UX/raiz-educacao-design-system.md    ← Design System Oficial (tokens, cores, tipografia)
├── design-library/
│   ├── catalog.md                           ← Indice das 24 solucoes
│   ├── solutions/NN-id/spec.md             ← Spec de cada solucao (props, layout, CSS, deps)
│   ├── catalog/src/components/ui/          ← 13 componentes base (shadcn customizados)
│   ├── catalog/src/components/elements/    ← Previews por categoria
│   ├── catalog/src/components/solutions/   ← Componentes de solucao (KPI card, sparkline)
│   ├── tokens/                              ← (planejado) Design tokens exportaveis
│   └── elements/                            ← (planejado) Showcase individual

As 24 Solucoes Catalogadas

| ID | Nome | Categoria | Complexidade | |----|------|-----------|-------------| | dashboard-kpi | KPI Card com Sparkline | data-display | Baixa | | table-filters-export | Tabela + Filtros + Export | data-display | Alta | | forms-multistep | Form Engine Dinamico | forms | Muito Alta | | status-workflow-timeline | Status + Audit Trail | workflow | Media | | app-shell-sidebar | App Shell Responsivo | layout | Media | | workflow-builder | BPMN Designer | workflow | Muito Alta | | chat-ai-streaming | Chat AI Streaming | ai | Alta | | pageflip-3d | Page-Flip 3D | media | Media | | qr-designer | QR Designer | tools | Media | | code-editor | Code Editor Monaco | extras | Media | | dragdrop-virtual-scroll | Kanban + Virtual Scroll | data-display | Alta | | document-generation | Export PDF/Word/Excel | export | Media | | rag-knowledge-base | RAG Knowledge Base | ai | Alta | | social-media-publisher | Social Media Publisher | tools | Alta | | bi-data-explorer | BI Data Explorer | data-display | Muito Alta | | meeting-transcript-ai | Meeting Transcript AI | ai | Alta | | contract-lifecycle | Contract Lifecycle (CLM) | workflow | Muito Alta | | content-studio-ai | Content Studio AI | ai | Muito Alta | | litigation-case-manager | Litigation Manager | legal | Alta | | data-catalog-governance | Data Catalog + API Factory | tools | Muito Alta | | ai-app-builder | AI App Builder | ai | Muito Alta | | tv-realtime-counter | TV Real-Time Counter | data-display | Baixa | | skill-assessment-profiler | Radar Chart + AI Report | data-display | Alta | | contractor-management | PJ Contractor Management | forms | Alta |

Como Consultar

1. Identificar solucao existente (por necessidade)

| Preciso de... | Solucao | Nivel | Reutilizar | |---------------|---------|-------|-----------| | Dashboard com metricas | 01-dashboard-kpi | UI | Layout, sparkline, CSS | | Tabela com filtros e export | 02-table-filters-export | UI | Componente completo | | Formulario dinamico | 03-forms-multistep | Modulo | Types, validacao, state machine | | Timeline de status/auditoria | 04-status-workflow-timeline | Modulo | Fluxo, audit trail, types | | Layout com sidebar | 05-app-shell-sidebar | UI | Shell responsivo completo | | Workflow visual (BPMN) | 06-workflow-builder | Modulo | React Flow, node types, fluxo | | Chat com AI/streaming | 07-chat-ai-streaming | Modulo | Streaming, tool calls, types | | Viewer de PDF/flipbook | 08-pageflip-3d | UI | pdf.js config, page-flip | | QR code com designer | 09-qr-designer | Modulo | Designer, UTM, campanhas | | Code editor | 10-code-editor | UI | Monaco config, temas | | Kanban/drag-drop | 11-dragdrop-virtual-scroll | Modulo | DnD, virtual scroll, state | | Gerar PDF/DOCX/XLSX | 12-document-generation | Modulo | Templates, API, pipeline | | RAG/knowledge base | 13-rag-knowledge-base | Modulo | Upload, polling, folders, state machine | | Social media publisher | 14-social-media-publisher | Modulo | Calendario, agendamento, plataformas | | BI/data viz | 15-bi-data-explorer | Produto | Arquitetura completa | | Meeting transcript + AI | 16-meeting-transcript-ai | Modulo | Transcricao, sumarizacao, types | | Gestao de contratos (CLM) | 17-contract-lifecycle | Modulo | Risk matrix, negociacao, assinatura, types | | Content studio AI | 18-content-studio-ai | Produto | Editor, slides, imagens, pipeline | | Gestao juridica | 19-litigation-case-manager | Modulo | Caso, timeline, documentos, types | | Data catalog + API factory | 20-data-catalog-governance | Produto | Catalogo, governance, API gen | | AI app builder | 21-ai-app-builder | Produto | Scaffold, preview, deploy | | TV contador real-time | 22-tv-realtime-counter | UI | Display, polling | | Assessment + radar chart | 23-skill-assessment-profiler | Modulo | Radar, scoring, AI report | | Gestao PJ/contractors | 24-contractor-management | Modulo | Onboarding, pagamento, import CSV |

2. Ler spec da solucao

Cada spec contem:

• What it solves — problema que resolve
• Best implementation — path para codigo de referencia
• Key features — capacidades detalhadas
• Props interface — TypeScript interface
• Layout structure — diagrama ASCII
• CSS patterns — padroes de estilo
• Dependencies — libs necessarias
• Usage example — exemplo de uso

3. Aplicar Design System

Ao implementar, SEMPRE usar tokens do design system oficial:

~/Claude/assets/UI_UX/raiz-educacao-design-system.md

| Token | Valor | Uso | |-------|-------|-----| | Raiz Orange | #F7941D | CTA, accents, badges | | Raiz Teal | #5BB5A2 | Success, secondary | | Font | IBM Plex Sans | Todo texto | | Font Mono | IBM Plex Mono | Codigo, metricas | | Radius | 0.5rem (8px) | Base para cards, inputs | | Spacing | Escala 4px | p-4, gap-3, mt-6 |

Regras de Uso

1. Consultar ANTES de especificar — se existe solucao, referenciar na SPEC
2. Adaptar, nao copiar cego — cada projeto tem contexto, mas a base vem daqui
3. Manter consistencia — tokens do design system sao obrigatorios em todos os projetos
4. Reportar gaps — se precisa de algo que nao existe, criar nova solution spec
5. Nao duplicar — se a solucao existe mas com nome diferente no projeto, alinhar nomenclatura

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: andregusman-raiz
• Source: andregusman-raiz/a-gusman-claude
• License: MIT

Install and usage instructions live in the source repository linked above.