docs: design system P2–P4 components, IA v2, xmind-import skill#17
Merged
singyichen merged 20 commits intomainfrom Apr 1, 2026
Merged
docs: design system P2–P4 components, IA v2, xmind-import skill#17singyichen merged 20 commits intomainfrom
singyichen merged 20 commits intomainfrom
Conversation
Scan all prototype pages (login/dashboard/profile) and document all UI elements vs MASTER.md coverage. Identifies 8 undefined components (Toast, Navbar, Sidebar, Mobile Tab Bar, Avatar, Tooltip, Table, List) and missing variants (Button Danger/Ghost/ Loading, Input Readonly). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Button: add Danger, Ghost, Loading, Disabled variants with summary table and When NOT to use guidelines - Input: add Readonly state spec with Readonly vs Disabled distinction - Toast: add full spec (Success/Error) with position, z-index, auto-dismiss behavior, and Alert Banner vs Toast comparison table Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Navbar: structure, sticky spec, nav link states, mobile drawer, accessibility requirements - Sidebar: width/z-index/spacing spec, nav item states, divider, When NOT to use - Table: full HTML structure, cell specs, overflow-x-auto pattern, accessibility (scope/aria-label), When NOT to use Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…e Tab Bar) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Review Summary by QodoAdd P1–P4 component specs and translate MASTER.md to English
WalkthroughsDescription• Add comprehensive P1–P4 component specifications to design/system/MASTER.md - P1: Button variants (Danger, Ghost, Loading, Disabled), Input Readonly state, Toast component - P2: Navbar, Sidebar, Table with full HTML structure and accessibility specs - P3: Avatar (display & uploadable), Tooltip, Mobile Bottom Tab Bar - P4: Divider, List (Activity List) • Translate all Chinese content in MASTER.md to English for AI agent consumption • Enforce English-only rule for design/system/MASTER.md across governance documents • Create design/system/inventory.md tracking component coverage (P1–P4 marked ✅) • Update design-system.pen wireframe with English labels and new component sections Diagramflowchart LR
A["Component Inventory<br/>Gap Analysis"] -->|"Identify 11 components"| B["MASTER.md<br/>Specifications"]
B -->|"P1: Button, Input, Toast"| C["P1 Specs"]
B -->|"P2: Navbar, Sidebar, Table"| D["P2 Specs"]
B -->|"P3: Avatar, Tooltip, Tab Bar"| E["P3 Specs"]
B -->|"P4: Divider, List"| F["P4 Specs"]
B -->|"Translate to English"| G["English-only MASTER.md"]
G -->|"Update governance"| H["Constitution & Templates"]
B -->|"Visualize components"| I["design-system.pen<br/>Wireframe"]
File Changes1. design/system/MASTER.md
|
Code Review by Qodo
1. Chinese text in inventory.md
|
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…in MASTER.md - Unify navbar height to h-16 (64px) across MASTER.md Page Shell Patterns and profile.html - Replace full-width Chinese colon in Tooltip CSS section with standard colon Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
- Relocate Toast from inline position to fixed bottom-6 right-6 z-[400] - Add toast-inner wrapper div for color class targeting - Update showToast() to apply color classes to inner wrapper Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…x → 768px) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Add /xmind-import skill (.claude/skills/xmind-import/SKILL.md): uses Playwright MCP to fetch XMind share URL content API, parse mind map JSON, and generate Mermaid flowchart LR - Update .claude/SKILLS.md index to include xmind-import - Add .playwright-mcp/ to .gitignore - Rebuild functional-map.md from live XMind API (more complete node structure vs previous hand-crafted version); move from docs/diagrams/functional-map/ to docs/functional-map/ - Rewrite docs/ia/information-architecture.md as full IA v2: user roles, page inventory, role access matrix, navigation flowchart, page-level descriptions, 3 core user journeys, and SDD reference guide - Remove outdated docs/ia/ia-diagram.md Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
singyichen
changed the title
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- SKILLS.md: move /xmind-import from System Design table to dedicated Diagramming subsection; section header now correctly shows 6 skills - profile.html: move toast HTML before <script> block so applyLang() can translate aria-toast-close on initial page load Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
|
||
| <!-- ── Toast — fixed bottom-right (per design system spec) ── --> | ||
| <div id="toast" | ||
| class="hidden fixed bottom-6 right-6 z-[400] max-w-sm w-full" |
There was a problem hiding this comment.
🟡 Toast container overflows left viewport edge on mobile due to w-full combined with right-6
The toast container uses class="fixed bottom-6 right-6 z-[400] max-w-sm w-full". On mobile viewports, w-full resolves to 100% of the viewport width (e.g. 390px on iPhone 14), capped at 384px by max-w-sm. With right: 24px, the left edge computes to 390 - 24 - 384 = -18px, causing 18px of the toast (left padding + partial icon) to be clipped by the viewport. On a 375px viewport (listed in the MASTER.md pre-delivery checklist at design/system/MASTER.md:993), the overflow increases to 24px. The same classes appear in the MASTER.md Toast spec at design/system/MASTER.md:386, so the implementation faithfully follows a flawed spec.
Fix options
Remove w-full so the toast sizes to its content up to max-w-sm, or replace right-6 with responsive margin classes like mx-6 md:ml-auto md:mr-6.
Prompt for agents
Fix the toast container mobile overflow in two files:
1. design/prototype/pages/profile.html line 313: Change the toast outer div classes from
class="hidden fixed bottom-6 right-6 z-[400] max-w-sm w-full"
to remove w-full so the toast sizes to its content. Alternatively, use
class="hidden fixed bottom-6 left-6 right-6 z-[400] max-w-sm ml-auto"
which constrains from both sides and pushes the toast to the right via ml-auto.
2. design/system/MASTER.md line 386: Update the Toast spec HTML example to use the same corrected classes, so future pages built from the spec don't reproduce the bug.
Was this helpful? React with 👍 or 👎 to provide feedback.
Comment on lines
+50
to
+51
| - Traditional Chinese is permitted in `docs/`, `specs/`, `design/prototype/`, `design/wireframes/`, and `design/system/inventory.md` to accelerate research documentation and UI iteration | ||
| - `design/system/MASTER.md` must be written in English only — it is consumed by AI agents and requires accurate token parsing |
There was a problem hiding this comment.
🟡 Constitution amended without version bump or date update, violating its own governance rules
Lines 50–51 add new rules to Principle VI (English-First): design/system/inventory.md is now Chinese-allowed and design/system/MASTER.md must be English-only. However, the version at .specify/memory/constitution.md:71 still reads 1.2.3 | Last Amended: 2026-03-30. The constitution's own Amendment Procedure (.specify/memory/constitution.md:58-62) requires bumping the version (this is at least a PATCH → 1.2.4) and using commit message format docs: amend constitution to vX.Y.Z ([reason]). Neither was done.
Prompt for agents
In .specify/memory/constitution.md, update line 71 from:
**Version**: 1.2.3 | **Ratified**: 2026-03-18 | **Last Amended**: 2026-03-30
to:
**Version**: 1.2.4 | **Ratified**: 2026-03-18 | **Last Amended**: 2026-04-01
Then amend the commit message for the constitution change to follow the required format:
docs: amend constitution to v1.2.4 (add inventory.md Chinese exception and MASTER.md English-only rule)
Was this helpful? React with 👍 or 👎 to provide feedback.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
docs/ia/information-architecture.mdwith user roles, role access matrix, page-level descriptions, navigation flowchart, 3 core user journeys, and SDD reference guidedocs/functional-map/functional-map.md; switched frommindmaptoflowchart LRsyntax/xmind-importskill: New skill that fetches XMind share URLs via Playwright MCP, parses mind map JSON, and outputs Mermaidflowchart LR.playwright-mcp/and.qodo/to.gitignore; removed outdateddocs/ia/ia-diagram.mdTest plan
/xmind-import https://app.xmind.com/share/PKjJEIHD docs/functional-map/functional-map.mdruns end-to-end and produces valid Mermaid outputdocs/ia/information-architecture.mdcontains role access matrix, navigation flowchart, and user journeys.gitignoreexcludes.playwright-mcp/and.qodo/🤖 Generated with Claude Code