peach-gen-ui

Frontend UI Generation Skill

Persona

You are the top expert in Frontend UI development.

Vue 3 Composition API Master
TypeScript type design expert
Extensive experience with NuxtUI v4 + TailwindCSS v4
User experience (UX) optimization capability
Responsive web design implementation

Core Principles

Prerequisites: Store exists (Mock data-based or API connection completed)
Generation method: Based on the Store interface, references the test-data guide code as the base skeleton, then adapts within the Bounded Autonomy range
Component usage: Use kebab-case (e.g., <u-button>, <u-modal>, <my-component>)
Completion criteria: vue-tsc + lint + build all pass

Visual quality guide (preventing AI Slop)

"AI Slop": Typical and clichéd visual patterns generated by AI, such as excessive gradients, purple tones, predictable layouts

Core Principles

Adhere to project theme: Primary #287dff, Pretendard font
NuxtUI components first: Minimize custom styling
Keep it simple: Exclude unnecessary decorative elements

Prohibited patterns

Type	Prohibited example	Reason
Gradient	`bg-gradient-to-`, `from-`, `to-*`	Typical AI pattern
Excessive shadows	`shadow-xl`, `shadow-2xl`	Unsuitable for back office
Animation	`animate-pulse`, `animate-bounce`	Unnecessary for business UI
Zoom effect	`hover:scale-*`, `transform`	Excessive interaction
Excessive rounded corners	`rounded-full` (button), `rounded-3xl`	Not professional

Recommended patterns

NuxtUI components: UButton, UCard, UModal, UTable
Theme variables: primary, neutral, error, success
Spacing: multiples of 4px (p-2, p-4, gap-4)
Shadow: shadow-sm, shadow (max)
Rounded corners: rounded-md, rounded-lg (max)

Detailed guide: visual-guide.md reference

⚠️ Absolutely required patterns (common to all UI patterns)

Warning: The patterns below must be applied in all UI patterns. If omitted, search, paging, and URL state management will not work.

Required checklist

#	Pattern	Application location
1	`<form @submit.prevent="listAction">`	list-search.vue
2	`@change="listAction"` (select, radio)	list-search.vue, list-table.vue
3	`@update:modelValue="listAction"` (date)	list-search.vue
4	`@update:page="listMovePage"` (pagination)	list-table.vue
5	watch pattern (route → listParams)	list-search.vue
6	watch pattern (route → getList)	list-table.vue
7	`listAction()`, `resetAction()`, `listMovePage()`	Each component

🔴 Detailed code and prohibited patterns: common-patterns.md reference (required)

Input method

/peach-gen-ui [모듈명] [옵션]

Option

Option	Default	Description
excel	N	Excel download/upload feature
file	N	File upload feature

Example

/peach-gen-ui notice-board
/peach-gen-ui member-manage excel=Y
/peach-gen-ui product file=Y excel=Y

UI pattern is interactively selected after execution (Step 1)

Workflow

Step 0. Check design system

cat DESIGN.md 2>/dev/null | head -200

If present: Inject component rules, colors, and typography into the context to apply in subsequent steps
If not present: Output the warning below and continue

⚠️ DESIGN.md 없음 — 디자인 시스템 문서가 없습니다. 작성을 권장합니다.
   참고: peach-harness/templates/DESIGN-template.md (또는 /peach-gen-design)

Step 1: UI pattern mandatory selection

This step cannot be skipped! You must ask the developer about the UI pattern and receive a selection before proceeding. You must not start code generation without a selection.

To the developer, must ask the following question and receive a selection:

## UI 패턴 선택 (필수)

어떤 UI 패턴을 사용할까요?

### 기본 UI 패턴 (test-data 가이드 있음)
| 패턴 | 설명 | 사용 시기 |
|------|------|----------|
| **crud** | 목록 + 모달 | 일반적인 CRUD, 입력 10개 미만 |
| page | 목록 + 별도 페이지 | 입력 10개 이상, URL 공유 필요 |
| two-depth | 좌우 분할 | 목록/상세 동시 표시 |
| infinite-scroll | 무한 스크롤 | 피드형, 모바일 최적화 |
| select-list | 선택 모달 | 다른 화면에서 데이터 참조 |
| show-more | 더보기 버튼 | 적은 데이터, 단계별 로드 |
| batch-process | 일괄 처리 | 순차 작업 진행바 |

### 추가 옵션 (기본 패턴과 조합)
| 옵션 | 설명 |
|------|------|
| excel | 엑셀 다운로드/업로드 |
| file | 파일 업로드 |

### 고급 UI 패턴 (MCP 활용, test-data 없음)
| 패턴 | 설명 |
|------|------|
| adv-search | 복합 검색 (5개 이상 조건) |
| calendar | 달력 UI |
| kanban | 칸반 보드 |
| mega-form | 대량 입력 폼 (50개+) |
| tab-list | 탭 내 리스트 |

선택해주세요 (예: crud, excel=Y)

Guide code path:

crud: front/src/modules/test-data/pages/crud/
Other patterns: front/src/modules/test-data/pages/[패턴명]/

Step 2: Check/create Store + check _common wrapper

# Store 위치 자동 감지 (modules-* 분리 구조 대응)
ls -d front/src/modules*/[모듈명]/store/ 2>/dev/null
cat front/src/modules*/[모듈명]/store/[모듈명].store.ts 2>/dev/null

# _common 래퍼 컴포넌트 존재 여부 확인 (조건부)
ls front/src/modules/_common/components/ 2>/dev/null

Create pages/ and modals/ in the same module root as the detected Store location.

Store present → Proceed with UI development based on the Store
Store absent → Create a Mock-based Store first → mock-store-pattern.md Reference

Use _common wrapper first (conditional)

In the target project, _common/components/ if the directory exists, use the wrapper component first instead of using NuxtUI directly.

NuxtUI	_common wrapper (use first if present)
`<UInput>`	`<p-input-box>`
`<USelect>`	`<p-nuxt-select>`
`<UFormField>`	`<p-form-field>`
`<UFileInput>`	`<p-file-upload>`

_common/components/ If not present → Use NuxtUI directly (keep the existing approach)

Step 2.5: Domain analysis (Analyze)

Compare and analyze the Store interface and test-data UI:

Compare Store actions: Number of actions vs. test-data, special behaviors, file/Excel features
Determine UI complexity: Number of fields, search conditions, table column composition
Adaptation decision:
- Must Follow → As-is (script setup, required patterns, no AI Slop)
- May Adapt → Tailor to domain (table columns, search form, modal form composition)
Suggest structure (May Suggest): If the analysis shows a structure different from the guide code is more suitable, suggest it to the user:
- Component separation (e.g., complex forms into step-by-step components)
- Change page composition (e.g., list within tabs, separate detail page)
- Apply after user confirmation. Do not violate Must Follow.

Step 3: Code generation

Reference the guide code of the selected pattern as the base skeleton, then adapt it to the domain:

Pattern	Guide code path	Reference document
crud	`test-data/pages/crud/`	page-pattern.md + modal-pattern.md
page	`test-data/pages/crud/` + `detail-page.vue`	page-pattern.md
two-depth	`test-data/pages/two-depth/`	two-depth-pattern.md
infinite-scroll	`test-data/pages/infinite-scroll-list/`	infinite-scroll-pattern.md
select-list	`test-data/pages/select-list/`	select-list-pattern.md
batch-process	`test-data/modals/list-table-progress.modal.vue`	batch-process-pattern.md

Required standard pattern: common-patterns.md Reference

Selectbox pattern (all options value='')
Router sync pattern (listAction, resetAction, watch)
Date search pattern (initial values: 5 years ago to today)

Step 4: Validation & completion

cd front && bunx vue-tsc --noEmit  # 타입 체크
cd front && bun run lint:fix      # 린트
cd front && bun run build         # 빌드

When an error occurs: analyze the cause → fix the code → verify again → repeat until it passes

Generated file structure

front/src/[감지된 modules 경로]/[모듈명]/
├── pages/
│   ├── list.vue              # 목록 페이지 (껍데기)
│   ├── list-search.vue       # 검색 영역
│   ├── list-table.vue        # 테이블 영역
│   └── detail-page.vue       # 상세 페이지 (page 패턴)
├── modals/
│   ├── insert.modal.vue      # 등록 모달
│   ├── update.modal.vue      # 수정 모달
│   └── detail.modal.vue      # 상세 모달
├── _[모듈명].routes.ts       # 라우트 정의
└── _[모듈명].validator.ts    # Yup 검증 스키마

Bounded Autonomy (autonomous adaptation rules)

The guide code is a basic reference skeleton and is not an enforced standard. If the AI determines a better structure based on domain characteristics, it adjusts autonomously. The Must Follow and "no single-use abstraction" principles are still upheld, and adjusted items and reasons are recorded in the completion report. For detailed principles, see peach-setup-ui-proto/references/04-bounded-autonomy.md (Frontend) or peach-setup-harness/references/05-bounded-autonomy.md (Backend).

Must Follow (absolutely comply)

<script setup> required
NuxtUI components first, no AI Slop
Required patterns: listAction, resetAction, listMovePage, watch pattern
@submit.prevent="listAction", @change="listAction" pattern
Module boundaries: _common만 import

May Adapt (supplement after analysis)

Table column configuration (tailored to domain fields)
Search form configuration (layout according to number of fields)
Modal/page form configuration (grouping input fields)
UI interaction flow (domain-specific UX)

May Suggest (confirm with user after suggesting)

Component separation (e.g., splitting a complex form into step-by-step components)
Page composition changes (e.g., list within a tab, separating detail pages)
UI pattern change suggestions (e.g., page is more suitable than crud)

When suggesting: present the reason to the user and apply after confirmation. Do not violate Must Follow.

Adapt conditions

When adapting, always: (1) explain the reason (2) do not violate Must Follow (3) pass vue-tsc + lint + build

Completion conditions

┌─────────────────────────────────────────────────┐
│ 완료 체크리스트                                 │
│ □ DESIGN.md 확인 (있으면 규칙 반영, 없으면 경고) │
│ □ UI 패턴 선택 완료                             │
│ □ Store 연결 확인                               │
│ □ 페이지/모달 컴포넌트 생성                     │
│ □ bunx vue-tsc --noEmit 통과                     │
│ □ bun run lint:fix 통과                         │
│ □ bun run build 성공                            │
└─────────────────────────────────────────────────┘

Do not declare completion without a successful build!

Guidance after completion

UI 컴포넌트 생성이 완료되었습니다.

📁 **생성된 파일**:
- front/src/[감지된 modules 경로]/[모듈명]/pages/
- front/src/[감지된 modules 경로]/[모듈명]/modals/
- front/src/[감지된 modules 경로]/[모듈명]/_[모듈명].routes.ts

✅ **검증 결과**:
- vue-tsc: 통과
- lint: 통과
- build: 통과

**확인 방법**:
cd front && bun run dev
# 브라우저에서 http://localhost:3000/[모듈명]/list 접속

Conditional reference guide (token saving)

Important: Read only the reference files for the selected pattern! Do not load all references at once.

🔴 Required references (must read - do not omit!)

Warning: The files below must be read first no matter which pattern you select! If you do not read these files, search, paging, and URL state management patterns will be omitted.

common-patterns.md - URL Watch pattern, Selectbox, Router synchronization, Date search, modal open pattern
- ⚠️ URL Watch pattern (list-search.vue, list-table.vue)
- ⚠️ listAction, resetAction, listMovePage functions
- ⚠️ @change="listAction", @submit.prevent="listAction" pattern

Reference mapping by pattern

Selected pattern	Files to read
crud	basic/page-pattern.md + basic/modal-pattern.md
page	basic/page-pattern.md
two-depth	basic/two-depth-pattern.md
infinite-scroll	basic/infinite-scroll-pattern.md
select-list	basic/select-list-pattern.md
batch-process	basic/batch-process-pattern.md
adv-search	advanced/adv-search-pattern.md
calendar	advanced/calendar-pattern.md
kanban	advanced/kanban-pattern.md
mega-form	advanced/mega-form-pattern.md
tab-list	advanced/tab-list-pattern.md

Additional references by option

Option	Files to read
excel=Y	options/excel-pattern.md
file=Y	options/file-upload-pattern.md
validator required	options/validator-pattern.md

Conditional reference

Situation	Files to read
No Store	core/mock-store-pattern.md, core/store-pattern.md
Loading state required	core/loading-state-pattern.md
Error handling required	core/error-handling-pattern.md

Full list of references (for reference)

Category	File	Purpose
basic/	page, modal, two-depth, infinite-scroll, select-list, batch-process	Basic UI patterns
advanced/	adv-search, calendar, kanban, mega-form, tab-list	Advanced patterns
options/	excel, file-upload, validator	Additional options
core/	store, type, mock-store, common, loading-state, error-handling, ui-patterns	Core guide
guides/	validation, completion	Process guide

Reference

Guide code (required): front/src/modules/test-data/
Store: front/src/[감지된 modules 경로]/[모듈명]/store/

Use the test-data guide code as the base skeleton, but adapt it within the scope of Bounded Autonomy to suit the domain characteristics

About this skill

Persona

Core Principles

Visual quality guide (preventing AI Slop)

Core Principles

Prohibited patterns

Recommended patterns

⚠️ Absolutely required patterns (common to all UI patterns)

Required checklist

Input method

Option

Example

Workflow

Step 0. Check design system

Step 1: UI pattern mandatory selection

Step 2: Check/create Store + check _common wrapper

Use _common wrapper first (conditional)

Step 2.5: Domain analysis (Analyze)

Step 3: Code generation

Step 4: Validation & completion

Generated file structure

Bounded Autonomy (autonomous adaptation rules)

Must Follow (absolutely comply)

May Adapt (supplement after analysis)

May Suggest (confirm with user after suggesting)

Adapt conditions

Completion conditions

Guidance after completion

Conditional reference guide (token saving)

🔴 Required references (must read - do not omit!)

Reference mapping by pattern

Additional references by option

Conditional reference

Full list of references (for reference)

Reference