Skip to content

Skills

Skills are the slash commands you type in the embedded terminal to drive the pipeline. Six ship in every Denote project — one per layer, one for the Spec hand-off, and one for ad-hoc design critique. Each is a plain Markdown file at .claude/commands/<name>.md inside your project. Claude Code loads the file, reads its instructions, runs the command.

Pipeline skills

These five 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) + any conversation context you bring.
  • Writes: design/vision.json.
  • Use when: starting a project, or returning to refine goals, constraints, audience, or open questions.

See Vision.

/ontology

Pull entities, personas, tasks, and rules out of the Vision. Fire visual cues inline on each entity.

  • Reads: design/vision.json + design/ontology.json if it exists (merges, preserves IDs).
  • Writes: design/ontology.json — a single file containing intent + entities + personas + tasks + priority rules.
  • Use when: Vision is populated and you want the semantic model pulled out, or when the model needs refinement after a Vision change.

See Ontology.

/architecture

Derive the screen inventory and navigation from the Ontology. Pick a template + variant per screen.

  • Reads: design/ontology.json + design/vision.json + design/architecture.json if it exists.
  • Writes: design/architecture.json (top-level screens[] + edges[]). Also writes task.screenTouchpoints[] back into ontology.json.
  • Use when: Ontology is populated and you want screens derived, or when Ontology has changed.

See Architecture.

/screens

Compose each screen at chip fidelity. Pick shells, fill zones with content chips, set global overlays.

  • Reads: design/architecture.json + design/ontology.json + design/screens.json if it exists.
  • Writes: design/screens.json (top-level shells[] + compositions[] + globalOverlays[]).
  • Use when: Architecture is populated and you want compositions drawn, or when Architecture has added/removed screens.

See Screens.

/spec

Project every upstream decision into a single design specification an implementer can build from.

  • Reads: every file under design/ (vision.json, ontology.json, architecture.json, screens.json).
  • Writes: design/SPEC.md.
  • Behavior: regenerates fully each run — previous SPEC.md is overwritten. Stays in design vocabulary (entities, states, templates, zones), not engineering vocabulary (tables, endpoints, routes). Tech-stack decisions belong to the implementer.
  • Use when: ready to hand off to the build, or when upstream layers have changed enough that the spec is stale.

See Spec.

Other project-scoped commands

/critique

Run a design critique on recently changed UI code, or on a specific set of files. Spawns the Design Critic agent, which evaluates the work against the visual-design knowledge files (visual hierarchy, typography, spacing, color, design-tool patterns) and returns structural failures and craft refinements.

  • Reads: the code you're critiquing + the Design Critic agent definition + relevant visual-design knowledge files.
  • Writes: nothing — output is feedback in the terminal.
  • Use when: you've built UI and want a quality check before committing.

Build workflow commands (not scaffolded into projects)

Denote's own source tree includes additional slash commands like /design-build 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're extending Denote's source or adapting its build workflow for your own product, model similar commands in your project's .claude/commands/. See Writing your own intelligence.

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 deeper reasoning modules under intelligence/skills/ (the reusable methodology — object-model, flow-mapping, ia-audit, product-spec, critique, visual-critique, design-system-audit) and agent definitions under intelligence/agents/. Commands are the short invocation wrappers; skills and agents hold the deeper methodology.

The three-level structure (commands → skills → agents) lets you edit any layer independently:

  • Tweak a command's prompt without touching the underlying skill.
  • Revise a skill's methodology without touching the commands that call it.
  • 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 — and may be overwritten on the next project open, since .claude/commands/ can be re-scaffolded.

For edits that need to persist, customize the underlying skill or knowledge file under intelligence/ instead. Those are preserved across project opens.

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

  • Don't own data. They write to design/ files that are authoritative. If a skill is wrong, edit the file it wrote.
  • Don't coordinate with each other directly. Coordination happens through the file contract. /architecture reads what /ontology wrote — it doesn't call /ontology.
  • Not required. You can author every design file by hand. The skills exist to accelerate, not to gate.

Where to next