New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Ds Add Component

by mqtt-viewer in mqtt-viewer/mqtt-viewer

Add a new component to the design-system library, or formalize an existing one — scaffold its colocated .spec.json, classify its tier, author a Storybook story, and link it to Figma.

GPL-3.0Auto-check passedFrontend & Design

Install Ds Add Component

skills CLI
$ npx skills add mqtt-viewer/mqtt-viewer --skill ds-add-component -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install mqtt-viewer/mqtt-viewer ds-add-component --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/mqtt-viewer/mqtt-viewer.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/ds-add-component .claude/skills/ds-add-component && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
ds-add-component
GitHub stars
134
Token cost
~936 tokens
SKILL.md length
387 words
Files
1
Skills in repo
6
Repo updated
First seen
Licence
GPL-3.0

At a glance

Add a new component to the design-system library, or formalize an existing one — scaffold its colocated .spec.json, classify its tier, author a Storybook story, and link it to Figma.

  • Works in 7 steps: Check for duplicates via the Storybook… → Locate / create the component folder… → Classify the tier (this is the most… → …
  • The user says add X to the library
  • SKILL.md covers Procedure and Rules
  • Calls pnpm

What it does

Ds Add Component is an agent skill from mqtt-viewer/mqtt-viewer. Add a new component to the design-system library, or formalize an existing one — scaffold its colocated .spec.json, classify its tier, author a Storybook story, and link it to Figma. Use when the user says "add X to the library", "create a story for X", "formalize this component", "/ds-add-component", or when authoring through the COMPONENTCHECKLIST.

Its SKILL.md is about 940 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Design systems. It works with Storybook and Figma. The repository describes itself as: The modern and open-source MQTT debugging and visualisation tool for Windows, Mac and Linux. The licence is GPL-3.0.

When your agent uses it

  • The user says add X to the library
  • Create a story for X
  • Formalize this component
  • /ds-add-component

Example prompts

  • “add X to the library”
  • “create a story for X”
  • “formalize this component”
  • “/ds-add-component”

Workflow steps

7 steps, taken from the first numbered list in SKILL.md.

  1. Check for duplicates via the Storybook MCP (mcpland/storybook-mcp; needs
  2. Locate / create the component folder under frontend/src/components/ (or
  3. Classify the tier (this is the most important decision — it sets the
  4. Scaffold the spec: pnpm ds:make-spec (or create .spec.json
  5. Author the story .stories.svelte (Svelte CSF, defineMeta)
  6. Link Figma (optional now): if the Figma node exists, set figma.fileKey,
  7. Validate: pnpm ds:registry then pnpm ds:validate. Green = done; the

What it can do on your machine

Read from SKILL.md and the folder at commit 5a43d7c. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • pnpm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use pnpm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Ds Add Component loads about 936 tokens when it runs. Until then it costs about 93 tokens; SKILL.md has 387 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~93
When it runs · the whole SKILL.md, loaded when a task matches
~936

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from mqtt-viewer/mqtt-viewer at commit 5a43d7c, republished under its GPL-3.0 licence (© mqtt-viewer). 387 words, ~936 tokens.

Download SKILL.mdSave it as .claude/skills/ds-add-component/SKILL.md (or your agent's skills folder).
name
ds-add-component
description
Add a new component to the design-system library, or formalize an existing one — scaffold its colocated .spec.json, classify its tier, author a Storybook story, and link it to Figma. Use when the user says "add X to the library", "create a story for X", "formalize this component", "/ds-add-component", or when authoring through the COMPONENT_CHECKLIST.

Add / Formalize a Library Component

Bring a component into the synced design system: spec + story + tier + (optional) Figma link, ending validated.

Read first: frontend/AGENTS.md and docs/design-system/STORYBOOK_SPEC.md (§4 tokens, §6 authoring rules, §7 spec shape, §7c tiers).

Procedure

  1. Check for duplicates via the Storybook MCP (mcpland/storybook-mcp; needs Storybook served/built) — list existing components before creating a new one. Reuse/extend if something close exists (anti-duplication rule).
  2. Locate / create the component folder under frontend/src/components/ (or frontend/src/views/ for screens). One folder per component.
  3. Classify the tier (this is the most important decision — it sets the sync contract). Apply the test: could this drop into any unrelated app unchanged?
    • yes, domain-agnostic, props-only → primitive
    • knows MQTT/connections/app concepts, composes primitives → component
    • a screen/frame → view When unsure, read the source: store reads / bindings/... imports / domain types ⇒ not a primitive. See spec §7c for why this matters.
  4. Scaffold the spec: pnpm ds:make-spec <Name> (or create <Name>.spec.json by hand against frontend/src/design-system/component-spec.schema.json; the $schema relative path depth depends on how deep the component folder sits). Fill:
    • name (PascalCase, = filename = Figma name), tier, description, status: "story-only" initially.
    • props[] from the component's real $$Props / export let — do not invent. Mark enums with options matching intended Figma variant values.
    • tokens[] — every Tailwind token the component consumes (must exist in design-tokens.json). Primitives may list raw tokens; components/views should mostly compose primitives instead (validator warns otherwise).
    • dependencies[] — other library components it renders. Respect direction: primitive depends on nothing; component → primitives; view → both.
  5. Author the story <Name>.stories.svelte (Svelte CSF, defineMeta):
    • title = <Tier>/<Name>; tags: ['autodocs'].
    • one <Story> per meaningful state/variant; argTypes options match spec.json props.
    • data via props only — mock anything the component would otherwise fetch/read from a store or Wails. If that's not possible without refactor, note it in spec.json.notes.
    • parameters.design = { type: 'figma', url: '' /* TODO(figma-url) */ }.
  6. Link Figma (optional now): if the Figma node exists, set figma.fileKey, figma.nodeId, figma.url, compute lastSyncedHash (via Figma MCP get_metadata/get_variable_defs), and advance status to figma-linked.
  7. Validate: pnpm ds:registry then pnpm ds:validate. Green = done; the index + COMPONENT_CHECKLIST.md regenerate automatically.
Show full SKILL.md (56 more words)Show less

Rules

  • Don't rewrite the component to runes; match surrounding Svelte 4 style.
  • Don't hand-edit component-index.json / COMPONENT_CHECKLIST.md (generated).
  • Get the tier right before anything else — it's the contract everything else (diff strategy, validation rules, Figma object type) hangs off.
  • Skip sub-parts (*Item, *Row, *Tab); they're covered by the parent's story per the ignore heuristics in spec §7b.

© mqtt-viewer, GPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .claude/skills/ds-add-component of mqtt-viewer/mqtt-viewer.

Open the folder on GitHubat commit 5a43d7c

Compare with similar skills

Ds Add Component next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Ds Add Component compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Ds Add Component this skillmqtt-viewer/mqtt-viewer134—~936Automated safety check: PassGPL-3.0
Wonder BlocksKhan/wonder-blocks163—~3.2kAutomated safety check: PassMIT
DaleuiDaleStudy/daleui119—~675Automated safety check: PassMIT
Design Systemrampstackco/claude-skills941—~2.4kAutomated safety check: PassMIT
Design Systemaffaan-m/ECC276k—~177Automated safety check: PassMIT
Design Systemrevfactory/harness-1001.3k—~1.8kAutomated safety check: PassApache-2.0

Similar skills

  • Wonder Blocks

    Khan/wonder-blocks

    Implements user interfaces using the Wonder Blocks (WB) design system — Khan Academy's React component library.

    163 GitHub stars~3.2k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Daleui

    DaleStudy/daleui

    Use the daleui React design system with semantic Panda CSS tokens and accessible components.

    119 GitHub stars~675 tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

  • Design System

    rampstackco/claude-skills

    Build or audit a design system including component library, design tokens, naming conventions, contribution model, and documentation.

    941 GitHub stars~2.4k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

  • Design System

    affaan-m/ECC

    アクセシビリティ、レスポンシブネス、テーマ設定、コンポーネント群、トークンを備えた本番環境対応デザインシステムの構築。Figma、Storybook、コンポーネントライブラリ統合。

    276k GitHub stars~177 tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

  • Design System

    revfactory/harness-100

    Full pipeline for systematically building a UI design system.

    1.3k GitHub stars~1.8k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check passed

  • Figma Design System Builder

    warpdotdev/warp

    Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.

    65k GitHub starsUsed in 2 repos~4.4k tokens
    Frontend & DesignAuto-check passed

More from mqtt-viewer/mqtt-viewer

  • Changelog

    mqtt-viewer/mqtt-viewer

    Add or update the in-app "What's new" changelog for MQTT Viewer.

    134 GitHub stars~1.1k tokensUpdated yesterday
    Auto-check passed

  • Ds Figma Handover

    mqtt-viewer/mqtt-viewer

    Diff the Figma component library against the MQTT Viewer frontend and produce a handover doc listing exactly what code needs to change.

    134 GitHub stars~990 tokensUpdated yesterday
    Auto-check passed

  • Perf Check

    mqtt-viewer/mqtt-viewer

    Verify MQTT Viewer stays smooth under heavy broker load using the local flood harness.

    134 GitHub stars~1.6k tokensUpdated yesterday
    Auto-check passed

  • Release

    mqtt-viewer/mqtt-viewer

    Publish a MQTT Viewer release end to end. An agent skill from mqtt-viewer/mqtt-viewer.

    134 GitHub stars~1.8k tokensUpdated yesterday
    Auto-check passed

  • Ds Implement Handover

    mqtt-viewer/mqtt-viewer

    Implement a Figma→code handover doc — apply the listed changes to Svelte components, update their colocated .spec.json and stories, and get pnpm ds:validate green.

    134 GitHub stars~853 tokensUpdated yesterday
    Auto-check passed

Works with

Categories

Questions about Ds Add Component

What does Ds Add Component do?

Add a new component to the design-system library, or formalize an existing one — scaffold its colocated .spec.json, classify its tier, author a Storybook story, and link it to Figma. Ds Add Component is an agent skill from mqtt-viewer/mqtt-viewer.json, classify its tier, author a Storybook story, and link it to Figma.

When should I use Ds Add Component?

Ds Add Component fits situations like: the user says add X to the library; create a story for X; formalize this component; /ds-add-component.

How do I install Ds Add Component in Claude Code?

Run `npx skills add mqtt-viewer/mqtt-viewer --skill ds-add-component -a claude-code`. Or copy the skill folder (.claude/skills/ds-add-component in mqtt-viewer/mqtt-viewer) into .claude/skills/ds-add-component in your project. Claude Code loads it when a task matches its description.

How do I install Ds Add Component in Codex?

Run `npx skills add mqtt-viewer/mqtt-viewer --skill ds-add-component -a codex`. Or copy the skill folder (.claude/skills/ds-add-component in mqtt-viewer/mqtt-viewer) into .agents/skills/ds-add-component in your project. Codex loads it when a task matches its description.

Can I use Ds Add Component in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add mqtt-viewer/mqtt-viewer --skill ds-add-component -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ds-add-component, .gemini/skills/ds-add-component, .github/skills/ds-add-component and .opencode/skills/ds-add-component in your project.

What does Ds Add Component need to run?

Going by SKILL.md and its folder, Ds Add Component needs the command-line tools its instructions call (pnpm).

Does Ds Add Component access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Ds Add Component safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Ds Add Component use?

Ds Add Component is published under the GPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Ds Add Component use?

About 936 tokens (SKILL.md is roughly 3.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Ds Add Component?

Skills that share tags, products or a category with Ds Add Component: Wonder Blocks (Khan/wonder-blocks, 163 stars), Daleui (DaleStudy/daleui, 119 stars), Design System (rampstackco/claude-skills, 941 stars) and Design System (affaan-m/ECC, 276k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Ds Add Component?

mqtt-viewer (a GitHub organization) maintains it in mqtt-viewer/mqtt-viewer, which has 134 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on October 8, 2026.

Source: mqtt-viewer/mqtt-viewer on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.