Skip to content
Development
Skill

/gsd-sketch

Sketch UI/design ideas with throwaway HTML mockups, or propose what to sketch next (frontier mode)

From plugin
gsd-core
8k71 skills34 agents71 commands7 hooks
Install
$ npx -y skills add open-gsd/gsd-core --skill gsd-sketch --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/gsd-sketch

Context preview

The summary Claude sees to decide when to auto-load this skill.

Sketch UI/design ideas with throwaway HTML mockups, or propose what to sketch next (frontier mode)

SKILL.md

gsd-sketch.SKILL.md
name: gsd-sketch
description: "Sketch UI/design ideas with throwaway HTML mockups, or propose what to sketch next (frontier mode)"
argument-hint: "[design idea to explore] [--quick] [--text] [--wrap-up] or [frontier]"
allowed-tools:
  - Read
  - Write
  - Edit
  - Bash
  - Grep
  - Glob
  - AskUserQuestion
  - WebSearch
  - WebFetch
  - mcp__context7__resolve-library-id
  - mcp__context7__query-docs

<objective> Explore design directions through throwaway HTML mockups before committing to implementation. Each sketch produces 2-3 variants for comparison. Sketches live in `.planning/sketches/` and integrate with GSD commit patterns, state tracking, and handoff workflows. Loads spike findings to ground mockups in real data shapes and validated interaction patterns.

Two modes:

  • **Idea mode** (default) — describe a design idea to sketch
  • **Frontier mode** (no argument or "frontier") — analyzes existing sketch landscape and proposes consistency and frontier sketches

Does not require prior new-project setup — auto-creates `.planning/sketches/` if needed. </objective>

<execution_context> @~/.claude/gsd-core/workflows/sketch.md @~/.claude/gsd-core/workflows/sketch-wrap-up.md @~/.claude/gsd-core/references/ui-brand.md @~/.claude/gsd-core/references/sketch-theme-system.md @~/.claude/gsd-core/references/sketch-interactivity.md @~/.claude/gsd-core/references/sketch-tooling.md @~/.claude/gsd-core/references/sketch-variant-patterns.md </execution_context>

<runtime_note> **Copilot (VS Code):** Use `vscode_askquestions` wherever this workflow calls `AskUserQuestion`. </runtime_note>

<context> Design idea: $ARGUMENTS

**Available flags:**

  • `--quick` — Skip mood/direction intake, jump straight to decomposition and building. Use when the design direction is already clear.
  • `--wrap-up` — Package sketch design findings into a persistent project skill for future build conversations. Runs the sketch-wrap-up workflow.

</context>

<process> Parse the first token of $ARGUMENTS:

  • If it is `--wrap-up`: strip the flag, execute the sketch-wrap-up workflow end-to-end.
  • Otherwise: execute the sketch workflow end-to-end.

Preserve all workflow gates (intake, decomposition, target stack research, variant evaluation, MANIFEST updates, commit patterns). </process>

Read more
Ships withgsd-core

Git. Ship. Done. A light-weight meta-prompting, context engineering, and spec-driven development system for Claude Code, OpenCode, Antigravity CLI, Kimi CLI, Kilo, Codex, Copilot, Cursor, Windsurf, and more.

Get the whole plugin