aped-method 1.7.0 → 1.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "aped-method",
3
- "version": "1.7.0",
3
+ "version": "1.9.0",
4
4
  "type": "module",
5
5
  "description": "Scaffold the APED pipeline (Analyze, PRD, Epics, Dev, Review) into any Claude Code project",
6
6
  "bin": {
@@ -50,6 +50,22 @@ export function references(c) {
50
50
  path: `${a}/aped-ux/references/ux-patterns.md`,
51
51
  content: UX_PATTERNS,
52
52
  },
53
+ {
54
+ path: `${a}/aped-s/references/status-format.md`,
55
+ content: STATUS_FORMAT,
56
+ },
57
+ {
58
+ path: `${a}/aped-c/references/scope-change-guide.md`,
59
+ content: SCOPE_CHANGE_GUIDE,
60
+ },
61
+ {
62
+ path: `${a}/aped-ctx/references/analysis-checklist.md`,
63
+ content: ANALYSIS_CHECKLIST,
64
+ },
65
+ {
66
+ path: `${a}/aped-qa/references/test-patterns.md`,
67
+ content: TEST_PATTERNS,
68
+ },
53
69
  ];
54
70
  }
55
71
 
@@ -552,7 +568,186 @@ mobile_app,"iOS,Android,app,mobile,iPhone,iPad","Native or cross-platform?;Offli
552
568
  saas_b2b,"SaaS,B2B,platform,dashboard,teams,enterprise","Multi-tenant?;Permission model?;Subscription tiers?;Integrations?;Compliance?","tenant_model;rbac_matrix;subscription_tiers;integration_list;compliance_reqs","cli_interface;mobile_first","compliance requirements;integration guides","Workflow automation;AI agents"
553
569
  cli_tool,"CLI,command,terminal,bash,script","Interactive or scriptable?;Output formats?;Config method?;Shell completion?","command_structure;output_formats;config_schema;scripting_support","visual_design;ux_principles;touch_interactions","CLI design patterns;shell integration","Natural language CLI;AI commands"`;
554
570
 
555
- const UX_PATTERNS = `# UX Screen Patterns Catalog
571
+ const UX_PATTERNS = `# UX Design Rules — Priority-Ranked
572
+
573
+ Rules ranked by impact. Apply in order — never skip a higher-priority rule for a lower one.
574
+
575
+ ---
576
+
577
+ ## P1: Accessibility (CRITICAL)
578
+
579
+ - Contrast ≥ 4.5:1 normal text, ≥ 3:1 large text (WCAG AA)
580
+ - Visible focus rings (2-4px) on ALL interactive elements
581
+ - Alt text on meaningful images; decorative images use alt=""
582
+ - aria-label on icon-only buttons
583
+ - Tab order matches visual order; full keyboard support
584
+ - Form inputs have visible labels (not placeholder-only)
585
+ - Skip-to-main-content link for keyboard users
586
+ - Heading hierarchy: sequential h1→h6, no level skipping
587
+ - Information never relies on color alone (add icon/text)
588
+ - Support dynamic text scaling (no truncation on resize)
589
+ - Respect prefers-reduced-motion — disable animations when set
590
+ - Screen reader: meaningful labels, logical reading order
591
+ - Escape routes: cancel/back in modals and multi-step flows
592
+ - Preserve system keyboard shortcuts
593
+
594
+ ## P2: Touch & Interaction (CRITICAL)
595
+
596
+ - Touch targets ≥ 44x44pt (iOS) / 48x48dp (Android)
597
+ - Minimum 8px gap between touch targets
598
+ - Primary interactions via tap, never hover-only
599
+ - Loading buttons: disable during async + show spinner
600
+ - Error feedback: clear message near the problem field
601
+ - cursor:pointer on clickable web elements
602
+ - No horizontal swipe conflicts on main content
603
+ - touch-action:manipulation to kill 300ms tap delay
604
+ - Use platform-standard gestures consistently
605
+ - Don't block system gestures (back swipe, control center)
606
+ - Visual press feedback (ripple/opacity) within 80-150ms
607
+ - Haptic feedback for confirmations only — no overuse
608
+ - Always provide visible controls alongside gestures
609
+ - Keep targets away from notch, Dynamic Island, edges
610
+ - No precision-required taps on tiny icons
611
+
612
+ ## P3: Performance (HIGH)
613
+
614
+ - Images: WebP/AVIF, responsive srcset, lazy load below fold
615
+ - Declare width/height or aspect-ratio to prevent CLS
616
+ - font-display:swap, preload only critical fonts
617
+ - Critical CSS above the fold; lazy load the rest
618
+ - Code split by route/feature
619
+ - Third-party scripts: async/defer, audit necessity
620
+ - Batch DOM reads then writes to reduce reflows
621
+ - Reserve space for async content (no content jumping)
622
+ - Virtualize lists with 50+ items
623
+ - Keep per-frame work under 16ms for 60fps
624
+ - Skeleton/shimmer for operations >300ms
625
+ - Input latency under 100ms for taps/scrolls
626
+ - Debounce/throttle high-frequency events (scroll, resize, input)
627
+ - Provide offline state messaging
628
+ - Degraded mode for slow networks
629
+
630
+ ## P4: Style & Consistency (HIGH)
631
+
632
+ - Match visual style to product type and audience
633
+ - Same style across all screens — no mixed aesthetics
634
+ - SVG icons only (Lucide, Heroicons) — never emoji as structural icons
635
+ - Color palette derived from product domain/industry
636
+ - Effects (shadows, blur, radius) aligned with chosen style
637
+ - Respect platform idioms (iOS HIG vs Material Design)
638
+ - Hover/pressed/disabled states visually distinct
639
+ - Consistent elevation/shadow scale across components
640
+ - Design light and dark variants together from day 1
641
+ - One icon set, one visual language throughout
642
+ - Prefer native controls over custom when possible
643
+ - One primary CTA per screen — secondary actions subordinate
644
+
645
+ ## P5: Layout & Responsive (HIGH)
646
+
647
+ - viewport meta: width=device-width, initial-scale=1
648
+ - Mobile-first: design small, scale up
649
+ - Systematic breakpoints: 375 / 768 / 1024 / 1440
650
+ - Minimum 16px body text on mobile
651
+ - Line length: 35-60 chars mobile, 60-75 chars desktop
652
+ - No horizontal scroll on any breakpoint
653
+ - 4pt/8dp spacing scale consistently applied
654
+ - Consistent max-width container on desktop (1200-1440px)
655
+ - Layered z-index scale (avoid arbitrary values)
656
+ - Safe padding for fixed/sticky elements
657
+ - Avoid nested scroll regions
658
+ - Prefer min-h-dvh over 100vh (mobile address bar)
659
+ - Content priority: core content first on mobile
660
+ - Visual hierarchy via size, spacing, and contrast
661
+
662
+ ## P6: Typography & Color (MEDIUM)
663
+
664
+ - Body line-height: 1.5-1.75
665
+ - Font pairing: match heading/body personalities
666
+ - Consistent type scale: 12/14/16/18/24/32
667
+ - Weight hierarchy: bold headings (600-700), regular body (400)
668
+ - Semantic color tokens: primary, secondary, error, warning, success, surface
669
+ - Dark mode: desaturated/lighter variants, NOT inverted colors
670
+ - Foreground/background pairs meet 4.5:1 (AA) or 7:1 (AAA)
671
+ - Prefer text wrapping over truncation; ellipsis only with tooltip
672
+ - Tabular figures for data columns, prices, timers
673
+ - Intentional whitespace to group and separate
674
+
675
+ ## P7: Animation (MEDIUM)
676
+
677
+ - Duration: 150-300ms micro-interactions, ≤400ms complex, never >500ms
678
+ - Animate transform and opacity ONLY (GPU composited)
679
+ - ease-out entering, ease-in exiting
680
+ - Every animation must express cause-effect (meaningful motion)
681
+ - Max 1-2 animated elements per view transition
682
+ - Exit animations ~60-70% of enter duration
683
+ - Stagger list items by 30-50ms
684
+ - Animations must be interruptible by user
685
+ - Never block user input during animation
686
+ - Subtle scale feedback on press (0.95-1.05)
687
+ - Real-time response to drag/swipe/pinch gestures
688
+ - Animations must not cause CLS (no layout shift)
689
+ - Modal: animate from trigger source
690
+ - Navigation: forward = left/up, backward = right/down
691
+
692
+ ## P8: Forms & Feedback (MEDIUM)
693
+
694
+ - Visible label per input — never placeholder-only
695
+ - Error shown below the field, near the problem
696
+ - Submit: show loading → then success/error state
697
+ - Mark required fields (asterisk + sr-only text)
698
+ - Empty states: helpful message + CTA action
699
+ - Toast: auto-dismiss 3-5s, use aria-live="polite"
700
+ - Confirm before destructive actions
701
+ - Persistent helper text below complex inputs
702
+ - Disabled: opacity 0.38-0.5 + cursor change + no tap
703
+ - Progressive disclosure: reveal options step by step
704
+ - Validate on blur, show error after user finishes typing
705
+ - Semantic input types (email, tel, number, url)
706
+ - Password show/hide toggle
707
+ - Support autocomplete/textContentType for autofill
708
+ - Allow undo for destructive actions
709
+ - Auto-focus first invalid field after submit
710
+ - Error summary at top with anchor links for long forms
711
+ - Mobile input height ≥ 44px
712
+ - Unsaved changes: confirm before dismissing
713
+
714
+ ## P9: Navigation (HIGH)
715
+
716
+ - Bottom nav ≤ 5 items, each with icon + label
717
+ - Drawer for secondary nav only, not primary
718
+ - Predictable back behavior; preserve scroll/state
719
+ - All key screens reachable via deep link/URL
720
+ - Current location visually highlighted (active state)
721
+ - Primary vs secondary navigation clearly separated
722
+ - Modal: clear close affordance, swipe-down on mobile
723
+ - Search: accessible from top bar or dedicated tab
724
+ - Breadcrumb for 3+ level deep hierarchies
725
+ - Restore scroll, filters, input on back navigation
726
+ - Adaptive: sidebar ≥1024px, bottom/top nav for small screens
727
+ - Never silently reset navigation stack
728
+ - Same navigation placement across all pages
729
+ - Don't mix Tab + Sidebar + Bottom Nav simultaneously
730
+ - Focus moves to main content on route change
731
+
732
+ ## P10: Charts & Data (LOW)
733
+
734
+ - Match chart type to data: trend→line, comparison→bar, proportion→pie
735
+ - Accessible color palettes — supplement with patterns/textures
736
+ - Always show legend near chart
737
+ - Tooltip on hover (web) or tap (mobile)
738
+ - Label axes with units; never truncate/rotate axis labels
739
+ - Responsive: reflow charts on small screens
740
+ - Empty data: show "No data yet" with action
741
+ - Skeleton placeholder while loading
742
+ - Respect prefers-reduced-motion for chart animations
743
+ - Virtualize/aggregate datasets >1000 points
744
+ - Interactive elements ≥ 44pt tap area
745
+ - No pie chart for >5 categories
746
+ - Direct-label values for small datasets
747
+ - Offer CSV/image export for data tables
748
+ - Screen reader: aria-label describing key insight
749
+
750
+ ---
556
751
 
557
752
  ## Screen Types
558
753
 
@@ -580,55 +775,339 @@ const UX_PATTERNS = `# UX Screen Patterns Catalog
580
775
  - **Error Page**: error code, message, back/home links
581
776
  - **Loading**: skeleton screens, progress bar, spinner
582
777
 
583
- ## Layout Patterns
584
-
585
- ### Navigation
586
- - **Top Nav**: logo left, nav center/right, avatar far right
587
- - **Sidebar**: collapsible, icons + labels, active indicator, mobile hamburger
588
- - **Tab Bar**: bottom tabs (mobile), top tabs (desktop), badge counts
589
- - **Breadcrumb**: path hierarchy, current page non-linked
590
-
591
- ### Content Layout
592
- - **Sidebar + Content**: 240-280px sidebar, fluid content, responsive collapse
593
- - **Full Width**: max-width container (1200-1440px), centered
594
- - **Split View**: list left, detail right (email pattern), resizable
595
- - **Grid**: 12-column, responsive breakpoints (sm/md/lg/xl)
596
-
597
- ## Interaction Patterns
598
-
599
- ### Forms
600
- - **Inline Validation**: validate on blur, show error below field, green checkmark on valid
601
- - **Progressive Disclosure**: show fields based on previous answers
602
- - **Autosave**: debounced save, "Saved" indicator, conflict resolution
603
-
604
- ### Data
605
- - **Optimistic Updates**: update UI immediately, revert on error
606
- - **Pagination**: page numbers for known total, infinite scroll for feeds
607
- - **Search**: debounced input (300ms), loading indicator, clear button
608
-
609
- ### Feedback
610
- - **Toast/Snackbar**: bottom-right, auto-dismiss (5s), action button, stacking
611
- - **Modal/Dialog**: overlay, focus trap, escape to close, confirm/cancel
612
- - **Inline Alerts**: contextual, dismissible, icon + message + action
613
-
614
- ## Responsive Breakpoints
615
-
616
- | Name | Width | Typical |
617
- |------|-------|---------|
618
- | sm | < 640px | Mobile portrait |
619
- | md | 640-1024px | Tablet / mobile landscape |
620
- | lg | 1024-1440px | Desktop |
621
- | xl | > 1440px | Large desktop |
622
-
623
- ## Accessibility Checklist
624
-
625
- - [ ] All interactive elements keyboard-navigable (Tab, Enter, Escape)
626
- - [ ] Focus indicator visible on all focusable elements
627
- - [ ] ARIA labels on icon-only buttons
628
- - [ ] Color contrast ratio ≥ 4.5:1 (text), ≥ 3:1 (large text)
629
- - [ ] Form fields have associated labels
630
- - [ ] Error messages linked to fields via aria-describedby
631
- - [ ] Skip navigation link for screen readers
632
- - [ ] Alt text on meaningful images
633
- - [ ] Touch targets ≥ 44x44px on mobile
778
+ ---
779
+
780
+ ## Pre-Delivery Checklist
781
+
782
+ ### Visual Quality
783
+ - [ ] SVG icons only no emoji as structural elements
784
+ - [ ] Consistent icon family and stroke width
785
+ - [ ] Press states don't shift layout or cause jitter
786
+ - [ ] Semantic theme tokens used consistently
787
+ - [ ] Official brand assets with correct proportions
788
+
789
+ ### Interaction
790
+ - [ ] All tappable elements provide press feedback
791
+ - [ ] Touch targets ≥ 44x44pt / 48x48dp
792
+ - [ ] Micro-interactions 150-300ms with native easing
793
+ - [ ] Disabled states visually clear and non-interactive
794
+ - [ ] Screen reader focus order matches visual layout
795
+ - [ ] No gesture conflicts between app and system
796
+
797
+ ### Light/Dark Mode
798
+ - [ ] Primary text ≥ 4.5:1 contrast in both modes
799
+ - [ ] Secondary text ≥ 3:1 contrast in both modes
800
+ - [ ] Borders/dividers distinguishable in both modes
801
+ - [ ] Modal scrim preserves foreground legibility
802
+ - [ ] Both themes tested independently
803
+
804
+ ### Layout
805
+ - [ ] Safe areas respected for fixed elements
806
+ - [ ] Scroll content not hidden behind fixed bars
807
+ - [ ] Tested: small phone, large phone, tablet (portrait + landscape)
808
+ - [ ] 4/8dp spacing maintained throughout
809
+ - [ ] Long-form text readable on larger screens
810
+
811
+ ### Accessibility
812
+ - [ ] Meaningful images/icons have labels
813
+ - [ ] Form fields have labels, hints, clear errors
814
+ - [ ] Color not sole indicator of state
815
+ - [ ] Reduced motion and dynamic text size supported
816
+ - [ ] ARIA roles/states announced correctly
817
+ `;
818
+
819
+ const STATUS_FORMAT = `# Sprint Status Dashboard Format
820
+
821
+ ## Pipeline Progress Bar
822
+
823
+ Display format:
824
+ \`\`\`
825
+ Pipeline: A[✓] → P[✓] UX[✓] E[✓] D[▶] → R[ ]
826
+ \`\`\`
827
+
828
+ Symbols:
829
+ - \`✓\` = phase done
830
+ - \`▶\` = phase in-progress
831
+ - \` \` = phase not started
832
+ - \`—\` = phase skipped
833
+
834
+ ## Epic Progress Bar
835
+
836
+ \`\`\`
837
+ Epic 1: {{title}} [████████░░] 80% (4/5 stories)
838
+ \`\`\`
839
+
840
+ - Bar: 10 chars wide, \`█\` for done, \`░\` for remaining
841
+ - Show fraction and percentage
842
+
843
+ ## Story Status Icons
844
+
845
+ | Status | Icon | Meaning |
846
+ |--------|------|---------|
847
+ | done | ✓ | Story completed and reviewed |
848
+ | review | ⟳ | Waiting for adversarial review |
849
+ | in-progress | ▶ | Currently being implemented |
850
+ | ready-for-dev | ○ | Ready to start |
851
+ | backlog | · | Not yet planned |
852
+ | blocked | ✗ | Blocked by issue |
853
+
854
+ ## Blocker Categories
855
+
856
+ - **[AI-Review]** items — review findings not yet addressed
857
+ - **HALT** — dev stopped due to missing config/dependency/ambiguity
858
+ - **Stuck** — in-progress for multiple sessions without progress
859
+ - **Dependency** — blocked by another story
860
+
861
+ ## Next Action Logic
862
+
863
+ | Current State | Suggestion |
864
+ |---------------|------------|
865
+ | Stories ready-for-dev | "Run /aped-d to implement next story" |
866
+ | Stories in review | "Run /aped-r to review completed story" |
867
+ | All stories done | "Pipeline complete! Run /aped-qa for E2E tests" |
868
+ | Blockers found | Describe each blocker and resolution path |
869
+ | No state file | "Run /aped-a to start the pipeline" |
870
+ `;
871
+
872
+ const SCOPE_CHANGE_GUIDE = `# Scope Change Management Guide
873
+
874
+ ## Impact Assessment Matrix
875
+
876
+ | Change Type | PRD | UX | Epics | Stories | Code | Severity |
877
+ |-------------|-----|-----|-------|---------|------|----------|
878
+ | New feature added | Add FRs | Add screens | New stories | Create | None | Minor |
879
+ | Feature removed | Remove FRs | Remove screens | Archive stories | Archive | May delete | Minor |
880
+ | FR modified | Update FR | May update | Update story ACs | Update | May refactor | Medium |
881
+ | Architecture change | Update NFRs | May rebuild | Update all Dev Notes | Reset | May rewrite | Major |
882
+ | Priority reorder | No change | No change | Reorder | Reset status | None | Minor |
883
+ | Complete pivot | Restart | Restart | Restart | Restart | Archive | Critical |
884
+
885
+ ## Change Process
886
+
887
+ ### Step 1: Document the Change
888
+ - What changed and why
889
+ - Who requested it (user, stakeholder, technical discovery)
890
+ - Date of change
891
+
892
+ ### Step 2: Impact Analysis
893
+ - List all affected artifacts (PRD sections, stories, code files)
894
+ - Classify severity (minor/medium/major/critical)
895
+ - Estimate effort to apply change
896
+
897
+ ### Step 3: User Confirmation
898
+ - Present impact summary to user
899
+ - Get explicit "proceed" before making changes
900
+ - For major/critical: warn about in-progress work loss
901
+
902
+ ### Step 4: Execute Change
903
+ - Archive affected artifacts to \`{output}/archive/{date}/\`
904
+ - Apply changes top-down (PRD → UX → Epics → Stories)
905
+ - Re-validate at each level (scripts)
906
+ - Update state.yaml
907
+
908
+ ### Step 5: Verify Consistency
909
+ - FR coverage still 100%
910
+ - No orphan stories
911
+ - No broken dependencies
912
+ - State reflects new reality
913
+
914
+ ## Scope Creep Detection
915
+
916
+ Warning signs:
917
+ - Total FRs grew >20% from original PRD
918
+ - Epic count increased
919
+ - Stories consistently exceed single-session size
920
+ - "Just one more thing" pattern repeating
921
+
922
+ Response:
923
+ - Flag to user with metrics
924
+ - Suggest moving additions to Growth phase
925
+ - Enforce MVP discipline
926
+ `;
927
+
928
+ const ANALYSIS_CHECKLIST = `# Brownfield Project Analysis Checklist
929
+
930
+ ## Phase 1: Structure Discovery
931
+
932
+ - [ ] Identify primary language(s) from config files
933
+ - [ ] Map directory structure (max 3 levels)
934
+ - [ ] Find entry points (main, index, app, server)
935
+ - [ ] Count: files, LOC, languages
936
+ - [ ] Identify package manager (npm, yarn, pnpm, cargo, pip, go mod)
937
+ - [ ] Check for monorepo structure (workspaces, packages/)
938
+
939
+ ## Phase 2: Architecture Mapping
940
+
941
+ - [ ] Identify pattern (MVC, hexagonal, microservices, monolith, serverless)
942
+ - [ ] Map data flow: entry → processing → storage → response
943
+ - [ ] List databases and data stores
944
+ - [ ] List external API integrations
945
+ - [ ] List message queues/event systems
946
+ - [ ] Identify caching layer
947
+ - [ ] Map authentication/authorization flow
948
+
949
+ ## Phase 3: Convention Extraction
950
+
951
+ - [ ] File naming convention (camelCase, kebab-case, PascalCase)
952
+ - [ ] Function/method naming convention
953
+ - [ ] Code organization (feature-based, layer-based, domain-based)
954
+ - [ ] Error handling pattern (try/catch, Result type, error codes)
955
+ - [ ] Logging approach (structured, unstructured, library used)
956
+ - [ ] Config management (env vars, .env files, config files, vault)
957
+ - [ ] Linting/formatting (ESLint, Prettier, Biome, rustfmt)
958
+
959
+ ## Phase 4: Dependency Audit
960
+
961
+ - [ ] List production dependencies with versions
962
+ - [ ] Flag outdated packages (major versions behind)
963
+ - [ ] Check for known security advisories
964
+ - [ ] Identify lock file type
965
+ - [ ] Note any vendored/bundled dependencies
966
+ - [ ] Check for deprecated packages
967
+
968
+ ## Phase 5: Testing
969
+
970
+ - [ ] Identify test framework(s)
971
+ - [ ] Estimate test coverage (file count, coverage reports)
972
+ - [ ] Check for CI/CD pipeline config
973
+ - [ ] Identify test types present (unit, integration, E2E)
974
+ - [ ] Check for test fixtures/factories/mocks
975
+
976
+ ## Output Format
977
+
978
+ \`\`\`markdown
979
+ # Project Context: {name}
980
+
981
+ ## Tech Stack
982
+ - Language: {lang} {version}
983
+ - Framework: {framework} {version}
984
+ - Database: {db}
985
+ - Test Framework: {test_fw}
986
+
987
+ ## Architecture
988
+ - Pattern: {pattern}
989
+ - Entry: {entry_point}
990
+ - Modules: {key_modules}
991
+
992
+ ## Conventions
993
+ - Files: {naming}
994
+ - Code style: {linter}
995
+ - Error handling: {pattern}
996
+
997
+ ## Dependencies ({count} total)
998
+ | Package | Version | Purpose | Status |
999
+ |---------|---------|---------|--------|
1000
+
1001
+ ## Integration Points
1002
+ | Service | Purpose | Protocol |
1003
+ |---------|---------|----------|
1004
+
1005
+ ## Notes
1006
+ - {important_context_for_dev}
1007
+ \`\`\`
1008
+ `;
1009
+
1010
+ const TEST_PATTERNS = `# E2E & Integration Test Patterns
1011
+
1012
+ ## Framework Selection
1013
+
1014
+ | Project Type | E2E Framework | Integration Framework |
1015
+ |-------------|---------------|----------------------|
1016
+ | Node.js + React | Playwright or Cypress | Supertest + Vitest |
1017
+ | Node.js + API only | - | Supertest + Jest/Vitest |
1018
+ | Next.js | Playwright | Next.js test utils |
1019
+ | Python + Django/Flask | Playwright | pytest + httpx |
1020
+ | Python + FastAPI | Playwright | pytest + httpx |
1021
+ | Go | - | go test + httptest |
1022
+ | Rust | - | reqwest + tokio::test |
1023
+
1024
+ ## E2E Test Structure
1025
+
1026
+ \`\`\`
1027
+ tests/e2e/
1028
+ {journey-name}.test.{ext} # One file per user journey
1029
+ fixtures/ # Test data
1030
+ helpers/ # Page objects, utilities
1031
+ \`\`\`
1032
+
1033
+ ### User Journey Test Template
1034
+
1035
+ \`\`\`
1036
+ describe("{Journey Name}", () => {
1037
+ test("happy path: {description}", async () => {
1038
+ // Given: {precondition from AC}
1039
+ // When: {action from AC}
1040
+ // Then: {outcome from AC}
1041
+ });
1042
+
1043
+ test("error: {error scenario}", async () => {
1044
+ // Given: {invalid state}
1045
+ // When: {action}
1046
+ // Then: {error handling}
1047
+ });
1048
+
1049
+ test("edge: {edge case}", async () => {
1050
+ // Given: {boundary condition}
1051
+ // When: {action}
1052
+ // Then: {expected behavior}
1053
+ });
1054
+ });
1055
+ \`\`\`
1056
+
1057
+ ## Integration Test Structure
1058
+
1059
+ \`\`\`
1060
+ tests/integration/
1061
+ {endpoint-or-service}.test.{ext}
1062
+ fixtures/
1063
+ helpers/
1064
+ \`\`\`
1065
+
1066
+ ### API Test Template
1067
+
1068
+ \`\`\`
1069
+ describe("{Endpoint/Service}", () => {
1070
+ test("POST /api/resource - creates resource", async () => {
1071
+ // Arrange: valid payload
1072
+ // Act: POST request
1073
+ // Assert: 201, response body, DB state
1074
+ });
1075
+
1076
+ test("POST /api/resource - 400 on invalid input", async () => {
1077
+ // Arrange: invalid payload
1078
+ // Act: POST request
1079
+ // Assert: 400, error message
1080
+ });
1081
+
1082
+ test("GET /api/resource/:id - 404 on missing", async () => {
1083
+ // Arrange: non-existent ID
1084
+ // Act: GET request
1085
+ // Assert: 404
1086
+ });
1087
+
1088
+ test("auth: rejects unauthenticated requests", async () => {
1089
+ // Arrange: no auth header
1090
+ // Act: request
1091
+ // Assert: 401
1092
+ });
1093
+ });
1094
+ \`\`\`
1095
+
1096
+ ## Test Coverage Goals
1097
+
1098
+ | Category | Target | How to verify |
1099
+ |----------|--------|---------------|
1100
+ | AC coverage | 100% of ACs have tests | Map each AC → test |
1101
+ | Happy paths | Every user journey | 1 E2E test per journey |
1102
+ | Error paths | All error states | 1 test per error scenario |
1103
+ | Auth boundaries | All protected routes | Unauthorized + forbidden |
1104
+ | Edge cases | Empty, null, max values | Boundary value analysis |
1105
+
1106
+ ## Anti-Patterns
1107
+
1108
+ - **Flaky tests**: Don't depend on timing. Use waitFor, retries, explicit waits.
1109
+ - **Shared state**: Each test must be independent. Reset DB/state before each.
1110
+ - **Hardcoded selectors**: Use data-testid or accessible roles, not CSS classes.
1111
+ - **Testing implementation**: Test behavior, not internal structure.
1112
+ - **No assertions**: Every test must assert something. \`expect(true).toBe(true)\` is not a test.
634
1113
  `;
@@ -338,6 +338,105 @@ if [[ \${#IN_STORY_NOT_GIT[@]} -gt 0 ]]; then
338
338
  exit 1
339
339
  fi
340
340
 
341
+ exit 0
342
+ `,
343
+ },
344
+ {
345
+ path: `${a}/aped-ux/scripts/validate-ux.sh`,
346
+ executable: true,
347
+ content: `#!/usr/bin/env bash
348
+ # Validate UX design spec completeness
349
+ # Usage: validate-ux.sh <ux-dir>
350
+ # Exit 0 if valid, exit 1 with missing items listed
351
+
352
+ set -euo pipefail
353
+
354
+ if [[ $# -ne 1 ]]; then
355
+ echo "Usage: $0 <ux-directory>"
356
+ exit 1
357
+ fi
358
+
359
+ UX_DIR="$1"
360
+
361
+ if [[ ! -d "$UX_DIR" ]]; then
362
+ echo "ERROR: Directory not found: $UX_DIR"
363
+ exit 1
364
+ fi
365
+
366
+ ISSUES=()
367
+
368
+ # Check required output files
369
+ REQUIRED_FILES=(
370
+ "design-spec.md"
371
+ "screen-inventory.md"
372
+ "components.md"
373
+ "flows.md"
374
+ )
375
+
376
+ for file in "\${REQUIRED_FILES[@]}"; do
377
+ if [[ ! -f "$UX_DIR/$file" ]]; then
378
+ ISSUES+=("MISSING FILE: $UX_DIR/$file")
379
+ fi
380
+ done
381
+
382
+ # Check design-spec.md has required sections
383
+ if [[ -f "$UX_DIR/design-spec.md" ]]; then
384
+ SPEC_SECTIONS=(
385
+ "## Tech Stack"
386
+ "## Architecture"
387
+ "## Conventions"
388
+ "## Dependencies"
389
+ )
390
+
391
+ # Reuse pattern: check for sections about design tokens and UI library
392
+ if ! grep -q "color\\|Color\\|palette\\|token" "$UX_DIR/design-spec.md" 2>/dev/null; then
393
+ ISSUES+=("MISSING CONTENT: design-spec.md has no color/token definitions")
394
+ fi
395
+
396
+ if ! grep -q "typography\\|Typography\\|font\\|Font" "$UX_DIR/design-spec.md" 2>/dev/null; then
397
+ ISSUES+=("MISSING CONTENT: design-spec.md has no typography definitions")
398
+ fi
399
+ fi
400
+
401
+ # Check screen-inventory.md has content
402
+ if [[ -f "$UX_DIR/screen-inventory.md" ]]; then
403
+ SCREEN_COUNT=$(grep -cE '^\\|.*\\|.*\\|' "$UX_DIR/screen-inventory.md" 2>/dev/null || echo 0)
404
+ if [[ "$SCREEN_COUNT" -lt 3 ]]; then
405
+ ISSUES+=("LOW SCREEN COUNT: Found $SCREEN_COUNT screens (expected at least 3)")
406
+ fi
407
+ fi
408
+
409
+ # Check components.md has component entries
410
+ if [[ -f "$UX_DIR/components.md" ]]; then
411
+ COMP_COUNT=$(grep -cE '^#{2,3} ' "$UX_DIR/components.md" 2>/dev/null || echo 0)
412
+ if [[ "$COMP_COUNT" -lt 3 ]]; then
413
+ ISSUES+=("LOW COMPONENT COUNT: Found $COMP_COUNT components (expected at least 3)")
414
+ fi
415
+ fi
416
+
417
+ # Check preview app exists
418
+ PREVIEW_DIR="\${UX_DIR}-preview"
419
+ if [[ -d "$PREVIEW_DIR" ]]; then
420
+ if [[ ! -f "$PREVIEW_DIR/package.json" ]]; then
421
+ ISSUES+=("MISSING: Preview app has no package.json")
422
+ fi
423
+ if [[ ! -d "$PREVIEW_DIR/src" ]]; then
424
+ ISSUES+=("MISSING: Preview app has no src/ directory")
425
+ fi
426
+ else
427
+ ISSUES+=("WARNING: No preview app at $PREVIEW_DIR (optional but recommended)")
428
+ fi
429
+
430
+ # Report
431
+ if [[ \${#ISSUES[@]} -gt 0 ]]; then
432
+ echo "UX VALIDATION FAILED — Issues found:"
433
+ for issue in "\${ISSUES[@]}"; do
434
+ echo " - $issue"
435
+ done
436
+ exit 1
437
+ fi
438
+
439
+ echo "UX VALIDATION PASSED — All required files and content present"
341
440
  exit 0
342
441
  `,
343
442
  },
@@ -8,10 +8,21 @@ export function skills(c) {
8
8
  content: `---
9
9
  name: aped-a
10
10
  description: 'Analyzes a new project idea through parallel market, domain, and technical research. Use when user says "research idea", "aped analyze", or invokes /aped-a. Not for existing codebases — use aped-ctx for brownfield projects.'
11
+ license: MIT
12
+ metadata:
13
+ author: yabafre
14
+ version: ${c.cliVersion || '1.7.1'}
11
15
  ---
12
16
 
13
17
  # APED Analyze — Parallel Research to Product Brief
14
18
 
19
+ ## Critical Rules
20
+
21
+ - NEVER skip Discovery questions — research quality depends on clear inputs
22
+ - ALL 3 agents must complete before synthesis — do not proceed with partial results
23
+ - Take your time with synthesis — quality is more important than speed
24
+ - Do not skip validation steps
25
+
15
26
  ## Setup
16
27
 
17
28
  1. Read \`${a}/config.yaml\` — extract \`user_name\`, \`communication_language\`, \`ticket_system\`, \`git_provider\`
@@ -113,6 +124,20 @@ pipeline:
113
124
  ## Chain
114
125
 
115
126
  Invoke Skill tool with \`skill: "aped-p"\` to proceed to PRD phase.
127
+
128
+ ## Example
129
+
130
+ User says: "I want to build a SaaS for restaurant inventory management"
131
+ 1. Discovery: ask what, for whom, why now
132
+ 2. Launch 3 agents: market (restaurant tech), domain (food service regulations), technical (inventory systems)
133
+ 3. Synthesize into product brief with 5 sections
134
+ 4. Validate → write to \`${o}/product-brief.md\`
135
+
136
+ ## Common Issues
137
+
138
+ - **Agent returns empty results**: WebSearch may fail — retry with different keywords, broaden search terms
139
+ - **Brief validation fails**: Check which section is missing, fill it from agent results, re-validate
140
+ - **User gives vague answers**: Ask follow-up questions before launching research — garbage in = garbage out
116
141
  `,
117
142
  },
118
143
  // ── aped-p ──────────────────────────────────────────────
@@ -121,10 +146,21 @@ Invoke Skill tool with \`skill: "aped-p"\` to proceed to PRD phase.
121
146
  content: `---
122
147
  name: aped-p
123
148
  description: 'Generates PRD autonomously from product brief. Use when user says "create PRD", "generate PRD", "aped prd", or invokes /aped-p.'
149
+ license: MIT
150
+ metadata:
151
+ author: yabafre
152
+ version: ${c.cliVersion || '1.7.1'}
124
153
  ---
125
154
 
126
155
  # APED PRD — Autonomous PRD Generation
127
156
 
157
+ ## Critical Rules
158
+
159
+ - EVERY FR must follow format: \`FR#: [Actor] can [capability]\` — no exceptions
160
+ - Take your time to generate quality FRs — 10-80 range, each independently testable
161
+ - Do not skip domain detection — it determines mandatory sections
162
+ - Quality is more important than speed — validate before writing
163
+
128
164
  ## Setup
129
165
 
130
166
  1. Read \`${a}/config.yaml\` — extract \`user_name\`, \`communication_language\`, \`document_output_language\`
@@ -210,6 +246,20 @@ pipeline:
210
246
  Ask the user: "Do you want to design the UX before creating epics?"
211
247
  - If yes: invoke Skill tool with \`skill: "aped-ux"\`
212
248
  - If no: invoke Skill tool with \`skill: "aped-e"\` to skip directly to Epics
249
+
250
+ ## Example
251
+
252
+ From a restaurant inventory brief → PRD generates:
253
+ - FR1: Manager can add inventory items with name, quantity, and unit
254
+ - FR2: Manager can set low-stock thresholds per item
255
+ - FR3: System can send alerts when stock falls below threshold
256
+ - NFR: The system shall respond to inventory queries within 200ms at p95
257
+
258
+ ## Common Issues
259
+
260
+ - **FR count too low (<10)**: Brief may lack detail — re-read brief, extract implicit capabilities
261
+ - **Anti-pattern words detected**: Replace "easy" with step count, "fast" with time threshold
262
+ - **Validation script fails**: Run \`bash ${a}/aped-p/scripts/validate-prd.sh ${o}/prd.md\` — fix reported issues one by one
213
263
  `,
214
264
  },
215
265
  // ── aped-e ──────────────────────────────────────────────
@@ -218,10 +268,21 @@ Ask the user: "Do you want to design the UX before creating epics?"
218
268
  content: `---
219
269
  name: aped-e
220
270
  description: 'Creates epics and stories from PRD with full FR coverage. Use when user says "create epics", "break into stories", "aped epics", or invokes /aped-e.'
271
+ license: MIT
272
+ metadata:
273
+ author: yabafre
274
+ version: ${c.cliVersion || '1.7.1'}
221
275
  ---
222
276
 
223
277
  # APED Epics & Stories — Requirements Decomposition
224
278
 
279
+ ## Critical Rules
280
+
281
+ - EVERY FR must map to exactly one epic — no orphans, no phantoms
282
+ - Epics describe USER VALUE, not technical layers — "User Authentication" not "Database Setup"
283
+ - Each story must be completable in 1 dev session — split if >8 tasks
284
+ - Quality is more important than speed — do not skip coverage validation
285
+
225
286
  ## Setup
226
287
 
227
288
  1. Read \`${a}/config.yaml\` — extract config including \`ticket_system\`
@@ -302,6 +363,19 @@ mkdir -p ${o}/stories
302
363
  2. Create story files in \`${o}/stories/\` using \`${a}/templates/story.md\`
303
364
  3. Update \`${o}/state.yaml\` with sprint section and pipeline phase
304
365
 
366
+ ## Example
367
+
368
+ PRD with 25 FRs → 3 epics:
369
+ - Epic 1: "Users can manage inventory" (FR1-FR8, 4 stories)
370
+ - Epic 2: "Managers can monitor stock levels" (FR9-FR16, 3 stories)
371
+ - Epic 3: "System sends automated alerts" (FR17-FR25, 3 stories)
372
+
373
+ ## Common Issues
374
+
375
+ - **Coverage validation fails**: Run \`validate-coverage.sh\` — lists orphan FRs
376
+ - **Epic too large**: Split by sub-domain — e.g., "User Auth" → "Registration" + "Sessions"
377
+ - **Forward dependencies**: If story B needs A, merge them or restructure
378
+
305
379
  ## Chain
306
380
 
307
381
  Invoke Skill tool with \`skill: "aped-d"\` to proceed to Dev Sprint.
@@ -314,10 +388,21 @@ Invoke Skill tool with \`skill: "aped-d"\` to proceed to Dev Sprint.
314
388
  name: aped-d
315
389
  description: 'Implements next story with TDD red-green-refactor cycle. Use when user says "start dev", "implement story", "aped dev", or invokes /aped-d.'
316
390
  disable-model-invocation: true
391
+ license: MIT
392
+ metadata:
393
+ author: yabafre
394
+ version: ${c.cliVersion || '1.7.1'}
317
395
  ---
318
396
 
319
397
  # APED Dev Sprint — TDD Story Implementation
320
398
 
399
+ ## Critical Rules
400
+
401
+ - NEVER mark a task \`[x]\` without passing all 5 gate conditions
402
+ - ALWAYS write the failing test FIRST — no implementation without a RED test
403
+ - Take your time — quality is more important than speed
404
+ - Do not skip validation steps or test runs
405
+
321
406
  ## Setup
322
407
 
323
408
  1. Read \`${a}/config.yaml\` — extract config including \`ticket_system\`, \`git_provider\`
@@ -395,6 +480,21 @@ Read \`git_provider\` and \`ticket_system\` from config:
395
480
  1. Update story: mark tasks \`[x]\`, fill Dev Agent Record
396
481
  2. Update \`${o}/state.yaml\`: story — \`review\`
397
482
  3. Invoke Skill tool with \`skill: "aped-r"\` to proceed to Review phase
483
+
484
+ ## Example
485
+
486
+ Story "1-2-user-registration":
487
+ 1. RED: write test \`expect(register({email, password})).resolves.toHaveProperty('id')\` → fails
488
+ 2. GREEN: implement \`register()\` → test passes
489
+ 3. REFACTOR: extract validation → tests still pass
490
+ 4. GATE: tests exist ✓, pass ✓, matches spec ✓, ACs met ✓, no regressions ✓ → mark \`[x]\`
491
+
492
+ ## Common Issues
493
+
494
+ - **Test framework not detected**: Ensure package.json has vitest/jest dependency, or use \`run-tests.sh\` manually
495
+ - **3 consecutive failures**: HALT — ask user. Do not brute-force; the approach may be wrong
496
+ - **Missing dependency**: HALT — ask user before installing. Do not add deps silently
497
+ - **Tests pass before writing code**: The test is wrong — it doesn't test new behavior. Rewrite it
398
498
  `,
399
499
  },
400
500
  // ── aped-r ──────────────────────────────────────────────
@@ -404,10 +504,21 @@ Read \`git_provider\` and \`ticket_system\` from config:
404
504
  name: aped-r
405
505
  description: 'Reviews completed stories adversarially with minimum 3 findings. Use when user says "review code", "run review", "aped review", or invokes /aped-r.'
406
506
  disable-model-invocation: true
507
+ license: MIT
508
+ metadata:
509
+ author: yabafre
510
+ version: ${c.cliVersion || '1.7.1'}
407
511
  ---
408
512
 
409
513
  # APED Review — Adversarial Code Review
410
514
 
515
+ ## Critical Rules
516
+
517
+ - MINIMUM 3 findings — if you found fewer, you didn't look hard enough. Re-examine.
518
+ - NEVER skip the git audit — it catches undocumented file changes
519
+ - Take your time — thoroughness is more important than speed
520
+ - Do not rubber-stamp. Your job is to find problems, not to validate.
521
+
411
522
  ## Setup
412
523
 
413
524
  1. Read \`${a}/config.yaml\` — extract config including \`git_provider\`
@@ -464,6 +575,20 @@ Severity: CRITICAL > HIGH > MEDIUM > LOW. Format: \`[Severity] Description [file
464
575
  ## State Update
465
576
 
466
577
  Update \`${o}/state.yaml\`. If more stories remain: invoke Skill tool with \`skill: "aped-d"\`. If all stories done: report pipeline completion.
578
+
579
+ ## Example
580
+
581
+ Review of story "1-2-user-registration":
582
+ - [HIGH] No input validation on email field [src/auth/register.ts:42]
583
+ - [MEDIUM] Password stored without hashing [src/auth/register.ts:58]
584
+ - [LOW] Missing error message i18n [src/auth/register.ts:71]
585
+ Result: 3 findings → story back to \`in-progress\` with [AI-Review] items.
586
+
587
+ ## Common Issues
588
+
589
+ - **Git audit fails (no git repo)**: Script handles this — skips audit with WARNING, proceeds to code review
590
+ - **Fewer than 3 findings**: Re-examine edge cases, error handling, test gaps, security surface
591
+ - **Story file not found**: Check \`sprint.stories\` in state.yaml — story key may have changed
467
592
  `,
468
593
  },
469
594
  // ── aped-ux ─────────────────────────────────────────────
@@ -472,10 +597,22 @@ Update \`${o}/state.yaml\`. If more stories remain: invoke Skill tool with \`ski
472
597
  content: `---
473
598
  name: aped-ux
474
599
  description: 'Designs UX via the ANF framework (Assemble design system, Normalize with React preview, Fill all screens). Use when user says "design UX", "UX spec", "aped ux", or invokes /aped-ux. Runs between PRD and Epics phases.'
600
+ license: MIT
601
+ compatibility: 'Requires Node.js 18+ and npm for Vite+React preview scaffold'
602
+ metadata:
603
+ author: yabafre
604
+ version: ${c.cliVersion || '1.7.1'}
475
605
  ---
476
606
 
477
607
  # APED UX — ANF Framework
478
608
 
609
+ ## Critical Rules
610
+
611
+ - NEVER use lorem ipsum — every text element must reflect the actual product from the PRD
612
+ - ALWAYS run the pre-delivery checklist before presenting to user
613
+ - Take your time with each screen — quality is more important than speed
614
+ - Do not skip the user review cycle — the prototype MUST be approved before proceeding
615
+
479
616
  Produces a validated, interactive React prototype from the PRD. The prototype becomes the UX spec that \`/aped-e\` consumes as the visual source of truth.
480
617
 
481
618
  **ANF = Assemble → Normalize → Fill**
@@ -590,10 +727,13 @@ Read PRD user journeys and screen inventory (from \`${a}/aped-ux/references/ux-p
590
727
  - \`src/App.tsx\` — router config
591
728
  - \`src/pages/{ScreenSlug}.tsx\` — one page per screen (initially placeholder)
592
729
 
593
- 4. **Navigation** — working nav that links all screens:
730
+ 4. **Navigation** — read rules P9 (Navigation) from \`${a}/aped-ux/references/ux-patterns.md\`:
594
731
  - Sidebar or top nav matching design inspiration
595
- - Active state indicators
596
- - Mobile responsive (hamburger/drawer)
732
+ - Active state indicators on current route
733
+ - Mobile: bottom nav ≤5 items (icon + label) or hamburger/drawer
734
+ - Desktop ≥1024px: sidebar; smaller: bottom/top nav
735
+ - Predictable back behavior, preserve scroll/state
736
+ - Same navigation placement across all pages
597
737
 
598
738
  Run: \`npm run dev\` — verify app runs with working navigation.
599
739
 
@@ -620,42 +760,80 @@ For each screen, in priority order (core journey first):
620
760
 
621
761
  ### F1: Interaction States
622
762
 
763
+ Read rules P7 (Animation) and P8 (Forms & Feedback) from \`${a}/aped-ux/references/ux-patterns.md\`.
764
+
623
765
  For each screen, add:
624
766
 
625
- 1. **Loading states** — skeleton components or spinners where data loads
626
- 2. **Empty states** — first-use experience, "no results" views with CTAs
627
- 3. **Error states** — inline form validation, error boundaries, toast/snackbar
628
- 4. **Success feedback** — confirmation messages, success toasts
767
+ 1. **Loading states** — skeleton/shimmer for operations >300ms, spinner for buttons
768
+ 2. **Empty states** — first-use experience with helpful message + CTA, "no results" views
769
+ 3. **Error states** — inline validation on blur, error below field, error summary at top for long forms
770
+ 4. **Success feedback** — toast auto-dismiss 3-5s, confirmation messages
771
+ 5. **Disabled states** — opacity 0.38-0.5, cursor change, non-interactive
772
+ 6. **Press feedback** — visual response within 80-150ms (ripple, opacity, scale 0.95-1.05)
773
+ 7. **Animations** — 150-300ms micro-interactions, transform/opacity only, ease-out enter, ease-in exit
774
+
775
+ ### F2: Responsive + Dark Mode
629
776
 
630
- ### F2: Responsive + Accessibility
777
+ Read rules P5 (Layout) and P6 (Typography & Color) from \`${a}/aped-ux/references/ux-patterns.md\`.
631
778
 
632
779
  1. **Responsive** — test and fix at 3 breakpoints:
633
- - Mobile (375px): single column, hamburger nav, touch targets ≥44px
634
- - Tablet (768px): adapted layout, sidebar may collapse
635
- - Desktop (1440px): full layout
780
+ - Mobile (375px): single column, hamburger nav, touch targets ≥44px, safe areas
781
+ - Tablet (768px): adapted layout, sidebar may collapse, adjusted gutters
782
+ - Desktop (1440px): full layout, max-width container, sidebar visible
783
+
784
+ 2. **Dark mode** — if applicable:
785
+ - Semantic color tokens mapped per theme (not hardcoded hex)
786
+ - Desaturated/lighter variants, NOT inverted colors
787
+ - Primary text ≥ 4.5:1, secondary ≥ 3:1 in both modes
788
+ - Borders/dividers distinguishable in both modes
789
+ - Modal scrim: 40-60% black, foreground legible
790
+ - Test both themes independently
791
+
792
+ ### F3: Accessibility Pass
793
+
794
+ Read rules P1 (Accessibility) and P2 (Touch) from \`${a}/aped-ux/references/ux-patterns.md\`.
795
+
796
+ - Contrast: 4.5:1 normal text, 3:1 large text (test with browser devtools)
797
+ - Focus rings: 2-4px, visible on all interactive elements
798
+ - Tab order: matches visual order
799
+ - Form labels: visible, associated, not placeholder-only
800
+ - Icon buttons: aria-label
801
+ - Skip-to-main link
802
+ - Heading hierarchy: h1→h2→h3, no skipping
803
+ - Touch targets: ≥44x44pt with ≥8px spacing
804
+ - No information conveyed by color alone
636
805
 
637
- 2. **Accessibility** verify:
638
- - All images have alt text
639
- - Form inputs have labels
640
- - Color contrast ≥ 4.5:1
641
- - Keyboard navigation works (Tab, Enter, Escape)
642
- - Focus indicators visible
806
+ ### F4: Pre-Delivery Checklist
643
807
 
644
- ### F3: User Review Cycle
808
+ Read the full Pre-Delivery Checklist from \`${a}/aped-ux/references/ux-patterns.md\`.
809
+
810
+ Run through ALL checks before presenting to user:
811
+
812
+ **Visual Quality** — SVG icons, consistent family, no press jitter, semantic tokens, brand assets
813
+ **Interaction** — press feedback, touch targets, micro-interaction timing, disabled states, focus order
814
+ **Light/Dark Mode** — contrast ratios in both, dividers visible, scrim legibility
815
+ **Layout** — safe areas, fixed bars, tested 3 devices, spacing rhythm, text readability
816
+ **Accessibility** — labels, hints, errors, color independence, reduced motion, ARIA
817
+
818
+ If any check fails: fix before showing to user.
819
+
820
+ ### F5: User Review Cycle
645
821
 
646
822
  **This is the most important step.** The prototype must be validated by the user.
647
823
 
648
824
  1. Run \`npm run dev\` and give the user the local URL
649
- 2. Ask: "Review each screen. What needs to change?"
650
- 3. Categories of feedback:
825
+ 2. Present the pre-delivery checklist results
826
+ 3. Ask: "Review each screen. What needs to change?"
827
+ 4. Categories of feedback:
651
828
  - **Layout** — move, resize, reorder sections
652
829
  - **Content** — missing info, wrong hierarchy, unclear labels
653
830
  - **Style** — colors, spacing, typography adjustments
654
831
  - **Flow** — navigation changes, missing screens, wrong order
655
832
  - **Components** — wrong component type, missing states, wrong behavior
833
+ - **Dark mode** — contrast issues, token problems, scrim opacity
656
834
 
657
- 4. **Iterate** until user says "approved" or "good enough"
658
- 5. Each iteration: apply feedback → run dev → ask again
835
+ 5. **Iterate** until user says "approved" or "good enough"
836
+ 6. Each iteration: apply feedback → run checklist again present → ask again
659
837
 
660
838
  \`TaskUpdate: "F — Fill: user review" → completed\`
661
839
 
@@ -682,6 +860,14 @@ mkdir -p ${o}/ux
682
860
  5. Write \`${o}/ux/flows.md\` — navigation flow diagrams
683
861
  6. Take **screenshots** of each screen at desktop resolution → \`${o}/ux/screenshots/\`
684
862
 
863
+ ## Validation
864
+
865
+ \`\`\`bash
866
+ bash ${a}/aped-ux/scripts/validate-ux.sh ${o}/ux
867
+ \`\`\`
868
+
869
+ If validation fails: fix missing files or content and re-validate.
870
+
685
871
  ## State Update
686
872
 
687
873
  Update \`${o}/state.yaml\`:
@@ -706,6 +892,14 @@ Invoke Skill tool with \`skill: "aped-e"\` to proceed to Epics phase.
706
892
  - Screen references (wireframe screenshots)
707
893
  - Design tokens to respect
708
894
  - Responsive requirements per screen
895
+
896
+ ## Common Issues
897
+
898
+ - **npm create vite fails**: Ensure Node.js 18+ is installed. Try \`node --version\` first.
899
+ - **UI library install fails**: Check network. For shadcn, ensure the project has a tsconfig.json.
900
+ - **User gives no design inspiration**: Use the product domain to suggest a style — "SaaS dashboard" → clean/minimal, "e-commerce" → card-heavy/visual
901
+ - **Prototype looks wrong on mobile**: Check responsive breakpoints — sidebar must collapse, touch targets ≥ 44px
902
+ - **Dark mode contrast fails**: Use semantic tokens, not hardcoded colors. Check with browser devtools contrast checker.
709
903
  `,
710
904
  },
711
905
  // ── aped-s ──────────────────────────────────────────────
@@ -714,7 +908,11 @@ Invoke Skill tool with \`skill: "aped-e"\` to proceed to Epics phase.
714
908
  content: `---
715
909
  name: aped-s
716
910
  description: 'Shows sprint status dashboard with progress, blockers, and next actions. Use when user says "sprint status", "show progress", "aped status", or invokes /aped-s.'
717
- allowed-tools: Read, Grep, Glob, Bash
911
+ allowed-tools: "Read Grep Glob Bash"
912
+ license: MIT
913
+ metadata:
914
+ author: yabafre
915
+ version: ${c.cliVersion || '1.7.1'}
718
916
  ---
719
917
 
720
918
  # APED Status — Sprint Dashboard
@@ -723,6 +921,7 @@ allowed-tools: Read, Grep, Glob, Bash
723
921
 
724
922
  1. Read \`${a}/config.yaml\` — extract \`communication_language\`, \`ticket_system\`
725
923
  2. Read \`${o}/state.yaml\` — load full pipeline and sprint state
924
+ 3. Read \`${a}/aped-s/references/status-format.md\` for display conventions
726
925
 
727
926
  ## Pipeline Overview
728
927
 
@@ -776,6 +975,20 @@ If \`ticket_system\` is not \`none\`:
776
975
  ## Output
777
976
 
778
977
  Display only — no file writes, no state changes. Pure read-only dashboard.
978
+
979
+ ## Example
980
+
981
+ \`\`\`
982
+ Pipeline: A[✓] → P[✓] → UX[✓] → E[✓] → D[▶] → R[ ]
983
+ Epic 1: User Auth [████████░░] 80% (4/5)
984
+ Epic 2: Dashboard [██░░░░░░░░] 20% (1/5)
985
+ Next: /aped-d (story 1-5-session-mgmt is ready-for-dev)
986
+ \`\`\`
987
+
988
+ ## Common Issues
989
+
990
+ - **State file not found**: Ensure \`${o}/state.yaml\` exists — run /aped-a first
991
+ - **Stories show wrong status**: State.yaml may be stale — re-run the last phase to update it
779
992
  `,
780
993
  },
781
994
  // ── aped-c ──────────────────────────────────────────────
@@ -785,6 +998,10 @@ Display only — no file writes, no state changes. Pure read-only dashboard.
785
998
  name: aped-c
786
999
  description: 'Manages scope changes and pivots during development with impact analysis. Use when user says "correct course", "change scope", "pivot", "aped correct", or invokes /aped-c.'
787
1000
  disable-model-invocation: true
1001
+ license: MIT
1002
+ metadata:
1003
+ author: yabafre
1004
+ version: ${c.cliVersion || '1.7.1'}
788
1005
  ---
789
1006
 
790
1007
  # APED Correct Course — Managed Pivot
@@ -796,6 +1013,7 @@ Use when requirements change, priorities shift, or the current approach needs re
796
1013
  1. Read \`${a}/config.yaml\` — extract config
797
1014
  2. Read \`${o}/state.yaml\` — understand current pipeline state
798
1015
  3. Read existing artifacts: brief, PRD, epics, stories
1016
+ 4. Read \`${a}/aped-c/references/scope-change-guide.md\` for impact matrix and process
799
1017
 
800
1018
  ## Impact Assessment
801
1019
 
@@ -858,6 +1076,22 @@ After applying changes, verify:
858
1076
  - No epic became too large (>8 stories)
859
1077
  - No story became too large (>8 tasks)
860
1078
  - Changed stories still fit single-session size
1079
+
1080
+ ## Example
1081
+
1082
+ User says "We need to add OAuth — the client changed requirements":
1083
+ 1. Impact: minor change — add FRs to PRD, create new stories
1084
+ 2. Update PRD: add FR26-FR28 for OAuth
1085
+ 3. Re-validate PRD
1086
+ 4. Add stories to Epic 1 for OAuth support
1087
+ 5. Re-validate coverage
1088
+ 6. Reset new stories to \`ready-for-dev\`
1089
+
1090
+ ## Common Issues
1091
+
1092
+ - **User wants to change everything**: Confirm scope — "Is this a pivot or an addition?"
1093
+ - **Invalidated stories have committed code**: Archive the code changes, don't delete — user may want to reference them
1094
+ - **FR count exceeds 80 after change**: Some features may need to move to a Growth phase scope
861
1095
  `,
862
1096
  },
863
1097
  // ── aped-ctx ────────────────────────────────────────────
@@ -866,7 +1100,11 @@ After applying changes, verify:
866
1100
  content: `---
867
1101
  name: aped-ctx
868
1102
  description: 'Analyzes existing codebase to generate project context for brownfield development. Use when user says "document codebase", "project context", "existing project", "aped context", or invokes /aped-ctx. Not for new project ideation — use aped-a for greenfield.'
869
- allowed-tools: Read, Grep, Glob, Bash
1103
+ allowed-tools: "Read Grep Glob Bash"
1104
+ license: MIT
1105
+ metadata:
1106
+ author: yabafre
1107
+ version: ${c.cliVersion || '1.7.1'}
870
1108
  ---
871
1109
 
872
1110
  # APED Context — Brownfield Project Analysis
@@ -877,6 +1115,7 @@ Use on existing codebases to generate project context before running the APED pi
877
1115
 
878
1116
  1. Read \`${a}/config.yaml\` — extract config
879
1117
  2. Verify this is a brownfield project (existing code, not greenfield)
1118
+ 3. Read \`${a}/aped-ctx/references/analysis-checklist.md\` for the full analysis checklist
880
1119
 
881
1120
  ## Codebase Analysis
882
1121
 
@@ -959,6 +1198,20 @@ project_context:
959
1198
  Suggest:
960
1199
  - If no brief exists: run \`/aped-a\` with project context loaded
961
1200
  - If brief exists: context will inform \`/aped-p\` and \`/aped-d\` decisions
1201
+
1202
+ ## Example
1203
+
1204
+ Scanning a Next.js SaaS project → project-context.md:
1205
+ - Stack: TypeScript, Next.js 14, Prisma, PostgreSQL
1206
+ - Pattern: App Router, server components, feature-based folders
1207
+ - Conventions: camelCase files, Zod validation, Tailwind CSS
1208
+ - 45 dependencies, 3 outdated, 0 security advisories
1209
+
1210
+ ## Common Issues
1211
+
1212
+ - **No package.json/Cargo.toml found**: Project may be multi-language or unconventional — scan for entry points manually
1213
+ - **Very large codebase (>1000 files)**: Focus on src/ and key config files, don't scan node_modules or build output
1214
+ - **Monorepo detected**: Document each package/app separately in the context file
962
1215
  `,
963
1216
  },
964
1217
  // ── aped-qa ─────────────────────────────────────────────
@@ -967,6 +1220,10 @@ Suggest:
967
1220
  content: `---
968
1221
  name: aped-qa
969
1222
  description: 'Generates E2E and integration tests from acceptance criteria for completed features. Use when user says "generate tests", "E2E tests", "integration tests", "aped qa", or invokes /aped-qa.'
1223
+ license: MIT
1224
+ metadata:
1225
+ author: yabafre
1226
+ version: ${c.cliVersion || '1.7.1'}
970
1227
  ---
971
1228
 
972
1229
  # APED QA — E2E & Integration Test Generation
@@ -977,6 +1234,7 @@ Generate comprehensive end-to-end and integration tests for completed stories or
977
1234
 
978
1235
  1. Read \`${a}/config.yaml\` — extract config
979
1236
  2. Read \`${o}/state.yaml\` — find completed stories/epics
1237
+ 3. Read \`${a}/aped-qa/references/test-patterns.md\` for framework selection and test templates
980
1238
 
981
1239
  ## Scope Selection
982
1240
 
@@ -1069,6 +1327,19 @@ QA doesn't affect pipeline state — it's an additive quality layer.
1069
1327
  ## Next Steps
1070
1328
 
1071
1329
  Suggest running \`/aped-s\` to view updated sprint status with QA coverage noted.
1330
+
1331
+ ## Example
1332
+
1333
+ Epic 1 completed (3 stories) → generate QA:
1334
+ - E2E: 5 tests covering registration → login → dashboard journey
1335
+ - Integration: 3 API tests for auth endpoints
1336
+ - Report: 8/8 ACs covered, 0 gaps, 1 manual test suggested (email verification)
1337
+
1338
+ ## Common Issues
1339
+
1340
+ - **Test framework not detected**: Check project config — ensure test runner is in dependencies
1341
+ - **ACs not testable**: Some ACs describe UX behavior — flag as "manual test required" in report
1342
+ - **Tests fail on generated code**: Review the test — it may assume a specific API shape. Adapt to actual implementation
1072
1343
  `,
1073
1344
  },
1074
1345
  // ── aped-quick ────────────────────────────────────────────
@@ -1077,6 +1348,10 @@ Suggest running \`/aped-s\` to view updated sprint status with QA coverage noted
1077
1348
  content: `---
1078
1349
  name: aped-quick
1079
1350
  description: 'Implements quick fixes and small features bypassing the full pipeline. Use when user says "quick fix", "quick feature", "hotfix", "aped quick", or invokes /aped-quick.'
1351
+ license: MIT
1352
+ metadata:
1353
+ author: yabafre
1354
+ version: ${c.cliVersion || '1.7.1'}
1080
1355
  ---
1081
1356
 
1082
1357
  # APED Quick — Fast Track for Small Changes
@@ -1140,6 +1415,20 @@ Read \`ticket_system\` and \`git_provider\` from config.
1140
1415
  1. Write quick spec to \`${o}/quick-specs/\` (create dir if needed)
1141
1416
  2. No state.yaml update — quick specs don't affect pipeline phase
1142
1417
  3. Report: files changed, tests added, quick spec path
1418
+
1419
+ ## Example
1420
+
1421
+ User: "quick fix the login button not submitting"
1422
+ 1. Quick spec: fix, "login form submit handler not wired"
1423
+ 2. RED: test that clicking submit calls auth API
1424
+ 3. GREEN: wire onClick → submitForm()
1425
+ 4. Self-review: tests pass, no security issues
1426
+ 5. Commit: \`fix(auth): wire login form submit handler\`
1427
+
1428
+ ## Common Issues
1429
+
1430
+ - **Change touches >5 files**: This is too big for quick — recommend full pipeline
1431
+ - **New dependency needed**: HALT — ask user, this may need architectural discussion
1143
1432
  `,
1144
1433
  },
1145
1434
  // ── aped-all ─────────────────────────────────────────────
@@ -1149,6 +1438,10 @@ Read \`ticket_system\` and \`git_provider\` from config.
1149
1438
  name: aped-all
1150
1439
  description: 'Runs the full APED pipeline from Analyze through Review with auto-resume. Use when user says "run full pipeline", "aped all", or invokes /aped-all.'
1151
1440
  disable-model-invocation: true
1441
+ license: MIT
1442
+ metadata:
1443
+ author: yabafre
1444
+ version: ${c.cliVersion || '1.7.1'}
1152
1445
  ---
1153
1446
 
1154
1447
  # APED Pipeline — Full Orchestrator
@@ -1194,6 +1487,22 @@ State persists in \`${o}/state.yaml\`. Next \`/aped-all\` resumes from last inco
1194
1487
  ## Completion Report
1195
1488
 
1196
1489
  Total phases, epics, stories, review iterations. Pipeline status: COMPLETE.
1490
+
1491
+ ## Example
1492
+
1493
+ Fresh start → full pipeline run:
1494
+ 1. A: 3 parallel agents → product brief (5 min)
1495
+ 2. P: PRD with 20 FRs generated + validated (3 min)
1496
+ 3. UX: user says "skip" → proceed to epics
1497
+ 4. E: 3 epics, 8 stories created (3 min)
1498
+ 5. D→R loop: 8 stories × (dev + review) cycles
1499
+ 6. All done → pipeline COMPLETE
1500
+
1501
+ ## Common Issues
1502
+
1503
+ - **Phase fails and can't recover**: Check state.yaml — reset the failed phase to \`in-progress\` and re-run /aped-all
1504
+ - **Context window limit during long pipeline**: Normal — /aped-all chains via Skill tool which starts fresh context per phase
1505
+ - **User wants to skip a phase**: Supported — each phase asks "redo or skip?" if already done
1197
1506
  `,
1198
1507
  },
1199
1508
  ];