skills/design-doc/SKILL.md
Synthesize design discussions into a complete design document with agent-ready user stories. Use when asked to write a design doc, produce a design document, create a PRD, plan a feature, or turn a discussion into a spec.
npx skillsauth add eho/agent-skills design-docInstall 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.
Synthesize a design discussion into a complete, structured design document with agent-ready user stories. The design sections capture the technical context — architecture, data contracts, integration points. The user stories are the primary deliverable: each one is grounded in the design work and precise enough for an AI agent to implement without asking follow-up questions.
rg/file search first) to find relevant existing files, architectural patterns, and verify integration points. Do not guess file paths.Before asking anything, mine the conversation for:
Crucially, explore the codebase:
docs/vision/vision.md (or equivalent) if it exists — this is the lens through which all design choices should be evaluated. If the design conflicts with the vision, surface it in Open Questions.If the conversation and your codebase exploration cover most elements, proceed to writing. Only ask about genuinely unresolved gaps.
Ask only what is truly missing and necessary to write a complete doc. Batch questions into a single message. Don't ask about things that can be reasonably inferred from the conversation or discovered via codebase search.
Good candidates for questions:
Bad candidates (skip these — infer from context):
If you have 3 or fewer questions, ask them directly. If more, prioritize the most blocking ones.
Use lettered options when the answer space is known so the user can respond quickly (e.g., "1A, 2C, 3B"). If the answer space is open-ended, ask a concise open question instead.
1. What is the primary goal?
A. Improve user onboarding experience
B. Increase user retention
C. Reduce support burden
D. Other: [please specify]
2. What is the scope?
A. Minimal viable version
B. Full-featured implementation
C. Just the backend/API
D. Just the UI
Use the structure below. Every section is required except Vision Alignment, which is included only when a vision source exists. If a required section genuinely doesn't apply, include it with a one-line explanation of why it was omitted rather than silently skipping it.
Write concretely — use real names, exact file paths, strict data structures, and examples from the discussion and codebase. Avoid abstract prose when specifics are available. This document must be highly actionable for an AI agent to implement.
# [Feature / System Name]
**Author:** [from context or leave blank]
**Date:** [today's date]
**Status:** Draft
---
## Problem Statement
[What's broken, missing, or painful today? Concrete — not "we want to add X." Answer: what happens without this?]
---
## Goals
1. [Specific, measurable goal]
2. ...
---
## Non-Goals
- [Explicit out-of-scope items and why]
---
## Success Metrics
[How will we know this succeeded? Quantifiable where possible: latency targets, error rate reduction, adoption numbers.]
---
## Design Principles
[Named principles that guided decisions and can serve as tie-breakers for future ambiguity. e.g., "Fail fast over silent degradation."]
---
## Vision Alignment
[If a vision doc exists: 2–4 sentences explaining how this design advances the product vision. Name the specific vision goals or principles it supports. If any aspect of the design is in tension with the vision, state it explicitly and explain why the tradeoff is justified. If no vision doc exists, omit this section.]
---
## Alternatives Considered
### [Option A]
[Description] — **Rejected because:** [reason]
### [Option B]
[Description] — **Rejected because:** [reason]
---
## Architecture Overview
[Component diagram (ASCII) or component list. Reader should understand the system model without reading all prose.]
---
## API & Data Contracts
[Exact TypeScript interfaces, Pydantic models, GraphQL schemas, or REST JSON payloads. Downstream agents need strict contracts, not just descriptions. What gets stored, where, in what format?]
---
## Integration Points
[Which existing files, APIs, events, or hooks are modified. Be extremely specific — provide exact file paths and function signatures.]
---
## Sequence / Flow Walkthrough
[Step-by-step for the critical path. ASCII or numbered sequence for async flows.]
---
## Example Output
[What does the user actually see? JSON response, CLI output, UI state, or file content. Use a real example.]
---
## Configuration
[Env vars, feature flags, or tunables — with defaults, types, and descriptions.]
---
## Security, Privacy & Permissions
[Authentication, authorization, secrets, PII, data retention, auditability, and permission boundary impacts. If none apply, state why. For user-facing or data-handling features, name the exact checks that prevent unauthorized access or accidental disclosure.]
---
## Performance & Scalability
[Expected load, latency targets, data volume assumptions, caching/batching strategy, and known bottlenecks. If the feature is not performance-sensitive, explain the assumption.]
---
## Migration, Rollout & Rollback
[Schema migrations, backfills, feature flags, compatibility with existing clients/data, rollout sequence, and rollback plan. If no migration or rollout risk exists, state why.]
---
## Testing Strategy
[Not just "we'll write unit tests." Name specific test cases, edge cases, and integration scenarios, including which test files to create or modify.]
---
## Observability & Logging
[What should be logged to enable troubleshooting without a debugger attached? Cover:
- **Key operations**: What events or state transitions should emit a log? (e.g., "job started", "record saved", "external call returned")
- **Error paths**: What failures must be logged with enough context to diagnose the cause? (e.g., include relevant IDs, inputs, response codes)
- **Log levels**: Which statements are `debug` (verbose, dev-only), `info` (normal operation), `warn` (unexpected but recoverable), `error` (needs attention)?
- **Format**: Structured (JSON with fields) or plain text? Any required fields (trace ID, user ID, timestamp)?
Avoid vague statements like "add appropriate logging." Name the specific operations and the information each log must include.]
---
## Edge Cases & Failures
[For each failure mode: how is it detected, and what's the mitigation?]
| Failure | Detection | Mitigation |
|---------|-----------|------------|
| ... | ... | ... |
---
## Risks
| Risk | Likelihood | Impact | Mitigation |
|------|------------|--------|------------|
| ... | ... | ... | ... |
---
## Open Questions
[Unresolved decisions or unknowns. Their presence signals intellectual honesty.]
1. [Question + context on what's blocking resolution]
---
## Context Required for Implementation
[A bulleted list of exact file paths that an implementing agent must read to understand the existing system and constraints before making changes.]
- `src/example/file.ts`
- ...
---
## Implementation Plan
[Ordered implementation slices. Each slice should map to one or more user stories. Use this to make dependencies and sequencing explicit before writing stories.]
| Order | Story | Purpose | Depends On | Primary Files |
|-------|-------|---------|------------|---------------|
| 1 | [PREFIX]-001 | ... | None | `src/example/file.ts` |
---
## User Stories
[PREFIX] is a short 3-10 letter abbreviation derived from the feature name.
Minimize the number of user stories while ensuring each story is small enough for an AI agent to complete in one focused session. Avoid over-fragmenting into tiny stories, but do not combine unrelated complex tasks.
Story slicing rules:
- Each story should deliver one primary behavioral outcome.
- Split stories when they touch unrelated subsystems, require different verification modes, or combine independently useful work.
- Do not bundle schema/data-model work, API work, UI work, migrations, and documentation unless they are tightly coupled and still fit in one focused implementation session.
- Order stories by dependency. A story should name any prerequisite story IDs or explicitly say `None`.
- Prefer one coherent PR-sized slice over tiny mechanical tasks, but split when the acceptance criteria stop being easy to verify as a unit.
Each story must be grounded in the design sections above — reference exact file paths, data contracts, and integration points. An implementing agent should be able to complete the story without reading the rest of this document.
**Important — Documentation Requirements:**
- For structural/architectural changes: require updating design docs to reflect added, updated, or deleted features.
- For CLI tools: require documenting CLI usage (flags, commands, help text).
- For user-facing features: require updating README or usage guides.
- For API changes: require updating API docs or type documentation.
### [PREFIX]-001: [Title]
**Description:** As a [user], I want [feature] so that [benefit].
**Outcome:** [One concrete behavioral outcome this story delivers]
**Design References:**
- Architecture Overview: [brief reference to relevant component/flow]
- API & Data Contracts: [specific interface/schema/payload]
- Integration Points: [specific files/functions/hooks]
**Context:**
- Files to read: `path/to/relevant/file.ts`
- Relevant data contracts: [reference the specific interface/schema from API & Data Contracts section]
- Files likely to change: `path/to/file.ts`
- Depends on: None / [PREFIX]-000
- Out of scope: [What this story intentionally does not include]
**Acceptance Criteria:**
- [ ] Given [state], when [action], then [observable result], implemented in `path/to/file.ts`
- [ ] [Another binary, verifiable criterion referencing exact file paths and function names]
- [ ] Typecheck/lint passes using `[exact command]`
- [ ] **[Logic/Backend]** Unit tests added or updated in `path/to/test` covering [specific scenarios]
- [ ] **[UI stories only]** Browser verification completed using browser automation/dev browser if available, covering [specific interaction/state]
- [ ] **[Documentation]** Update `path/to/doc.md` / Documentation impact: None, because [reason]
### [PREFIX]-002: [Title]
...
---
## Future Extensions
[Ideas deferred from this design, with rationale for deferral. Shows this is part of a roadmap.]
Save the design doc as docs/design/[slug].md where the slug is a short kebab-case name for the feature (e.g., docs/design/auth-token-refresh.md). If docs/design/ doesn't exist, create it.
After saving, tell the user:
If a review file exists (e.g., docs/design/review-[slug].md produced by the design-doc-reviewer skill), use it to revise the design doc. Do not blindly adopt all feedback — critically assess each item against the original design intent, constraints, and conversation context.
Before making any changes, evaluate every piece of reviewer feedback and assign a disposition:
| Disposition | Meaning | Action | |-------------|---------|--------| | Accept | Feedback is valid and the suggested fix is appropriate | Apply the fix as suggested | | Accept (Alt) | Valid concern, but a different solution fits better | Apply your alternative solution | | Reject | Feedback conflicts with explicit constraints, design intent, or conversation context | Do not change; document reasoning | | Defer | Valid point but requires user input or is out of scope for this revision | Move to Open Questions |
When triaging, consider:
Apply changes based on the triage:
Add a ## Revision Notes section at the end of the design doc (before Future Extensions) with a table summarizing the triage:
## Revision Notes
**Revised [date]:** Addressed review feedback from `review-[slug].md`.
| # | Feedback Item | Disposition | Reasoning |
|---|---------------|-------------|-----------|
| 1 | [Brief description] | Accept | [Why this was valid] |
| 2 | [Brief description] | Accept (Alt) | [What you did instead and why] |
| 3 | [Brief description] | Reject | [Why this conflicts with design intent] |
| 4 | [Brief description] | Defer | [What's needed to resolve] |
Draft to Revised and add a one-line changelog entry at the top (e.g., **Revised [date]:** Addressed review feedback — added edge case table, clarified auth flow.).docs/vision/vision.md exists, read it first and ensure the design fits the stated product direction. Note any tension in the Open Questions section.Documentation impact: None and explain why.documentation
Compact the current conversation into a handoff document for another agent to pick up.
tools
--- name: expo-ios-agent-device description: Drive the Kotoba Expo iOS simulator effectively with agent-device. Use when verifying iOS UI behavior, testing Expo dev-client flows, seeding simulator app state, diagnosing accessibility selectors, or automating simulator QA for this repo. --- # Expo iOS Agent Device Use this skill when automating Kotoba on the iOS simulator with `agent-device`. ## Preflight Run these before planning commands: ```sh agent-device --version agent-device help workf
development
Create or update a DESIGN.md design system specification for websites, apps, prototypes, or product designs. Use when the user asks to generate a DESIGN.md, design system spec, UI specification, frontend design source of truth, Stitch/Google Design.md-style document, or agent-ready design tokens and component guidelines from images, descriptions, screenshots, mockups, brand notes, or raw product requirements.
documentation
Run the review-revision loop for an existing design doc: call design-doc-reviewer, address Critical Gaps and Minor Issues, repeat until clean, then mark the doc Revised for feature-delivery. Use when asked to review and revise, repeat until no gaps remain, prepare a design doc for feature delivery, or start a reviewer subagent and address feedback. Use design-doc-reviewer for one-time read-only critique.