Skip to content

feat: add v2.0 MOCKUP.md designs and gap analysis commands #3044

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
therajanmaurya merged 12 commits into from
Jan 4, 2026
Merged

feat: add v2.0 MOCKUP.md designs and gap analysis commands #3044

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
4807565
feat: add comprehensive design specifications for all 16 features
therajanmaurya Dec 29, 2025
4810657
feat: add STATUS.md for all feature specifications
therajanmaurya Dec 29, 2025
acdf1c0
feat: add v2.0 MOCKUP.md designs and gap analysis commands
therajanmaurya Dec 30, 2025
1f97846
feat(commands): add session management and template-based command system
therajanmaurya Jan 3, 2026
b7903f5
feat(design): integrate mockups sub-section into design layer
therajanmaurya Jan 3, 2026
883a271
feat: add sub-section support to gap-analysis and gap-planning commands
therajanmaurya Jan 3, 2026
28906ba
docs: update commands README with comprehensive reference
therajanmaurya Jan 3, 2026
0150178
feat: add AI design tool selection and MCP integration for mockups
therajanmaurya Jan 3, 2026
ef63dc2
feat(auth): generate mockups with Google Stitch prompts
therajanmaurya Jan 3, 2026
28a8dd9
feat(design): generate AI mockup prompts for all 17 features
therajanmaurya Jan 4, 2026
a6d534d
feat(design): add mockups directory structure with placeholders
therajanmaurya Jan 4, 2026
194758c
refactor(design): update Data Binding Reference to use API.md as sing…
therajanmaurya Jan 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
264 changes: 241 additions & 23 deletions .claude/commands/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,251 @@
# Commands Layer

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

## Available Commands
## Quick Reference

| Command | File | Description |
|---------|------|-------------|
| `/projectstatus` | projectstatus.md | Display project overview and feature status |
| `/design [Feature]` | design.md | Create or update feature specification |
| `/implement [Feature]` | implement.md | Full E2E feature implementation |
| `/client [Feature]` | client.md | Implement Network + Data layers |
| `/feature [Feature]` | feature.md | Implement UI layer (ViewModel + Screen) |
| `/verify [Feature]` | verify.md | Validate implementation vs specification |
```
Copy link

@coderabbitai coderabbitai bot Jan 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Add language specifiers to fenced code blocks (MD040).

All code blocks should explicitly declare their language. Update the fenced code blocks to improve readability and markdown compliance:

  • Lines 7, 123, 159, 167, 175, 183, 202: Add language hints like ```text, ```bash, or ```ascii
🔎 Proposed fixes for code block language specifiers 
- Line 7:  ` ```
+ Line 7:  ` ```text

- Line 123: ` ```
+ Line 123: ` ```text

- Line 159: ` ```
+ Line 159: ` ```bash

- Line 167: ` ```
+ Line 167: ` ```bash

- Line 175: ` ```
+ Line 175: ` ```bash

- Line 183: ` ```
+ Line 183: ` ```bash

- Line 202: ` ```
+ Line 202: ` ```text

Also applies to: 123-123, 159-159, 167-167, 175-175, 183-183, 202-202

🧰 Tools
🪛 markdownlint-cli2 (0.18.1)

7-7: Fenced code blocks should have a language specified

(MD040, fenced-code-language)

🤖 Prompt for AI Agents 
In .claude/commands/README.md around lines 7, 123, 159, 167, 175, 183 and 202,
several fenced code blocks are missing language specifiers; update each opening
triple-backtick to include the suggested language hints: line 7 -> ```text, line
123 -> ```text, line 159 -> ```bash, line 167 -> ```bash, line 175 -> ```bash,
line 183 -> ```bash, and line 202 -> ```text so the markdown linter (MD040) and
readers can correctly render and highlight those blocks.

SESSION MANAGEMENT
├── /session-start # Load context for new session
└── /session-end # Save progress before ending
GAP ANALYSIS (Where are we?)
├── /gap-analysis # Brief overview of all layers
├── /gap-analysis design # Design layer status
│ ├── /gap-analysis design spec # Specifications status
│ ├── /gap-analysis design mockup # Mockups generation status
│ └── /gap-analysis design api # API documentation status
├── /gap-analysis server # Server layer status
├── /gap-analysis client # Client layer status
│ ├── /gap-analysis client network # Network services status
│ └── /gap-analysis client data # Repositories status
├── /gap-analysis feature # Feature layer status
│ └── /gap-analysis feature [name] # Single feature status
├── /gap-analysis platform # Platform layer status
│ ├── /gap-analysis platform android
│ ├── /gap-analysis platform ios
│ ├── /gap-analysis platform desktop
│ └── /gap-analysis platform web
└── /gap-analysis [feature] # Specific feature (all 5 layers)
GAP PLANNING (What needs work?)
├── /gap-planning # Brief overview of what needs planning
├── /gap-planning design # Plan design layer work
│ ├── /gap-planning design spec # Plan specification work
│ ├── /gap-planning design mockup # Plan mockup generation
│ └── /gap-planning design api # Plan API documentation
├── /gap-planning server # Plan server layer work
├── /gap-planning client # Plan client layer work
│ ├── /gap-planning client network # Plan network services
│ └── /gap-planning client data # Plan repositories
├── /gap-planning feature # Plan feature layer work
│ └── /gap-planning feature [name] # Plan specific feature
├── /gap-planning platform # Plan platform layer work
│ ├── /gap-planning platform android
│ ├── /gap-planning platform ios
│ ├── /gap-planning platform desktop
│ └── /gap-planning platform web
└── /gap-planning [feature] # Plan specific feature (all layers)
DESIGN LAYER (Specifications & Mockups)
├── /design # Show feature list
├── /design [feature] # Full spec review/create
├── /design [feature] add [section] # Add specific section
├── /design [feature] improve # Suggest improvements
├── /design [feature] mockup # Generate Figma mockups for feature
└── /design mockup # Generate mockups for all features
IMPLEMENTATION
├── /implement [feature] # Full E2E implementation (all layers)
├── /client [feature] # Client layer only (Network + Data)
└── /feature [feature] # Feature layer only (ViewModel + Screen)
VERIFICATION
├── /verify [feature] # Validate implementation vs spec
└── /projectstatus # Project overview and status
```

## Command Details

### Session Management

| Command | Purpose | When to Use |
|---------|---------|-------------|
| `/session-start` | Load context from CURRENT_WORK.md | Start of new session |
| `/session-end` | Save progress, update CURRENT_WORK.md | Before ending session |

### Gap Analysis

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

Copy these files to your `.claude/commands/` directory or reference them directly when working with Claude Code.
### Gap Planning

| Command | Purpose | Output |
|---------|---------|--------|
| `/gap-planning` | What needs work | Priority-sorted task list |
| `/gap-planning design mockup` | Mockup generation plan | Step-by-step with commands |
| `/gap-planning client network` | Network services plan | Service implementation tasks |
| `/gap-planning feature [name]` | Feature implementation plan | v2.0 UI update tasks |

### Design Layer

| Command | Purpose | Output |
|---------|---------|--------|
| `/design` | Feature list | Available features with status |
| `/design [feature]` | Spec review | SPEC.md + API.md analysis |
| `/design [feature] mockup` | Generate mockups | PROMPTS.md + design-tokens.json |
| `/design mockup` | Generate all | Batch mockup generation |

### Implementation

| Command | Purpose | Layers |
|---------|---------|--------|
| `/implement [feature]` | Full E2E | Network → Data → ViewModel → Screen |
| `/client [feature]` | Client only | Network services + repositories |
| `/feature [feature]` | Feature only | ViewModel + Screen + Navigation |

### Verification

| Command | Purpose | Checks |
|---------|---------|--------|
| `/verify [feature]` | Implementation check | Spec compliance, tests, platforms |
| `/projectstatus` | Project overview | All features, all layers, metrics |

## 5-Layer Product Lifecycle

```
┌─────────────────────────────────────────────────────────────────┐
│ PRODUCT LIFECYCLE │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 1. DESIGN LAYER (Entry Point) │
│ ├── SPEC.md → Requirements, user stories │
│ ├── API.md → Endpoint definitions │
│ ├── MOCKUP.md → ASCII design v2.0 │
│ └── mockups/ → Generated Figma prompts │
│ │
│ 2. SERVER LAYER │
│ └── Fineract API → Endpoint availability │
│ │
│ 3. CLIENT LAYER │
│ ├── Network → Ktorfit services (core/network/) │
│ └── Data → Repositories (core/data/) │
│ │
│ 4. FEATURE LAYER │
│ ├── ViewModel → State management │
│ ├── Screen → Compose UI │
│ ├── Navigation → Route definitions │
│ └── DI → Koin modules │
│ │
│ 5. PLATFORM LAYER │
│ ├── Android → cmp-android/ │
│ ├── iOS → cmp-ios/ │
│ ├── Desktop → cmp-desktop/ │
│ └── Web → cmp-web/ │
│ │
└─────────────────────────────────────────────────────────────────┘
```

## Workflow
## Workflow Examples

### Start New Session
```
/projectstatus → See current state
│
▼
/design [Feature] → Create specification (Opus)
│
▼
/implement [Feature] → Full implementation (Sonnet)
│
▼
/verify [Feature] → Validate implementation
/session-start
/gap-analysis # See overview
/gap-planning design mockup # Plan next work
/design auth mockup # Execute task
```

### Check Feature Status
```
/gap-analysis home # All layers for home
/gap-planning feature home # Plan v2.0 UI update
/feature home # Implement UI changes
/verify home # Validate implementation
```

### Full Feature Implementation
```
/design dashboard # Review/create spec
/design dashboard mockup # Generate mockups
/implement dashboard # Full E2E implementation
/verify dashboard # Validate
```

### End Session
```
/session-end # Save progress
```

## Design Layer Deep Dive

The Design Layer is the entry point where we design the whole application. All other layers depend on it.

### Sub-Sections

| Sub-Section | Files | Purpose |
|-------------|-------|---------|
| spec | SPEC.md | Requirements, user stories, acceptance criteria |
| api | API.md | Endpoint definitions, request/response schemas |
| mockup | MOCKUP.md | ASCII design v2.0 (visual layout) |
| mockups/ | PROMPTS.md, design-tokens.json | Generated AI prompts for Figma |

### Mockup Generation Workflow

```
MOCKUP.md (ASCII v2.0)
↓
/design [feature] mockup
↓
mockups/PROMPTS.md + design-tokens.json
↓
User: Google Stitch → Figma
↓
User: Update FIGMA_LINKS.md
↓
/implement [feature] (uses Figma via MCP)
```

### Feature List

| # | Feature | Design Path | Command |
|:-:|---------|-------------|---------|
| 1 | auth | features/auth/ | `/design auth` |
| 2 | home | features/home/ | `/design home` |
| 3 | accounts | features/accounts/ | `/design accounts` |
| 4 | savings-account | features/savings-account/ | `/design savings-account` |
| 5 | loan-account | features/loan-account/ | `/design loan-account` |
| 6 | share-account | features/share-account/ | `/design share-account` |
| 7 | beneficiary | features/beneficiary/ | `/design beneficiary` |
| 8 | transfer | features/transfer/ | `/design transfer` |
| 9 | recent-transaction | features/recent-transaction/ | `/design recent-transaction` |
| 10 | notification | features/notification/ | `/design notification` |
| 11 | settings | features/settings/ | `/design settings` |
| 12 | passcode | features/passcode/ | `/design passcode` |
| 13 | guarantor | features/guarantor/ | `/design guarantor` |
| 14 | qr | features/qr/ | `/design qr` |
| 15 | location | features/location/ | `/design location` |
| 16 | client-charge | features/client-charge/ | `/design client-charge` |
| 17 | dashboard | features/dashboard/ | `/design dashboard` |

## Files

| File | Command | Description |
|------|---------|-------------|
| `session-start.md` | `/session-start` | Load context for new session |
| `session-end.md` | `/session-end` | Save progress before ending |
| `gap-analysis.md` | `/gap-analysis` | Analyze implementation gaps |
| `gap-planning.md` | `/gap-planning` | Plan implementation tasks |
| `design.md` | `/design` | Feature specification |
| `implement.md` | `/implement` | Full E2E implementation |
| `client.md` | `/client` | Client layer implementation |
| `feature.md` | `/feature` | Feature layer implementation |
| `verify.md` | `/verify` | Validate implementation |
| `projectstatus.md` | `/projectstatus` | Project overview |
Loading
Loading