Develop design rationale
Skill product-on-purpose/pm-skills/skills/develop-design-rationale
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.From its SKILL.md
npx -y skills add product-on-purpose/pm-skills --skill develop-design-rationaleAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
What its file declares
Copied from the file, not written here
The file declares its own license as Apache-2.0. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
4.0 KB, 695 tokens by cl100k_base, as published. Nobody here has run it
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:
-
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.
-
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.
-
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.
-
Define Evaluation Criteria Specify how options were assessed: usability heuristics, technical feasibility, brand alignment, user research findings, business requirements, or design principles.
-
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.
-
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.
-
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.
What ships with it: 4 files
18.0 KB alongside SKILL.md
evals/
- trigger-fixtures.json4.0 KB
references/
- EXAMPLE.md9.0 KB
- TEMPLATE.md4.2 KB
- HISTORY.md731 B
Gives 0 of the 12 instructions most design frontend skills give in 695 tokens
Counted across 1,179 of the 2,086 authors here whose files we hold, read 2026-09-06
- Commit to a bold aesthetic directionin 31 of 1179, across 24 files
- Prefer component composition over inheritancein 28 of 1179, across 14 files
- Animate only transform and opacity propertiesin 27 of 1179, across 22 files
- Memoize expensive computations with useMemoin 26 of 1179, across 13 files
- Use semantic HTML elementsin 24 of 1179, across 23 files
- Virtualize long lists for performancein 21 of 1179, across 10 files
- Use CSS variables for design tokensin 20 of 1179, across 14 files
- Implement loading, empty, and error statesin 20 of 1179
- Lazy load heavy components with Suspensein 19 of 1179, across 8 files
- Respect prefers-reduced-motion media queriesin 18 of 1179, across 10 files
- Prioritize CSS-only animations for HTMLin 18 of 1179, across 16 files
- Use compound components for related UI elementsin 18 of 1179, across 7 files
Said here and by no other author read
- Describe the context and problem being solved
- List at least two alternatives considered
- Define criteria used to evaluate options
- Note follow-up considerations and metrics
- Use the provided template for the output
Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.