菜单
Invoke when the user asks about changing the look of the UI — colors, theme, layout, fonts, component styles, or page composition. Spawns or guides a ui-designer agent. Use when: "change colors", "redesign", "make it dark", "update the theme", "design", "style the page", "fix the layout".
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/webiny/data-mock --skill ui-design命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Use when building the local API/server layer that serves the UI. Handles project CRUD, seed job orchestration, and proxies to Webiny CMS GraphQL. Uses DI patterns from project-architecture. Invoke BEFORE writing any server/API code.
Use when building CLI commands in src/cli/. Command structure, DI registration, available services (Prompts, UI, DatabaseService, GraphQLService), testing. Invoke BEFORE writing any CLI code. References project-architecture for DI patterns.
Use when creating abstractions, implementations, features, repositories, use cases, or any DI-wired service. Defines mandatory file separation — abstractions, implementations, null objects, and features MUST each be in their own file. Invoke BEFORE writing any DI-related code.
正在显示 SKILL.md
| name | ui-design |
| description | Invoke when the user asks about changing the look of the UI — colors, theme, layout, fonts, component styles, or page composition. Spawns or guides a ui-designer agent. Use when: "change colors", "redesign", "make it dark", "update the theme", "design", "style the page", "fix the layout". |
This project's UI is built for design changes. React is a dumb display layer — all business logic lives in TypeScript classes (presenters, use cases, repositories). Designers can freely change any visual file without breaking business logic.
| Want to change... | Edit this file |
|---|---|
| Colors (entire app) | src/ui/theme/tokens.ts → colors |
| Font / sizes | src/ui/theme/tokens.ts → typography |
| Spacing / radius | src/ui/theme/tokens.ts → spacing / radii |
| Shadows | src/ui/theme/tokens.ts → shadows |
| Header / nav colors | src/ui/theme/tokens.ts → defaultShell |
| Layout dimensions | src/ui/theme/tokens.ts → layout |
| Component defaults | src/ui/theme/theme.ts → DEFAULT_COMPONENTS |
| Button/Card/Badge look | src/ui/components/wrappers/{Component}.tsx |
| Navigation structure | src/ui/AppShell.tsx |
| Page layout | src/ui/presentation/{Domain}/{Page}/components/*.tsx |
When spawning a design agent, use agentType: "ui-designer". The agent has built-in instructions
for what to change and what not to touch.
Agent({ subagent_type: "ui-designer", prompt: "Change the primary color to teal..." })
tokens.ts (source of truth)
↓
theme.ts (builds component theme)
↓
wrappers/*.tsx (design system — Button, Card, etc.)
↓
presentation/*/components/*.tsx (pages — just renders vm data)