Stats
Actions
Tags
From claude-commands
Generates HTML and Markdown design docs for a feature or PR, matching the repo's existing design doc style. Always produces both formats in parallel.
How this skill is triggered — by the user, by Claude, or both
Slash command
/claude-commands:designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate a design reference doc for the current feature or PR.
Generate a design reference doc for the current feature or PR.
Always produce both HTML and MD in parallel — this is the core contract of this skill.
Understand the feature — read relevant source files, PR description, roadmap/plan docs.
Check existing style — look in docs/design/ for .html files. Match CSS variables, card/grid layout, section patterns exactly.
Determine slug — use the feature/PR name as a kebab-case slug (e.g. autonomy-gaps, agent-gemini-plugin).
Write both files in parallel (single message, two Write tool calls):
docs/design/<slug>.htmldocs/design/<slug>.mdHTML structure (match docs/design/agent-gemini-plugin.html as canonical reference):
--bg #f2efe7, --panel #fffdf8, --ink #1f1a16, --muted #6f6357, --brand #165a72, --line #dfd3c2section-label dividers: before/after code blocks, tables, flow diagrams.callout with honest capability claim.grid.two, .grid.three, .grid.four breakpoint at 900pxMD structure:
--- dividers between major sectionsCommit both to the current branch and push.
/design
With slug override:
/design my-feature-name
npx claudepluginhub jleechanorg/claude-commands --plugin claude-commandsStructures requirements, design, architecture, decisions, and unresolved issues into a review-ready HTML design document. Processes review comments and replies within the HTML.
Create rich HTML documents for project specs, implementation plans, design exploration, RFCs, and brainstorming. Use whenever the user asks for a spec, plan, RFC, design doc, brainstorm, or wants to explore approaches/options/alternatives — even when they don't explicitly say "HTML". Strongly prefer HTML over markdown for any planning artifact longer than a screen, especially when the artifact will be shared with reviewers or fed back to the agent for implementation.
Documents design decisions with a structured DESIGN.md format — rationale, visual specs, component inventory, and decision logs. Useful for design handoff, onboarding, and resolving recurring debates.