design-protocol 1.0.0

package/templates/context.md

@@ -0,0 +1,96 @@
+# Phase Context: [PHASE_NAME]
+
+> Captured: [TIMESTAMP]
+> Phase: [PHASE_NUMBER] — [PHASE_NAME]
+
+## Pre-Phase Discussion
+
+> Decisions and context captured before running the phase skill
+
+### What We're Working On
+> Brief description of the focus for this phase
+
+### Gray Areas Resolved
+
+> Questions that were unclear before starting, now answered
+
+| Question | Answer | Decided By |
+|----------|--------|------------|
+| | | |
+
+### Assumptions Made
+
+> Things we're assuming to be true for this phase
+
+1.
+2.
+3.
+
+### Constraints Acknowledged
+
+> Limitations we're working within
+
+-
+-
+
+---
+
+## Design Direction
+
+### Preferred Approach
+> If multiple approaches exist, which direction are we taking?
+
+### Rejected Alternatives
+> What did we consider but decide against, and why?
+
+| Alternative | Why Rejected |
+|-------------|--------------|
+| | |
+
+---
+
+## Inputs for This Phase
+
+### From Previous Phase
+> Key context carried forward
+
+-
+
+### New Information
+> Anything new since the last phase
+
+-
+
+### User/Stakeholder Input
+> Relevant feedback or requests
+
+-
+
+---
+
+## Expected Outputs
+
+### Must Produce
+- [ ]
+
+### Should Produce
+- [ ]
+
+### Nice to Have
+- [ ]
+
+---
+
+## Open Questions
+
+> Questions that remain unanswered going into this phase
+
+1.
+2.
+
+---
+
+## Notes
+
+> Any additional context that might be helpful
+

package/templates/project.md

@@ -0,0 +1,83 @@
+# Design Project: [PROJECT_NAME]
+
+> Created: [DATE]
+> Status: [not_started | in_progress | complete]
+
+## Design Vision
+
+**One-liner:** [What is this and why does it matter?]
+
+**Core Value Proposition:**
+> What unique value does this design deliver to users?
+
+## Target Users
+
+### Primary User
+| Attribute | Description |
+|-----------|-------------|
+| Role | |
+| Goals | |
+| Pain Points | |
+| Expertise Level | |
+| Usage Context | |
+
+### Secondary Users
+| Role | Relationship to Primary | Key Needs |
+|------|------------------------|-----------|
+| | | |
+
+## Design Principles
+
+> What principles guide design decisions for this project?
+
+1. **[Principle 1]** — [Brief explanation]
+2. **[Principle 2]** — [Brief explanation]
+3. **[Principle 3]** — [Brief explanation]
+
+## Constraints
+
+### Technical Constraints
+-
+
+### Brand/Visual Constraints
+-
+
+### Timeline Constraints
+-
+
+### Business Constraints
+-
+
+## Success Criteria
+
+| Metric | Current | Target | How Measured |
+|--------|---------|--------|--------------|
+| | | | |
+
+## Key Decisions
+
+> Log major design decisions here as they're made
+
+| Date | Phase | Decision | Rationale | Decided By |
+|------|-------|----------|-----------|------------|
+| | | | | |
+
+## References
+
+- [Link to existing designs]
+- [Link to brand guidelines]
+- [Link to competitor examples]
+- [Link to inspiration]
+
+---
+
+## Scope
+
+### In Scope
+-
+
+### Out of Scope
+-
+
+### Future Considerations
+-

package/templates/requirements.md

@@ -0,0 +1,137 @@
+# Design Requirements: [PROJECT_NAME]
+
+> Created: [DATE]
+> Last Updated: [DATE]
+
+## Requirements Overview
+
+| Category | Total | Complete | Verified |
+|----------|-------|----------|----------|
+| Usability | 0 | 0 | 0 |
+| Accessibility | 0 | 0 | 0 |
+| Visual | 0 | 0 | 0 |
+| Technical | 0 | 0 | 0 |
+| **Total** | **0** | **0** | **0** |
+
+---
+
+## Usability Requirements
+
+> Requirements for intuitive, efficient user experience
+
+| ID | Requirement | Priority | Phase | Status | Verified |
+|----|-------------|----------|-------|--------|----------|
+| UX-01 | | must | | pending | |
+| UX-02 | | should | | pending | |
+
+### Usability Principles Applied
+- [ ] Clarity over cleverness
+- [ ] Cognitive load managed
+- [ ] Feedback for all actions
+- [ ] Error prevention > error messages
+- [ ] Consistency maintained
+
+---
+
+## Accessibility Requirements
+
+> WCAG 2.1 AA compliance requirements
+
+| ID | Requirement | WCAG | Priority | Phase | Status | Verified |
+|----|-------------|------|----------|-------|--------|----------|
+| A11Y-01 | All images have alt text | 1.1.1 | must | ui | pending | |
+| A11Y-02 | All interactive elements keyboard accessible | 2.1.1 | must | ux | pending | |
+| A11Y-03 | Color is not only indicator | 1.4.1 | must | ui | pending | |
+| A11Y-04 | Focus states visible | 2.4.7 | must | ui | pending | |
+| A11Y-05 | Touch targets ≥44x44px | 2.5.5 | should | ui | pending | |
+| A11Y-06 | Form inputs have labels | 1.3.1 | must | ux | pending | |
+
+### Accessibility Checklist
+- [ ] Screen reader compatible
+- [ ] Keyboard navigation complete
+- [ ] Sufficient color contrast
+- [ ] Focus management proper
+- [ ] Error messages accessible
+
+---
+
+## Visual Requirements
+
+> Requirements for visual design and consistency
+
+| ID | Requirement | Priority | Phase | Status | Verified |
+|----|-------------|----------|-------|--------|----------|
+| VIS-01 | Follows 8px grid system | must | ui | pending | |
+| VIS-02 | Clear visual hierarchy | must | ui | pending | |
+| VIS-03 | Consistent spacing | must | ui | pending | |
+| VIS-04 | Design tokens used | should | ui | pending | |
+
+### Visual Principles Applied
+- [ ] Visual hierarchy established
+- [ ] Gestalt principles applied
+- [ ] Whitespace effective
+- [ ] Grid system consistent
+- [ ] Typography scale applied
+
+---
+
+## Technical Requirements
+
+> Requirements that impact implementation
+
+| ID | Requirement | Priority | Phase | Status | Verified |
+|----|-------------|----------|-------|--------|----------|
+| TECH-01 | | must | | pending | |
+| TECH-02 | | should | | pending | |
+
+### Implementation Notes
+- Framework: [React/Next.js/etc.]
+- Component Library: [shadcn/ui/etc.]
+- Styling: [Tailwind/etc.]
+
+---
+
+## State Coverage Requirements
+
+> All required UI states
+
+| Component | Default | Hover | Focus | Active | Disabled | Loading | Error | Empty | Success |
+|-----------|---------|-------|-------|--------|----------|---------|-------|-------|---------|
+| | ▢ | ▢ | ▢ | ▢ | ▢ | ▢ | ▢ | ▢ | ▢ |
+
+**Legend:** ▢ = not specified, ◐ = partial, ● = complete
+
+---
+
+## Traceability Matrix
+
+> Track which requirements are addressed by which phase outputs
+
+| Requirement | Discovery | UX | UI | Review |
+|-------------|-----------|----|----|--------|
+| UX-01 | | | | |
+| A11Y-01 | | | | |
+| VIS-01 | | | | |
+
+---
+
+## Verification Status
+
+### Discovery Phase
+- [ ] Requirements captured in DISCOVERY.md
+- [ ] Success metrics defined
+
+### UX Phase
+- [ ] User flows address all UX requirements
+- [ ] All states specified
+- [ ] Accessibility requirements planned
+
+### UI Phase
+- [ ] Visual requirements met
+- [ ] Accessibility visuals specified
+- [ ] Design tokens documented
+
+### Review Phase
+- [ ] All requirements verified in implementation
+- [ ] Quality score meets threshold
+- [ ] No critical issues remaining

package/templates/roadmap.md

@@ -0,0 +1,168 @@
+# Design Roadmap: [PROJECT_NAME]
+
+> Created: [DATE]
+> Target Completion: [DATE]
+
+## Overview
+
+```
+Discovery ──► UX ──► UI ──► Review
+    │
+    └──► Research (optional branch)
+```
+
+---
+
+## Phase 1: Discovery
+
+**Goal:** Transform vague requirements into a bulletproof design brief
+
+**Skill:** `/dp:discovery`
+
+**Inputs:**
+- Initial requirements or feature request
+- Stakeholder context
+- Existing research (if any)
+
+**Outputs:**
+- Problem statement
+- User personas and journey
+- Requirements (must/should/could/must-not)
+- Constraints documented
+- Success metrics defined
+
+**Success Criteria:**
+- [ ] Problem is clearly articulated
+- [ ] Primary user is well-defined
+- [ ] Requirements are prioritized
+- [ ] Constraints are documented
+- [ ] Success metrics are measurable
+
+**Dependencies:** None (starting phase)
+
+---
+
+## Phase 2: UX
+
+**Goal:** Apply usability principles to create intuitive user flows and interactions
+
+**Skill:** `/dp:ux`
+
+**Inputs:**
+- Discovery brief (DISCOVERY.md)
+- Design requirements
+
+**Outputs:**
+- User flow diagrams
+- Component behaviors defined
+- All states specified (empty, loading, error, success, etc.)
+- Accessibility requirements
+- Usability patterns applied
+
+**Success Criteria:**
+- [ ] User flow is complete end-to-end
+- [ ] All interactive states are defined
+- [ ] Accessibility requirements documented
+- [ ] Usability principles applied with rationale
+- [ ] Component behaviors specified
+
+**Dependencies:** Discovery complete
+
+---
+
+## Phase 3: UI
+
+**Goal:** Apply visual design principles to create polished, professional interface specs
+
+**Skill:** `/dp:ui`
+
+**Inputs:**
+- Discovery brief (DISCOVERY.md)
+- UX decisions (UX-DECISIONS.md)
+
+**Outputs:**
+- Visual hierarchy definitions
+- Grid and spacing specifications
+- Component visual specs with tokens
+- Color and typography usage
+- Animation guidelines
+
+**Success Criteria:**
+- [ ] Visual hierarchy is clear (squint test)
+- [ ] 8px grid system applied
+- [ ] Design tokens specified
+- [ ] Components are fully specified
+- [ ] Responsive considerations documented
+
+**Dependencies:** UX complete
+
+---
+
+## Phase 4: Review
+
+**Goal:** Audit implementation for quality, accessibility, and spec alignment
+
+**Skill:** `/dp:eng_review`
+
+**Inputs:**
+- All previous phase documents
+- Implemented code to review
+
+**Outputs:**
+- Quality score (0-100)
+- Issues by severity (critical/serious/moderate)
+- Spec alignment report
+- Recommended fixes
+
+**Success Criteria:**
+- [ ] No critical accessibility issues
+- [ ] Quality score meets threshold
+- [ ] Spec alignment verified
+- [ ] All issues have recommended fixes
+
+**Dependencies:** UI complete, code implemented
+
+---
+
+## Optional: Research
+
+**Goal:** Validate assumptions and gather user insights
+
+**Skill:** `/dp:research`
+
+**When to Include:**
+- Significant unknowns in discovery
+- High-risk design decisions
+- Need user validation before building
+- Existing research is outdated
+
+**Inputs:**
+- Research questions (from Discovery "Research Needed" section)
+- Access to target users
+
+**Outputs:**
+- Research plan
+- Interview/test materials
+- Research findings
+- Updated design brief (if findings change assumptions)
+
+**Can Branch From:** Discovery (most common) or any phase
+
+---
+
+## Milestones
+
+| Milestone | Phase | Deliverable | Target Date |
+|-----------|-------|-------------|-------------|
+| Brief Complete | Discovery | DISCOVERY.md | |
+| Flows Complete | UX | UX-DECISIONS.md | |
+| Spec Complete | UI | UI-SPEC.md | |
+| Ready to Ship | Review | REVIEW.md + Score | |
+
+---
+
+## Risk Register
+
+| Risk | Phase | Likelihood | Impact | Mitigation |
+|------|-------|------------|--------|------------|
+| | | | | |

package/templates/state.md

@@ -0,0 +1,107 @@
+# DP Workflow State
+
+> Last Updated: [TIMESTAMP]
+
+## Current Position
+
+```
+Phase: [0-4] of 4 ([phase_name])
+Status: [not_started | ready | in_progress | completed | blocked]
+Progress: [░░░░░░░░░░] 0%
+```
+
+## Phase Status
+
+| # | Phase | Status | Completed | Output |
+|---|-------|--------|-----------|--------|
+| 1 | Discovery | pending | — | DISCOVERY.md |
+| 2 | UX | pending | — | UX-DECISIONS.md |
+| 2a | Execute | pending | — | Wireframe components |
+| 3 | UI | pending | — | UI-SPEC.md |
+| 3a | Execute | pending | — | Polished components |
+| 4 | Review | pending | — | REVIEW.md |
+
+**Optional:**
+| Phase | Status | Output |
+|-------|--------|--------|
+| Research | not_enabled | research/*.md |
+
+## Execution Status
+
+| Mode | Status | Output Location | Preview URL |
+|------|--------|-----------------|-------------|
+| Wireframe | pending | — | — |
+| Polished | pending | — | — |
+
+## Session Continuity
+
+### Last Activity
+- **Date:** [TIMESTAMP]
+- **Action:** [What was done]
+- **Phase:** [Which phase]
+- **User:** [Who was working]
+
+### What Happened
+> Brief summary of the last session's progress
+
+### Where We Left Off
+> Specific next action or decision point
+
+## Accumulated Context
+
+### Problem Summary
+> One-paragraph summary of the problem being solved (from Discovery)
+
+### Primary User
+> Brief description of the primary user (from Discovery)
+
+### Key Requirements
+> Top 3-5 requirements that must be met
+
+1.
+2.
+3.
+
+### Major Decisions Made
+> Key decisions from each completed phase
+
+| Phase | Decision | Impact |
+|-------|----------|--------|
+| | | |
+
+## Current Blockers
+
+> Anything preventing progress
+
+| Blocker | Phase | Resolution Needed |
+|---------|-------|-------------------|
+| | | |
+
+## Next Actions
+
+> What needs to happen next
+
+1. [ ]
+2. [ ]
+3. [ ]
+
+---
+
+## Quick Commands
+
+- `/dp:progress` — View this state summary
+- `/dp:execute` — Generate implementation (wireframe or polished)
+- `/dp:discuss` — Capture decisions before running a phase
+- `/dp:skip` — Skip current phase
+- `/dp:back` — Go back to previous phase
+- `/dp:verify` — Check deliverables
+
+## Phase Commands
+
+- `/dp:discovery` — Run discovery (Phase 1)
+- `/dp:ux` — Run usability (Phase 2)
+- `/dp:execute` — Generate wireframe (after Phase 2)
+- `/dp:ui` — Run visual design (Phase 3)
+- `/dp:execute` — Generate polished (after Phase 3)
+- `/dp:eng_review` — Run review (Phase 4)
+- `/dp:research` — Run research (optional)