Skip to content

Skills

Skills are the slash commands you type in the embedded terminal to drive the pipeline. Seven ship in every Denote project, one per layer of the pipeline: /vision, /extract, /map, /structure, /layout, /style, /generate-plan. Each skill is a plain Markdown file at .claude/commands/<name>.md inside your project. Claude Code loads the file, reads its instructions, and runs the skill.

Layer skills

These seven skills move the design pipeline forward. Each reads the layers above it and writes one or more files in design/.

/vision

Have a natural conversation about the product idea and propose Vision items as they emerge.

Reads: design/vision.json (if it exists, to merge and preserve confirmed items) plus any conversation context you bring.

Writes: design/vision.json.

Use when: you are starting a project, or returning to refine goals, constraints, audience, or open questions.

See Vision.

/extract

Extract entities, personas, and tasks from the product description. Write structured JSON that Denote renders as cards and graphs.

Reads: design/vision.json (the foundation), plus design/intent.json, design/entities.json, design/personas.json, design/tasks.json if they exist.

Writes: design/intent.json, design/entities.json, design/personas.json, design/tasks.json.

Use when: Vision is populated and you want the semantic model pulled out, or when the model needs refinement after a Vision change.

See Extract.

/map

Analyze the extracted model and generate governance decisions. Visual cues, pattern assignments, mental models, priority rules.

Reads: design/intent.json, design/entities.json, design/personas.json, design/tasks.json, design/governance.json (if it exists).

Writes: design/governance.json.

Use when: Extract is populated and you want governance committed, or when Extract has changed and Map needs to catch up.

See Map.

/structure

Turn governance decisions into a concrete page architecture. Page inventory, hierarchy, navigation flow.

Reads: all Extract files, design/governance.json, design/architecture.json (if it exists, to preserve hand-placed positions).

Writes: design/architecture.json.

Use when: Map is populated and you want the page inventory derived, or when pattern assignments have changed.

See Structure.

/layout

Define the spatial arrangement. Global shells, per-page region wireframes, surface patterns.

Reads: design/architecture.json, design/governance.json, design/tasks.json, design/layout.json (if it exists).

Writes: design/layout.json.

Use when: Structure is populated and you want the region arrangements drawn, or when Structure has added or removed pages.

See Layout.

/style

Capture the aesthetic direction and the token source pointer.

Reads: design/aesthetic.json (if it exists).

Writes: design/aesthetic.json.

Use when: you want to record the visual feel, pick references, set density, or change the token source mode. The Style slash command corresponds to the design system pointer, which lives in Project Settings rather than as a layer.

See The design system pointer.

/generate-plan

Assemble every upstream decision into a single build plan Claude Code can execute.

Reads: every file under design/, plus the external token source file when the aesthetic points at one.

Writes: design/plan.md.

Accepts: prototype or production as an argument to set build ambition. If omitted, the skill infers from Vision or asks once.

Use when: you are ready to hand off to the build, or when upstream layers have changed enough that the plan is stale.

See Plan.

Build workflow commands (not scaffolded into projects)

Denote's own source tree includes three additional slash commands, /design-build, /critique, and /design-audit, used while building Denote itself. These are intentionally not copied into user projects. They operate on code, not on design files, and are specific to the Denote codebase.

If you are extending Denote's source or adapting its build workflow for your own product, you can model similar commands in your project's .claude/commands/ directory. See Writing your own intelligence for the authoring format.

Where skills live

Each slash command is one Markdown file at .claude/commands/<name>.md. The file contains the prompt instructions Claude Code executes when you type the command.

The commands call into additional reasoning modules under intelligence/skills/ and agent definitions under intelligence/agents/. These modules hold the deeper methodology; the commands are the short invocation wrappers that route work to them.

This three-level structure (commands → skills → agents) exists so you can edit any layer independently. You can tweak a command's prompt without touching the underlying skill. You can revise a skill's methodology without touching the commands that call it. You can rewrite an agent without disturbing the skills that reference it.

Skills run against the current project

Slash commands are project-scoped. Each project has its own .claude/commands/ directory, seeded from Denote's defaults when the project is created. Edits to a project's commands only affect that project.

Denote-wide changes to the default command set only affect projects created in the future. Existing projects keep the copy they were seeded with.

What skills don't do

  • Skills don't own data. They write to design/ files that are authoritative. If a skill is wrong, you edit the file it wrote.
  • Skills don't coordinate with each other directly. Coordination happens through the file contract. /structure reads what /map wrote. It does not call /map.
  • Skills are not required. You can author every design file by hand. The skills exist to accelerate, not to gate.

Where to next