ui-design
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".
소스 정보
- 저장소
- webiny/data-mock
- 최근 소스 활동
- 2026년 9월 4일 10:12
- 감지된 SKILL.md 언어
- 영어
- 스타
- 1
- 포크
- 0
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
SKILL.md 표시 중
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".
# UI Design — How to Change the Visual Layer
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.
## Quick Reference
| 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` |
## For Agents
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..." })
```
## Architecture
```
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)
```
GitHub에서 보기