Author a new Design System Doc Spec (DSDS) spec from component implementation, Figma design, or written requirements.

Apache-2.0Auto-check passedFrontend & Design

Install Dsds Add

skills CLI
$ npx skills add somerandomdude/design-system-documentation-schema --skill dsds-add -a claude-code

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

GitHub CLI
$ gh skill install somerandomdude/design-system-documentation-schema dsds-add --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/somerandomdude/design-system-documentation-schema.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/dsds-add .claude/skills/dsds-add && 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
dsds-add
GitHub stars
114
Token cost
~1.7k tokens
SKILL.md length
718 words
Files
1
Skills in repo
4
Repo updated
First seen
Licence
Apache-2.0

At a glance

Author a new Design System Doc Spec (DSDS) spec from component implementation, Figma design, or written requirements.

  • Works in 7 steps: Determine entry kind: component, token,… → Gather inputs — read the source… → Create {directory}/{id}.dsds.yaml using… → …
  • Spec from component
  • SKILL.md covers Procedure, File Placement, Template (Component) and Sections to Include (Components), plus 3 more sections
  • Calls npx; reaches designsystemdocspec.org

What it does

Dsds Add is an agent skill from somerandomdude/design-system-documentation-schema. Author a new Design System Doc Spec (DSDS) spec from component implementation, Figma design, or written requirements. Triggers on "add spec", "create spec", "new spec", "author spec", "spec from component", "spec from Figma".

Its SKILL.md is about 1.7k 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. The licence is Apache-2.0.

When your agent uses it

  • Spec from component
  • Spec from Figma

Example prompts

  • “add spec”
  • “create spec”
  • “new spec”
  • “/dsds-add”

Requirements

  • Node.js

Workflow steps

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

  1. Determine entry kind: component, token, theme, or the generic entry kind (for a foundation, pattern, guide, or anything else — use a…
  2. Gather inputs — read the source (component source code, Figma frame, requirements doc).
  3. Create {directory}/{id}.dsds.yaml using the template below.
  4. Add a refs entry (rel: file) in index.dsds.yaml pointing at the new file.
  5. Run npx dsds-validate {directory}/{id}.dsds.yaml — fix errors until it passes. Run npx dsds-lint {directory}/{id}.dsds.yaml for advisory…
  6. Keep the template's field order. It follows the style guide, which asks you to write an entry's fields in the order the schema files list…
  7. If your project generates its own index or catalog from these documents, regenerate it now.

What it can do on your machine

Read from SKILL.md and the folder at commit 52790fe. 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:

    • npx

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

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • designsystemdocspec.org

    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

Dsds Add loads about 1.7k tokens when it runs. Until then it costs about 59 tokens; SKILL.md has 718 words of instructions outside code blocks.

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

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 somerandomdude/design-system-documentation-schema at commit 52790fe, republished under its Apache-2.0 licence (© somerandomdude). 718 words, ~1,732 tokens.

Download SKILL.mdSave it as .claude/skills/dsds-add/SKILL.md (or your agent's skills folder).
name
dsds-add
description
Author a new Design System Doc Spec (DSDS) spec from component implementation, Figma design, or written requirements. Triggers on "add spec", "create spec", "new spec", "author spec", "spec from component", "spec from Figma".
metadata.version
0.21.2

Add a DSDS Spec

Create a new standalone .dsds.yaml entry file in your project's documentation directory (see File Placement below for where a given kind lives).

Procedure

  1. Determine entry kind: component, token, theme, or the generic entry kind (for a foundation, pattern, guide, or anything else — use a namespaced custom kind like acme.icon-library instead if the document wants its own recognizable name).
  2. Gather inputs — read the source (component source code, Figma frame, requirements doc).
  3. Create {directory}/{id}.dsds.yaml using the template below.
  4. Add a refs entry (rel: file) in index.dsds.yaml pointing at the new file.
  5. Run npx dsds-validate {directory}/{id}.dsds.yaml — fix errors until it passes. Run npx dsds-lint {directory}/{id}.dsds.yaml for advisory documentation-quality warnings.
  6. Keep the template's field order. It follows the style guide, which asks you to write an entry's fields in the order the schema files list them — so the guide and the schema are the only two places that order lives, and this skill doesn't keep a third copy. Order never affects validity: npx dsds-validate won't mention it, and npx dsds-lint reports it as an advisory warning (DSDS-17–DSDS-23), never a failure.
  7. If your project generates its own index or catalog from these documents, regenerate it now.

File Placement

KindDirectory
componentcomponents/
tokentokens/
themethemes/
entry (foundation)foundations/
entry (pattern)patterns/
entry (guide)guides/

Template (Component)

yaml
kind: component
id: <filename-without-extension>
name: <PascalCase>
description: <one-sentence summary>

metadata:
  tags: [<action|feedback|form|disclosure|overlay|navigation|layout>]
  since: <version>
  status: {status: draft}

sections:
  - kind: guidelines
    for: all
    framing: when-to-use
    items:
      - level: should
        statement: <when this component is the right choice>
  - kind: guidelines
    for: all
    items:
      - level: must
        statement: <a rule for using it correctly>
        checkedBy: manual

sourceFiles:
  - platform: <react|web-component|...>
    file: <path to the real source file>

imports:
  - platform: <react|web-component|...>
    code: <import statement, written out>
    package: <package name>

traits:
  - traitType: variant
    kind: enum
    id: <the real prop or attribute name>
    description: <what this dimension controls>
    values:
      - id: <value name, as the API spells it>
        description: <what this value is for>

Sections to Include (Components)

Include at minimum: a guidelines section (framing: how-to-use, the default) covering usage rules and accessibility requirements. Add traits (top-level, not a section) for variants/states, a guidelines section with framing: when-to-use for fit judgments, and a definitions section for props/anatomy only when there's no real source file to point sourceFiles at instead. Add a for: agent section for firm rules an agent needs but a person wouldn't.

When a section has a recognizable job, say so in context (anatomy, terms, keyboard, events) rather than relying on its title — that's the field a tool reads to find the anatomy table. Tag a single-subject section with tags ([accessibility]) and place it after the broader sections on the same entry.

Show full SKILL.md (375 more words)Show less

Extraction Guidelines

  • From code: Point sourceFiles at the real file instead of hand-typing props — that's the whole point of the field. If your build already generates an API contract (a Custom Elements Manifest, a DS Contracts document), point specs at that generated document too, with rel: contract. Map variant/state props → traits, each tagged traitType: variant or traitType: state, with kind: enum or kind: boolean for the form its value takes. Give each trait the real prop or attribute name as its id, in whatever case the API uses — isDisabled stays isDisabled. Map CSS parts or named sub-elements → a definitions section with context: anatomy.
  • From Figma: Map component properties → traits, layer structure → a definitions section with context: anatomy, variable bindings → token refs. A Figma variable's own name is a valid token id as written, slashes and capitals included.
  • From requirements: Map acceptance criteria → guidelines items (level from RFC 2119: must/should/should-not/must-not/may), interaction requirements → a definitions section with context: keyboard (term = key, definition = action).

When a guideline claims checkedBy: automated, checks must point at what runs the check: rel: test, rel: lint-rule, or rel: agent-test (a fixture that runs an AI agent against the guideline and grades its output). Prefer checkedBy: assisted with an agent-test, whose result is usually a pass rate rather than a strict pass/fail.

Schema References

When unsure about fields or required properties, consult:

  • Bundled schema: https://designsystemdocspec.org/v0.21.2/dsds.bundled.schema.json (or node_modules/design-system-documentation-schema/schema/dsds.bundled.schema.json if DSDS is installed as a dependency)
  • One entry kind's fields: /schema/entries-<kind>.md on this site — a few KB of field names, types, requiredness and descriptions for that kind alone, in the order the schema declares them. Prefer it over the whole bundle when you need one shape: entries-component.md.
  • One section kind's fields: /schema/sections-<kind>.md — for example sections-guidelines.md.
  • The same content for a human reader: one Schema page anchor per definition, such as /schema#entries-component.
  • Quick start examples: https://designsystemdocspec.org/quickstart

Gotchas

  • id must match the filename (e.g. checkbox → checkbox.dsds.yaml).
  • A component's sourceFiles, specs, imports, traits, and combos are top-level fields on the entry, never inside a section.
  • Every trait requires traitType. kind answers a different question and never substitutes for it. A trait carries no other classification field.
  • Use RFC 2119 levels in guidelines: must, should, should-not, must-not, may.
  • metadata.status is always an object ({status: "draft"}), never a bare string.

© somerandomdude, Apache-2.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 .agents/skills/dsds-add of somerandomdude/design-system-documentation-schema.

Open the folder on GitHubat commit 52790fe

Compare with similar skills

Dsds Add 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.

Dsds Add compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Dsds Add this skillsomerandomdude/design-system-documentation-schema114—~1.7kAutomated safety check: PassApache-2.0
Figma Design System Builderwarpdotdev/warp65k2 repos~4.4kAutomated safety check: PassAGPL-3.0
Figma use_figma Plugin API Ruleswarpdotdev/warp65k4 repos~4.4kAutomated safety check: PassAGPL-3.0
Figma Design System Rules Generatorwarpdotdev/warp65k3 repos~4.6kAutomated safety check: PassAGPL-3.0
Figma Code Connect Componentswarpdotdev/warp65k2 repos~4.2kAutomated safety check: PassAGPL-3.0
Cc DesignZeroZ-lab/cc-design827—~2.2kAutomated safety check: NotesNone

Similar skills

  • 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
  • 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
  • Creates project-specific design system rules from your codebase so coding agents implement Figma designs with your components, naming and tokens.

    65k GitHub starsUsed in 3 repos~4.6k tokens
    Frontend & DesignAuto-check passed
  • 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
  • Cc Design

    ZeroZ-lab/cc-design

    High-fidelity HTML design and prototype creation. An agent skill from ZeroZ-lab/cc-design.

    827 GitHub stars~2.2k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check: notes
  • Visual Style

    calesthio/OpenMontage

    Create, extract, and apply portable visual design systems via visual-style.md files.

    65k GitHub stars~1.5k tokensUpdated 5 days ago
    Frontend & DesignAuto-check passed

More from somerandomdude/design-system-documentation-schema

  • Dsds Specs

    somerandomdude/design-system-documentation-schema

    Everything about Design System Doc Spec (DSDS) — entry kinds, sections, schema structure, and how it fits into the ecosystem.

    114 GitHub stars~2.8k tokensUpdated yesterday
    Auto-check passed
  • Dsds Validate

    somerandomdude/design-system-documentation-schema

    Validate DSDS specs against the bundled schema and check for consistency issues.

    114 GitHub stars~1.3k tokensUpdated yesterday
    Auto-check passed
  • Dsds Update

    somerandomdude/design-system-documentation-schema

    Update an existing DSDS spec based on implementation changes, Figma updates, or written instructions.

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

Works with

Questions about Dsds Add

What does Dsds Add do?

Author a new Design System Doc Spec (DSDS) spec from component implementation, Figma design, or written requirements. Dsds Add is an agent skill from somerandomdude/design-system-documentation-schema. Author a new Design System Doc Spec (DSDS) spec from component implementation, Figma design, or written requirements.

When should I use Dsds Add?

Dsds Add fits situations like: spec from component; spec from Figma.

How do I install Dsds Add in Claude Code?

Run `npx skills add somerandomdude/design-system-documentation-schema --skill dsds-add -a claude-code`. Or copy the skill folder (.agents/skills/dsds-add in somerandomdude/design-system-documentation-schema) into .claude/skills/dsds-add in your project. Claude Code loads it when a task matches its description.

How do I install Dsds Add in Codex?

Run `npx skills add somerandomdude/design-system-documentation-schema --skill dsds-add -a codex`. Or copy the skill folder (.agents/skills/dsds-add in somerandomdude/design-system-documentation-schema) into .agents/skills/dsds-add in your project. Codex loads it when a task matches its description.

Can I use Dsds Add 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 somerandomdude/design-system-documentation-schema --skill dsds-add -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/dsds-add, .gemini/skills/dsds-add, .github/skills/dsds-add and .opencode/skills/dsds-add in your project.

What does Dsds Add need to run?

Going by SKILL.md and its folder, Dsds Add needs the command-line tools its instructions call (npx). Our summary lists: Node.js.

Does Dsds Add access the network?

SKILL.md names 1 domain. In commands or code: designsystemdocspec.org; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Dsds Add 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 Dsds Add use?

Dsds Add is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Dsds Add use?

About 1.7k tokens (SKILL.md is roughly 6.9k 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 Dsds Add?

Skills that share tags, products or a category with Dsds Add: Figma Design System Builder (warpdotdev/warp, 65k stars), Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars), Figma Design System Rules Generator (warpdotdev/warp, 65k stars) and Figma Code Connect Components (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 Dsds Add?

somerandomdude (a GitHub user) maintains it in somerandomdude/design-system-documentation-schema, which has 114 GitHub stars. The repository holds 4 skills in this directory. The repository was last updated on October 7, 2026.

Source: somerandomdude/design-system-documentation-schema on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.