agentmods.dev

use-ds

use-ds is a skill for Claude Code, Codex from mariqcl/design-system-skills. It costs 72 tokens per session (3,910 once invoked), scanned A, original, MIT.

A Portuguese-language workflow for building screens and prototypes from components already documented in Storybook, a tool for viewing and testing interface components.

In plain words
What is it for?
Use it to assemble screens, flows, or prototypes from existing Storybook components.
Why use it?
It helps keep new screens consistent with an existing design system and prevents unnecessary new components from being created.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one. Also seen: mentions Claude Code.

not rated 4repo 3mo ago A scan 72 tokens original MIT

Good fit Use it to assemble screens, flows, or prototypes from existing Storybook components.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/mariqcl/design-system-skills/use-ds
View source ↗ mariqcl/design-system-skills
Install

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.

Any agent
npx skills add mariqcl/design-system-skills --skill use-ds
Clone the repo
git clone --depth 1 https://github.com/mariqcl/design-system-skills

Made for: Claude Code, Codex.

Wrote 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.

agentmods badge for use-ds

README.md
[![agentmods](https://agentmods.dev/badge/skills/mariqcl/design-system-skills/use-ds/github.svg)](https://agentmods.dev/skills/mariqcl/design-system-skills/use-ds)
Your own site
<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.

agentmods 80×15 button for use-ds

Your own site · 80×15
<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>
Per session 72 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 3,910 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 1 finding. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00072 $0.03910
Opus 5.5 $0.00029 $0.01564
Sonnet 5.5 $0.00014 $0.00782
Haiku 4.5 $0.00007 $0.00391

Measured 2mo ago against content hash a188d5105af8, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

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 2mo 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
use-ds/SKILL.md · 313 lines

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:

  1. Use a ferramenta do Storybook MCP que lista todos os componentes/stories existentes
  2. Use a ferramenta que detalha o componente específico (props, variantes e exemplos reais)
  3. Leia o arquivo de metadados src/stories/[Componente].metadata.json desse componente, se existir (veja seção abaixo)
  4. 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:

Read the full file on GitHub · 313 lines

Changes

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.

  1. 2mo ago First seen · 313 lines · 72 tokens per session scan A a188d5105af8

Subscribe to this mod's changes

use-ds is a skill published in the GitHub repository mariqcl/design-system-skills (4 stars, last pushed 3mo ago), licensed MIT. It adds 72 tokens to every session and 3,910 once invoked, about $0.0003 per session on Opus 5.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.

Design and UX
Related

use-ds compared with skills from other repositories

use-ds next to 6 skills from other repositories
ModTypeStarsLast pushLicenceScanTokensWorks with
use-dsmariqcl/design-system-skillsSkill43mo agoMITA72Claude Code, Codex
webgl-holographic-foilnexu-io/open-designSkill106ktodayApache-2.0A41Claude Code, Codex
html-ppt-hermes-cyber-terminalnexu-io/open-designSkill106ktodayApache-2.0A53Claude Code, Codex
html-ppt-taste-brutalistnexu-io/open-designSkill106ktodayApache-2.0A78Claude Code, Codex
visual-ralphYeachan-Heo/oh-my-codexSkill34ktodayMITA52Codex
glance-canonical-layoutsandroid/skillsSkill10kyesterdayApache-2.0A56Claude Code
accessibilitymicrosoft/hve-coreSkill1.6ktodayMITA47Claude Code