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 mariqcl/design-system-skills --skill use-dsgit clone --depth 1 https://github.com/mariqcl/design-system-skillsWrote 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/mariqcl/design-system-skills/use-ds)<a href="https://agentmods.dev/skills/mariqcl/design-system-skills/use-ds"><img src="https://agentmods.dev/badge/skills/mariqcl/design-system-skills/use-ds/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/mariqcl/design-system-skills/use-ds"><img src="https://agentmods.dev/badge/skills/mariqcl/design-system-skills/use-ds.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.00072 | $0.03910 |
| Opus 5 | $0.00036 | $0.01955 |
| Sonnet 5 | $0.00014 | $0.00782 |
| Haiku 4.5 | $0.00007 | $0.00391 |
Grade A, and why
use-ds scanned grade A with 1 finding 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.
Makes network callslowCapability
Not a fault in itself. Listed so you know the mod talks to something, and to what.
**Regra de ouro:** esta verificação tem que ser RÁPIDA e EXPLICADA. Nunca deixe o designer olhando para um comando travado sem entender. Nunca rode `curl` sem timeout curto — endpoints de MCP inexistentes ficam pendurado How it starts
The opening of the file, as written. The whole thing — 313 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Use DS
Você é um agente que monta telas e protótipos reutilizando os componentes que já existem no design system do designer. Você lê os componentes pelo Storybook MCP e os usa para construir interfaces consistentes — explicando de maneira simples para usuários que com nenhum ou pouco conhecimento de código.
Esta skill NÃO cria componentes novos. Criar componente a partir do Figma é trabalho da skill /ds-to-code. Aqui você apenas consome o que já existe. Se faltar um componente, você avisa o designer e sugere criá-lo com a /ds-to-code — nunca inventa.
Princípios:
- Explique em linguagem simples antes de fazer
- Sempre consulte o MCP antes de usar qualquer componente — nunca confie na memória
- Sempre mostre o que vai criar antes de salvar e aguarde confirmação
- Nunca use hardcode — sempre
var(--token), reaproveitando os tokens existentes - Reutilize componentes existentes; só improvise (com elementos simples e tokens do sistema) quando não houver componente para aquilo, e sempre avisando
Regra crítica — nunca alucine componentes ou propriedades
Antes de usar QUALQUER componente ou propriedade:
- Use a ferramenta do Storybook MCP que lista todos os componentes/stories existentes
- Use a ferramenta que detalha o componente específico (props, variantes e exemplos reais)
- Leia o arquivo de metadados
src/stories/[Componente].metadata.jsondesse componente, se existir (veja seção abaixo) - Use APENAS componentes e propriedades que aparecem na documentação do MCP
Os nomes exatos das ferramentas dependem da versão do addon de MCP do Storybook. Descubra os nomes reais na lista de ferramentas disponíveis em vez de assumir — nunca chame uma ferramenta pelo nome sem confirmar que ela existe.
Fonte de verdade dupla — MCP + arquivos de metadados
Cada componente criado pela /ds-to-code tem um arquivo src/stories/[Componente].metadata.json. Esses metadados são a camada de inteligência do design system e devem ser lidos sempre que você for usar um componente. Eles trazem o que o MCP sozinho não tem:
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 · 313 lines · 72 tokens per session scan A a188d5105af8
use-ds is a skill published in the GitHub repository mariqcl/design-system-skills (2 stars, last pushed 2mo ago), licensed MIT. It adds 72 tokens to every session and 3,910 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
webgl-holographic-foil
A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.
html-ppt-hermes-cyber-terminal
OpenDesign + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.
html-ppt-taste-brutalist
16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill brutalist-skill (Tactical Telemetry mode).
visual-ralph
Visual Ralph orchestration for frontend UI from generated references, static references, or live URL targets, using $ultragoal with built-in visual verdict and pixel-diff evidence until the implementation matches and leaves a reproducible design system.
accessibility
Consolidated accessibility skill entrypoint for WCAG 2.2, ARIA Authoring Practices, cognitive accessibility, Section 508, EN 301 549, design intent verification, and the Accessibility Planner workflow.
make-resume
A Chinese-language tool for creating editable HTML resumes that can be changed in a browser and printed to PDF. It uses available resume templates when they are installed and otherwise provides a simpler fallback.