feat: add v2.0 MOCKUP.md designs and gap analysis commands #3044
Conversation
- Create SPEC.md and API.md for all existing features - Auth: Update state models to match actual implementation - Home: Update state models with Events/Actions - Accounts: Full spec with filter patterns and transaction views - Recent Transactions: Paginated transaction list spec - Notifications: Local database-backed notification spec - Settings: Multi-screen settings with password/passcode/theme/language - Savings Account: Detail, update, withdraw screens - Loan Account: Detail, repayment schedule, summary screens - Share Account: List and detail views with filters - Beneficiary: CRUD operations for beneficiaries - Transfer: Make transfer and process flow - Passcode: Local passcode management with library - QR Code: Reader, display, and import screens - Location: Static office location display - Guarantor: List, detail, add guarantor flows - Client Charges: Multi-type charge management (client/loan/savings/share) Co-Authored-By: therajanmaurya <[email protected]>
Added implementation status documentation for all 17 features: - Auth, Home, Dashboard (existing) - Accounts, Recent Transaction, Notification, Settings - Savings Account, Loan Account, Share Account - Beneficiary, Transfer, Passcode, QR Code - Location, Guarantor, Client Charge Each STATUS.md includes: - Implementation checklist - Layer status (Network, Data, Feature, DI, Navigation) - File listings by layer - Gap analysis Co-Authored-By: therajanmaurya <[email protected]>
Design Layer Updates: - Add comprehensive v2.0 MOCKUP.md for all 17 features - Implement 2025 fintech patterns (Revolut/N26/Robinhood inspired) - Add gradient hero cards, spending analytics, AI assistant designs - Include gamification (streaks, badges, achievements) - Add accessibility specs (WCAG AA, 48dp touch targets) - Add dark mode color mappings - Include animation and micro-interaction specifications New Commands: - Add /gap-analysis command for implementation status dashboard - Add /gap-planning command for feature improvement planning Documentation: - Add PRODUCT_MAP.md for session continuity - Add COMPONENTS.md for shared design system reference Features Redesigned (v2.0): - auth, home, accounts, savings-account, loan-account - share-account, beneficiary, transfer, recent-transaction - notification, settings, passcode, guarantor, qr - location, client-charge, dashboard (new)
📝 WalkthroughWalkthroughAdds extensive documentation and design assets: new .claude command workflows (gap-analysis, gap-planning, session start/end), a product map and CURRENT_WORK, a shared design system and TOOL_CONFIG, many mockup prompt/token files, and SPEC/API/STATUS/MOCKUP docs across ~16 features; no runtime code changes declared. Changes
Sequence Diagram(s)(omitted) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks✅ Passed checks (3 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
claude-product-cycle/design-spec-layer/features/notification/STATUS.md (1)
1-62: STATUS.md marks implementation as "Done" but Data layer implementation is incomplete.The STATUS.md claims "Overall Status: ✅ Done" (line 4) and marks all Data layer components as complete (line 26), but the NotificationRepositoryImp contains a commented-out DAO with a TODO: "Uncomment when Room DAO is enabled" (API.md line 183). The implementation currently returns empty data instead of actual notifications (API.md line 189).
Update STATUS.md to reflect the actual state—either mark as "🔄 In Progress" or "
⚠️ Partial"—or uncomment the DAO implementation to complete the feature.
🧹 Nitpick comments (47)
.claude/commands/gap-analysis.md (1)
7-10: Add language specifiers to fenced code blocks for markdown consistency.Several code blocks throughout this command documentation lack language identifiers. While the content is excellent and comprehensive, adding language tags ensures proper rendering and consistency with markdown standards.
🔎 Code blocks needing language tags
-``` +```bash /gap-analysis # Show full dashboard with all features /gap-analysis [Feature] # Detailed analysis for specific feature -``` +```-``` +``` ┌─────────────────────────────────────────────────────────────────┐ │ PROJECT HEALTH │ ... └─────────────────────────────────────────────────────────────────┘ -``` +```Apply similar fixes to the feature reference table (line 362-383), progress bar reference (line 410-422), and workflow diagram (line 426-436).
Overall, the gap-analysis command documentation is comprehensive and well-structured. These markdown linting fixes are minor formatting improvements.
Also applies to: 24-185, 74-76, 160-160, 410-422, 426-436
claude-product-cycle/PRODUCT_MAP.md (1)
81-88: Add language specifiers to fenced code blocks for markdown consistency.Several code blocks lack language identifiers for the markdown linter. The fixes are straightforward and will improve documentation rendering consistency.
🔎 Code blocks needing language tags
-```bash +```bash # Check current status /projectstatus -``` +```-``` +```plaintext Feature: [Name] - [ ] SPEC.md created -``` +```Similar fixes needed for the feature dependencies diagram (lines 140-163) and file paths sections (lines 222-226).
Also applies to: 140-163, 222-226
claude-product-cycle/design-spec-layer/features/client-charge/SPEC.md (1)
168-179: Consider simplifyingClientChargeStatenetwork + UI flags
ClientChargeStatecurrently carriesnetworkStatus,isOnline, and a nullableuiStatewith a non‑null default. That combination is a bit redundant and makes it harder to reason about screen state.If it matches the actual ViewModel, you can leave it as-is, but for future refinements it may be worth:
- Making
uiStatenon‑nullable with an explicit initial value.- Collapsing
networkStatus/isOnlineinto a single, clearly named flag (or relying solely onuiState+ReceiveNetworkResult)..claude/commands/gap-planning.md (1)
397-407: Add languages to fenced code blocks to satisfy markdownlintmarkdownlint is already flagging MD040 for several fenced blocks (e.g., improvement plan markdown, Kotlin snippets, dashboard example). To keep the command docs lint‑clean and improve editor highlighting, consider tagging fences, for example:
claude-product-cycle/design-spec-layer/_shared/COMPONENTS.md (1)
13-56: Tag fenced ASCII blocks with a language for markdownlint and readabilitySeveral large fenced blocks in this doc (color tokens, typography scale, spacing, layouts, components, etc.) are untyped, which triggers MD040 and loses syntax highlighting.
Given they’re diagrams, something like
text (orascii) would satisfy markdownlint and keep intent clear without implying code.claude-product-cycle/design-spec-layer/features/settings/API.md (1)
20-43: Add explicit languages to fenced header/JSON/Kotlin blocksTo keep markdownlint happy and improve readability, consider tagging fences here, e.g.:
```httpor```textfor header examples```jsonfor request/response samples```kotlinfor DTO/enumsThis will address the MD040 warnings called out by the linter.
claude-product-cycle/design-spec-layer/features/share-account/API.md (2)
700-735: UnifyDataStatemapping pattern in repository exampleIn
ShareAccountRepositoryImp,getShareProductsmanually maps toDataState.Success+catch, while other methods useasDataStateFlow()and share error handling.For consistency and easier reuse, consider either:
- Using
asDataStateFlow()forgetShareProductsas well, or- Showing a single, shared helper used by all four methods.
That keeps the spec aligned with a single pattern for wrapping API flows in
DataState.
637-671: Clean up markdown tables/fences to match lint rulesmarkdownlint is flagging missing blank lines around some tables (MD058) and untyped code fences (MD040). A quick pass to:
- Ensure a blank line before and after each table, and
- Add
json/kotlin/textto relevant fenced blockswill keep this reference doc lint‑clean.
claude-product-cycle/design-spec-layer/features/loan-account/MOCKUP.md (1)
27-205: Add language identifiers to ASCII mockup fencesAll the big screen mockups are in untyped fenced blocks, which markdownlint flags (MD040). Since these aren’t code, tagging them as
text(e.g., ```text) is enough to:
- Silence the linter.
- Make it clear they’re schematic layouts, not executable code.
Same applies to later component/animation/accessibility/dark‑mode fences.
claude-product-cycle/design-spec-layer/features/auth/SPEC.md (2)
143-182: TightenisSubmitButtonEnabledlogic to align with validation
SignUpState.isSubmitButtonEnabledonly checks for non‑blank fields. That means the CTA can be enabled even when:
- Email format is invalid,
- Passwords don’t meet strength rules,
confirmPassworddoesn’t matchpassword(with corresponding*Errorfields set).If the implementation already blocks submission on the ViewModel side, this is fine as a spec; otherwise, consider also requiring the relevant
*Errorfields to be null (and optionally a minimumpasswordStrengthState) before enabling the button.
102-141: ClarifyLoginState.uiStatenullability in the spec
LoginStatedeclaresuiState: ScreenUiState?without a default, while other features typically treat screen state as non‑nullable with an explicit initial value (e.g., Loading/Success).If the real ViewModel always provides a non‑null
uiState, you might want this spec to reflect that (making it non‑nullable and giving an initial value), to better match the ScreenState/ScreenUiState pattern you use elsewhere.claude-product-cycle/design-spec-layer/features/auth/MOCKUP.md (1)
24-73: Specify languages for fenced blocks to satisfy markdownlintThe flow diagram and subsequent screen mockups are all in untyped fenced blocks, which markdownlint is flagging (MD040). Tagging them as
text(for diagrams) orkotlin(for the small reference tables/code) will:
- Clear the linter warnings.
- Improve rendering/highlighting in most editors.
claude-product-cycle/design-spec-layer/features/qr/SPEC.md (1)
192-200: Add language specifications to Kotlin code blocks.Multiple Kotlin code blocks are missing language specifications in their fence markers. Add
kotlinafter the opening triple backticks to resolve markdownlint MD040 violations and improve syntax highlighting.Example fix:
-``` +```kotlin internal data class QrCodeReaderState(Also applies to: 204-210, 215-224, 259-272, 275-293, 369-384, 389-405
claude-product-cycle/design-spec-layer/features/location/API.md (1)
30-36: Specify language for Kotlin code blocks.Lines 30–36, 49–67, and 78–83 contain Kotlin code without language specifications. Add
kotlinto the opening fence markers for proper syntax highlighting and to resolve markdownlint MD040.Also applies to: 49-67, 78-83
claude-product-cycle/design-spec-layer/features/qr/API.md (1)
74-86: Add language specifications to Kotlin code blocks throughout the document.Multiple Kotlin code blocks (at lines 74–86, 91–98, 107–113, 118–132, 154–156, 170–187, 196–212, 228–242, 253–257, 262–267, 272–292) lack language specifications. Add
kotlinafter the opening triple backticks to enable syntax highlighting and resolve markdownlint MD040.Also applies to: 91-98, 107-113, 118-132, 154-156, 170-187, 196-212, 228-242, 253-257, 262-267, 272-292
claude-product-cycle/design-spec-layer/features/recent-transaction/SPEC.md (1)
108-134: Specify language for Kotlin code blocks.Add
kotlinlanguage specification to code blocks at lines 108–134 and 202–216 to resolve markdownlint MD040 violations and improve syntax highlighting.Also applies to: 202-216
claude-product-cycle/design-spec-layer/features/savings-account/SPEC.md (1)
229-281: Add language specifications to Kotlin code blocks.Four Kotlin code blocks defining state models (lines 229–281, 285–315, 319–352, 357–381) lack language specifications. Add
kotlinto the opening fence markers for syntax highlighting and to resolve markdownlint MD040.Also applies to: 285-315, 319-352, 357-381
claude-product-cycle/design-spec-layer/features/location/SPEC.md (2)
75-85: Add language specifications to Kotlin code blocks.Code blocks at lines 75–85 and 142–147 contain Kotlin code without language specifications. Add
kotlinto the opening fence markers for syntax highlighting and to resolve markdownlint MD040.Also applies to: 142-147
107-107: Clarify slightly awkward phrasing.Line 107 reads "Empty space where map would be" — consider simplifying to "empty space" or "blank area" for conciseness, or expanding to "map component displays as empty space" for clarity depending on context.
claude-product-cycle/design-spec-layer/features/loan-account/SPEC.md (2)
308-308: Add language identifiers to Kotlin code blocks.Fenced code blocks should declare a language for syntax highlighting and linting compliance. Add
kotlinidentifier to these code block declarations.🔎 Example fix
- ``` + ```kotlin data class LoanAccountsState(Also applies to: 333-333, 360-360, 382-382
18-27: Consider varying user story phrasing for readability.All user stories begin with "As a user, I want to..." which is grammatically correct but becomes repetitive across 10 consecutive lines. Consider alternating with phrases like "I should be able to...", "Users can...", or "The system should...". This improves prose flow without changing substance.
claude-product-cycle/design-spec-layer/features/guarantor/SPEC.md (2)
27-27: Add language identifiers to code blocks (MD040).Fenced code blocks at these line ranges lack language declarations. Add the appropriate language identifier (e.g.,
plaintextfor ASCII art,kotlinfor code).Also applies to: 53-53, 85-85, 294-294
282-282: Replace "can not" with "cannot".The standard English contraction is "cannot," not "can not." Appears in error messages and validation rules. Consider using "cannot" for consistency and formality.
Also applies to: 284-284, 314-314, 316-316
claude-product-cycle/design-spec-layer/features/recent-transaction/API.md (1)
14-14: Specify language for request/response code blocks (MD040).Add language identifiers to fenced code blocks: use
plaintextfor headers/parameters sections,jsonfor JSON responses. Improves readability and linting compliance.Also applies to: 93-93, 200-200
claude-product-cycle/design-spec-layer/features/accounts/SPEC.md (1)
36-69: Add language identifier to screen layout code block (MD040).Line 36 opens a fenced code block without a language identifier. Use
plaintextfor ASCII art layouts.claude-product-cycle/design-spec-layer/features/beneficiary/SPEC.md (1)
37-37: Add language identifiers to code blocks (MD040).Fenced code blocks at these lines lack language declarations. Use
plaintextfor ASCII art,kotlinfor Kotlin code,textfor navigation diagrams.Also applies to: 53-53, 85-85, 294-294, 578-578
claude-product-cycle/design-spec-layer/features/passcode/API.md (1)
27-27: Add language identifiers to Kotlin code blocks (MD040).Fenced code blocks at these lines lack Kotlin language declaration. Add
kotlinidentifier for proper syntax highlighting and compliance.Also applies to: 55-55, 76-76
claude-product-cycle/design-spec-layer/features/loan-account/API.md (1)
14-14: Consistently add language identifiers to code blocks (MD040).Multiple fenced code blocks lack language declarations. Use
plaintextfor request sections andjsonfor JSON responses; usekotlinfor Kotlin code. This appears 9 times throughout the file.Also applies to: 87-87, 176-176, 313-313, 361-361, 434-434, 457-457, 500-500, 521-521
claude-product-cycle/design-spec-layer/features/home/MOCKUP.md (1)
25-25: Add language identifiers to code blocks (MD040).Fenced code blocks lack language declarations. Use
plaintextfor ASCII diagrams and layouts,kotlinfor implementation code (line 930). Appears 5 times.Also applies to: 53-53, 85-85, 294-294, 930-930
claude-product-cycle/design-spec-layer/features/settings/SPEC.md (5)
12-12: Standardize "logout" terminology to "log out" (two words).In formal English, "logout" (noun/adjective) and "log out" (verb phrase) are the preferred forms. Update lines 12 and 21 to use "log out" consistently.
Also applies to: 21-21
16-21: Consider varying user story structure for better readability.The user stories (lines 16–21) all begin with "As a user, I want..." which, while consistent, becomes repetitive. Consider varying the phrasing to add readability—for example, mixing in "Users should be able to..." or "The system should support..." where appropriate.
29-69: Specify language identifier for ASCII mockup code blocks.ASCII mockups and code blocks should include a language identifier (e.g.,
```textor```plaintext) to comply with Markdown linting standards (MD040). This improves rendering and accessibility across different Markdown processors.Also applies to: 209-232, 267-291
356-356: Normalize user-related terminology in table.Line 356 refers to "user name" (two words), but the modern standard is "username" (one word), consistent with user interface conventions. Update for consistency with current terminology.
693-693: Add hyphen to multi-word adjective.Line 693: "3 second delay" should be "3-second delay" to properly hyphenate the compound adjective modifying "delay".
claude-product-cycle/design-spec-layer/features/passcode/SPEC.md (2)
27-137: Add language identifier to ASCII mockup code blocks.The ASCII mockups for screen layouts (lines 27–137) lack language identifiers in their fenced code blocks. Use
```textor```plaintextto comply with Markdown linting standards (MD040).
15-20: Vary user story phrasing for readability.Lines 15–20 show repetitive "As a user, I want..." constructs. Consider introducing alternative structures (e.g., "Users should be able to...", "The system must...") to improve narrative flow and reduce monotony.
claude-product-cycle/design-spec-layer/features/notification/SPEC.md (2)
27-91: Specify language identifier for ASCII mockup and code blocks.The mockup code block (lines 27–91) and other code examples in this file lack language identifiers. Use
```textfor ASCII and```kotlinfor Kotlin code to comply with Markdown linting (MD040).
15-19: Diversify user story phrasing.Lines 15–19 repeat the "As a user, I want..." structure. Introduce variation using constructs like "Users should see..." or "The app must provide..." to enhance readability.
claude-product-cycle/design-spec-layer/features/home/SPEC.md (2)
26-56: Add language identifier to ASCII mockup code block.Line 26: The screen layout mockup lacks a language identifier. Use
```textto comply with Markdown linting standards (MD040).
15-18: Vary user story structure for consistency with modern documentation standards.Lines 15–18 repeat "As a user, I want..." Introduce alternative phrasings (e.g., "Users can view...", "The system provides...") to improve readability and maintain consistency across the spec suite.
claude-product-cycle/design-spec-layer/features/guarantor/API.md (2)
22-46: Add language identifiers to code blocks for Markdown compliance.Multiple code blocks throughout the file lack language specifiers (MD040):
- JSON responses: use
```json- Kotlin code: use
```kotlinExamples: lines 22, 53, 85, 125, 150, 244, 322, etc.
Also applies to: 53-56, 85-104, 139-146, 166-207, 244-291, 322-348, 354-373
379-379: Clarify fake data usage in API documentation.Line 379 notes that
getGuarantorListreturns fake demo data. Consider adding a note in the section header (line 62) or endpoint description indicating that real data is pending implementation. This prevents confusion for developers integrating the API.claude-product-cycle/design-spec-layer/features/beneficiary/API.md (2)
33-61: Add language identifiers to all code blocks.Numerous code blocks lack language specifiers (MD040 violations):
- JSON responses/requests: use
```json- Kotlin interfaces/classes: use
```kotlinAffects lines 33, 74, 103, 125, 166, 197, 244, and others throughout the file.
Also applies to: 94-115, 145-155, 214-218, 298-317, 325-340, 347-366, 414-424, 486-566
572-572: Simplify wordiness in documentation.Line 572: "may be used in conjunction with" is verbose. Consider rephrasing to "may be used with" or "complement" to improve readability.
claude-product-cycle/design-spec-layer/features/accounts/API.md (1)
28-122: Specify language identifiers in code blocks throughout.Multiple code blocks lack language specifiers (MD040):
- JSON examples: use
```json- Kotlin code: use
```kotlinParticularly affects response examples (lines 28–122, 159–232, 292–359, etc.) and data model definitions (lines 553–646, 718–768).
Also applies to: 159-232, 292-359, 408-461, 553-646, 664-693, 718-768, 783-791
claude-product-cycle/design-spec-layer/features/savings-account/API.md (2)
14-21: Add language identifiers to all code blocks for Markdown compliance.Multiple code blocks throughout lack language specifiers (MD040):
- Request/response examples: use
```jsonor```- Kotlin implementations: use
```kotlinAffects all endpoint sections and data model definitions (lines 14, 97, 153, 192, 237, 286, 335, 394, 449, 540, 639, etc.).
Also applies to: 97-105, 153-164, 192-205, 237-242, 286-295, 335-357, 394-445, 449-490, 540-611, 639-665
1-3: Add metadata to documentation header.Consider adding a brief header summary (e.g., "Base URL", "Authentication") consistent with other API.md files (see beneficiary/API.md lines 1–6 for a good template). This improves navigation and consistency across the feature API suite.
| class NotificationRepositoryImp( | ||
| // private val notificationDao: MifosNotificationDao, | ||
| private val ioDispatcher: CoroutineDispatcher, | ||
| ) : NotificationRepository { | ||
|
|
||
| override fun loadNotifications(): Flow<DataState<List<MifosNotification>>> { | ||
| // TODO: Uncomment when Room DAO is enabled | ||
| // return notificationDao.getNotifications() | ||
| // .map { it.map { it.toModel() } } | ||
| // .flowOn(ioDispatcher) | ||
| return flowOf(DataState.Success(emptyList<MifosNotification>())) | ||
| .flowOn(ioDispatcher) | ||
| } | ||
|
|
||
| override fun getUnReadNotificationCount(): Flow<DataState<Int>> { | ||
| // return notificationDao.getUnreadNotificationsCount().flowOn(ioDispatcher) | ||
| return flowOf(DataState.Success(0)) | ||
| .flowOn(ioDispatcher) | ||
| } | ||
|
|
||
| override suspend fun saveNotification(notification: MifosNotification) { | ||
| // withContext(ioDispatcher) { | ||
| // notificationDao.saveNotification(notification.toEntity()) | ||
| // } | ||
| } | ||
|
|
||
| override suspend fun deleteOldNotifications() { | ||
| // return withContext(ioDispatcher) { | ||
| // val thirtyDaysInMillis = 2592000000L | ||
| // val cutoffTime = System.currentTimeMillis() - thirtyDaysInMillis | ||
| // notificationDao.deleteOldNotifications(cutoffTime) | ||
| // } | ||
| } | ||
|
|
||
| override suspend fun updateReadStatus(notification: MifosNotification, isRead: Boolean) { | ||
| // withContext(ioDispatcher) { | ||
| // notificationDao.updateReadStatus(notification.timeStamp, isRead) | ||
| // } | ||
| } | ||
| } |
There was a problem hiding this comment.
Repository implementation returns placeholder data instead of functional code.
The NotificationRepositoryImp methods have all DAO code commented out (lines 178, 183-185, 192, 198-200, 204-208, 212-214), returning empty lists and zero values instead of actual database operations. While the documentation transparently notes this at line 130, the accompanying STATUS.md file marks the feature as "✅ Done," which is misleading and creates a gap between documented status and actual implementation state.
This is a correctness issue since the repository cannot fulfill its contract to load, save, or delete notifications.
🔎 Verify implementation status alignment
The STATUS.md file should either:
- Update the "Overall Status" to reflect that this feature is incomplete/in-progress, or
- Uncomment the DAO integration as the TODO suggests and ensure the Room DAO interfaces exist
For reference, line 130 states: > *Note: Room DAO integration is currently commented out in the repository implementation
|
Social login should not be used by a mobile banking app |
- Add /session-start command to resume context from previous sessions - Add /session-end command to save context for next session - Add CURRENT_WORK.md for active work tracking between sessions - Refactor gap-analysis.md from 747 → 102 lines using templates - Refactor gap-planning.md from 500 → 114 lines using templates - Create templates/gap-analysis/ with 7 layer-specific templates - Create templates/gap-planning/ with 9 layer-specific templates - Move mockup-layer into design-spec-layer/mockup-tools/ - Update CLAUDE.md with session workflow documentation - Update PRODUCT_MAP.md with 5-layer lifecycle structure
- Add mockups/ status to /gap-analysis design output - Add Phase 2: Mockup Generation to /gap-planning design - Add /design [feature] mockup sub-command - Update CURRENT_WORK.md with mockup generation tasks Workflow: 1. /gap-analysis design - See mockups status (1/17 done) 2. /gap-planning design - Get step-by-step plan 3. /design [feature] mockup - Generate PROMPTS.md for Google Stitch
- Add /gap-analysis {layer} {sub-section} syntax for scoped analysis
- Add /gap-planning {layer} {sub-section} syntax for scoped planning
- Create 14 sub-section templates in templates/gap-*/subsection/
- design-mockup.md, design-spec.md for Design layer
- client-network.md, client-data.md for Client layer
- feature-single.md for Feature layer
- platform-android.md, platform-ios.md, platform-desktop.md, platform-web.md
- Add brief overview output when commands run without parameters
- Update CURRENT_WORK.md with new command syntax
Sub-section commands enable layer-wise scoping:
- /gap-analysis design mockup - Mockups status only
- /gap-planning design mockup - Plan mockup generation
- /gap-analysis client network - Network services status
- /gap-planning client data - Plan repository work
- Add complete command tree with all sub-commands - Document Design Layer as entry point for application design - Add 5-layer product lifecycle diagram - Include workflow examples for common scenarios - Document mockup generation workflow - List all 17 features with their commands
- Add tool selection prompt in /design [feature] mockup command - Support Google Stitch (recommended), Figma, Uizard, Visily - Add MCP setup instructions for stitch-ai and figma - Create TOOL_CONFIG.md for storing tool preferences - Update gap-analysis design mockup template with MCP status - Update gap-planning design mockup template with Step 0: Setup AI Design Tools with MCP: - Google Stitch: claude mcp add stitch-ai -- npx -y stitch-ai-mcp - Figma: claude mcp add figma -- npx -y figma-mcp --token TOKEN Resources: - Stitch AI MCP: https://github.com/StitchAI/stitch-ai-mcp - Google Stitch Web: https://stitch.withgoogle.com/
- Generate auth mockups (8 screens: splash, welcome, login, OTP, email, biometric, server, success) - Create PROMPTS.md with detailed Google Stitch prompts for each screen - Create design-tokens.json with colors, typography, spacing, components - Create FIGMA_LINKS.md template for tracking Figma exports - Update CURRENT_WORK.md with session progress Mockup Progress: 2/17 features complete (dashboard, auth) Next: Run /design home mockup
Complete mockup prompt generation for design layer: - Settings: Personal Command Center pattern - Passcode: Secure Gateway Experience pattern - Guarantor: Trust Network Hub pattern - QR: Smart Pay Hub pattern - Location: Location Intelligence Hub pattern - Client-Charge: Smart Charges Hub pattern Plus existing features: auth, home, accounts, savings-account, loan-account, share-account, beneficiary, transfer, recent-transaction, notification, dashboard Each feature includes: - Google Stitch prompts (Material Design 3) - Figma MCP prompts (component frames + flows) - design-tokens.json (colors, typography, components) - FIGMA_LINKS.md (export tracking template) Coverage: 17/17 features (100%)
There was a problem hiding this comment.
Actionable comments posted: 10
🧹 Nitpick comments (25)
claude-product-cycle/design-spec-layer/features/dashboard/mockups/PROMPTS_FIGMA.md (1)
20-20: Add language identifiers to all fenced code blocks.All 11 fenced code blocks lack language specifications. While these are natural language prompts (not executable code), markdown linting standards require a language identifier for accessibility and consistency.
🔎 Proposed fix to add language identifiers
Replace all occurrences of:
With: ```markdown ```textFor example, Line 20 becomes:
-``` +```textApply the same change to all fenced code blocks at lines 47, 79, 103, 134, 161, 199, 235, 252, 266, and 281.
</review_comment_end -->
Also applies to: 47-47, 79-79, 103-103, 134-134, 161-161, 199-199, 235-235, 252-252, 266-266, 281-281
claude-product-cycle/design-spec-layer/features/loan-account/mockups/PROMPTS_FIGMA.md (1)
20-20: Add language specifiers to all fenced code blocks for linting compliance.All 13 fenced code blocks lack language identifiers, which violates the MD040 markdownlint rule. Since these are natural language prompts intended for Figma input, add a language specifier like
textorpromptto each block.🔎 Example fix for fenced code blocks
Replace all instances of:
\``` Design a modern mobile loan management dashboard... \```With:
\```text Design a modern mobile loan management dashboard... \```All 13 affected blocks are at the start of each screen section and component prompt (lines 20, 44, 68, 90, 110, 163, 188, 233, 253, 271, 292, 309, 324, 340).
Also applies to: 44-44, 68-68, 90-90, 110-110, 163-163, 188-188, 233-233, 253-253, 271-271, 292-292, 309-309, 324-324, 340-340
claude-product-cycle/design-spec-layer/features/loan-account/mockups/PROMPTS_STITCH.md (1)
11-687: Add language specifiers to all fenced code blocks.All 16 fenced code blocks lack language specifiers (MD040). Since these are design prompts and specifications (not executable code), specify
textas the language to satisfy the linter.🔎 Example fix for lines 11–21
-``` +```text Primary Gradient: #667EEA -> #764BA2Apply the same change to all remaining code blocks: lines 27, 87, 154, 208, 258, 365, 412, 533, 566, 592, 619, 630, 640, 650, 660, and 671.
claude-product-cycle/design-spec-layer/features/accounts/mockups/PROMPTS_FIGMA.md (1)
20-20: Add language specification to fenced code blocks.All fenced code blocks throughout the file are missing language specification (e.g.,
```textor```prompt), which violates markdownlint's MD040 rule. Add an appropriate language tag to each block for consistency.🔎 Example fix for lines 20–42
-``` +```text Design a modern mobile accounts dashboard for "Mifos Mobile" fintech app that serves as a financial command center. ... Style it like Revolut or N26 - premium, data-rich, with purple as the primary accent color. -``` +```Apply the same pattern to all remaining fenced code blocks at lines 48, 68, 86, 104, 126, 148, 171, 188, 203, and 218.
Also applies to: 48-48, 68-68, 86-86, 104-104, 126-126, 148-148, 171-171, 188-188, 203-203, 218-218
claude-product-cycle/design-spec-layer/features/accounts/mockups/PROMPTS_STITCH.md (1)
11-11: Add language specification to fenced code blocks.All fenced code blocks throughout the file are missing language specification (e.g.,
```textor```plaintext), which violates markdownlint's MD040 rule. Add an appropriate language tag to each block for consistency.🔎 Example fix for lines 11–21
-``` +```text Primary Gradient: #667EEA → #764BA2 Secondary Gradient: #11998E → #38EF7D ... Screen Size: 393 x 852 pixels (Android) -``` +```Apply the same pattern to all remaining fenced code blocks at lines 27, 96, 133, 172, 202, 226, 245, 276, 288, 299, 311, 323, and 336.
Also applies to: 27-27, 96-96, 133-133, 172-172, 202-202, 226-226, 245-245, 276-276, 288-288, 299-299, 311-311, 323-323, 336-336
claude-product-cycle/design-spec-layer/features/home/mockups/PROMPTS_FIGMA.md (1)
11-43: Consider referencing a centralized design system instead of hardcoding colors in prompts.The prompts embed specific color values (#667EEA, #764BA2, etc.) directly in natural language descriptions. Since the PR adds a centralized
_shared/COMPONENTS.mddesign system file, these prompts should reference design tokens from there (e.g., "Primary Gradient: see COMPONENTS.md") rather than duplicating hex values across multiple files. This reduces maintenance burden and ensures consistency.If design tokens haven't been formalized in COMPONENTS.md yet, consider creating a linked section here that references it.
claude-product-cycle/design-spec-layer/features/home/mockups/PROMPTS_STITCH.md (1)
9-21: Design system reference section is well-structured, but should reference centralized COMPONENTS.md.The design system reference (lines 9-21) is clearer than embedding values in prompts, as in PROMPTS_FIGMA.md. However, it still duplicates color and spacing definitions rather than linking to the
_shared/COMPONENTS.mdfile that the PR introduces.Consider refactoring this to:
## Design System Reference See [`_shared/COMPONENTS.md`](../../_shared/COMPONENTS.md) for authoritative design tokens. Quick reference for Stitch: - Screen Size: 393 x 852 pixels (Android) - Material Design 3 spacing and typography unitsThis reduces duplication and ensures a single source of truth.
CLAUDE.md (1)
34-38: Add language specifier to 5-Layer Lifecycle code block.The diagram block at line 36 is missing a language identifier. While the content renders, the static analysis tool flags this as missing the language specifier (MD040).
🔎 Proposed fix
### 5-Layer Lifecycle -``` +```text Design → Server → Client → Feature → Platform</details> </blockquote></details> <details> <summary>.claude/commands/session-start.md (1)</summary><blockquote> `34-36`: **Add language specifier to code block containing template placeholders.** The placeholder block at line 34 is missing a language identifier. For clarity, using ` ```markdown ` is appropriate since the content is a Markdown template. <details> <summary>🔎 Proposed fix</summary> ```diff ### Step 2: Generate Session Summary -``` +```markdown ## Session Resumed **Last Session**: {{LAST_SESSION_DATE}}.claude/commands/gap-analysis.md (4)
7-21: Add language specifier to usage code block.The usage syntax block at line 7 is missing a language identifier. Using
```bashor```textwould clarify the command format.🔎 Proposed fix
## Usage -``` +```bash /gap-analysis # Brief overview (all layers summary) /gap-analysis design # Design layer status /gap-analysis design mockup # Design → Mockup sub-section only
25-31: Add language specifier and blank lines around 5-Layer Lifecycle block.Lines 25 and 56 are missing language specifiers. Additionally, tables should be surrounded by blank lines per MD058.
🔎 Proposed fixes
## 5-Layer Lifecycle with Sub-Sections -``` +```text 1. Design → spec | mockup | api | status 2. Server → endpoints | availability 3. Client → network | data | model 4. Feature → viewmodel | screen | navigation | di 5. Platform → android | ios | desktop | web
+### Brief Overview Output (No Parameters)
+
+When/gap-analysisis called without parameters, show a brief summary:
+
+```markdownFor line 56-67 table issue: ```diff **Layer Parameters**: + | Parameter | Template | Action | |-----------|----------|--------| | (none) | Brief summary | Quick overview of all layers | @@ lines @@ | `[name]` | `feature-detail.md` | Specific feature (all layers) | **Sub-Section Parameters** (layer + sub-section): + | Parameters | Template | Action |
37-49: Add language specifier to brief overview code block.The example output block at line 37 is missing a language identifier. Using
```markdownclarifies that it's a Markdown template example.🔎 Proposed fix
When `/gap-analysis` is called without parameters, show a **brief summary**: -``` +```markdown ## Gap Analysis - Quick Overview | Layer | Progress | Gaps | Next Action |
103-109: Add language specifier to progress bar reference block.Line 103 is missing a language identifier for the progress bar reference code block.
🔎 Proposed fix
**Progress Bar Reference**: -``` +```text 100% = [██████████] | 50% = [█████░░░░░] 90% = [█████████░] | 40% = [████░░░░░░] 80% = [████████░░] | 30% = [███░░░░░░░]claude-product-cycle/design-spec-layer/TOOL_CONFIG.md (1)
1-190: Fix markdown formatting issues to pass linting.Several code blocks are missing language specifications and tables need proper spacing. These are straightforward markdown formatting fixes.
🔎 Proposed fixes for markdown compliance
-```bash -claude mcp add stitch-ai -- npx -y stitch-ai-mcp -``` +```bash +claude mcp add stitch-ai -- npx -y stitch-ai-mcp +```Add blank lines around tables (before and after):
-### Available Tools +### Available Tools | ID | Tool | Website | MCP | Status | |----|------|---------|:---:|:------:| | `google-stitch` | Google Stitch | [stitch.withgoogle.com](https://stitch.withgoogle.com/) | ✅ | **Selected** | | `figma` | Figma | [figma.com](https://www.figma.com/) | ✅ | Available | | `uizard` | Uizard | [uizard.io](https://uizard.io/) | ❌ | Available | | `visily` | Visily | [visily.ai](https://www.visily.ai/) | ❌ | Available | - + ---Fix code example at line 109:
-``` +```bash /design auth mockup --tool=google-stitch /design auth mockup --tool=figma /design auth mockup --tool=uizard -``` +```Fix expected output at line 159:
-``` +``` MCP Servers: stitch-ai ✓ connected figma ✓ connected -``` +```Note: Apply similar fixes to all other code blocks and tables in the file that are missing language specifications or proper spacing.
.claude/commands/gap-planning.md (1)
144-154: Fix missing language specification on workflow diagram.The workflow diagram code block at line 146 is missing a language specification. While this is a text/plain diagram (not code), adding backticks with
textlanguage identifier will satisfy linting requirements.🔎 Proposed fix
## Workflow -``` +```text /gap-analysis → Identify gaps ↓ /gap-planning [target] → Create task list (this command) ↓ /implement [target] → Execute tasks ↓ /verify [target] → Confirm completion -``` +```claude-product-cycle/CURRENT_WORK.md (2)
21-60: Add language specifications to code blocks for markdown compliance.Two code blocks (MCP status output and commands) are missing language specifications. Add appropriate language identifiers to fix linting warnings.
🔎 Proposed fixes
Lines 32-35 (MCP status output):
**MCP Status**: -``` +```text stitch-ai: ✅ Installed (restart to connect) figma: ⚠️ Needs authentication -``` +```Lines 53-57 (Commands reference):
**Commands**: -``` +```bash /gap-analysis design mockup # See mockup progress (2/17) /gap-planning design mockup # Step-by-step plan /design [feature] mockup # Generate mockups for feature -``` +```
1-8: Clarify the purpose and update cadence of CURRENT_WORK.md.Consider adding a brief header explaining that this file should be updated at the end of each session and serves as a session continuity aid. Also clarify whether "Last Updated: 2026-01-03" should be automatically timestamped or manually updated.
This is a minor enhancement for maintainability—explicitly documenting the update pattern will help future sessions maintain the journal accurately.
claude-product-cycle/PRODUCT_MAP.md (2)
76-76: Add language identifiers to fenced code blocks.Multiple code blocks lack language specification, which violates markdown linting standards. Add appropriate language tags (e.g.,
bash,tree,markdown).🔎 Proposed fixes for markdown linting
- ``` + ```bash # Full 5-layer gap analysis dashboard /gap-analysis- ``` + ``` ┌─────────────────────────────────────────────────────────────┐ │ PRODUCT LIFECYCLE │- ``` + ```tree claude-product-cycle/design-spec-layer/ ├── _shared/- ``` + ```tree feature/ ├── auth/- ``` + ``` Read: claude-product-cycle/PRODUCT_MAP.md(Apply similar fixes for remaining lines 295, 300, 305, 311)
Also applies to: 180-180, 225-225, 259-259, 290-290, 295-295, 300-300, 305-305, 311-311
158-158: Add blank lines before and after tables.Tables should be surrounded by blank lines per markdown linting standards (MD058). Affects lines with table definitions in the "2025 Patterns to Add", "Color Palette", "Typography", and "Spacing" sections.
🔎 Example fix for line 158 area
**2025 Patterns to Add**: + | Pattern | Priority | Features Affected | |---------|----------|-------------------| | Spending Analytics Chart | High | home, accounts | ... + ### Todo Queue(Apply similar fixes to tables at lines 321, 331, and 339)
Also applies to: 321-321, 331-331, 339-339
.claude/commands/session-end.md (1)
7-7: Add language identifiers to fenced code blocks.Two code blocks lack language specification. Both should use
bashfor command examples (lines 7–10) ormarkdownfor template examples (lines 24–69 and 75–117).🔎 Proposed fixes
## Usage - ``` + ```bash /session-end # Save context and summarize session /session-end "brief note" # Save with custom note```diff **Update** `claude-product-cycle/CURRENT_WORK.md`: - ```markdown + ```markdown # Current Work **Last Updated**: {{DATE}} {{TIME}}(The markdown block at line 24 is correct; line 60 in the middle of templates should also be marked)
Also applies to: 60-60
claude-product-cycle/design-spec-layer/features/client-charge/mockups/PROMPTS.md (2)
14-451: Add language specifiers to fenced code blocks for better rendering.The fenced code blocks containing design prompts (lines 14-73, 76-117, 121-171, 175-249, 253-307, 311-348) lack language specifiers. While these are natural language prompts rather than code, adding a specifier like
textorpromptwould improve rendering and silence linting warnings.🔎 Example fix for the first prompt block
-``` +```text Create a Smart Charges Dashboard screen for a fintech banking app. Design specifications:Apply similar changes to all prompt blocks throughout the file.
Based on learnings: Static analysis (markdownlint) flagged these as MD040 violations.
457-533: Consider eliminating duplicate design tokens.The embedded design tokens (lines 457-533) duplicate and simplify content from
design-tokens.json. This creates a maintenance burden—changes must be synchronized across both files.Recommendation: Reference the design-tokens.json file instead of embedding a simplified copy, or add a comment explaining why the duplication is necessary (e.g., "Simplified tokens for AI prompt context").
🔎 Alternative approach
Replace the embedded JSON with a reference:
## Design Tokens -```json -{ - "feature": "client-charge", - ... -} -``` +See the complete design token specification in `design-tokens.json`. + +Key tokens for AI prompts: +- Primary gradient: `#667EEA` → `#764BA2` +- Success: `#00D09C`, Warning: `#FFB800`, Error: `#FF4757` +- Component radii: 8-24dp rangeclaude-product-cycle/design-spec-layer/features/guarantor/mockups/PROMPTS.md (2)
14-354: Add language specifiers to fenced code blocks.The prompt blocks lack language specifiers, causing markdown linting warnings. Consider adding
textorpromptas the language identifier for better rendering and to silence MD040 violations.Based on learnings: Static analysis (markdownlint) flagged these as MD040 violations.
360-415: Eliminate duplicate design tokens to reduce maintenance burden.The embedded design tokens duplicate content from
design-tokens.json. Keeping two sources of truth creates sync issues. Consider referencing the external file or clearly documenting why the simplified version is needed in the prompts.claude-product-cycle/design-spec-layer/features/dashboard/mockups/PROMPTS_STITCH.md (1)
9-21: Consolidate inline design tokens with shared design system.Design tokens (colors, fonts, screen dimensions) are defined locally in this file, but the PR context mentions a shared
_shared/COMPONENTS.mddesign system. Inline duplication creates maintenance risk and inconsistency across features.Recommend:
- Move or reference these tokens from the shared design system
- Replace inline definitions with a reference like:
See color palette and spacing tokens in [Design System Reference](.../_shared/COMPONENTS.md)
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (106)
.claude/commands/README.md.claude/commands/design.md.claude/commands/gap-analysis.md.claude/commands/gap-planning.md.claude/commands/session-end.md.claude/commands/session-start.mdCLAUDE.mdclaude-product-cycle/CURRENT_WORK.mdclaude-product-cycle/PRODUCT_MAP.mdclaude-product-cycle/design-spec-layer/TOOL_CONFIG.mdclaude-product-cycle/design-spec-layer/features/accounts/mockups/PROMPTS_FIGMA.mdclaude-product-cycle/design-spec-layer/features/accounts/mockups/PROMPTS_STITCH.mdclaude-product-cycle/design-spec-layer/features/auth/mockups/FIGMA_LINKS.mdclaude-product-cycle/design-spec-layer/features/auth/mockups/PROMPTS.mdclaude-product-cycle/design-spec-layer/features/auth/mockups/PROMPTS_FIGMA.mdclaude-product-cycle/design-spec-layer/features/auth/mockups/PROMPTS_STITCH.mdclaude-product-cycle/design-spec-layer/features/auth/mockups/design-tokens.jsonclaude-product-cycle/design-spec-layer/features/beneficiary/mockups/PROMPTS_FIGMA.mdclaude-product-cycle/design-spec-layer/features/beneficiary/mockups/PROMPTS_STITCH.mdclaude-product-cycle/design-spec-layer/features/client-charge/mockups/FIGMA_LINKS.mdclaude-product-cycle/design-spec-layer/features/client-charge/mockups/PROMPTS.mdclaude-product-cycle/design-spec-layer/features/client-charge/mockups/design-tokens.jsonclaude-product-cycle/design-spec-layer/features/dashboard/mockups/PROMPTS_FIGMA.mdclaude-product-cycle/design-spec-layer/features/dashboard/mockups/PROMPTS_STITCH.mdclaude-product-cycle/design-spec-layer/features/guarantor/mockups/FIGMA_LINKS.mdclaude-product-cycle/design-spec-layer/features/guarantor/mockups/PROMPTS.mdclaude-product-cycle/design-spec-layer/features/guarantor/mockups/design-tokens.jsonclaude-product-cycle/design-spec-layer/features/home/mockups/PROMPTS_FIGMA.mdclaude-product-cycle/design-spec-layer/features/home/mockups/PROMPTS_STITCH.mdclaude-product-cycle/design-spec-layer/features/loan-account/mockups/PROMPTS_FIGMA.mdclaude-product-cycle/design-spec-layer/features/loan-account/mockups/PROMPTS_STITCH.mdclaude-product-cycle/design-spec-layer/features/location/mockups/FIGMA_LINKS.mdclaude-product-cycle/design-spec-layer/features/location/mockups/PROMPTS.mdclaude-product-cycle/design-spec-layer/features/location/mockups/design-tokens.jsonclaude-product-cycle/design-spec-layer/features/notification/mockups/PROMPTS_FIGMA.mdclaude-product-cycle/design-spec-layer/features/notification/mockups/PROMPTS_STITCH.mdclaude-product-cycle/design-spec-layer/features/passcode/mockups/FIGMA_LINKS.mdclaude-product-cycle/design-spec-layer/features/passcode/mockups/PROMPTS.mdclaude-product-cycle/design-spec-layer/features/passcode/mockups/design-tokens.jsonclaude-product-cycle/design-spec-layer/features/qr/mockups/FIGMA_LINKS.mdclaude-product-cycle/design-spec-layer/features/qr/mockups/PROMPTS.mdclaude-product-cycle/design-spec-layer/features/qr/mockups/design-tokens.jsonclaude-product-cycle/design-spec-layer/features/recent-transaction/mockups/PROMPTS_FIGMA.mdclaude-product-cycle/design-spec-layer/features/recent-transaction/mockups/PROMPTS_STITCH.mdclaude-product-cycle/design-spec-layer/features/savings-account/mockups/PROMPTS_FIGMA.mdclaude-product-cycle/design-spec-layer/features/savings-account/mockups/PROMPTS_STITCH.mdclaude-product-cycle/design-spec-layer/features/settings/mockups/FIGMA_LINKS.mdclaude-product-cycle/design-spec-layer/features/settings/mockups/PROMPTS.mdclaude-product-cycle/design-spec-layer/features/settings/mockups/design-tokens.jsonclaude-product-cycle/design-spec-layer/features/share-account/mockups/PROMPTS_FIGMA.mdclaude-product-cycle/design-spec-layer/features/share-account/mockups/PROMPTS_STITCH.mdclaude-product-cycle/design-spec-layer/features/transfer/mockups/PROMPTS_FIGMA.mdclaude-product-cycle/design-spec-layer/features/transfer/mockups/PROMPTS_STITCH.mdclaude-product-cycle/design-spec-layer/mockup-tools/LAYER_STATUS.mdclaude-product-cycle/design-spec-layer/mockup-tools/README.mdclaude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/manifest.jsonclaude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/package.jsonclaude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/design-system/index.tsclaude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/design-system/tokens.tsclaude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/bottom-nav.tsclaude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/button.tsclaude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/card.tsclaude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/input-field.tsclaude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/list-item.tsclaude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/quick-actions.tsclaude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/screen.tsclaude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/top-bar.tsclaude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/index.tsclaude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/plugin.tsclaude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/utils/helpers.tsclaude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/tsconfig.jsonclaude-product-cycle/design-spec-layer/mockup-tools/templates/ai-prompt.mdclaude-product-cycle/templates/gap-analysis/dashboard.mdclaude-product-cycle/templates/gap-analysis/feature-detail.mdclaude-product-cycle/templates/gap-analysis/layer-client.mdclaude-product-cycle/templates/gap-analysis/layer-design.mdclaude-product-cycle/templates/gap-analysis/layer-feature.mdclaude-product-cycle/templates/gap-analysis/layer-platform.mdclaude-product-cycle/templates/gap-analysis/layer-server.mdclaude-product-cycle/templates/gap-analysis/subsection/client-data.mdclaude-product-cycle/templates/gap-analysis/subsection/client-network.mdclaude-product-cycle/templates/gap-analysis/subsection/design-mockup.mdclaude-product-cycle/templates/gap-analysis/subsection/design-spec.mdclaude-product-cycle/templates/gap-analysis/subsection/feature-single.mdclaude-product-cycle/templates/gap-analysis/subsection/platform-android.mdclaude-product-cycle/templates/gap-analysis/subsection/platform-desktop.mdclaude-product-cycle/templates/gap-analysis/subsection/platform-ios.mdclaude-product-cycle/templates/gap-analysis/subsection/platform-web.mdclaude-product-cycle/templates/gap-planning/dashboard.mdclaude-product-cycle/templates/gap-planning/feature-new.mdclaude-product-cycle/templates/gap-planning/feature-v2.mdclaude-product-cycle/templates/gap-planning/layer-client.mdclaude-product-cycle/templates/gap-planning/layer-design.mdclaude-product-cycle/templates/gap-planning/layer-feature.mdclaude-product-cycle/templates/gap-planning/layer-platform.mdclaude-product-cycle/templates/gap-planning/layer-server.mdclaude-product-cycle/templates/gap-planning/subsection/client-data.mdclaude-product-cycle/templates/gap-planning/subsection/client-network.mdclaude-product-cycle/templates/gap-planning/subsection/design-mockup.mdclaude-product-cycle/templates/gap-planning/subsection/design-spec.mdclaude-product-cycle/templates/gap-planning/subsection/feature-single.mdclaude-product-cycle/templates/gap-planning/subsection/platform-android.mdclaude-product-cycle/templates/gap-planning/subsection/platform-desktop.mdclaude-product-cycle/templates/gap-planning/subsection/platform-ios.mdclaude-product-cycle/templates/gap-planning/subsection/platform-web.mdclaude-product-cycle/templates/gap-planning/task-template.md
✅ Files skipped from review due to trivial changes (1)
- claude-product-cycle/design-spec-layer/features/auth/mockups/design-tokens.json
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-12-29T16:08:08.437Z
Learnt from: CR
Repo: openMF/mifos-mobile PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-29T16:08:08.437Z
Learning: Use Kotlin Multiplatform (KMP) for shared code across Android, iOS, Desktop (JVM), and Web (Kotlin/JS + WASM) platforms in the Mifos Mobile application
Applied to files:
CLAUDE.md
🪛 LanguageTool
claude-product-cycle/design-spec-layer/features/auth/mockups/PROMPTS.md
[grammar] ~34-~34: Ensure spelling is correct
Context: ...quential pulse animation - White color, 8dp diameter each Style Guidelines: - ...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[grammar] ~315-~315: Ensure spelling is correct
Context: ... Center: - Large success animation, 160dp container - Green checkmark (#00D09C) w...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
claude-product-cycle/design-spec-layer/features/guarantor/mockups/PROMPTS.md
[grammar] ~115-~115: Use a hyphen to join words.
Context: ...rics, gamification ### Prompt 3: AI Suggested Guarantors Create an AI S...
(QB_NEW_EN_HYPHEN)
🪛 markdownlint-cli2 (0.18.1)
CLAUDE.md
36-36: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
claude-product-cycle/design-spec-layer/TOOL_CONFIG.md
7-7: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
27-27: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
51-51: Tables should be surrounded by blank lines
(MD058, blanks-around-tables)
62-62: Tables should be surrounded by blank lines
(MD058, blanks-around-tables)
106-106: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
146-146: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
claude-product-cycle/design-spec-layer/features/client-charge/mockups/PROMPTS.md
14-14: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
76-76: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
121-121: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
175-175: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
253-253: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
311-311: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
356-356: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
401-401: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
claude-product-cycle/design-spec-layer/features/accounts/mockups/PROMPTS_STITCH.md
11-11: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
27-27: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
96-96: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
133-133: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
172-172: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
202-202: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
226-226: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
245-245: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
276-276: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
288-288: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
299-299: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
311-311: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
323-323: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
336-336: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
claude-product-cycle/design-spec-layer/features/auth/mockups/PROMPTS_FIGMA.md
20-20: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
32-32: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
48-48: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
68-68: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
88-88: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
112-112: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
132-132: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
156-156: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
175-175: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
180-180: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
185-185: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
claude-product-cycle/PRODUCT_MAP.md
76-76: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
158-158: Tables should be surrounded by blank lines
(MD058, blanks-around-tables)
180-180: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
225-225: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
259-259: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
290-290: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
295-295: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
300-300: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
305-305: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
311-311: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
321-321: Tables should be surrounded by blank lines
(MD058, blanks-around-tables)
331-331: Tables should be surrounded by blank lines
(MD058, blanks-around-tables)
339-339: Tables should be surrounded by blank lines
(MD058, blanks-around-tables)
claude-product-cycle/design-spec-layer/features/dashboard/mockups/PROMPTS_STITCH.md
11-11: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
27-27: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
89-89: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
139-139: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
198-198: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
236-236: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
269-269: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
322-322: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
336-336: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
348-348: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
359-359: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
claude-product-cycle/design-spec-layer/features/dashboard/mockups/PROMPTS_FIGMA.md
20-20: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
47-47: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
79-79: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
103-103: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
134-134: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
161-161: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
199-199: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
235-235: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
252-252: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
266-266: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
281-281: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
claude-product-cycle/design-spec-layer/features/auth/mockups/PROMPTS_STITCH.md
11-11: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
26-26: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
45-45: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
68-68: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
98-98: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
127-127: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
159-159: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
184-184: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
208-208: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
230-230: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
240-240: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
250-250: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
.claude/commands/README.md
7-7: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
123-123: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
159-159: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
167-167: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
175-175: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
183-183: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
202-202: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
claude-product-cycle/design-spec-layer/features/loan-account/mockups/PROMPTS_FIGMA.md
20-20: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
44-44: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
68-68: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
90-90: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
110-110: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
163-163: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
188-188: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
233-233: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
253-253: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
271-271: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
292-292: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
309-309: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
324-324: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
340-340: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
.claude/commands/gap-analysis.md
7-7: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
25-25: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
37-37: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
56-56: Tables should be surrounded by blank lines
(MD058, blanks-around-tables)
67-67: Tables should be surrounded by blank lines
(MD058, blanks-around-tables)
95-95: Spaces inside emphasis markers
(MD037, no-space-in-emphasis)
103-103: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
claude-product-cycle/design-spec-layer/features/beneficiary/mockups/PROMPTS_FIGMA.md
20-20: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
44-44: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
68-68: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
92-92: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
120-120: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
142-142: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
164-164: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
188-188: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
212-212: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
232-232: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
252-252: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
276-276: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
299-299: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
310-310: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
.claude/commands/design.md
55-55: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
85-85: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
101-101: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
.claude/commands/gap-planning.md
76-76: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
.claude/commands/session-end.md
7-7: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
60-60: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
.claude/commands/session-start.md
36-36: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
claude-product-cycle/CURRENT_WORK.md
32-32: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
53-53: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
claude-product-cycle/design-spec-layer/features/accounts/mockups/PROMPTS_FIGMA.md
20-20: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
48-48: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
68-68: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
86-86: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
104-104: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
126-126: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
148-148: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
171-171: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
188-188: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
203-203: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
218-218: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
claude-product-cycle/design-spec-layer/features/guarantor/mockups/PROMPTS.md
14-14: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
80-80: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
117-117: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
169-169: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
214-214: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
272-272: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
315-315: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
claude-product-cycle/design-spec-layer/features/loan-account/mockups/PROMPTS_STITCH.md
11-11: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
27-27: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
87-87: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
154-154: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
208-208: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
258-258: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
365-365: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
412-412: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
533-533: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
566-566: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
592-592: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
619-619: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
630-630: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
640-640: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
650-650: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
660-660: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
671-671: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: PR Checks KMP / Static Analysis Check
|
|
||
| When running `/design [feature] mockup`, prompt user to select tool: | ||
|
|
||
| ``` |
There was a problem hiding this comment.
Add language identifiers to fenced code blocks.
Markdown linting flags three code blocks missing language specifiers. These should be added for proper syntax highlighting and compliance with markdown standards.
🔎 Proposed fixes
#### Step 0: Check MCP & Select Tool
**Check MCP Status**:
-```
+```bash
claude mcp list
```diff
**Output Files**:
-```
+```text
features/[Feature]/mockups/
├── PROMPTS.md # AI tool prompts (format based on selection)
├── design-tokens.json # Structured design tokens
└── FIGMA_LINKS.md # Figma URLs (user fills after export)
-```
+```
### Mockup Generation Workflow
-```
+```text
┌───────────────────────────────────────────────────────────────────┐
│ /design [Feature] mockup WORKFLOW │
│...Also applies to: 85-85, 101-101
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
55-55: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI Agents
In .claude/commands/design.md around lines 55, 85, and 101, three fenced code
blocks lack language identifiers; update each opening fence to include the
appropriate language (e.g., ```bash for the command block and ```text for the
mockup/text blocks) so markdown linting and syntax highlighting accept them,
ensuring you only change the three opening fences and leave the block contents
unchanged.
|
|
||
| | # | Feature | Design Dir | Feature Dir | | ||
| |:-:|---------|------------|-------------| | ||
| | 1 | auth | features/auth/ | feature/auth/ | | ||
| | 2 | home | features/home/ | feature/home/ | | ||
| | 3 | accounts | features/accounts/ | feature/account/ | | ||
| | 4 | savings-account | features/savings-account/ | feature/savings-account/ | | ||
| | 5 | loan-account | features/loan-account/ | feature/loan-account/ | | ||
| | 6 | share-account | features/share-account/ | feature/share-account/ | | ||
| | 7 | beneficiary | features/beneficiary/ | feature/beneficiary/ | | ||
| | 8 | transfer | features/transfer/ | feature/transfer-process/ | | ||
| | 9 | recent-transaction | features/recent-transaction/ | feature/recent-transaction/ | | ||
| | 10 | notification | features/notification/ | feature/notification/ | | ||
| | 11 | settings | features/settings/ | feature/settings/ | | ||
| | 12 | passcode | features/passcode/ | libs/mifos-passcode/ | | ||
| | 13 | guarantor | features/guarantor/ | feature/guarantor/ | | ||
| | 14 | qr | features/qr/ | feature/qr-code/ | | ||
| | 15 | location | features/location/ | feature/location/ | | ||
| | 16 | client-charge | features/client-charge/ | feature/user-profile/ | | ||
| | 17 | dashboard | features/dashboard/ | feature/dashboard/ | |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check for the existence of mapped directories, particularly focusing on the flagged ones
echo "=== Checking Design Dir mappings (features/X) ==="
fd -t d '^(auth|home|accounts|savings-account|loan-account|share-account|beneficiary|transfer|recent-transaction|notification|settings|passcode|guarantor|qr|location|client-charge|dashboard)$' features/ 2>/dev/null | sort
echo ""
echo "=== Checking Feature Dir mappings (feature/X or libs/X) ==="
fd -t d '^(auth|home|accounts|account|savings-account|loan-account|share-account|beneficiary|transfer-process|recent-transaction|notification|settings|guarantor|qr-code|location|user-profile|dashboard)$' feature/ libs/ 2>/dev/null | sort
echo ""
echo "=== Specific flagged mappings ==="
echo "Passcode check:"
fd -t d "passcode" . 2>/dev/null | head -20
echo ""
echo "Client-charge check:"
fd -t d "user-profile" . 2>/dev/null | head -20Repository: openMF/mifos-mobile
Length of output: 2435
🏁 Script executed:
#!/bin/bash
# More targeted search for user-profile and any client-charge related dirs
echo "=== Searching for user-profile ==="
fd "user-profile" . 2>/dev/null | head -20
echo ""
echo "=== Searching for client-charge ==="
fd "client-charge" . 2>/dev/null | head -20
echo ""
echo "=== List all feature/ directories ==="
ls -d feature/*/ 2>/dev/null | sort
echo ""
echo "=== List all libs/ directories ==="
ls -d libs/*/ 2>/dev/null | sortRepository: openMF/mifos-mobile
Length of output: 869
Feature reference table contains multiple mapping errors that need correction.
The table has several inaccuracies:
- Row 16 (client-charge): Maps to
feature/user-profile/, but this directory does not exist. The actual directory isfeature/client-charge/. - Row 12 (passcode): Incomplete mapping. The feature exists in both
feature/passcode/andlibs/mifos-passcode/; the table shows only the libs directory. - Row 14 (qr): Maps to
feature/qr-code/, but the actual directory isfeature/qr/. - Missing entries: The table omits several existing features including
loan-application,onboarding-language,savings-application,share-application,status, andthird-party-transfer. - Design Dir references: The "Design Dir" column references a
features/pattern that appears to be located inclaude-product-cycle/design-spec-layer/features/rather than at the root level.
Update the mappings to reflect the actual directory structure.
🤖 Prompt for AI Agents
.claude/commands/gap-analysis.md around lines 114 to 133: the feature reference
table has multiple incorrect mappings and omissions; update row 16 to map
client-charge -> feature/client-charge/, fix row 12 to list both
feature/passcode/ and libs/mifos-passcode/, change row 14 to map qr ->
feature/qr/, add missing feature rows for loan-application, onboarding-language,
savings-application, share-application, status, and third-party-transfer with
their correct feature/ directories, and change the "Design Dir" column values to
point to claude-product-cycle/design-spec-layer/features/ instead of root-level
features/ so all entries reflect the actual directory structure.
| | `/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 | | ||
| ``` |
There was a problem hiding this comment.
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: ` ```textAlso 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.
| ``` | ||
| Design a premium fintech app splash screen for "Mifos Mobile" banking app. | ||
| Use a beautiful purple-blue gradient background going diagonally. Place a white minimalist logo in the center with a subtle glow effect. Below the logo, show "MIFOS" in white uppercase letters with wide letter spacing. Add a tagline "Your Financial Freedom" in lighter white below. | ||
| At the bottom, show three small loading dots that would animate. Keep it clean, premium, and trustworthy like Revolut or Monzo splash screens. No navigation bars or buttons - just the brand moment. | ||
| ``` |
There was a problem hiding this comment.
Add language specifiers to all fenced code blocks.
All code blocks are missing language identifiers, which triggers markdown linting violations (MD040). Since these are natural language prompts rather than executable code, mark them as text or plaintext.
🔎 Proposed fix example (apply to all code blocks)
## Screen 1: Splash Screen
-```
+```text
Design a premium fintech app splash screen for "Mifos Mobile" banking app.
...
-```
+```Apply the same pattern to all other code blocks: lines 32, 48, 68, 88, 112, 132, 156, 175, 180, and 185.
Also applies to: 32-42, 48-62, 68-82, 88-106, 112-126, 132-150, 156-168, 175-177, 180-182, 185-187
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
20-20: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI Agents
claude-product-cycle/design-spec-layer/features/auth/mockups/PROMPTS_FIGMA.md
lines 20-26 (and similarly at 32-42, 48-62, 68-82, 88-106, 112-126, 132-150,
156-168, 175-177, 180-182, 185-187): all fenced code blocks lack language
identifiers causing MD040 lint errors; update each triple-backtick fence to
include a plain language specifier such as `text` (e.g., replace ``` with
```text at the start of each prompt block) and leave the closing ``` unchanged
so each block is explicitly marked as plaintext.
|
|
||
| ``` | ||
| Primary Gradient: #667EEA → #764BA2 | ||
| Success: #00D09C | ||
| Error: #FF4757 | ||
| Text Primary: #1F2937 | ||
| Text Secondary: #6B7280 | ||
| Text Muted: #9CA3AF | ||
| Border: #E5E7EB | ||
| Screen Size: 393 x 852 pixels (Android) | ||
| ``` |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
fd -type f -name "PROMPTS_STITCH.md"Repository: openMF/mifos-mobile
Length of output: 233
🏁 Script executed:
find . -name "PROMPTS_STITCH.md" -type fRepository: openMF/mifos-mobile
Length of output: 1023
🏁 Script executed:
cat -n ./claude-product-cycle/design-spec-layer/features/auth/mockups/PROMPTS_STITCH.md | head -60Repository: openMF/mifos-mobile
Length of output: 2008
🏁 Script executed:
cat -n ./claude-product-cycle/design-spec-layer/features/auth/mockups/PROMPTS_STITCH.md | head -270 | tail -210Repository: openMF/mifos-mobile
Length of output: 6847
Add language specifiers to all 12 fenced code blocks to comply with markdown linting standards (MD040).
All code blocks in this file lack language identifiers. Add text or plaintext to the opening backticks of each code block (lines 11, 26, 45, 68, 98, 127, 159, 184, 208, 230, 240, 250) to satisfy linting requirements and improve consistency.
Example fix for Design System Reference block
-```
+```text
Primary Gradient: #667EEA → #764BA2
Success: #00D09C
Error: #FF4757
Text Primary: #1F2937
Text Secondary: #6B7280
Text Muted: #9CA3AF
Border: #E5E7EB
Screen Size: 393 x 852 pixels (Android)
-```
+```Apply the same pattern to all other code blocks.
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
11-11: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI Agents
In
claude-product-cycle/design-spec-layer/features/auth/mockups/PROMPTS_STITCH.md
around lines 10 to 20 (and specifically at code blocks starting on lines 11, 26,
45, 68, 98, 127, 159, 184, 208, 230, 240, 250), each fenced code block is
missing a language specifier; update the opening triple-backtick for each of
those 12 blocks to ```text (or ```plaintext) while leaving the content and the
closing triple-backticks unchanged so the markdown linter MD040 is satisfied and
formatting remains consistent.
|
|
||
| ## Screen 1: Trusted Contacts Hub | ||
|
|
||
| ``` |
There was a problem hiding this comment.
Add language identifier to all fenced code blocks (MD040).
Specifying a language improves content rendering by using the correct syntax highlighting for code. Since these design prompts are plaintext prose, add text as the language identifier to all fenced code blocks.
🔎 Proposed fix: Add language identifiers to all code blocks
Apply this pattern to all 13 occurrences:
Before:
After:
This applies to lines: 20, 44, 68, 92, 120, 142, 164, 188, 212, 232, 252, 276, 299, 310.
Also applies to: 44-44, 68-68, 92-92, 120-120, 142-142, 164-164, 188-188, 212-212, 232-232, 252-252, 276-276, 299-299, 310-310
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
20-20: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI Agents
In
claude-product-cycle/design-spec-layer/features/beneficiary/mockups/PROMPTS_FIGMA.md
around lines 20 (and additionally at 44, 68, 92, 120, 142, 164, 188, 212, 232,
252, 276, 299, 310), fenced code blocks are missing a language identifier which
triggers MD040; update each triple-backtick fence to use "text" (e.g., replace
``` with ```text) so all plaintext design prompts include the language
identifier and ensure each occurrence listed is updated consistently.
|
|
||
| ## Design System Reference | ||
|
|
||
| ``` |
There was a problem hiding this comment.
Add language identifier to all fenced code blocks (MD040).
Specifying a language improves content rendering by using the correct syntax highlighting for code. Add text as the language identifier to all 17 fenced code blocks containing design system references and prompts.
🔎 Proposed fix: Add language identifiers to all code blocks
Apply this pattern to all 17 occurrences:
Before:
After:
This applies to lines: 11, 27, 74, 118, 142, 190, 224, 260, 299, 336, 364, 393, 425, 450, 460, 470, 480.
Also applies to: 27-27, 74-74, 118-118, 142-142, 190-190, 224-224, 260-260, 299-299, 336-336, 364-364, 393-393, 425-425, 450-450, 460-460, 470-470, 480-480
🤖 Prompt for AI Agents
In
claude-product-cycle/design-spec-layer/features/beneficiary/mockups/PROMPTS_STITCH.md
around lines 11, 27, 74, 118, 142, 190, 224, 260, 299, 336, 364, 393, 425, 450,
460, 470, 480, the fenced code blocks are missing a language identifier (MD040);
update each opening fence from ``` to ```text so all 17 code blocks specify the
language, leaving the closing fences unchanged and run a markdown linter to
confirm MD040 is resolved.
| ``` | ||
| Primary: #6750A4 | ||
| Primary Container: #EADDFF | ||
| Surface: #FFFBFE | ||
| On Surface: #1C1B1F | ||
| On Surface Variant: #49454F | ||
| Error/Debit: #B3261E | ||
| Success/Credit: #2E7D32 | ||
| Screen Size: 393 x 852 pixels (Android) | ||
| Font: Inter | ||
| ``` |
There was a problem hiding this comment.
Add language specifiers to all fenced code blocks.
Each fenced code block should declare its content type. Since these are design specification narratives (not executable code), mark them as plaintext or text.
🔎 Example fix for lines 11-21
-```
+```plaintext
Primary: #6750A4
Primary Container: #EADDFF
...
-```
+```This applies to all fenced blocks in the file (11 total violations).
Also applies to: 27-83, 89-133, 139-192, 198-230, 236-263, 269-315, 322-333, 336-345, 348-356, 359-366
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
11-11: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI Agents
claude-product-cycle/design-spec-layer/features/dashboard/mockups/PROMPTS_STITCH.md
around lines 11-21, 27-83, 89-133, 139-192, 198-230, 236-263, 269-315, 322-333,
336-345, 348-356, and 359-366: each fenced code block is missing a language
specifier—update every triple-backtick fence in the listed ranges to begin with
```plaintext (or ```text) instead of just ``` and leave the content and closing
backticks unchanged so all 11 fenced blocks explicitly declare their content
type.
| # Guarantor Feature - Figma Links | ||
|
|
||
| > **Feature**: Guarantor (Trust Network Hub) | ||
| > **Status**: Pending Design Export | ||
| > **Last Updated**: 2025-01-04 | ||
| --- | ||
|
|
||
| ## Figma Design Links | ||
|
|
||
| After generating designs using AI tools (Stitch/Figma), paste the links below: | ||
|
|
||
| ### Main Screens | ||
|
|
||
| | Screen | Figma Link | Status | | ||
| |--------|------------|--------| | ||
| | Trust Network Hub | `[Paste link here]` | Pending | | ||
| | Network Graph View | `[Paste link here]` | Pending | | ||
| | AI Suggestions | `[Paste link here]` | Pending | | ||
| | Guarantor Detail | `[Paste link here]` | Pending | | ||
| | Add Guarantor - Type | `[Paste link here]` | Pending | | ||
| | Add Guarantor - Details | `[Paste link here]` | Pending | | ||
| | Add Guarantor - Amount | `[Paste link here]` | Pending | | ||
| | Invite Success | `[Paste link here]` | Pending | | ||
| | Guarantor History | `[Paste link here]` | Pending | | ||
|
|
||
| ### Component Library | ||
|
|
||
| | Component | Figma Link | Status | | ||
| |-----------|------------|--------| | ||
| | Coverage Ring | `[Paste link here]` | Pending | | ||
| | Guarantor Card | `[Paste link here]` | Pending | | ||
| | Trust Stars | `[Paste link here]` | Pending | | ||
| | Status Chip | `[Paste link here]` | Pending | | ||
| | Match Badge | `[Paste link here]` | Pending | | ||
| | Network Node | `[Paste link here]` | Pending | | ||
| | Timeline Item | `[Paste link here]` | Pending | | ||
|
|
||
| ### Dark Mode Variants | ||
|
|
||
| | Screen | Figma Link | Status | | ||
| |--------|------------|--------| | ||
| | Trust Network Hub (Dark) | `[Paste link here]` | Pending | | ||
| | Guarantor Detail (Dark) | `[Paste link here]` | Pending | | ||
|
|
||
| --- | ||
|
|
||
| ## Export Checklist | ||
|
|
||
| - [ ] Export all screens at 1x, 2x, 3x | ||
| - [ ] Export component assets as SVG | ||
| - [ ] Document color variables | ||
| - [ ] Create prototype connections | ||
| - [ ] Add interaction annotations | ||
| - [ ] Review accessibility contrast | ||
| - [ ] Verify dark mode mappings | ||
|
|
||
| --- | ||
|
|
||
| ## Notes | ||
|
|
||
| _Add any design notes, feedback, or revision history here._ |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
echo "=== Checking FIGMA_LINKS.md files across features ==="
echo ""
# List all FIGMA_LINKS.md files under the design-spec-layer features
find claude-product-cycle/design-spec-layer/features -name "FIGMA_LINKS.md" -type f | sort
# Count how many features have this file
count=$(find claude-product-cycle/design-spec-layer/features -name "FIGMA_LINKS.md" -type f | wc -l)
echo ""
echo "Total FIGMA_LINKS.md files found: $count"
echo ""
# List all feature directories
echo "=== All feature directories ==="
ls -1d claude-product-cycle/design-spec-layer/features/*/ 2>/dev/null | wc -l
ls -1d claude-product-cycle/design-spec-layer/features/*/ 2>/dev/null | head -20Repository: openMF/mifos-mobile
Length of output: 1758
🏁 Script executed:
#!/bin/bash
# Check which features have FIGMA_LINKS.md and which don't
echo "=== Feature-by-feature check ==="
echo ""
for feature_dir in claude-product-cycle/design-spec-layer/features/*/; do
feature_name=$(basename "$feature_dir")
figma_file="$feature_dir/mockups/FIGMA_LINKS.md"
if [ -f "$figma_file" ]; then
echo "✓ $feature_name: HAS FIGMA_LINKS.md"
else
echo "✗ $feature_name: MISSING FIGMA_LINKS.md"
fi
done | sortRepository: openMF/mifos-mobile
Length of output: 689
🏁 Script executed:
#!/bin/bash
# Compare structure of multiple FIGMA_LINKS.md files
echo "=== Comparing first 3 FIGMA_LINKS.md files ==="
echo ""
files=$(find claude-product-cycle/design-spec-layer/features -name "FIGMA_LINKS.md" -type f | sort | head -3)
for file in $files; do
echo "File: $file"
echo "---"
head -30 "$file"
echo ""
echo ""
doneRepository: openMF/mifos-mobile
Length of output: 3025
Add instructions section to clarify designer workflow and link format.
This file serves as a template for capturing Figma design links, but lacks guidance for designers. Consider adding a section that explains:
- When to populate: After designs are finalized and exported to Figma
- Link format: Full Figma file URL or prototype link (e.g.,
https://www.figma.com/file/...) - Status workflow: Define what status values mean (e.g., "Pending" → "Ready for QA" → "Approved")
- Prerequisites: Reference the Export Checklist before marking items as ready
Example enhancement: Add workflow guidance section
# Guarantor Feature - Figma Links
> **Feature**: Guarantor (Trust Network Hub)
> **Status**: Pending Design Export
> **Last Updated**: 2025-01-04
---
+## Instructions for Designers
+
+1. **When to fill**: Populate links after designs are finalized and exported to Figma.
+2. **Link format**: Paste the full Figma file URL or prototype link (e.g., `https://www.figma.com/file/...`).
+3. **Checklist**: Complete the Export Checklist before marking a screen/component as "Ready".
+4. **Status values**: Use `Pending`, `Ready for QA`, `Approved`, or `Exported`.
+
+---
+
## Figma Design LinksNote: Verification shows only 7 of the 17 feature folders include FIGMA_LINKS.md files (auth, client-charge, guarantor, location, passcode, qr, settings), and those that do have inconsistent structures. Consider establishing a standard template and rolling it out across the remaining 10 features.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| # Guarantor Feature - Figma Links | |
| > **Feature**: Guarantor (Trust Network Hub) | |
| > **Status**: Pending Design Export | |
| > **Last Updated**: 2025-01-04 | |
| --- | |
| ## Figma Design Links | |
| After generating designs using AI tools (Stitch/Figma), paste the links below: | |
| ### Main Screens | |
| | Screen | Figma Link | Status | | |
| |--------|------------|--------| | |
| | Trust Network Hub | `[Paste link here]` | Pending | | |
| | Network Graph View | `[Paste link here]` | Pending | | |
| | AI Suggestions | `[Paste link here]` | Pending | | |
| | Guarantor Detail | `[Paste link here]` | Pending | | |
| | Add Guarantor - Type | `[Paste link here]` | Pending | | |
| | Add Guarantor - Details | `[Paste link here]` | Pending | | |
| | Add Guarantor - Amount | `[Paste link here]` | Pending | | |
| | Invite Success | `[Paste link here]` | Pending | | |
| | Guarantor History | `[Paste link here]` | Pending | | |
| ### Component Library | |
| | Component | Figma Link | Status | | |
| |-----------|------------|--------| | |
| | Coverage Ring | `[Paste link here]` | Pending | | |
| | Guarantor Card | `[Paste link here]` | Pending | | |
| | Trust Stars | `[Paste link here]` | Pending | | |
| | Status Chip | `[Paste link here]` | Pending | | |
| | Match Badge | `[Paste link here]` | Pending | | |
| | Network Node | `[Paste link here]` | Pending | | |
| | Timeline Item | `[Paste link here]` | Pending | | |
| ### Dark Mode Variants | |
| | Screen | Figma Link | Status | | |
| |--------|------------|--------| | |
| | Trust Network Hub (Dark) | `[Paste link here]` | Pending | | |
| | Guarantor Detail (Dark) | `[Paste link here]` | Pending | | |
| --- | |
| ## Export Checklist | |
| - [ ] Export all screens at 1x, 2x, 3x | |
| - [ ] Export component assets as SVG | |
| - [ ] Document color variables | |
| - [ ] Create prototype connections | |
| - [ ] Add interaction annotations | |
| - [ ] Review accessibility contrast | |
| - [ ] Verify dark mode mappings | |
| --- | |
| ## Notes | |
| _Add any design notes, feedback, or revision history here._ | |
| # Guarantor Feature - Figma Links | |
| > **Feature**: Guarantor (Trust Network Hub) | |
| > **Status**: Pending Design Export | |
| > **Last Updated**: 2025-01-04 | |
| --- | |
| ## Instructions for Designers | |
| 1. **When to fill**: Populate links after designs are finalized and exported to Figma. | |
| 2. **Link format**: Paste the full Figma file URL or prototype link (e.g., `https://www.figma.com/file/...`). | |
| 3. **Checklist**: Complete the Export Checklist before marking a screen/component as "Ready". | |
| 4. **Status values**: Use `Pending`, `Ready for QA`, `Approved`, or `Exported`. | |
| --- | |
| ## Figma Design Links | |
| After generating designs using AI tools (Stitch/Figma), paste the links below: | |
| ### Main Screens | |
| | Screen | Figma Link | Status | | |
| |--------|------------|--------| | |
| | Trust Network Hub | `[Paste link here]` | Pending | | |
| | Network Graph View | `[Paste link here]` | Pending | | |
| | AI Suggestions | `[Paste link here]` | Pending | | |
| | Guarantor Detail | `[Paste link here]` | Pending | | |
| | Add Guarantor - Type | `[Paste link here]` | Pending | | |
| | Add Guarantor - Details | `[Paste link here]` | Pending | | |
| | Add Guarantor - Amount | `[Paste link here]` | Pending | | |
| | Invite Success | `[Paste link here]` | Pending | | |
| | Guarantor History | `[Paste link here]` | Pending | | |
| ### Component Library | |
| | Component | Figma Link | Status | | |
| |-----------|------------|--------| | |
| | Coverage Ring | `[Paste link here]` | Pending | | |
| | Guarantor Card | `[Paste link here]` | Pending | | |
| | Trust Stars | `[Paste link here]` | Pending | | |
| | Status Chip | `[Paste link here]` | Pending | | |
| | Match Badge | `[Paste link here]` | Pending | | |
| | Network Node | `[Paste link here]` | Pending | | |
| | Timeline Item | `[Paste link here]` | Pending | | |
| ### Dark Mode Variants | |
| | Screen | Figma Link | Status | | |
| |--------|------------|--------| | |
| | Trust Network Hub (Dark) | `[Paste link here]` | Pending | | |
| | Guarantor Detail (Dark) | `[Paste link here]` | Pending | | |
| --- | |
| ## Export Checklist | |
| - [ ] Export all screens at 1x, 2x, 3x | |
| - [ ] Export component assets as SVG | |
| - [ ] Document color variables | |
| - [ ] Create prototype connections | |
| - [ ] Add interaction annotations | |
| - [ ] Review accessibility contrast | |
| - [ ] Verify dark mode mappings | |
| --- | |
| ## Notes | |
| _Add any design notes, feedback, or revision history here._ |
🤖 Prompt for AI Agents
In
claude-product-cycle/design-spec-layer/features/guarantor/mockups/FIGMA_LINKS.md
(lines 1-62) the file is missing a clear "Instructions" section for designers;
add a short Instructions section immediately after the header that states when
to populate (after designs are finalized and exported to Figma), the exact link
format to use (full Figma file or prototype URL, e.g.
https://www.figma.com/file/...), the status workflow with definitions for each
status (Pending → Ready for QA → Approved), and prerequisites (must complete the
Export Checklist before marking Ready); also note to use SVG exports for
components and to follow the standardized template and roll it out to the other
feature folders for consistency.
| ### Hero Balance Card | ||
| ``` | ||
| Design a financial balance card for a banking app dashboard. | ||
| Use a beautiful diagonal gradient from purple-blue #667EEA to purple #764BA2. Make it full width with generous rounded corners about 24px. | ||
| Show "Total Balance" as a small white label with an eye icon next to it for hiding the balance. | ||
| Display the main balance "$12,450.00" in large white bold text, centered. | ||
| Below, add two small pill-shaped indicators: one showing an up arrow with "+$2,450 This Month" and another showing a down arrow with "-$890 Expenses". Give them semi-transparent white backgrounds. | ||
| Add a subtle shadow that uses the gradient colors at low opacity to create a glow effect. | ||
| ``` | ||
|
|
||
| ### Quick Action Button | ||
| ``` | ||
| Design a quick action button for a banking dashboard. | ||
| Create a square container with rounded corners (16px) that's about 56x56 pixels. | ||
| Give it a very light purple tinted background. Place an icon in the center in a deeper purple color. | ||
| Add a label below the square in small dark text. | ||
| Show the default state, pressed state with slight scale down and ripple effect, and disabled state at 50% opacity. | ||
| ``` | ||
|
|
||
| ### Account Card | ||
| ``` | ||
| Design a bank account card component. | ||
| Create a white card with soft shadow and 16px rounded corners. | ||
| On the left, show a circular icon container with a light tinted background and account type icon inside. | ||
| In the middle, show the account name in medium weight and the account number in smaller gray text below. | ||
| On the right, align the balance amount with a small trend indicator arrow. | ||
| For loan accounts, add a thin progress bar at the bottom showing percentage paid. | ||
| Include an Active status badge in green. | ||
| ``` | ||
|
|
||
| ### Transaction Item | ||
| ``` | ||
| Design a transaction list item for a banking app. | ||
| Create two variants - one for money received (credit) and one for money spent (debit). | ||
| For credit: Show a green-tinted circular background with a download arrow, and the amount in green with a + prefix. | ||
| For debit: Show a red-tinted circular background with an upload arrow, and the amount in red with a - prefix. | ||
| Each shows a merchant logo or category icon in the circle, the description and account name in the middle, time in small gray text, and the amount on the right. | ||
| ``` |
There was a problem hiding this comment.
Component prompt set is incomplete compared to STITCH version.
PROMPTS_FIGMA.md includes 4 components (Hero Balance Card, Quick Action Button, Account Card, Transaction Item), but PROMPTS_STITCH.md includes 5 (adds Spending Chart). Both tools should cover the same component set to ensure design consistency across generation tools.
Add a Spending Chart component prompt to match the Stitch prompts.
🤖 Prompt for AI Agents
In claude-product-cycle/design-spec-layer/features/home/mockups/PROMPTS_FIGMA.md
around lines 128 to 184, the prompt set omits the "Spending Chart" component
present in PROMPTS_STITCH.md; add a new "Spending Chart" component prompt that
mirrors the Stitch spec: describe a responsive area/line chart (monthly spending
over 12 months) with dual-series (spending vs. budget), x-axis months, y-axis
currency, gradient fill using the project's purple-blue palette, subtle
gridlines, tooltip on hover with exact values, legend, summary stats (total,
avg, % change), annotations for peaks/dips, color-coded over/under-budget
shading, accessibility labels, and variants for compact and expanded views so
both tools cover the same component set.
- Add dummy/ and prod/ directories for all 17 features - Create placeholder PNG files for each screen (112 total) - Add MOCKUPS_README.md with usage instructions Screen placeholders per feature: - auth: 6 screens - home: 5 screens - accounts: 4 screens - savings-account: 6 screens - loan-account: 7 screens - share-account: 6 screens - beneficiary: 6 screens - transfer: 6 screens - recent-transaction: 6 screens - notification: 5 screens - settings: 9 screens - passcode: 7 screens - guarantor: 8 screens - qr: 7 screens - location: 8 screens - client-charge: 9 screens - dashboard: 7 screens Workflow: Generate designs using PROMPTS.md, save to prod/
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (112)
claude-product-cycle/design-spec-layer/features/accounts/mockups/dummy/01-accounts-overview.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/accounts/mockups/dummy/02-account-card.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/accounts/mockups/dummy/03-accounts-empty-state.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/accounts/mockups/dummy/04-account-type-filter.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/auth/mockups/dummy/01-login-screen.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/auth/mockups/dummy/02-registration-screen.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/auth/mockups/dummy/03-forgot-password.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/auth/mockups/dummy/04-verification-code.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/auth/mockups/dummy/05-reset-password.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/auth/mockups/dummy/06-biometric-prompt.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/beneficiary/mockups/dummy/01-beneficiary-list.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/beneficiary/mockups/dummy/02-beneficiary-detail.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/beneficiary/mockups/dummy/03-add-beneficiary.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/beneficiary/mockups/dummy/04-edit-beneficiary.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/beneficiary/mockups/dummy/05-beneficiary-empty.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/beneficiary/mockups/dummy/06-beneficiary-success.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/01-smart-dashboard.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/02-calendar-view.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/03-charge-detail.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/04-autopay-setup-step1.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/05-autopay-setup-step2.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/06-autopay-setup-step3.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/07-split-payment.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/08-payment-success.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/09-charge-insights.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/dashboard/mockups/dummy/01-main-dashboard.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/dashboard/mockups/dummy/02-financial-overview.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/dashboard/mockups/dummy/03-quick-actions-grid.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/dashboard/mockups/dummy/04-insights-card.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/dashboard/mockups/dummy/05-goals-tracker.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/dashboard/mockups/dummy/06-spending-chart.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/dashboard/mockups/dummy/07-dashboard-empty.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/01-trust-network-hub.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/02-network-graph-view.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/03-ai-suggestions.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/04-guarantor-detail.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/05-add-guarantor-type.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/06-add-guarantor-details.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/07-add-guarantor-amount.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/08-invite-success.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/home/mockups/dummy/01-home-dashboard.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/home/mockups/dummy/02-account-overview-card.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/home/mockups/dummy/03-quick-actions.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/home/mockups/dummy/04-recent-transactions.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/home/mockups/dummy/05-home-empty-state.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/loan-account/mockups/dummy/01-loan-detail.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/loan-account/mockups/dummy/02-loan-repayment-schedule.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/loan-account/mockups/dummy/03-loan-transactions.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/loan-account/mockups/dummy/04-loan-statement.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/loan-account/mockups/dummy/05-make-repayment.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/loan-account/mockups/dummy/06-loan-calculator.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/loan-account/mockups/dummy/07-loan-empty.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/location/mockups/dummy/01-branch-finder-map.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/location/mockups/dummy/02-branch-list-view.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/location/mockups/dummy/03-branch-detail.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/location/mockups/dummy/04-book-appointment-service.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/location/mockups/dummy/05-book-appointment-datetime.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/location/mockups/dummy/06-book-appointment-confirm.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/location/mockups/dummy/07-appointment-success.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/location/mockups/dummy/08-ar-branch-finder.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/notification/mockups/dummy/01-notification-center.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/notification/mockups/dummy/02-notification-detail.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/notification/mockups/dummy/03-notification-settings.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/notification/mockups/dummy/04-notification-empty.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/notification/mockups/dummy/05-push-permission.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/passcode/mockups/dummy/01-biometric-entry.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/passcode/mockups/dummy/02-passcode-entry.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/passcode/mockups/dummy/03-create-passcode.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/passcode/mockups/dummy/04-confirm-passcode.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/passcode/mockups/dummy/05-change-passcode.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/passcode/mockups/dummy/06-passcode-success.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/passcode/mockups/dummy/07-passcode-locked.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/qr/mockups/dummy/01-smart-pay-hub-scan.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/qr/mockups/dummy/02-my-qr-code.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/qr/mockups/dummy/03-request-money.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/qr/mockups/dummy/04-scan-success.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/qr/mockups/dummy/05-dynamic-qr-timer.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/qr/mockups/dummy/06-payment-success.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/qr/mockups/dummy/07-qr-history.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/recent-transaction/mockups/dummy/01-transaction-list.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/recent-transaction/mockups/dummy/02-transaction-detail.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/recent-transaction/mockups/dummy/03-transaction-filter.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/recent-transaction/mockups/dummy/04-transaction-search.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/recent-transaction/mockups/dummy/05-transaction-export.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/recent-transaction/mockups/dummy/06-transaction-empty.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/savings-account/mockups/dummy/01-savings-detail.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/savings-account/mockups/dummy/02-savings-transactions.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/savings-account/mockups/dummy/03-savings-statement.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/savings-account/mockups/dummy/04-savings-qr-code.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/savings-account/mockups/dummy/05-make-transfer.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/savings-account/mockups/dummy/06-savings-empty.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/settings/mockups/dummy/01-command-center-hub.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/settings/mockups/dummy/02-profile-dashboard.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/settings/mockups/dummy/03-security-center.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/settings/mockups/dummy/04-appearance-settings.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/settings/mockups/dummy/05-privacy-data.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/settings/mockups/dummy/06-notifications-hub.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/settings/mockups/dummy/07-connected-services.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/settings/mockups/dummy/08-help-support.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/settings/mockups/dummy/09-about.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/share-account/mockups/dummy/01-share-detail.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/share-account/mockups/dummy/02-share-dividends.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/share-account/mockups/dummy/03-share-transactions.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/share-account/mockups/dummy/04-share-statement.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/share-account/mockups/dummy/05-purchase-shares.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/share-account/mockups/dummy/06-redeem-shares.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/transfer/mockups/dummy/01-transfer-hub.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/transfer/mockups/dummy/02-select-account.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/transfer/mockups/dummy/03-enter-amount.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/transfer/mockups/dummy/04-transfer-review.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/transfer/mockups/dummy/05-transfer-success.pngis excluded by!**/*.pngclaude-product-cycle/design-spec-layer/features/transfer/mockups/dummy/06-transfer-history.pngis excluded by!**/*.png
📒 Files selected for processing (1)
claude-product-cycle/design-spec-layer/features/MOCKUPS_README.md
🧰 Additional context used
🪛 markdownlint-cli2 (0.18.1)
claude-product-cycle/design-spec-layer/features/MOCKUPS_README.md
10-10: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
60-60: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
107-107: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
127-127: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: PR Checks KMP / Static Analysis Check
🔇 Additional comments (1)
claude-product-cycle/design-spec-layer/features/MOCKUPS_README.md (1)
1-139: Comprehensive and well-structured documentation.The README effectively documents the mockup workflow with clear sections for directory structure, usage guidelines, naming conventions, feature inventory, and implementation workflow. The distinction between designer and developer responsibilities is practical, and the feature inventory table provides useful status tracking across all 17 features.
| # Mockups Directory Structure | ||
|
|
||
| > **Purpose**: Store and organize UI mockup images for each feature | ||
| > **Last Updated**: 2025-01-04 |
There was a problem hiding this comment.
Update the Last Updated timestamp.
Line 4 shows 2025-01-04 (January 4, 2025), which is outdated relative to the current date (January 2026) and the PR creation date (December 30, 2025). Update this to 2026-01-04 to reflect the current month and year.
🔎 Proposed fix
-> **Last Updated**: 2025-01-04
+> **Last Updated**: 2026-01-04📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| > **Last Updated**: 2025-01-04 | |
| > **Last Updated**: 2026-01-04 |
🤖 Prompt for AI Agents
In claude-product-cycle/design-spec-layer/features/MOCKUPS_README.md around line
4, the "Last Updated" timestamp is outdated (shows 2025-01-04); update the date
to 2026-01-04 to reflect the current month and year and commit the change.
|
|
||
| ## Directory Structure | ||
|
|
||
| ``` |
There was a problem hiding this comment.
Add language identifiers to fenced code blocks.
All four code blocks are missing language specifications, which violates Markdown best practices and causes linting failures.
🔎 Proposed fixes
Line 10 (directory structure):
-```
+```plaintext
features/Line 60 (naming convention):
-```
+```plaintext
[order]-[screen-name].pngLine 107 (dark mode variants):
-```
+```plaintext
01-login-screen.png # Light modeLine 127 (workflow diagram):
-```
+```plaintext
1. Read PROMPTS.md for featureAlso applies to: 60-60, 107-107, 127-127
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
10-10: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI Agents
In claude-product-cycle/design-spec-layer/features/MOCKUPS_README.md around
lines 10, 60, 107, and 127, four fenced code blocks are missing language
identifiers causing lint failures; add a language tag (e.g., plaintext) to each
opening ``` fence so line 10 becomes ```plaintext, line 60 ```plaintext, line
107 ```plaintext, and line 127 ```plaintext to satisfy Markdown best practices
and the linter.
therajanmaurya
force-pushed
the
feature/design-specifications
branch
from
520dc6e to
a6d534d
Compare
There was a problem hiding this comment.
Actionable comments posted: 13
♻️ Duplicate comments (12)
claude-product-cycle/design-spec-layer/features/beneficiary/mockups/PROMPTS_FIGMA.md (1)
20-20: Add language identifier to fenced code blocks (MD040).All 13 fenced code blocks are missing language identifiers. Since these contain plaintext design prompts, add
textas the language identifier to each block.🔎 Proposed fix: Add language identifier to all code blocks
Replace all 13 occurrences of triple backticks with triple backticks followed by
text:-``` +```textThis applies to lines: 20, 44, 68, 92, 120, 142, 164, 188, 212, 232, 252, 276, 299, 310.
Also applies to: 44-44, 68-68, 92-92, 120-120, 142-142, 164-164, 188-188, 212-212, 232-232, 252-252, 276-276, 299-299, 310-310
claude-product-cycle/design-spec-layer/features/MOCKUPS_README.md (2)
4-4: Update the Last Updated timestamp.Line 4 shows
2025-01-04(January 4, 2025), which is outdated relative to the current date (January 4, 2026) and the PR creation date (December 30, 2025). Update this to2026-01-04to reflect the current month and year.🔎 Proposed fix
-> **Last Updated**: 2025-01-04 +> **Last Updated**: 2026-01-04
10-10: Add language identifiers to all fenced code blocks.All four code blocks are missing language specifications, which violates Markdown best practices and causes linting failures (MD040, fenced-code-language).
🔎 Proposed fixes
Line 10 (directory structure):
-``` +```plaintext features/Line 60 (naming convention):
-``` +```plaintext [order]-[screen-name].pngLine 107 (dark mode variants):
-``` +```plaintext 01-login-screen.png # Light modeLine 127 (workflow):
-``` +```plaintext 1. Read PROMPTS.md for featureAlso applies to: 60-60, 107-107, 127-127
claude-product-cycle/design-spec-layer/features/guarantor/mockups/FIGMA_LINKS.md (1)
1-62: Already flagged in previous review.The past review comment on this file provides comprehensive guidance on adding an Instructions section, defining the status workflow, linking to prerequisites, and addressing inconsistencies across features. Since those concerns remain unaddressed in the current version, please refer to the existing feedback and implement the suggested enhancements.
claude-product-cycle/design-spec-layer/features/auth/mockups/PROMPTS_STITCH.md (1)
11-11: Add language specifiers to all 12 fenced code blocks (MD040)—previously flagged.This issue was already identified in a past review. All 12 code blocks (lines 11, 26, 45, 68, 98, 127, 159, 184, 208, 230, 240, 250) are missing language identifiers. Add
textto the opening backticks of each to satisfy linting requirements.Also applies to: 26-26, 45-45, 68-68, 98-98, 127-127, 159-159, 184-184, 208-208, 230-230, 240-240, 250-250
claude-product-cycle/design-spec-layer/features/home/mockups/PROMPTS_FIGMA.md (1)
128-184: Missing Spending Chart component breaks consistency with PROMPTS_STITCH.md.PROMPTS_FIGMA.md includes only 4 component prompts (Hero Balance Card, Quick Action Button, Account Card, Transaction Item), but PROMPTS_STITCH.md includes 5 components (adds Spending Chart). Without parity, designers using Figma will miss a key Home Dashboard component present in the Stitch version.
🔎 Suggested addition: Spending Chart component prompt
Add a new component section after Line 184:
### Spending Chart Design a responsive spending analytics component for a banking dashboard. Show a line chart with dual series (spending vs. budget) spanning 12 months. X-axis displays months, Y-axis shows currency values. Use a gradient fill from purple (#667EEA) to blue (#764BA2). Include subtle gridlines, a tooltip on hover showing exact values, and a legend. Display summary stats (total spent, average, % change vs. prior period). Annotate peaks/dips with labels. Shade over-budget ranges in soft red, under-budget in soft green. Include accessibility labels and variants for both compact (small card) and expanded (full-width) views..claude/commands/gap-analysis.md (1)
115-133: Feature reference table still contains incorrect directory mappings—not fixed since past review.This critical issue was previously flagged but remains unfixed. Multiple mappings are inaccurate or incomplete:
- Row 3 (accounts): Lists
feature/account/(singular); should befeature/accounts/to match directory naming- Row 12 (passcode): Shows only
libs/mifos-passcode/; should include bothfeature/passcode/andlibs/mifos-passcode/- Row 14 (qr): Maps to
feature/qr-code/; should befeature/qr/- Row 16 (client-charge): Maps to
feature/user-profile/; should befeature/client-charge/- Design Dir column: References
features/but should referenceclaude-product-cycle/design-spec-layer/features/throughoutInaccurate mappings will cause users of the
/gap-analysiscommand to look in the wrong directories, breaking the tool's utility.Run this script to verify the actual directory structure and identify any additional missing features:
#!/bin/bash # Description: Verify feature directory mappings echo "=== Checking feature/ directories ===" ls -d feature/*/ 2>/dev/null | sed 's|feature/||' | sed 's|/$||' | sort echo "" echo "=== Checking libs/ directories ===" ls -d libs/*/ 2>/dev/null | sed 's|libs/||' | sed 's|/$||' | sort echo "" echo "=== Checking design-spec-layer feature directories ===" ls -d claude-product-cycle/design-spec-layer/features/*/ 2>/dev/null | sed 's|.*features/||' | sed 's|/$||' | sortclaude-product-cycle/design-spec-layer/features/auth/mockups/PROMPTS_FIGMA.md (1)
20-26: Add language specifiers to all fenced code blocks (MD040).All code blocks are missing language identifiers. Since these are natural language Figma prompts rather than executable code, mark them as
text.🔎 Proposed fix (apply to all code blocks)
## Screen 1: Splash Screen -``` +```text Design a premium fintech app splash screen for "Mifos Mobile" banking app. Use a beautiful purple-blue gradient background going diagonally. Place a white minimalist logo in the center with a subtle glow effect. Below the logo, show "MIFOS" in white uppercase letters with wide letter spacing. Add a tagline "Your Financial Freedom" in lighter white below. At the bottom, show three small loading dots that would animate. Keep it clean, premium, and trustworthy like Revolut or Monzo splash screens. No navigation bars or buttons - just the brand moment. -``` +```textApply the same pattern to all code blocks at lines 20, 32, 48, 68, 88, 112, 132, 156, 175, 180, 185.
This issue was flagged in a prior review and should be addressed now.
Also applies to: 32-42, 48-62, 68-82, 88-106, 112-126, 132-150, 156-168, 175-177, 180-182, 185-187
claude-product-cycle/design-spec-layer/features/dashboard/mockups/PROMPTS_STITCH.md (1)
11-366: Missing language specifiers on fenced code blocks.This issue was already flagged in a previous review. All 11 fenced code blocks should specify
plaintextortextas their language identifier..claude/commands/README.md (1)
7-7: Fenced code block language specifiers (MD040).These fenced code blocks are missing language specifiers. This issue was flagged in a previous review with proposed fixes (lines 7→
text, 123→text, 159→bash, 167→bash, 175→bash, 183→bash, 202→```text).Also applies to: 123-123, 159-159, 167-167, 175-175, 183-183, 202-202
.claude/commands/design.md (1)
55-55: Add language identifiers to fenced code blocks (MD040).Three code blocks lack language specifiers. Update to
```textfor the prompt/config blocks.🔎 Proposed fix
-``` +```textApplies to lines: 55 (tool selection prompt), 85 (output files), 101 (workflow diagram)
Also applies to: 85-85, 101-101
claude-product-cycle/design-spec-layer/features/beneficiary/mockups/PROMPTS_STITCH.md (1)
11-11: Add language identifiertextto all 17 fenced code blocks (MD040).All prompt and component specification blocks require language identifiers for markdown linting compliance.
🔎 Proposed fix: Add language identifiers to all blocks
Apply this pattern to all 17 code blocks:
-``` +```textApplies to lines: 11, 27, 74, 118, 152, 190, 223, 259, 298, 335, 363, 392, 424, 450, 461, 469, 479
Also applies to: 27-27, 74-74, 118-118, 152-152, 190-190, 223-223, 259-259, 298-298, 335-335, 363-363, 392-392, 424-424, 450-450, 461-461, 469-469, 479-479
🧹 Nitpick comments (13)
claude-product-cycle/design-spec-layer/features/dashboard/mockups/PROMPTS_FIGMA.md (1)
20-289: Consider adding language specifiers to fenced code blocks.All 11 fenced code blocks containing design prompts should declare their content type for proper markdown rendering. Since these blocks contain natural language prompts rather than executable code, specify them as
textorplaintext.🔎 Example fix
-``` +```text Design a modern mobile banking dashboard for "Mifos Mobile" app. At the top, show a personalized greeting "Good morning, John"...Apply the same pattern to all 11 fenced blocks in this file. </details> </blockquote></details> <details> <summary>claude-product-cycle/design-spec-layer/TOOL_CONFIG.md (2)</summary><blockquote> `109-168`: **Add language specifiers to fenced code blocks.** Several fenced code blocks are missing language specifiers: - Lines 109-113: Command examples should use `bash` or `shell` - Lines 121-129, 133-140, 144-152: Workflow descriptions should use `text` or `plaintext` - Lines 164-168: Expected output should use `text` or `plaintext` <details> <summary>🔎 Example fixes</summary> **For command examples (line 109):** ```diff -``` +```bash /design auth mockup --tool=google-stitch**For workflow descriptions (line 121):** ```diff -``` +```text 1. /design [feature] mockup 2. Claude generates PROMPTS.md...**For expected output (line 164):** ```diff -``` +```text MCP Servers: stitch-ai ✓ connected</details> --- `182-182`: **Format bare URL as markdown link.** The URL on line 182 should be wrapped in angle brackets or formatted as a markdown link for proper rendering. <details> <summary>🔎 Proposed fix</summary> ```diff -1. Generate new token at: https://www.figma.com/developers/api#access-tokens +1. Generate new token at: <https://www.figma.com/developers/api#access-tokens>Or use a markdown link:
-1. Generate new token at: https://www.figma.com/developers/api#access-tokens +1. Generate new token at: [Figma API Access Tokens](https://www.figma.com/developers/api#access-tokens).claude/commands/gap-planning.md (2)
7-7: Add language specification to fenced code blocks.Markdown linting requires language identifiers for fenced code blocks. Update these blocks to specify the language (e.g.,
```bash ```,text, etc.).🔎 Proposed fixes
Line 7–8: Specify
textorbashlanguage-``` +```bash /gap-planning # Brief overview (what needs planning)Line 27–40: Specify
markdownortextlanguage-``` +```markdown ## Gap Planning - What Needs WorkLine 106–117: Specify
textlanguage-``` +```text templates/gap-planning/Line 146–154: Specify
bashlanguage-``` +```bash /gap-analysis → Identify gapsAlso applies to: 27-27, 106-106, 146-146
51-51: Surround tables with blank lines.Markdown linting requires blank lines before and after tables to improve readability and conform to style guidelines.
🔎 Proposed fixes
Line 51 (before table):
### Step 1: Determine Template + **Layer Parameters**: | Parameter | Template | Plans For |Line 51 (after table):
| (none) | Brief summary | What needs planning | | `design` | `layer-design.md` | Design layer (specs + mockups) | + **Sub-Section Parameters** (layer + sub-section): | Parameters | Template | Plans For |Line 62 (after this table):
| `platform web` | `subsection/platform-web.md` | Web-specific | + ### Step 2: For Feature ParameterAlso applies to: 62-62
CLAUDE.md (1)
36-38: Add language specification to 5-Layer Lifecycle diagram code block.Markdown linting requires language identifiers for fenced code blocks.
-``` +```text Design → Server → Client → Feature → Platform</blockquote></details> <details> <summary>claude-product-cycle/CURRENT_WORK.md (2)</summary><blockquote> `32-35`: **Add language specifier to fenced code block (MD040).** Line 32 opens a code block without a language specifier. Use `` ```text `` or `` ```plaintext `` to comply with markdown linting standards. <details> <summary>🔎 Proposed fix</summary> ```diff -``` +```text stitch-ai: ✅ Installed (restart to connect) figma: ⚠️ Needs authentication -``` +```
53-57: Add language specifier to fenced code block (MD040).Line 53 opens a code block without a language specifier. Use
```textor```bash(if shell commands intended) to comply with markdown linting standards.🔎 Proposed fix
-``` +```text /gap-analysis design mockup # See mockup progress (2/17) /gap-planning design mockup # Step-by-step plan /design [feature] mockup # Generate mockups for feature -``` +```
claude-product-cycle/design-spec-layer/features/accounts/mockups/PROMPTS_STITCH.md (1)
11-21: Add language specifiers to fenced code blocks (MD040).All 14 fenced code blocks throughout this file are missing language specifiers. Since these contain plain-text design specifications and ASCII diagrams, add
```textto each opening triple-backtick to comply with markdown linting standards.Affected line ranges: 11, 27, 96, 133, 172, 202, 226, 245, 276, 288, 299, 311, 323, 336.
🔎 Example fix pattern
# Example for Design System Reference (lines 11-21) -``` +```text Primary Gradient: #667EEA → #764BA2 Secondary Gradient: #11998E → #38EF7D ... -``` +``` # Apply the same pattern to all other code blocksAlso applies to: 27-90, 96-127, 133-166, 172-196, 202-220, 226-239, 245-269, 276-285, 288-296, 299-308, 311-320, 323-333, 336-344
claude-product-cycle/design-spec-layer/_shared/COMPONENTS.md (1)
13-13: Add language identifiers to all fenced code blocks (markdown linting fix).Markdownlint is reporting 41 MD040 violations across all three files:
COMPONENTS.md,PROMPTS_STITCH.md, andMOCKUP.md. All fenced code blocks lack language specifications.Fix by adding a language identifier to each code block. Since these blocks contain ASCII diagrams and plain-text specifications (not executable code), use
textorplaintext:🔎 Example fix for code block
-``` +```text ┌─────────────────────────────────────────────────────────────────┐ │ COLOR TOKENS │ ├─────────────────────────────────────────────────────────────────┤Apply this fix to all occurrences in:
- COMPONENTS.md: Lines 13, 74, 120, 148, 184, 228, 267, 317, 360, 404, 452, 497, 539, 581, 616, 661, 705, 744, 790 (16 violations)
- PROMPTS_STITCH.md: Lines 11, 27, 98, 126, 154, 173, 191, 203, 214, 225, 235 (10 violations)
- MOCKUP.md: Lines 25, 52, 100, 434, 490, 548, 595, 628, 663, 698, 730, 768, 800, 858, 898 (15 violations)
Also applies to: 74-74, 120-120, 148-148, 184-184, 228-228, 267-267, 317-317, 360-360, 404-404, 452-452, 497-497, 539-539, 581-581, 616-616, 661-661, 705-705, 744-744, 790-790
claude-product-cycle/design-spec-layer/features/auth/MOCKUP.md (1)
24-24: Add language identifiers to all fenced code blocks (MD040).Markdown linting requires language specifiers on all fenced code blocks for proper syntax highlighting and standards compliance. These 13 code blocks should use
```textfor ASCII mockups and design specs.🔎 Proposed fix: Add language identifiers
Apply this pattern to all 13 code blocks containing ASCII mockups and design tables:
Pattern:
-``` +```textThis applies to lines: 24, 81, 140, 222, 340, 444, 530, 639, 717, 789, 828, 864, 910, 950
Also applies to: 81-81, 140-140, 222-222, 340-340, 444-444, 530-530, 639-639, 717-717, 789-789, 828-828, 864-864, 910-910, 950-950
claude-product-cycle/design-spec-layer/features/loan-account/MOCKUP.md (1)
1994-2084: Add language tags to Kotlin code blocks for proper linting.The Required Composables list (lines 1994–2050) and State Management data classes (lines 2054–2084) are Kotlin code and should be wrapped in triple backticks with
kotlinlanguage specification to resolve MD040 linting warnings and improve code syntax highlighting.🔎 Proposed fix to add Kotlin language tags
-### Required Composables - -```kotlin +### Required Composables + +```kotlin // Dashboard LoanDashboardScreen.ktAnd similarly for the State Management section:
-### State Management - -```kotlin +### State Management + +```kotlin data class LoanDashboardState(
claude-product-cycle/design-spec-layer/features/guarantor/mockups/PROMPTS.md (1)
419-429: Screen checklist is helpful.The checklist clearly tracks which screens have complete design prompt coverage. Consider completing the pending items (Add Guarantor Steps 2-3 and Invite Success) to provide full design guidance for implementers.
| | **Google Stitch** | ✅ | Material Design 3, Android/KMP | `claude mcp add stitch-ai -- npx -y stitch-ai-mcp` | | ||
| | **Figma** | ✅ | Team collaboration, custom designs | `claude mcp add figma -- npx -y figma-mcp --token TOKEN` | | ||
| | Uizard | ❌ | Quick prototypes | Manual (web only) | | ||
| | Visily | ❌ | Component-focused | Manual (web only) | | ||
|
|
||
| **Recommended**: Google Stitch (MD3 native, has MCP) | ||
|
|
||
| **MCP Resources**: | ||
| - Google Stitch MCP: [github.com/StitchAI/stitch-ai-mcp](https://github.com/StitchAI/stitch-ai-mcp) | ||
| - Stitch Web: [stitch.withgoogle.com](https://stitch.withgoogle.com/) | ||
|
|
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Google Stitch AI MCP stitch-ai-mcp GitHub repository availability status
💡 Result:
The repository "StitchAI/stitch-ai-mcp" is publicly available on GitHub (public repo, 4 stars, 1 fork, 14 commits) with source files and README; no releases published. [1]
Source: GitHub — StitchAI/stitch-ai-mcp. [1]
🌐 Web query:
Figma MCP tool available npm package current version
💡 Result:
Which npm package do you mean? (examples: "figma-developer-mcp", "mcp-figma", or a scoped package like "@sethdouglasford/mcp-figma")
🌐 Web query:
stitch.withgoogle.com official Google Stitch website
💡 Result:
Yes — stitch.withgoogle.com is the official Google Labs experiment called "Stitch" (an AI UI/design-to-code tool). See Google's announcement and blog posts. [1][2] More coverage: The Verge summary. [3]
Sources:
[1] Google Developers blog — "From idea to app: Introducing Stitch" (May 20, 2025).
[2] Google Blog / Google Labs — "Stitch from Google Labs gets updates with Gemini 3."
[3] The Verge — "Google made an AI coding tool specifically for UI design."
🌐 Web query:
stitch-ai-mcp npm package registry available
💡 Result:
I couldn't find a published npm package named "stitch-ai-mcp" on the npm registry. The project exists on GitHub (StitchAI/stitch-ai-mcp) and appears intended to be run from the repository (README shows npm run start / npx usage). [1][2]
Sources:
- GitHub repository for stitch-ai-mcp. [1]
- npm search results (no matching "stitch-ai-mcp" package; related packages differ). [2]
🌐 Web query:
Figma MCP official package "figma-developer-mcp" OR "mcp-figma"
💡 Result:
Short answer: There is no single "official" npm package named exactly "figma-developer-mcp" or "mcp-figma" published by Figma. Third‑party/community MCP servers using those names exist (multiple community packages and GitHub repos), while Figma provides MCP documentation and server guidance in its Developer Docs.
Sources:
- Figma Developer docs (MCP server / plans & access). [1]
- npm: figma-developer-mcp (community package). [2]
- GitHub: thirdstrandstudio / mcp-figma (community MCP server). [3]
🌐 Web query:
Google Stitch AI MCP npm installation setup latest
💡 Result:
Here are the up‑to‑date npm MCP packages and quick install/config steps for the Stitch AI and Google (Code Assist) MCP servers plus a community Google‑AI MCP project.
- Stitch AI MCP (StitchAI/stitch-ai-mcp)
- Repo + instructions: clone or run via npx. Example (from repo):
- Clone: git clone https://github.com/StitchAI/stitch-ai-mcp.git
- Install deps: npm install @modelcontextprotocol/sdk zod
- Run: npm run start (or run server file with npx/ts-node).
- Example Claude Desktop config uses npx to run the server and sets API_KEY/BASE_URL in env. (github.com)
- Google — Maps Platform Code Assist MCP (@googlemaps/code-assist-mcp)
- Official Google Code Assist MCP docs show using npx to run the MCP package. Example add via Gemini CLI or client config:
- gemini mcp add google-maps-platform-code-assist npx -y @googlemaps/code-assist-mcp@latest
- Or configure client MCP JSON to call: command "npx" args ["-y","@googlemaps/code-assist-mcp@latest"].
- Requirements: Node LTS, npm; recommended use stdio transport for local clients. (developers.google.com)
- Community Google-AI MCP (example) — @stevekaplanai/google-ai-mcp
- Install/run options (global or npx): npm install -g @stevekaplanai/google-ai-mcp or npx @stevekaplanai/google-ai-mcp. Repo + Google Cloud setup notes available in package README. (npmjs.com)
Quick generic MCP npm install + client setup pattern
- Run with npx (preferred for “latest”): npx -y @latest
- Example: npx -y @googlemaps/code-assist-mcp@latest or npx @stevekaplanai/google-ai-mcp.
- Or install globally: npm install -g
- Add to client MCP config (Claude Desktop / Cursor / Gemini / VS Code etc.) as a command entry:
{
"mcpServers": {
"": {
"command":"npx",
"args":["-y","@latest"],
"env": { /* API keys or env vars if required */ }
}
}
} - Ensure Node.js LTS (or package‑required version), set required environment variables (API keys, GCP credentials), and enable any required cloud APIs (e.g., Vertex AI for Google examples). (developers.google.com)
If you want, tell me which MCP (Stitch AI vs Google code‑assist vs the stevekaplanai community package) and which client (Claude Desktop, Gemini CLI, Cursor, VS Code, etc.) you’re using and I’ll give the exact command and the client config JSON for that environment.
Citations:
- 1: https://github.com/StitchAI/stitch-ai-mcp/?utm_source=openai
- 2: https://developers.google.com/maps/ai/mcp?utm_source=openai
- 3: https://www.npmjs.com/package/%40stevekaplanai/google-ai-mcp?utm_source=openai
- 4: https://developers.google.com/maps/ai/mcp?utm_source=openai
Update installation commands — referenced npm packages do not exist on the npm registry.
The stitch-ai-mcp package is not published to npm and must be run from the GitHub repository directly (clone, then npm install and npm run start). There is no official "figma-mcp" package published by Figma; community MCP alternatives exist but not the exact package referenced. The commands npx -y stitch-ai-mcp and npx -y figma-mcp --token TOKEN will fail. Replace with correct setup instructions or remove these quick-setup examples. Confirm stitch.withgoogle.com is still the official URL (currently valid as of May 2025).
🤖 Prompt for AI Agents
In .claude/commands/design.md around lines 40 to 50, the example installation
commands reference npm packages that are not published (stitch-ai-mcp and
figma-mcp); replace the failing npx commands with accurate setup steps: for
Google Stitch, instruct users to clone the GitHub repo
(https://github.com/StitchAI/stitch-ai-mcp), run npm install and npm run start
(or point to the repo README for exact steps) instead of npx, and for Figma
remove the nonexistent figma-mcp npx command and either link to official Figma
integration docs or to named community MCP alternatives with their correct
install/run instructions; also add a brief note confirming stitch.withgoogle.com
as the canonical site (verify link) and remove or mark as manual any entries
that are web-only or require manual setup.
|
|
||
| ## Usage | ||
|
|
||
| ``` |
There was a problem hiding this comment.
Add language specifiers to 4 fenced code blocks (MD040 compliance).
Code blocks on lines 7, 25, 37, 103 lack language identifiers. Add text or bash (as appropriate) to opening backticks:
🔎 Example fixes
-```
+```bash
/gap-analysis # Brief overview (all layers summary)For other blocks without code content, use:
-```
+```text
100% = [██████████] | 50% = [█████░░░░░]Also applies to: 25-25, 37-37, 103-103
🧰 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/gap-analysis.md around lines 7, 25, 37, and 103 the fenced
code blocks are missing language specifiers; update each opening triple-backtick
to include a language tag (use ```bash for shell/command examples such as the
`/gap-analysis` line and ```text for non-code/plain output blocks like progress
bars or ASCII diagrams) so the markdown complies with MD040.
| | Parameter | Template | Action | | ||
| |-----------|----------|--------| |
There was a problem hiding this comment.
Fix markdown formatting issues: blank lines around tables (MD058) and emphasis spacing (MD037).
- Lines 56–57 & 66–67: Add blank lines before and after each table to satisfy MD058.
- Line 95: The text
*expected * 100has internal spaces in the emphasis. Change to*expected*or use backticks:`expected`.
🔎 Proposed fixes
For tables, wrap as:
+
| Parameter | Template | Action |
|-----------|----------|--------|
-| (none) | Brief summary | Quick overview of all layers |
+| (none) | Brief summary | Quick overview of all layers |
+For line 95 emphasis:
- - Calculate: `exists / expected * 100`
+ - Calculate: `exists / expected * 100` (use backticks instead of emphasis)Also applies to: 66-67, 95-95
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
56-56: Tables should be surrounded by blank lines
(MD058, blanks-around-tables)
🤖 Prompt for AI Agents
In .claude/commands/gap-analysis.md around lines 56–57, 66–67 and 95, the
markdown has formatting issues: the tables on lines 56–57 and 66–67 need a blank
line before and after each table to satisfy MD058, and the emphasis on line 95
contains internal spaces (`*expected * 100`) so change it to `*expected* 100` or
replace with inline code like `expected` to satisfy MD037; update those lines
accordingly ensuring a blank line precedes and follows each table and correct
the emphasis token spacing.
|
|
||
| ## Usage | ||
|
|
||
| ``` |
There was a problem hiding this comment.
Add language identifiers to fenced code blocks.
The code blocks at lines 7 and 60 are missing language identifiers per markdown linting standards. Line 7 (usage examples) should be ```bash, and line 60 (status output) should be ```text.
🔎 Suggested fixes
Line 7:
-```
+```bash
/session-end # Save context and summarize sessionLine 60:
-```
+```text
{{GIT_STATUS_OUTPUT}}Also applies to: 60-60
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
7-7: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI Agents
.claude/commands/session-end.md around lines 7 and 60: the fenced code blocks
are missing language identifiers; update the opening triple-backtick at line 7
to use "bash" (so the usage example is ```bash) and update the opening
triple-backtick at line 60 to use "text" (so the status output block is
```text), leaving the block contents unchanged.
|
|
||
| ## Screen 1: Main Accounts View | ||
|
|
||
| ``` |
There was a problem hiding this comment.
Add language identifiers to all fenced code blocks.
All 11 code block violations are missing language identifiers. Since these are natural language prompts intended for Figma First Draft (an AI tool), mark them as ```text.
🔎 Example fix for Screen 1 prompt
-```
+```text
Design a modern mobile accounts dashboard for "Mifos Mobile" fintech app...Apply the same fix (add text identifier) to all other screen and component prompts.
Also applies to: 48-48, 68-68, 86-86, 104-104, 126-126, 148-148, 171-171, 188-188, 203-203, 218-218
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
20-20: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI Agents
In
claude-product-cycle/design-spec-layer/features/accounts/mockups/PROMPTS_FIGMA.md
around lines 20, 48, 68, 86, 104, 126, 148, 171, 188, 203, and 218, all fenced
code blocks lack a language identifier; update each opening fence from ``` to
```text so every prompt block is marked as plain text (e.g., replace each ```
with ```text) and ensure the closing fences remain ``` to keep the blocks valid.
| "guarantorCard": { | ||
| "minHeight": 120, | ||
| "padding": 16, | ||
| "radius": 20, | ||
| "avatarSize": 48, | ||
| "gap": 12, | ||
| "progressHeight": 6 | ||
| }, |
There was a problem hiding this comment.
Resolve guarantorCard minHeight inconsistency.
The guarantorCard.minHeight is defined as 120 here, but the embedded design tokens in PROMPTS.md (line 385) specify 72. This discrepancy could lead to implementation confusion.
Please align both sources to use the same value.
🤖 Prompt for AI Agents
In
claude-product-cycle/design-spec-layer/features/guarantor/mockups/design-tokens.json
around lines 116 to 123, the guarantorCard.minHeight is 120 but PROMPTS.md (line
385) uses 72; update the JSON to use the same canonical value (set
guarantorCard.minHeight to 72 to match PROMPTS.md) and save; if the canonical
source should be 120 instead, update PROMPTS.md instead—ensure both files use an
identical numeric value and run any token/consistency checks after the change.
| ## Design Tokens | ||
|
|
||
| ```json | ||
| { | ||
| "feature": "guarantor", | ||
| "version": "2.0", | ||
| "designPattern": "Trust Network Hub", | ||
| "colors": { | ||
| "primary": "#667EEA", | ||
| "secondary": "#764BA2", | ||
| "surface": "#FFFFFF", | ||
| "background": "#F8F9FA", | ||
| "success": "#00D09C", | ||
| "warning": "#FFB800", | ||
| "error": "#FF4757", | ||
| "trustHigh": "#00D09C", | ||
| "trustMedium": "#FFB800", | ||
| "trustLow": "#FF4757" | ||
| }, | ||
| "components": { | ||
| "coverageRing": { | ||
| "size": 120, | ||
| "strokeWidth": 12, | ||
| "trackColor": "rgba(255,255,255,0.2)", | ||
| "fillColor": "#FFFFFF" | ||
| }, | ||
| "guarantorCard": { | ||
| "minHeight": 72, | ||
| "padding": 16, | ||
| "radius": 20, | ||
| "avatarSize": 48, | ||
| "gap": 12 | ||
| }, | ||
| "trustStars": { | ||
| "size": 16, | ||
| "gap": 2, | ||
| "activeColor": "#FFB800", | ||
| "inactiveColor": "#E1E4E8" | ||
| }, | ||
| "statusChip": { | ||
| "height": 24, | ||
| "padding": 12, | ||
| "radius": 12, | ||
| "fontSize": 12 | ||
| } | ||
| }, | ||
| "animation": { | ||
| "ringFill": { | ||
| "duration": 1200, | ||
| "easing": "spring(0.8, 400)" | ||
| }, | ||
| "pendingPulse": { | ||
| "duration": 2000, | ||
| "type": "loop" | ||
| } | ||
| } | ||
| } | ||
| ``` |
There was a problem hiding this comment.
Resolve embedded design token inconsistency.
The embedded design tokens at line 385 specify guarantorCard.minHeight: 72, but the standalone design-tokens.json file (line 117) defines it as 120. Please synchronize these values.
Additionally, consider whether the embedded tokens should be kept in sync with the standalone file or if they serve a different purpose (simplified reference vs. complete spec).
🤖 Prompt for AI Agents
In claude-product-cycle/design-spec-layer/features/guarantor/mockups/PROMPTS.md
around lines 358 to 415, the embedded design token guarantorCard.minHeight is
set to 72 but the standalone design-tokens.json (line 117) defines it as 120;
update the embedded token to match the authoritative file (change minHeight to
120) or, if the embedded snippet is intentionally a simplified reference, add a
clear comment linking to the canonical design-tokens.json and document the
divergence so both remain intentionally synchronized.
| ``` | ||
| Design a modern mobile banking home dashboard for "Mifos Mobile" app. | ||
| At the top, show a personalized greeting "Good Morning" with the user's name "Maria" below it in large bold text. Add a notification bell icon on the right with a badge showing 3 notifications. | ||
| Create a large hero card with a beautiful purple gradient background. Show "Total Balance" as a small label with an eye icon to toggle visibility. Display "$12,450.00" in big white bold text centered on the card. Below the balance, show two small stat chips - one green showing "+$2,450 This Month" for income, and one showing "-$890 Expenses" in a softer color. | ||
| Add a "This Week" spending analytics section with a mini line chart showing daily spending. Show "$847.50 spent" prominently with a "-12% vs last week" indicator in green. Below the chart, add horizontal scrolling category chips showing Shopping $342, Food $215, Transport $145 with small progress bars. | ||
| Create a Quick Actions row with 5 circular buttons: Send (arrow icon), Request (download icon), QR (qr code icon), Cards (card icon), and Freeze (lock icon). Each should have a light purple circular background with the icon inside and label below. | ||
| Add a "Send Again" section showing recent contacts as circular avatars in a horizontal scroll. Show initials like JD, SK, MR with different colors, plus a "+" button for new recipient. | ||
| Create a "My Accounts" section with expandable cards. Show a Primary Savings account with wallet icon, "$8,200.00" balance, "82% to goal" progress bar, and an Active status badge. Show a Home Loan with bank icon, "-$45,200.00" in red, "28% paid" progress bar, and "Due: Jan 15" indicator. | ||
| Add an "Upcoming Bills" section with bill cards. Show an Electricity Bill due tomorrow with a red urgency indicator on the left border, "$142.50", with "Pay Now" and "Schedule" buttons. Show Rent Payment with normal priority. | ||
| Include a "Savings Goals" horizontal scroll with cards showing circular progress rings. Show "Vacation Fund" at 60% with a fire emoji and "15 day streak" gamification element. | ||
| Add a "Recent Activity" section showing today's transactions with category icons, descriptions, times, and amounts. Amazon Prime -$14.99 in red, Salary Deposit +$3,500.00 in green. | ||
| Include an AI Assistant card with gradient border, robot icon, and suggestion chips like "How much did I spend?" and "Transfer to John". | ||
| At the bottom, add navigation with Home (selected), Accounts, a floating action button for Transfer that pops up above the nav bar, and Profile. Style it like Revolut or Cash App - clean and modern with purple as the primary color. | ||
| ``` |
There was a problem hiding this comment.
Add language specifiers to all 9 fenced code blocks (MD040 compliance).
Code blocks lack language identifiers. Add text to opening backticks on lines 20, 50, 68, 90, 112, 129, 144, 157, 174 to satisfy markdown linting standards.
🔎 Example fix
-```
+```text
Design a modern mobile banking home dashboard for "Mifos Mobile" app.Apply the same pattern to all 9 blocks. This mirrors the compliance fix needed in PROMPTS_STITCH.md.
Also applies to: 50-62, 68-84, 90-106, 112-122, 129-141, 144-154, 157-171, 174-184
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
20-20: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI Agents
In claude-product-cycle/design-spec-layer/features/home/mockups/PROMPTS_FIGMA.md
around lines 20-44 (and likewise for the other code-block ranges cited: 50-62,
68-84, 90-106, 112-122, 129-141, 144-154, 157-171, 174-184), the fenced code
blocks are missing language identifiers; update each opening triple-backtick to
include the language specifier `text` (e.g., ```text) so all nine code blocks
comply with MD040 markdown linting.
|
|
||
| ## 5-Layer Product Lifecycle | ||
|
|
||
| ``` |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Add language specifiers to all fenced code blocks (MD040).
All code blocks are missing language identifiers, which causes markdown linting violations. Since these contain bash commands or documentation paths, specify appropriate language identifiers.
🔎 Proposed fixes (apply to all code blocks)
For bash command blocks (lines 76, 180, 225, 259, 290, 295, 300, 305, 311):
-```
+```bashFor the ASCII diagram and file path structures (lines 158):
-```
+```textApply these changes to all affected lines: 76, 158, 180, 225, 259, 290, 295, 300, 305, 311.
Also applies to: 158-158, 180-180, 225-225, 259-259, 290-290, 295-295, 300-300, 305-305, 311-311
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
76-76: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI Agents
In claude-product-cycle/PRODUCT_MAP.md around lines 76, 158, 180, 225, 259, 290,
295, 300, 305, and 311, many fenced code blocks lack language specifiers causing
MD040 markdown-lint failures; update each opening triple-backtick to include an
appropriate language identifier (e.g., use ```bash for shell commands and
```text for ASCII diagrams or file paths) so every fenced block has a language
tag, apply consistently to the listed lines and commit the changes.
| - [Mobbin Revolut](https://mobbin.com/explore/screens/d66df812-03a0-447f-879b-165318d669c8) | ||
|
|
||
| **2025 Patterns to Add**: | ||
| | Pattern | Priority | Features Affected | |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Add blank lines around tables (MD058).
Tables at lines 158, 321, 331, and 339 should be surrounded by blank lines for proper markdown formatting.
🔎 Proposed fix
### Spacing
+
| Token | Value |
|-------|-------|
| xs | 4dp |
...
| xxl | 24dp |
+
---Apply the same pattern: one blank line before the opening | and one blank line after the closing | for each table at lines 158, 321, 331, and 339.
Also applies to: 321-321, 331-331, 339-339
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
158-158: Tables should be surrounded by blank lines
(MD058, blanks-around-tables)
🤖 Prompt for AI Agents
In claude-product-cycle/PRODUCT_MAP.md around lines 158, 321, 331, and 339, the
Markdown tables are not surrounded by blank lines; add one blank line
immediately before each table's opening '|' line and one blank line immediately
after each table's closing '|' line so each table is separated from surrounding
paragraphs and satisfies MD058.
…le source of truth Replace duplicated API endpoint details in MOCKUP.md files with references to API.md sections. This maintains loose coupling between design documents while ensuring tight coupling within each feature's documentation. Changes across all 17 features: - Replace verbose API endpoint tables with API.md section references - Standardize Data Binding Reference format across all features - Add "Source of Truth" note pointing to API.md - Reduce duplication and maintenance overhead - Enable /implement command to lookup API.md directly 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
claude-product-cycle/design-spec-layer/features/loan-account/MOCKUP.md (1)
29-205: Add language identifiers to all fenced code blocks (MD040).Per markdownlint standards and best practice, all fenced code blocks should specify a language for proper syntax highlighting and semantic clarity. The document contains 27 instances across mockups, component specs, animations, and implementation code.
🔎 Proposed fixes by section
ASCII Mockup Screens (use
textfor ASCII art):- ``` + ```text +------------------------------------------+ | 9:41 [***] | ...Component Specification Props/Config (use
kotlinsince these are Kotlin data structures):- ``` + ```kotlin Props: ├── totalOutstanding: String ...Kotlin Composables Implementation (use
kotlin):- ```kotlin + ```kotlin // Dashboard LoanDashboardScreen.kt ...State Management & Data Classes (use
kotlin):- ```kotlin + ```kotlin data class LoanDashboardState( val totalOutstanding: Money, ...Also applies to: 211-396, 402-523, 529-647, 655-736, 740-830, 834-944, 950-1075, 1083-1150, 1154-1242, 1246-1332, 1336-1404, 1410-1492, 1498-1551, 1557-1616, 1624-1643, 1647-1664, 1668-1682, 1686-1704, 1708-1731, 1735-1753, 1757-1778, 1786-1802, 1806-1820, 1824-1841, 1845-1856, 1860-1871, 1879-1903, 1907-1919, 1923-1935, 1943-1959, 1963-1986, 1994-2050
claude-product-cycle/design-spec-layer/features/home/MOCKUP.md (1)
25-46: Add language specification to ASCII art code blocks.Fenced code blocks should have a language identifier per Markdown best practices. For ASCII diagrams and mockups, use
```textas the language marker.🔎 Example fix for Navigation Context block
-``` +```text ┌─────────────────────────────────────────────────────────────────────────┐ │ NAVIGATION FLOW │ ... -``` +```Apply the same pattern to the Screen Structure Overview (line 52) and all other ASCII art blocks.
Also applies to: 52-94
claude-product-cycle/design-spec-layer/features/auth/MOCKUP.md (1)
24-24: Add language identifiers to fenced code blocks for accessibility and lint compliance.Fenced code blocks (wireframes, flow diagrams, component specs) should include a language specifier. Since these are ASCII art mockups, use
```textor```asciiinstead of bare backticks. This improves screen reader compatibility and enables proper syntax highlighting in documentation viewers.🔎 Example fixes for lines 24, 81, 140, 222, 340, 444, 530, 639, 717, 789, 828, 864, 910, 950
Change the opening backticks from bare
```to```text:Line 24:
-``` +```text ┌─────────────────────────────────────────────────────────────────┐ │ AUTH NAVIGATION FLOW │Line 81:
-``` +```text ┌────────────────────────────────────────────────────────────────┐ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│(Apply same pattern to lines 140, 222, 340, 444, 530, 639, 717, 789, 828, 864, 910, 950.)
Also applies to: 81-81, 140-140, 222-222, 340-340, 444-444, 530-530, 639-639, 717-717, 789-789, 828-828, 864-864, 910-910, 950-950
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (17)
claude-product-cycle/design-spec-layer/features/accounts/MOCKUP.mdclaude-product-cycle/design-spec-layer/features/auth/MOCKUP.mdclaude-product-cycle/design-spec-layer/features/beneficiary/MOCKUP.mdclaude-product-cycle/design-spec-layer/features/client-charge/MOCKUP.mdclaude-product-cycle/design-spec-layer/features/dashboard/MOCKUP.mdclaude-product-cycle/design-spec-layer/features/guarantor/MOCKUP.mdclaude-product-cycle/design-spec-layer/features/home/MOCKUP.mdclaude-product-cycle/design-spec-layer/features/loan-account/MOCKUP.mdclaude-product-cycle/design-spec-layer/features/location/MOCKUP.mdclaude-product-cycle/design-spec-layer/features/notification/MOCKUP.mdclaude-product-cycle/design-spec-layer/features/passcode/MOCKUP.mdclaude-product-cycle/design-spec-layer/features/qr/MOCKUP.mdclaude-product-cycle/design-spec-layer/features/recent-transaction/MOCKUP.mdclaude-product-cycle/design-spec-layer/features/savings-account/MOCKUP.mdclaude-product-cycle/design-spec-layer/features/settings/MOCKUP.mdclaude-product-cycle/design-spec-layer/features/share-account/MOCKUP.mdclaude-product-cycle/design-spec-layer/features/transfer/MOCKUP.md
🧰 Additional context used
🪛 markdownlint-cli2 (0.18.1)
claude-product-cycle/design-spec-layer/features/auth/MOCKUP.md
24-24: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
81-81: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
140-140: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
222-222: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
340-340: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
444-444: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
530-530: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
639-639: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
717-717: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
789-789: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
828-828: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
864-864: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
910-910: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
950-950: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
claude-product-cycle/design-spec-layer/features/home/MOCKUP.md
24-24: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
81-81: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
140-140: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
222-222: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
340-340: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
444-444: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
530-530: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
639-639: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
717-717: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
789-789: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
828-828: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
864-864: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
910-910: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
950-950: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
claude-product-cycle/design-spec-layer/features/loan-account/MOCKUP.md
29-29: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
211-211: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
402-402: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
529-529: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
655-655: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
740-740: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
834-834: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
950-950: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
1083-1083: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
1154-1154: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
1246-1246: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
1336-1336: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
1410-1410: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
1498-1498: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
1557-1557: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
1624-1624: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
1647-1647: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
1668-1668: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
1686-1686: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
1708-1708: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
1735-1735: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
1757-1757: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
1786-1786: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
1806-1806: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
1824-1824: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
1845-1845: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
1860-1860: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
1879-1879: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
1907-1907: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
1923-1923: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
1943-1943: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
1963-1963: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: PR Checks KMP / Static Analysis Check
🔇 Additional comments (17)
claude-product-cycle/design-spec-layer/features/home/MOCKUP.md (7)
1-20: Excellent document structure and metadata.The design specification is professionally organized with clear version tracking (v2.0), design inspiration references, and well-defined design principles that align with fintech best practices. Metadata properly indicates last update and design style direction.
98-428: Comprehensive and well-detailed main success state mockup.The home screen mockup is exceptionally thorough, covering all major UI sections (hero balance, spending analytics, quick actions, recent recipients, accounts, bills, savings goals, recent activity, AI assistant, trust badge, bottom navigation) with precise layout specifications, spacing, typography, and color references. ASCII representation clearly communicates the visual hierarchy.
432-620: Strong state variant coverage for user experience.Loading, empty, error, and offline states are properly designed with helpful user messaging, visual affordances, and clear action paths. Loading skeletons include shimmer animation specs; error/empty states include illustrations and contextual CTA buttons. Offline state demonstrates graceful degradation with cached data and sync indicators.
624-794: Component specifications are detailed and implementable.All five core components (Hero Balance Card, Spending Analytics, Quick Actions, Account Card, Bill Card) are specified with concrete dimensions, typography, spacing, color references, interaction states, and accessibility properties (touch targets, haptic feedback). Specifications enable consistent, accessible implementation across platforms.
798-892: Animations and accessibility specifications exceed standards.Animation specs are comprehensive with spring physics parameters, haptic feedback, and timing details. Accessibility section goes beyond minimum requirements: 48–56dp touch targets, WCAG AA contrast verification (4.5:1 on gradients), detailed screen reader labels, logical focus order, and proper reduced-motion support. These specifications ensure the design is genuinely inclusive.
896-924: Dark mode mapping is complete and well-documented.Light/dark color pairs are provided for all UI surfaces; key accent colors (primary/secondary gradients, success, error, warning) are preserved with opacity adjustments for dark backgrounds. Notes about shadow handling in dark mode show thoughtful attention to visual hierarchy preservation.
965-1020: Data binding reference and changelog reinforce documentation standards.Changelog clearly documents v2.0 additions (analytics, recent recipients, bills, AI assistant, gamification). Data Binding Reference properly standardizes API mappings by referencing API.md as the single source of truth, aligns with the PR commit intent to reduce documentation duplication, and clearly separates client-only features (local storage/DataStore) from API-backed data. This structure supports automated tooling (e.g.,
/implementcommand).claude-product-cycle/design-spec-layer/features/auth/MOCKUP.md (10)
908-944: Accessibility specifications are thorough and standards-compliant.Touch targets (48–56dp), color contrast (4.5:1 WCAG AA), screen reader labels, focus order, and reduced motion support are all properly specified. Excellent attention to accessibility.
948-1001: Dark mode specification is complete and well-executed.Color mapping preserves semantic meaning (success, error, warning, gradients) while adapting backgrounds and text for dark contexts. Gradient opacity adjustment (85%) and contrast preservation follow modern design best practices. Example dark mode login screen demonstrates proper application.
10-19: Design principles are well-articulated and appropriate for the authentication domain.Biometric-first approach, progressive disclosure, contextual reassurance, and trust-building language align with modern fintech standards (Revolut/Nubank/Monzo). Scope appropriately excludes gamification and AI assistant features (which belong to home/accounts features). Principles support implementation clarity.
862-904: Animation specifications are precise, accessible, and performant.Durations (150–300ms), easing (FastOutSlowIn, ease-out), and haptic feedback patterns follow Material Design 3. Staggered animations (OTP fields) provide visual hierarchy. Error shake and success confetti use distinct haptic feedback for non-visual feedback. No indefinite animations that drain battery or distract. Clear guidance for reduced-motion mode support.
1029-1060: Data-binding reference cleanly separates API-dependent and client-only flows.Mapping to
API.mdas single source of truth reduces documentation duplication. Client-only features (biometric, passcode, server selection) are correctly identified as locally-stored. Structure enables downstream implementation tooling (e.g.,/implementcommand) to automate code generation. Error handling delegation toAPI.mdmaintains consistency.
1014-1025: Implementation reference provides clear mapping from design to composables and viewmodels.Stateless screens (Splash, Welcome, Biometric Setup, Success) correctly omit viewmodels. LoginViewModel is appropriately shared across login/OTP/email/server-selection screens. Naming follows Compose conventions. Ready for development handoff.
787-858: Component specifications (inputs, buttons) are granular, precise, and implementation-ready.All states (default, focus, error, success, disabled, pressed) are explicitly documented with exact dimensions (dp), colors (hex), font sizes (sp), and shadows. Animations for state transitions (200–300ms) support responsive UI. No ambiguity for developers; ready for design token extraction and code generation.
22-73: User flow is logical, covers first-time onboarding and returning users, and converges appropriately.Splash auto-navigates (2s standard). Welcome carousel educates first-time users before choice of phone/email login. Both paths converge after biometric and passcode setup (mandatory security steps). No circular flows or dead ends. Clear and implementable.
426-435: Error states are distinct, accessible, and user-friendly.OTP errors trigger shake animation with haptic feedback (error pattern: long-short-long), preventing accidental resubmit. Input errors use static color change (#FF4757 contrast 4.5:1 ✓) plus descriptive messages. No distracting animations for form fields—shake reserved for OTP completeness validation. Messages are clear and actionable.
Also applies to: 809-815
526-631: Biometric enrollment design follows platform best practices and respects user choice.Face ID and Fingerprint variants support iOS and Android flexibility. Optional enrollment ("Maybe Later" button, info badge "enable anytime in Settings") aligns with platform guidelines and improves adoption UX. Success states with green checkmark and pulse animation provide delightful feedback. No forced enrollment—appropriate for security-sensitive contexts.
| ```kotlin | ||
| @Composable | ||
| fun HomeScreen( | ||
| state: HomeState, | ||
| onAction: (HomeAction) -> Unit, | ||
| modifier: Modifier = Modifier | ||
| ) { | ||
| Scaffold( | ||
| topBar = { HomeTopAppBar(state.userName, state.notificationCount) }, | ||
| bottomBar = { MifosBottomNavigation(selectedTab = HOME) } | ||
| ) { paddingValues -> | ||
| SwipeRefresh( | ||
| refreshing = state.isLoading, | ||
| onRefresh = { onAction(HomeAction.Refresh) } | ||
| ) { | ||
| LazyColumn(modifier = Modifier.padding(paddingValues)) { | ||
| item { HeroBalanceCard(state.balance, state.income, state.expenses) } | ||
| item { SpendingAnalyticsCard(state.weeklySpending) } | ||
| item { QuickActionsRow(onAction) } | ||
| item { RecentRecipientsRow(state.recipients, onAction) } | ||
| item { MyAccountsSection(state.accounts, onAction) } | ||
| item { UpcomingBillsSection(state.bills, onAction) } | ||
| item { SavingsGoalsSection(state.goals, onAction) } | ||
| item { RecentActivitySection(state.transactions, onAction) } | ||
| item { AIAssistantCard(onAction) } | ||
| item { TrustBadge() } | ||
| item { Spacer(Modifier.height(80.dp)) } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ``` |
There was a problem hiding this comment.
Specify language identifier for Kotlin code block.
The implementation example lacks a language marker, breaking Markdown best practices and disabling syntax highlighting.
🔎 Proposed fix
-```
+```kotlin
@Composable
fun HomeScreen(🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
950-950: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI Agents
claude-product-cycle/design-spec-layer/features/home/MOCKUP.md around lines 930
to 961: the fenced code block for the HomeScreen Composable is missing a
language identifier, so add the Kotlin language tag by changing the opening
fence from ``` to ```kotlin (leave the closing fence as ```); this enables
proper Markdown syntax highlighting and follows best practices.
Summary
/gap-analysisand/gap-planningClaude Code commands for implementation trackingDesign System v2.0
Inspired by: Revolut, N26, Monzo, Robinhood, Cash App
Color Palette
Key 2025 Patterns Added
Features Redesigned (17 Total)
New Commands Added
/gap-analysis/gap-planningFiles Changed (21 files, +28,721 lines)
Test Plan
/gap-analysiscommand produces correct dashboard/gap-planning [feature]generates implementation plansNext Steps
/implement dashboard)Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.