Skip to content

Commit fdc2ff5

Browse files
therajanmauryaandroidheistclaude
authored
feat: add v2.0 MOCKUP.md designs and gap analysis commands (#3044)
Co-authored-by: therajanmaurya <[email protected]> Co-authored-by: Claude Opus 4.5 <[email protected]>
1 parent aca5f62 commit fdc2ff5

File tree

283 files changed

+61056
-39
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

283 files changed

+61056
-39
lines changed

‎.claude/commands/README.md‎

Lines changed: 241 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,251 @@
11
# Commands Layer
22

3-
This directory contains slash command definitions for Claude Code integration with the Mifos Mobile project.
3+
Slash command definitions for Claude Code integration with Mifos Mobile.
44

5-
## Available Commands
5+
## Quick Reference
66

7-
| Command | File | Description |
8-
|---------|------|-------------|
9-
| `/projectstatus` | projectstatus.md | Display project overview and feature status |
10-
| `/design [Feature]` | design.md | Create or update feature specification |
11-
| `/implement [Feature]` | implement.md | Full E2E feature implementation |
12-
| `/client [Feature]` | client.md | Implement Network + Data layers |
13-
| `/feature [Feature]` | feature.md | Implement UI layer (ViewModel + Screen) |
14-
| `/verify [Feature]` | verify.md | Validate implementation vs specification |
7+
```
8+
SESSION MANAGEMENT
9+
├── /session-start # Load context for new session
10+
└── /session-end # Save progress before ending
11+
12+
GAP ANALYSIS (Where are we?)
13+
├── /gap-analysis # Brief overview of all layers
14+
├── /gap-analysis design # Design layer status
15+
│ ├── /gap-analysis design spec # Specifications status
16+
│ ├── /gap-analysis design mockup # Mockups generation status
17+
│ └── /gap-analysis design api # API documentation status
18+
├── /gap-analysis server # Server layer status
19+
├── /gap-analysis client # Client layer status
20+
│ ├── /gap-analysis client network # Network services status
21+
│ └── /gap-analysis client data # Repositories status
22+
├── /gap-analysis feature # Feature layer status
23+
│ └── /gap-analysis feature [name] # Single feature status
24+
├── /gap-analysis platform # Platform layer status
25+
│ ├── /gap-analysis platform android
26+
│ ├── /gap-analysis platform ios
27+
│ ├── /gap-analysis platform desktop
28+
│ └── /gap-analysis platform web
29+
└── /gap-analysis [feature] # Specific feature (all 5 layers)
30+
31+
GAP PLANNING (What needs work?)
32+
├── /gap-planning # Brief overview of what needs planning
33+
├── /gap-planning design # Plan design layer work
34+
│ ├── /gap-planning design spec # Plan specification work
35+
│ ├── /gap-planning design mockup # Plan mockup generation
36+
│ └── /gap-planning design api # Plan API documentation
37+
├── /gap-planning server # Plan server layer work
38+
├── /gap-planning client # Plan client layer work
39+
│ ├── /gap-planning client network # Plan network services
40+
│ └── /gap-planning client data # Plan repositories
41+
├── /gap-planning feature # Plan feature layer work
42+
│ └── /gap-planning feature [name] # Plan specific feature
43+
├── /gap-planning platform # Plan platform layer work
44+
│ ├── /gap-planning platform android
45+
│ ├── /gap-planning platform ios
46+
│ ├── /gap-planning platform desktop
47+
│ └── /gap-planning platform web
48+
└── /gap-planning [feature] # Plan specific feature (all layers)
49+
50+
DESIGN LAYER (Specifications & Mockups)
51+
├── /design # Show feature list
52+
├── /design [feature] # Full spec review/create
53+
├── /design [feature] add [section] # Add specific section
54+
├── /design [feature] improve # Suggest improvements
55+
├── /design [feature] mockup # Generate Figma mockups for feature
56+
└── /design mockup # Generate mockups for all features
57+
58+
IMPLEMENTATION
59+
├── /implement [feature] # Full E2E implementation (all layers)
60+
├── /client [feature] # Client layer only (Network + Data)
61+
└── /feature [feature] # Feature layer only (ViewModel + Screen)
62+
63+
VERIFICATION
64+
├── /verify [feature] # Validate implementation vs spec
65+
└── /projectstatus # Project overview and status
66+
```
67+
68+
## Command Details
69+
70+
### Session Management
71+
72+
| Command | Purpose | When to Use |
73+
|---------|---------|-------------|
74+
| `/session-start` | Load context from CURRENT_WORK.md | Start of new session |
75+
| `/session-end` | Save progress, update CURRENT_WORK.md | Before ending session |
76+
77+
### Gap Analysis
1578

16-
## Usage
79+
| Command | Purpose | Output |
80+
|---------|---------|--------|
81+
| `/gap-analysis` | Quick overview | Brief table of all 5 layers |
82+
| `/gap-analysis design` | Design layer status | SPEC, API, MOCKUP, mockups/ status |
83+
| `/gap-analysis design mockup` | Mockups status only | 17-feature mockup progress table |
84+
| `/gap-analysis client` | Client layer status | Services + repositories status |
85+
| `/gap-analysis feature` | Feature layer status | All features VM+Screen status |
86+
| `/gap-analysis [name]` | Single feature status | All 5 layers for one feature |
1787

18-
Copy these files to your `.claude/commands/` directory or reference them directly when working with Claude Code.
88+
### Gap Planning
89+
90+
| Command | Purpose | Output |
91+
|---------|---------|--------|
92+
| `/gap-planning` | What needs work | Priority-sorted task list |
93+
| `/gap-planning design mockup` | Mockup generation plan | Step-by-step with commands |
94+
| `/gap-planning client network` | Network services plan | Service implementation tasks |
95+
| `/gap-planning feature [name]` | Feature implementation plan | v2.0 UI update tasks |
96+
97+
### Design Layer
98+
99+
| Command | Purpose | Output |
100+
|---------|---------|--------|
101+
| `/design` | Feature list | Available features with status |
102+
| `/design [feature]` | Spec review | SPEC.md + API.md analysis |
103+
| `/design [feature] mockup` | Generate mockups | PROMPTS.md + design-tokens.json |
104+
| `/design mockup` | Generate all | Batch mockup generation |
105+
106+
### Implementation
107+
108+
| Command | Purpose | Layers |
109+
|---------|---------|--------|
110+
| `/implement [feature]` | Full E2E | Network → Data → ViewModel → Screen |
111+
| `/client [feature]` | Client only | Network services + repositories |
112+
| `/feature [feature]` | Feature only | ViewModel + Screen + Navigation |
113+
114+
### Verification
115+
116+
| Command | Purpose | Checks |
117+
|---------|---------|--------|
118+
| `/verify [feature]` | Implementation check | Spec compliance, tests, platforms |
119+
| `/projectstatus` | Project overview | All features, all layers, metrics |
120+
121+
## 5-Layer Product Lifecycle
122+
123+
```
124+
┌─────────────────────────────────────────────────────────────────┐
125+
│ PRODUCT LIFECYCLE │
126+
├─────────────────────────────────────────────────────────────────┤
127+
│ │
128+
│ 1. DESIGN LAYER (Entry Point) │
129+
│ ├── SPEC.md → Requirements, user stories │
130+
│ ├── API.md → Endpoint definitions │
131+
│ ├── MOCKUP.md → ASCII design v2.0 │
132+
│ └── mockups/ → Generated Figma prompts │
133+
│ │
134+
│ 2. SERVER LAYER │
135+
│ └── Fineract API → Endpoint availability │
136+
│ │
137+
│ 3. CLIENT LAYER │
138+
│ ├── Network → Ktorfit services (core/network/) │
139+
│ └── Data → Repositories (core/data/) │
140+
│ │
141+
│ 4. FEATURE LAYER │
142+
│ ├── ViewModel → State management │
143+
│ ├── Screen → Compose UI │
144+
│ ├── Navigation → Route definitions │
145+
│ └── DI → Koin modules │
146+
│ │
147+
│ 5. PLATFORM LAYER │
148+
│ ├── Android → cmp-android/ │
149+
│ ├── iOS → cmp-ios/ │
150+
│ ├── Desktop → cmp-desktop/ │
151+
│ └── Web → cmp-web/ │
152+
│ │
153+
└─────────────────────────────────────────────────────────────────┘
154+
```
19155

20-
## Workflow
156+
## Workflow Examples
21157

158+
### Start New Session
22159
```
23-
/projectstatus → See current state
24-
│
25-
▼
26-
/design [Feature] → Create specification (Opus)
27-
│
28-
▼
29-
/implement [Feature] → Full implementation (Sonnet)
30-
│
31-
▼
32-
/verify [Feature] → Validate implementation
160+
/session-start
161+
/gap-analysis # See overview
162+
/gap-planning design mockup # Plan next work
163+
/design auth mockup # Execute task
33164
```
165+
166+
### Check Feature Status
167+
```
168+
/gap-analysis home # All layers for home
169+
/gap-planning feature home # Plan v2.0 UI update
170+
/feature home # Implement UI changes
171+
/verify home # Validate implementation
172+
```
173+
174+
### Full Feature Implementation
175+
```
176+
/design dashboard # Review/create spec
177+
/design dashboard mockup # Generate mockups
178+
/implement dashboard # Full E2E implementation
179+
/verify dashboard # Validate
180+
```
181+
182+
### End Session
183+
```
184+
/session-end # Save progress
185+
```
186+
187+
## Design Layer Deep Dive
188+
189+
The Design Layer is the entry point where we design the whole application. All other layers depend on it.
190+
191+
### Sub-Sections
192+
193+
| Sub-Section | Files | Purpose |
194+
|-------------|-------|---------|
195+
| spec | SPEC.md | Requirements, user stories, acceptance criteria |
196+
| api | API.md | Endpoint definitions, request/response schemas |
197+
| mockup | MOCKUP.md | ASCII design v2.0 (visual layout) |
198+
| mockups/ | PROMPTS.md, design-tokens.json | Generated AI prompts for Figma |
199+
200+
### Mockup Generation Workflow
201+
202+
```
203+
MOCKUP.md (ASCII v2.0)
204+
↓
205+
/design [feature] mockup
206+
↓
207+
mockups/PROMPTS.md + design-tokens.json
208+
↓
209+
User: Google Stitch → Figma
210+
↓
211+
User: Update FIGMA_LINKS.md
212+
↓
213+
/implement [feature] (uses Figma via MCP)
214+
```
215+
216+
### Feature List
217+
218+
| # | Feature | Design Path | Command |
219+
|:-:|---------|-------------|---------|
220+
| 1 | auth | features/auth/ | `/design auth` |
221+
| 2 | home | features/home/ | `/design home` |
222+
| 3 | accounts | features/accounts/ | `/design accounts` |
223+
| 4 | savings-account | features/savings-account/ | `/design savings-account` |
224+
| 5 | loan-account | features/loan-account/ | `/design loan-account` |
225+
| 6 | share-account | features/share-account/ | `/design share-account` |
226+
| 7 | beneficiary | features/beneficiary/ | `/design beneficiary` |
227+
| 8 | transfer | features/transfer/ | `/design transfer` |
228+
| 9 | recent-transaction | features/recent-transaction/ | `/design recent-transaction` |
229+
| 10 | notification | features/notification/ | `/design notification` |
230+
| 11 | settings | features/settings/ | `/design settings` |
231+
| 12 | passcode | features/passcode/ | `/design passcode` |
232+
| 13 | guarantor | features/guarantor/ | `/design guarantor` |
233+
| 14 | qr | features/qr/ | `/design qr` |
234+
| 15 | location | features/location/ | `/design location` |
235+
| 16 | client-charge | features/client-charge/ | `/design client-charge` |
236+
| 17 | dashboard | features/dashboard/ | `/design dashboard` |
237+
238+
## Files
239+
240+
| File | Command | Description |
241+
|------|---------|-------------|
242+
| `session-start.md` | `/session-start` | Load context for new session |
243+
| `session-end.md` | `/session-end` | Save progress before ending |
244+
| `gap-analysis.md` | `/gap-analysis` | Analyze implementation gaps |
245+
| `gap-planning.md` | `/gap-planning` | Plan implementation tasks |
246+
| `design.md` | `/design` | Feature specification |
247+
| `implement.md` | `/implement` | Full E2E implementation |
248+
| `client.md` | `/client` | Client layer implementation |
249+
| `feature.md` | `/feature` | Feature layer implementation |
250+
| `verify.md` | `/verify` | Validate implementation |
251+
| `projectstatus.md` | `/projectstatus` | Project overview |

0 commit comments

Comments
 (0)