develop-design-rationale — Claude Code skill: setup and usage
Captures the reasoning behind UX choices, evaluated alternatives, and accepted trade-offs. Useful before design reviews and stakeholder alignments.
npx skills add product-on-purpose/pm-skills --skill develop-design-rationale -a claude-codeWhat develop-design-rationale does
This skill structures the documentation of design decisions. It preserves institutional context: why a specific interface option was selected, what constraints guided the team, and what trade-offs were accepted. Output follows the structure from references/TEMPLATE.md, covering context, evaluation criteria, reversibility, and follow-up metrics.
The workflow follows seven clear steps. The agent begins by summarizing the decision in one sentence. It then outlines the background and at least two or three real alternatives. Next, it grades options against defined criteria and justifies why the winning approach was chosen.
For low-stakes, easily reversible UI tweaks, drafting a full rationale creates unnecessary overhead. Technical and architectural decisions also belong elsewhere — the author specifies develop-adr for technology selection instead.
What it helps with
- document the reasoning behind major UX decisions
- compare two or three interface alternatives fairly
- record accepted trade-offs and reversibility status
- retain design context to onboard incoming team members
Example prompts for the agent
- Document the design rationale for replacing the accordion filter with a slide-over panel
- Run develop-design-rationale to justify our new navigation pattern before the stakeholder review
How to install develop-design-rationale
1Skills CLI (Vercel)
npx skills add product-on-purpose/pm-skills --skill develop-design-rationale -a claude-code2Manually: put the files in place
~/.claude/skills/develop-design-rationale/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/develop-design-rationale/
1Skills CLI (Vercel)
npx skills add product-on-purpose/pm-skills --skill develop-design-rationale -a codex2Manually: put the files in place
.agents/skills/develop-design-rationale/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add product-on-purpose/pm-skills --skill develop-design-rationale -a cursor2Manually: put the files in place
.cursor/skills/develop-design-rationale/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install product-on-purpose/pm-skills develop-design-rationale2Manually: put the files in place
.github/skills/develop-design-rationale/SKILL.md1Skills CLI (Vercel)
npx skills add product-on-purpose/pm-skills --skill develop-design-rationale -a gemini-cli2Platform CLI
gemini skills install https://github.com/product-on-purpose/pm-skills --path skills/develop-design-rationaleManually: put the files in place
.devin/skills/develop-design-rationale/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add product-on-purpose/pm-skills --skill develop-design-rationale -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about develop-design-rationale
How to install develop-design-rationale in Claude Code?
Run npx skills add product-on-purpose/pm-skills --skill develop-design-rationale -a claude-code. The tool adds the skill directly to your Claude Code environment.
What does develop-design-rationale do?
It creates a structured design rationale document based on references/TEMPLATE.md. The document captures context, alternatives considered, decision reasoning, and follow-up metrics.
When should you avoid this skill?
Do not use it for architecture or technology choices, where develop-adr is required instead. It is also unsuitable for trivial, easily reversible tweaks where recording notes in a ticket is sufficient.
Source text
SKILL.md · Apache-2.0
--- name: develop-design-rationale description: Documents the reasoning behind design decisions including alternatives considered, trade-offs evaluated, and principles applied. Use when making significant UX decisions, aligning with stakeholders on design direction, or preserving design context for future reference. license: Apache-2.0 metadata: phase: develop version: "2.1.0" updated: 2026-06-10 category: specification frameworks: [triple-diamond, lean-startup, design-thinking] author: product-on-purpose --- <!-- PM-Skills | https://github.com/product-on-purpose/pm-skills | Apache 2.0 --> # Design Rationale A design rationale document captures the "why" behind design decisions.the context, constraints, alternatives considered, and reasoning that led to a particular solution. While designs themselves show what was built, rationale documents preserve institutional knowledge about why it was built that way. ## When to Use - When making significant UX decisions that affect user experience - Before design reviews to prepare stakeholder discussions - When multiple valid approaches exist and the choice needs justification - To onboard new team members to existing design decisions - When revisiting past decisions to understand original reasoning - During design system evolution to document pattern choices ## When NOT to Use - The decision is architectural or a technology selection -> use `develop-adr` (Nygard format) - You need stakeholder alignment on the overall solution direction -> use `develop-solution-brief` - You are documenting exploration findings rather than a decision -> use `develop-spike-summary` - The decision is trivially reversible and low-stakes: a rationale document adds ceremony; record the reasoning in the PR or ticket instead ## Instructions When asked to document design rationale, follow these steps: 1. **State the Decision** Begin with a clear, one-sentence summary of what design decision was made. This becomes the title and reference point for the document. 2. **Describe the Context** Explain the situation that prompted this decision. What problem were you solving? What constraints existed? What user needs informed the direction? Include relevant research findings. 3. **List Options Considered** Document at least 2-3 alternatives that were evaluated. For each option, describe what it would look like and its key characteristics. Be fair to all options.avoid strawmen. 4. **Define Evaluation Criteria** Specify how options were assessed: usability heuristics, technical feasibility, brand alignment, user research findings, business requirements, or design principles. 5. **Explain the Reasoning** Walk through why the chosen option best meets the criteria. Be explicit about trade-offs.what you gained and what you sacrificed. Acknowledge where the decision is reversible vs. irreversible. 6. **Document Trade-offs Accepted** Every design decision involves trade-offs. Name what you gave up and why it was acceptable. This honesty helps future teams understand constraints. 7. **Note Follow-up Considerations** Capture anything that needs attention later: metrics to watch, conditions that might warrant revisiting the decision, or related decisions to make. ## Output Format Use the template in `references/TEMPLATE.md` to structure the output. A complete rationale fills every template section: Decision Summary; Context; Options Considered; Evaluation; Decision Rationale; Trade-offs Accepted; Reversibility; Follow-up Considerations; Supporting Materials; and Decision History. ## Quality Checklist Before finalizing, verify: - [ ] Decision is clearly stated in one sentence - [ ] Context explains the "why now" and constraints - [ ] Multiple alternatives are documented fairly - [ ] Evaluation criteria are explicit - [ ] Reasoning addresses why chosen option beats alternatives - [ ] Trade-offs are honestly acknowledged - [ ] A reader who inherits this design can reconstruct why the chosen option won without asking anyone ## Examples See `references/EXAMPLE.md` for a completed example.
© product-on-purpose · Apache-2.0 · product-on-purpose/pm-skills