Claude Code Meepliton ui-design for responsive game screens
Align UX and frontend roles on layout, component boundaries, data types, and keyboard interaction before writing an implementation plan.
中文Install in Claude Code
Open Meepliton in Claude Code with its ux and frontend project agents and existing component library.
- Review `.claude/skills/ui-design/SKILL.md` and its requirements at the pinned GitHub commit.
- Create `.claude/skills/ui-design/` in your project and save the reviewed file as `.claude/skills/ui-design/SKILL.md`.
- Start Claude Code from that project's root, then select `/ui-design` in the slash menu.
Example task
The lobby layout reuses RoomCard, with {mobilePx: 375, mobileColumns: 1, desktopPx: 1280, desktopColumns: 3}. The keyboard reaches each card in order.What to check
Record {mobilePx: 375, mobileColumns: 1, desktopPx: 1280, desktopColumns: 3, reuse: 'RoomCard'}, along with responsive keyboard focus order and frontend CSS component ownership. The final Meepliton lobby plan records the confirmed component reuse.
Original SKILL.md on GitHub · Updated
Frequently asked question
Why ask frontend to check types and components before building?
The design needs data and interactions supported by the existing model. Frontend identifies constraints and UX confirms whether alternatives preserve the intent.