Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add andregusman-raiz/a-gusman-claude --skill ag-referencia-design-librarygit clone --depth 1 https://github.com/andregusman-raiz/a-gusman-claudeWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/andregusman-raiz/a-gusman-claude/ag-referencia-design-library)<a href="https://agentmods.dev/skills/andregusman-raiz/a-gusman-claude/ag-referencia-design-library"><img src="https://agentmods.dev/badge/skills/andregusman-raiz/a-gusman-claude/ag-referencia-design-library/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/andregusman-raiz/a-gusman-claude/ag-referencia-design-library"><img src="https://agentmods.dev/badge/skills/andregusman-raiz/a-gusman-claude/ag-referencia-design-library.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00048 | $0.02202 |
| Opus 5 | $0.00024 | $0.01101 |
| Sonnet 5 | $0.00010 | $0.00440 |
| Haiku 4.5 | $0.00005 | $0.00220 |
Grade A, and why
ag-referencia-design-library scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 12d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 148 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 12d ago First seen · 148 lines · 48 tokens per session scan A 0b350f2067a2
ag-referencia-design-library is a skill published in the GitHub repository andregusman-raiz/a-gusman-claude (19 stars, last pushed 3d ago), licensed MIT. It adds 48 tokens to every session and 2,202 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
taiyi-ui-design
A design-planning guide for describing how an application's user interface should look and behave. It produces a UI-DESIGN.md document covering layouts, components, interactions, accessibility, and error states.
taiyi-diagram-arch
A workflow for turning written system or product architecture into readable, version-controlled diagrams using Mermaid or exported SVG and PNG files. Architecture diagrams show components, boundaries, data flows, and deployment relationships.
taiyi-restyle
A planning guide for breaking a large user-interface redesign into smaller, independently reviewable tasks. A user interface is the part of an application that people see and use.
taiyi-diagram-pipeline
A pipeline that creates and updates architecture diagrams in three stages: a C4 model from the code, an engineering architecture diagram, and an exported PNG image. C4 is a way to describe software architecture at several levels of detail.
taiyi-diagram-render
A tool for rendering existing C4 or architecture Mermaid diagrams as SVG or PNG images. C4 is a way to show software systems at different levels, while Mermaid is a text format for diagrams.
flowchart-creator
Create HTML flowcharts and process diagrams with decision trees, color-coded stages, arrows, and swimlanes. Use when users request flowcharts, process diagrams, workflow visualizations, or decision trees.