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 Implement Handover

by mqtt-viewer in 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.

GPL-3.0Auto-check passedFrontend & Design

Install Ds Implement Handover

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

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

GitHub CLI
$ gh skill install mqtt-viewer/mqtt-viewer ds-implement-handover --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-implement-handover .claude/skills/ds-implement-handover && 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-implement-handover
GitHub stars
133
Token cost
~853 tokens
SKILL.md length
378 words
Files
1
Skills in repo
6
Repo updated
First seen
Licence
GPL-3.0

At a glance

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.

  • Works in 5 steps: Tokens first. If the handover changes… → Fix tier if flagged. A wrong tier… → Per component, in order → …
  • The user says implement the handover
  • SKILL.md covers Procedure (work bottom-up, the…, Rules and Done when
  • Calls pnpm

What it does

Ds Implement Handover is an agent skill from 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. Use when the user says "implement the handover", "apply the changes doc", "do the sync", or points at a file in frontend/src/design-system/changes/. This skill EDITS code; it assumes the handover was already produced by /ds-figma-handover.

Its SKILL.md is about 850 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 Figma, pnpm, Svelte and Storybook. 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 implement the handover
  • Apply the changes doc
  • Points at a file in frontend/src/design-system/changes/

Example prompts

  • “implement the handover”
  • “apply the changes doc”
  • “do the sync”
  • “/ds-implement-handover”

Workflow steps

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

  1. Tokens first. If the handover changes tokens: update tailwind.config.js,
  2. Fix tier if flagged. A wrong tier changes the contract; correct it in
  3. Per component, in order
  4. Regenerate + validate: pnpm ds:registry then pnpm ds:validate. Fix
  5. Visual + test check: run story tests + a11y via the Storybook MCP (or

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 Implement Handover loads about 853 tokens when it runs. Until then it costs about 106 tokens; SKILL.md has 378 words of instructions outside code blocks.

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

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). 378 words, ~853 tokens.

Download SKILL.mdSave it as .claude/skills/ds-implement-handover/SKILL.md (or your agent's skills folder).
name
ds-implement-handover
description
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. Use when the user says "implement the handover", "apply the changes doc", "do the sync", or points at a file in frontend/src/design-system/changes/. This skill EDITS code; it assumes the handover was already produced by /ds-figma-handover.

Implement a Handover Doc (code ← handover)

You are the implementing agent. Input: a handover doc in frontend/src/design-system/changes/. Apply it faithfully and leave the design system in a validated state.

Discovery first (Storybook MCP): before editing, use the Storybook MCP (mcpland/storybook-mcp, framework-agnostic; needs Storybook served/built) to list existing components/stories/props so you reuse rather than duplicate. Use it again at the end to run story tests + a11y on what you changed.

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

Procedure (work bottom-up, the order the handover lists)

  1. Tokens first. If the handover changes tokens: update tailwind.config.js, run pnpm ds:tokens, confirm design-tokens.json matches. Token renames ripple — fix every consumer the handover lists.
  2. Fix tier if flagged. A wrong tier changes the contract; correct it in .spec.json before touching props.
  3. Per component, in order:
    • Edit <Name>.svelte per the concrete instructions (add a variant, swap a child, retoken). Keep Svelte 4 syntax — do not migrate to runes. No store reads / bindings/... calls added to the render path (props only).
    • Update <Name>.spec.json: props[]/options, tokens[], dependencies[], and write the new figma.lastSyncedHash + lastSyncedAt from the handover. Advance status if its requirements are now met.
    • Update <Name>.stories.svelte: new argTypes options, a story per new variant, real parameters.design.url. Keep tags: ['autodocs'].
  4. Regenerate + validate: pnpm ds:registry then pnpm ds:validate. Fix until green (schema, token validity, story coverage, dependency direction, sync key). The checklist + index regenerate automatically.
  5. Visual + test check: run story tests + a11y via the Storybook MCP (or pnpm test-storybook) for changed components, especially anything using melt-ui (Tooltip/Dialog/DropdownMenu). Storybook must be served/built for the MCP to see index.json.
Show full SKILL.md (109 more words)Show less

Rules

  • Implement only what the handover specifies. Anything marked "human decision / out of scope" → stop and ask the user; do not guess composition or data wiring.
  • Don't touch src/design-system/component-index.json or src/design-system/COMPONENT_CHECKLIST.md by hand — generated by step 4.
  • One token rename can hit many files; trust the handover's "affected components" list and verify with pnpm ds:validate (it fails on dangling token refs).
  • If pnpm ds:validate reveals drift the handover didn't mention, note it back to the user rather than silently fixing scope creep.

Done when

  • All handover items applied (or explicitly deferred with reasons).
  • pnpm ds:validate exits 0.
  • Each touched component's lastSyncedHash updated so the next drift run is clean.

© 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-implement-handover of mqtt-viewer/mqtt-viewer.

Open the folder on GitHubat commit 5a43d7c

Compare with similar skills

Ds Implement Handover 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 Implement Handover compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Ds Implement Handover this skillmqtt-viewer/mqtt-viewer133—~853Automated safety check: PassGPL-3.0
Wonder BlocksKhan/wonder-blocks163—~3.2kAutomated safety check: PassMIT
Figma use_figma Plugin API Ruleswarpdotdev/warp65k4 repos~4.4kAutomated safety check: PassAGPL-3.0
Figma Code Connect Componentswarpdotdev/warp65k2 repos~4.2kAutomated safety check: PassAGPL-3.0
Figma Screen Generatorwarpdotdev/warp65k2 repos~5kAutomated safety check: PassAGPL-3.0
Kampsy UIkampsy/ui288—~3.6kAutomated safety check: PassMIT

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

  • Figma use_figma Plugin API Rules

    warpdotdev/warp

    Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.

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

  • Figma Code Connect Components

    warpdotdev/warp

    Maps published Figma components to their code implementations with Code Connect, using the Figma MCP suggestion and mapping tools.

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

  • Figma Screen Generator

    warpdotdev/warp

    Builds or updates full Figma screens from code or a description by reusing the file's published design system components, variables and styles.

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

  • Kampsy UI

    kampsy/ui

    Consumer guide to build UIs with kampsy-ui (Svelte 5 + Tailwind v4, Geist-inspired).

    288 GitHub stars~3.6k tokensUpdated 10 days ago
    Frontend & DesignAuto-check passed

  • Refero Design

    referodesign/refero_skill

    Primary/default skill for UI design, product design, web design, landing pages, dashboards, product screens, redesigns, visual polish, frontend/CSS styling, design systems, components, responsive…

    295 GitHub stars~5.3k tokensUpdated 1 mo ago
    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.

    133 GitHub stars~1.1k tokensUpdated today
    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.

    133 GitHub stars~990 tokensUpdated today
    Auto-check passed

  • Perf Check

    mqtt-viewer/mqtt-viewer

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

    133 GitHub stars~1.6k tokensUpdated today
    Auto-check passed

  • Release

    mqtt-viewer/mqtt-viewer

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

    133 GitHub stars~1.8k tokensUpdated today
    Auto-check passed

  • Ds Add Component

    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.

    133 GitHub stars~936 tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Ds Implement Handover

What does Ds Implement Handover do?

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. Ds Implement Handover is an agent skill from mqtt-viewer/mqtt-viewer.json and stories, and get pnpm ds:validate green.

When should I use Ds Implement Handover?

Ds Implement Handover fits situations like: the user says implement the handover; apply the changes doc; points at a file in frontend/src/design-system/changes/.

How do I install Ds Implement Handover in Claude Code?

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

How do I install Ds Implement Handover in Codex?

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

Can I use Ds Implement Handover 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-implement-handover -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-implement-handover, .gemini/skills/ds-implement-handover, .github/skills/ds-implement-handover and .opencode/skills/ds-implement-handover in your project.

What does Ds Implement Handover need to run?

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

Does Ds Implement Handover 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 Implement Handover 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 Implement Handover use?

Ds Implement Handover 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 Implement Handover use?

About 853 tokens (SKILL.md is roughly 3.4k 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 Implement Handover?

Skills that share tags, products or a category with Ds Implement Handover: Wonder Blocks (Khan/wonder-blocks, 163 stars), Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars), Figma Code Connect Components (warpdotdev/warp, 65k stars) and Figma Screen Generator (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Ds Implement Handover?

mqtt-viewer (a GitHub organization) maintains it in mqtt-viewer/mqtt-viewer, which has 133 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.