# Ag Referencia Design Library

> Design Library da rAIz Educacao — 24 solucoes curadas, design system oficial, tokens CSS, componentes base. Consultar ANTES de construir qualquer UI. Reference skill carregado on-demand.

- **Type:** Skill
- **Install:** `agentstack add skill-andregusman-raiz-a-gusman-claude-ag-referencia-design-library`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [andregusman-raiz](https://agentstack.voostack.com/s/andregusman-raiz)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [andregusman-raiz](https://github.com/andregusman-raiz)
- **Source:** https://github.com/andregusman-raiz/a-gusman-claude/tree/main/archive/reference-skills-deprecated-2026-04-22/ag-referencia-design-library

## Install

```sh
agentstack add skill-andregusman-raiz-a-gusman-claude-ag-referencia-design-library
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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](https://github.com/andregusman-raiz)
- **Source:** [andregusman-raiz/a-gusman-claude](https://github.com/andregusman-raiz/a-gusman-claude)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-andregusman-raiz-a-gusman-claude-ag-referencia-design-library
- Seller: https://agentstack.voostack.com/s/andregusman-raiz
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.