Claude Code team-ui for design and frontend collaboration
Coordinate UX and frontend roles on wireframes, interaction, implementation, and review, with checks for loading, empty, error, and keyboard states.
中文Install in Claude Code
Open Claude Code Software Studios with the ux-designer and frontend-engineer project agents. Use the browsers and viewports supported by your project for verification.
- Review `.claude/skills/team-ui/SKILL.md` and its requirements at the pinned GitHub commit.
- Create `.claude/skills/team-ui/` in your project and save the reviewed file as `.claude/skills/team-ui/SKILL.md`.
- Start Claude Code from that project's root, then select `/team-ui` in the slash menu.
Example task
Feature ui-17 filters community events. Keyboard users Tab to Filter, press Enter to open the menu, and press Escape to close it and move focus back to Filter.What to check
The UX and implementation review check {openKey: 'Enter', closeKey: 'Escape', focusAfterClose: 'Filter'} and report the status of wireframes, implementation, and keyboard acceptance.
Original SKILL.md on GitHub · Updated
Frequently asked question
When does implementation begin?
The UX role proposes interactions and wireframes first. After the user approves the design, the frontend role implements it and subsequent review covers keyboard and viewport behavior.