plugins/frontend-toolkit/skills/decision-records/SKILL.md
Write RFC and ADR documents to capture technical decisions (including rejected alternatives) — Context / Options / Decision / Consequences format. Use before a hard-to-reverse architecture decision, when designing a large feature, when technical choices spark debate, or when PR reviewers request rationale. Not for evaluating a library to adopt (use new-tech-evaluation) or prioritizing debt migrations (use tech-debt-management) — this records the resulting decision.
npx skillsauth add jaykim88/claude-ai-engineering decision-recordsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Make technical decisions auditable. The "why we chose X" should not require asking the engineer who chose it — it should be retrievable from the repo.
Universal — RFC/ADR format is framework-agnostic; only the types of decisions worth recording vary slightly per stack.
Pick the format: RFC vs ADR
tech-debt-management). Reserve records for significant, contested, or hard-to-reverse decisions; trivial/local choices need only a code comment or the PR description. Keep each to ~1 page.Use the standard ADR template (Nygard) for simple, decided-by-conversation calls
# ADR-NNN: <decision title>
**Status**: Proposed / Accepted / Rejected / Deprecated / Superseded by ADR-XXX
**Date**: YYYY-MM-DD
**Deciders**: <who made the call>
## Context
What problem prompts this decision? Constraints, requirements, who's affected.
## Decision
We chose X.
## Consequences
- Positive: <gains>
- Negative: <costs / risks>
For decisions with 3+ real alternatives, prefer MADR (Markdown Architectural Decision Records) — adds explicit decision drivers and per-option pros/cons evaluation:
# ADR-NNN: <decision title>
## Status: Accepted | Date: YYYY-MM-DD
## Context and Problem Statement
## Decision Drivers
- Driver 1, Driver 2, ...
## Considered Options
- Option A: pros / cons
- Option B: pros / cons
- Option C: pros / cons
## Decision Outcome
Chosen option: "B", because <evaluation summary>.
## Consequences
For frontend specifically, the high-leverage ADR types (universal across React/Vue/Svelte/Angular)
state-management-decisionsrender-strategy-decisionform-uxLink decisions back to code
// See ADR-007 for why we use Zustand here, not Contextfeat(state): migrate user profile to Zustand [ADR-007]Treat ADRs as living documents
Make ADRs accessible
docs/adr/ directory in the repodocs/adr/README.md) listing all ADRs with one-line summariesWrite for the absent reader
docs/adr/README.mddocs/adr/ADR-NNN-<kebab-case-topic>.md following Nygard (simple) or MADR (3+ alternatives) templatedocs/adr/README.md — - [ADR-NNN: <title>](ADR-NNN-<topic>.md) — <status> — <one-line summary>// See ADR-NNN for rationale at affected decision pointsdocs(adr): ADR-NNN <title> — keep ADR additions in their own commit, separate from code changes that reference them## Notes subsection with date + reason (don't delete old ADRs)docs/adr/ (or docs/architecture/decisions/)ADR-001, ADR-002, ...)// See ADR-007 for rationaleadr-tools or log4brains automate numbering + index generation; otherwise keep it manualnew-tech-evaluation — every adoption/rejection of a library produces an ADRtech-debt-management — large debt migrations need an ADR for the chosen approachdevelopment
Audit and optimize third-party scripts — analytics, tag managers, chat widgets, embeds — with the right loading strategy, performance budget, facades, and CSP/consent controls. Use when adding a script, when TBT/INP regress, when a GDPR/CCPA consent requirement arises, or before shipping. Not for first-party bundle size (use bundle-optimization) or broad Core Web Vitals diagnosis (use rendering-performance).
development
Apply the Testing Trophy (mostly integration tests with RTL + MSW, sparing E2E with Playwright) and set coverage thresholds. Use before new feature work, after bug fixes, when CI coverage falls below target, or when tests are flaky or break on every refactor. Not for wiring coverage gates + Playwright into the GitHub Actions matrix (use cicd-pipeline) or auditing WCAG a11y compliance (use accessibility-audit).
development
Inventory and prioritize technical debt — TODO/FIXME/HACK, any usage, deprecated APIs, untested logic — with impact × effort matrix. Use at quarter start, before a refactoring sprint, when a new teammate joins, or when feature velocity slows. Not for actually paying down debt (use code-refactoring) or recording a migration approach (use decision-records) — this only inventories and prioritizes.
development
Decision framework for choosing the right state location — URL, server cache, local component, or shared/global store. Use when state-sync bugs appear, prop drilling gets deep (3+ levels), filters/tabs lose state on reload, or quarterly review. Not for form state specifically (use form-ux) or when the state is actually server data (use api-caching-optimization).