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-commandsCreate 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.
Writes AI-optimized docs like README, CLAUDE.md, AGENTS.md, commit messages, PR descriptions using tables, checklists, absolute paths, invariants for cold project starts.