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-presentationgit 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-presentation)<a href="https://agentmods.dev/skills/andregusman-raiz/a-gusman-claude/ag-referencia-design-presentation"><img src="https://agentmods.dev/badge/skills/andregusman-raiz/a-gusman-claude/ag-referencia-design-presentation/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-presentation"><img src="https://agentmods.dev/badge/skills/andregusman-raiz/a-gusman-claude/ag-referencia-design-presentation.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.00050 | $0.03435 |
| Opus 5 | $0.00025 | $0.01717 |
| Sonnet 5 | $0.00010 | $0.00687 |
| Haiku 4.5 | $0.00005 | $0.00344 |
Grade A, and why
ag-referencia-design-presentation 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 9d 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 — 264 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design Presentation — Taxonomia de Layouts
86 padrões de layouts de apresentação, agrupados em 14 categorias. Base: VibeUI (vibeui.online) curado + integração com design-library/solutions. Uso: ag-11-ux-ui, ag-1-construir ui, ag-6-iniciar projeto (landing), ag-6-iniciar projeto (auth).
Como usar
-
Antes de implementar uma seção de apresentação (landing, auth, onboarding):
- Identificar categoria (Hero? Pricing? Nav?)
- Escolher 1-2 variantes da lista
- Consultar
~/Claude/assets/design-library/elements/<NN>-<categoria>/<variante>/para código (se existir) - Se variante não tem código ainda → gerar via shadcn + commitar no library
-
Regra de combinação (landing page típica):
Nav (1) → Hero (1) → Stats (1) → Features/Bento (1) → Pricing (1) → Testimonials (1) → FAQ (1) → CTA (1) → Footer (1) -
Fallback: se nenhuma variante se adequa → usar prompt textual direto no ag-11-ux-ui.
Categorias (14) + 86 variantes
01 — Auth Forms (6)
Login/signup, recuperação de senha, multi-step.
01a-split-screen— Form à esquerda, imagem/brand à direita01b-centered-card— Card único centralizado com sombra01c-full-bleed-image— Background full-image, form em card flutuante01d-multi-step-wizard— Signup em 2-4 etapas com progress indicator01e-magic-link-only— Email-only, sem senha (Supabase Auth default)01f-social-first— Botões SSO (Google, GitHub) primários, email secundário
Stack default: @supabase/ssr + Server Actions + react-hook-form + Zod.
02 — Pricing (8)
Tier cards, comparação, sliders, billing toggle.
02a-classic-3-tier— Free/Pro/Enterprise cards lado a lado, tier popular destacado02b-comparison-table— Tabela vertical com check/cross, sticky header02c-single-tier-hero— Um plano só, foco em CTA gigante (SaaS simples)02d-usage-slider— Slider de seats/volume recalcula preço em tempo real02e-credit-pack-grid— Grid de pacotes de créditos (AI/API products)02f-monthly-annual-toggle— Switch com savings badge no annual02g-enterprise-contact-card— Tier custom sem preço, CTA "Fale conosco"02h-stacked-mobile-first— Cards empilhados otimizados mobile
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.
- 9d ago First seen · 264 lines · 50 tokens per session scan A 3222c3b153b9
ag-referencia-design-presentation is a skill published in the GitHub repository andregusman-raiz/a-gusman-claude (19 stars, last pushed 4d ago), licensed MIT. It adds 50 tokens to every session and 3,435 once invoked, about $0.0003 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-09-03.
Other skills, from other repositories
visual-qa-verification
Automated visual QA with pixel-level diff comparison, iterative fix loop, and cross-browser verification. Uses pixelmatch for programmatic screenshot comparison with region-based analysis. Covers responsive checks, Lighthouse audits, and accessibility validation. Keywords: verify app, visual QA, compare to Figma…
canva-token-inference
AI-powered design token extraction from Canva screenshots. Uses Claude vision to infer colors, typography, spacing, and effects with confidence scoring. Presents tokens for user confirmation before locking. Keywords: Canva tokens, token inference, design tokens, Canva extraction, AI token detection, color extraction…
design-token-lock
Extracts exact design values from Figma and writes a lockfile that becomes the single source of truth for colors, typography, spacing, and text content. Generates tailwind.config.ts and tokens.css from the lockfile. Keywords: design tokens, lockfile, Figma variables, token extraction, style drift, Tailwind config…
export-design-system
Exports generated components + design-tokens.lock.json as a publishable pnpm workspace. Generates a framework-agnostic tokens package and a framework-specific component library (React/Vue/Svelte via Vite library mode, React Native via tsc). Includes Tailwind preset, ThemeProvider, Changesets versioning, and a properly…
figma-intake
Structured interview that auto-discovers Figma file structure, project context, and asks 3-5 targeted questions to produce a build-spec.json. Entry point for the autonomous build pipeline. Keywords: Figma intake, build spec, project discovery, figma interview, build plan.
indesign-conversion
Convert an exported Adobe InDesign IDML package or PDF into typed React components, design tokens, and Storybook stories via the @aurelius/pipeline InDesign pipeline. Use when a designer hands you an .idml or .pdf and you need a starting React component set. Keywords: InDesign to React, IDML, PDF to React, indesign…