ui-mockup
SKILL.md
UI Mockup Skill
Response Language: Always respond to users in Thai (ภาษาไทย)
Skill for creating and editing UI Mockup/Wireframe using ASCII art and structured specifications. Designed to connect with system-design-doc and pass output to the frontend-design skill.
🎯 Purpose
┌─────────────────────────────────────────────────────────────────────┐
│ UI MOCKUP WORKFLOW │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────┐ │
│ │ system-design │ │ ui-mockup │ │ frontend- │ │
│ │ -doc │ → │ skill │ → │ design │ │
│ │ │ │ (THIS SKILL) │ │ │ │
│ └─────────────────┘ └─────────────────┘ └─────────────┘ │
│ │
│ Input: Output: Final Output: │
│ • Sitemap • ASCII Wireframes • HTML/CSS │
│ • Screen Specs • Component Specs • React/Vue │
│ • User Flows • Design Tokens • Tailwind │
│ • ER Diagram • Responsive Specs • Production │
│ │
└─────────────────────────────────────────────────────────────────────┘
💡 Available Commands
| What you need | Example command |
|---|---|
| Create new Mockup | /create-mockup Login page |
| Create from Design Doc | /create-mockup from system-design-doc.md |
| Edit Mockup | /edit-mockup Login page - add Social Login button |
| Change Layout | /edit-mockup Dashboard page - change to 3 columns |
| Add Component | /edit-mockup List page - add pagination |
| Responsive Design | /create-mockup Home page - mobile first |
🏗️ Output Structure
1. Mockup Document Structure
# [Page Name] - UI Mockup
## Page Info
- Page ID: [SCR-XXX]
- URL: [/path]
- Access: [roles]
## Layout Grid
[ASCII layout grid]
## Wireframe
[ASCII wireframe]
## Components
[Component specifications]
## Design Tokens
[Colors, spacing, typography]
## Responsive Breakpoints
[Mobile, Tablet, Desktop specs]
## Interactions
[Hover, click, animations]
📐 ASCII Wireframe Patterns
Layout Grid System (12 columns)
┌────────────────────────────────────────────────────────────────────┐
│ HEADER │
├────────────────────────────────────────────────────────────────────┤
│ │ │
│ NAV │ MAIN CONTENT │
│ (3col) │ (9col) │
│ │ │
├────────────────────────────────────────────────────────────────────┤
│ FOOTER │
└────────────────────────────────────────────────────────────────────┘
Common Page Layouts
1. Dashboard Layout
┌────────────────────────────────────────────────────────────────────┐
│ [Logo] Search [________] [User ▼] [Notif] │
├────────┬───────────────────────────────────────────────────────────┤
│ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ Menu │ │ Card 1 │ │ Card 2 │ │ Card 3 │ │ Card 4 │ │
│ │ │ KPI │ │ KPI │ │ KPI │ │ KPI │ │
│ ──── │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
│ Item1 │ │
│ Item2 │ ┌─────────────────────────────────────────────────────┐ │
│ Item3 │ │ │ │
│ ──── │ │ CHART │ │
│ Item4 │ │ │ │
│ Item5 │ └─────────────────────────────────────────────────────┘ │
│ │ │
│ │ ┌─────────────────────────────────────────────────────┐ │
│ │ │ Table Header [Actions]│ │
│ │ ├─────────────────────────────────────────────────────┤ │
│ │ │ Row 1 │ │
│ │ │ Row 2 │ │
│ │ │ Row 3 │ │
│ │ └─────────────────────────────────────────────────────┘ │
└────────┴───────────────────────────────────────────────────────────┘
2. Form Layout
┌────────────────────────────────────────────────────────────────────┐
│ [Page Title] │
│ [Subtitle / Description] │
├────────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ FORM CARD │ │
│ │ │ │
│ │ Label 1 │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ Input field │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ [Helper text / Error message] │ │
│ │ │ │
│ │ Label 2 │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ Input field │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ Label 3 Label 4 │ │
│ │ ┌──────────────────┐ ┌──────────────────┐ │ │
│ │ │ Input (half) │ │ Input (half) │ │ │
│ │ └──────────────────┘ └──────────────────┘ │ │
│ │ │ │
│ │ ┌────────────────────┐ ┌────────────────────────────┐ │ │
│ │ │ [Cancel] │ │ [Submit Button] │ │ │
│ │ └────────────────────┘ └────────────────────────────┘ │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────────┘
3. List/Table Layout
┌────────────────────────────────────────────────────────────────────┐
│ [Page Title] [+ Add New] [Filter ▼] │
├────────────────────────────────────────────────────────────────────┤
│ │
│ Search: [________________________] [🔍] Showing 1-10 of 100 │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ ☐ │ Column 1 │ Column 2 │ Column 3 │ Actions │ │
│ ├────────────────────────────────────────────────────────────┤ │
│ │ ☐ │ Data 1 │ Data 2 │ Status ● │ [✏️] [🗑️] │ │
│ │ ☐ │ Data 1 │ Data 2 │ Status ● │ [✏️] [🗑️] │ │
│ │ ☐ │ Data 1 │ Data 2 │ Status ○ │ [✏️] [🗑️] │ │
│ │ ☐ │ Data 1 │ Data 2 │ Status ● │ [✏️] [🗑️] │ │
│ │ ☐ │ Data 1 │ Data 2 │ Status ● │ [✏️] [🗑️] │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ [◀ Prev] [1] [2] [3] ... [10] [Next ▶] │
│ │
└────────────────────────────────────────────────────────────────────┘
4. Login/Auth Layout
┌────────────────────────────────────────────────────────────────────┐
│ │
│ │
│ ┌──────────────┐ │
│ │ [LOGO] │ │
│ └──────────────┘ │
│ │
│ ┌─────────────────────────┐ │
│ │ │ │
│ │ Welcome Back │ │
│ │ │ │
│ │ Email │ │
│ │ ┌─────────────────┐ │ │
│ │ │ │ │ │
│ │ └─────────────────┘ │ │
│ │ │ │
│ │ Password │ │
│ │ ┌─────────────────┐ │ │
│ │ │ │ │ │
│ │ └─────────────────┘ │ │
│ │ [Forgot Password?] │ │
│ │ │ │
│ │ ┌─────────────────┐ │ │
│ │ │ [LOGIN] │ │ │
│ │ └─────────────────┘ │ │
│ │ │ │
│ │ ─────── OR ─────── │ │
│ │ │ │
│ │ [G] [f] [in] │ │
│ │ │ │
│ │ Don't have account? │ │
│ │ [Sign up here] │ │
│ │ │ │
│ └─────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────────┘
🎨 Component Library
Form Components
Text Input:
┌────────────────────────────────────┐
│ Placeholder text │
└────────────────────────────────────┘
Text Input with Icon:
┌────────────────────────────────────┐
│ 🔍 Search... │
└────────────────────────────────────┘
Password Input:
┌────────────────────────────────────┐
│ ●●●●●●●● 👁 │
└────────────────────────────────────┘
Textarea:
┌────────────────────────────────────┐
│ │
│ │
│ │
└────────────────────────────────────┘
Select/Dropdown:
┌────────────────────────────────────┐
│ Select option ▼ │
└────────────────────────────────────┘
Checkbox:
☐ Unchecked option
☑ Checked option
Radio:
○ Unselected option
● Selected option
Toggle:
[○────] Off
[────●] On
Button Components
Primary Button:
┌────────────────────────────────────┐
│ Primary Action │
└────────────────────────────────────┘
Secondary Button:
┌────────────────────────────────────┐
│ Secondary Action │
└────────────────────────────────────┘
Icon Button:
┌──────┐
│ + │
└──────┘
Button Group:
┌──────────┐┌──────────┐┌──────────┐
│ Opt 1 ││ Opt 2 ││ Opt 3 │
└──────────┘└──────────┘└──────────┘
Navigation Components
Navbar:
┌────────────────────────────────────────────────────────────────────┐
│ [Logo] Menu1 Menu2 Menu3 [Search] [User ▼] │
└────────────────────────────────────────────────────────────────────┘
Sidebar:
┌──────────┐
│ [Logo] │
├──────────┤
│ ▸ Menu 1 │
│ ▾ Menu 2 │
│ └ Sub1 │
│ └ Sub2 │
│ ▸ Menu 3 │
│ ▸ Menu 4 │
├──────────┤
│ [Logout] │
└──────────┘
Breadcrumb:
Home > Category > Subcategory > Current Page
Tabs:
┌──────────┬──────────┬──────────┐
│ Tab 1 │ [Tab 2] │ Tab 3 │
└──────────┴──────────┴──────────┘
Pagination:
[◀ Prev] [1] [2] [3] ... [10] [Next ▶]
Data Display Components
Card:
┌────────────────────────────────────┐
│ Card Title [Actions] │
├────────────────────────────────────┤
│ │
│ Card content goes here │
│ │
└────────────────────────────────────┘
Table:
┌──────────┬──────────┬──────────┐
│ Header 1 │ Header 2 │ Header 3 │
├──────────┼──────────┼──────────┤
│ Cell 1 │ Cell 2 │ Cell 3 │
│ Cell 1 │ Cell 2 │ Cell 3 │
└──────────┴──────────┴──────────┘
Badge/Tag:
[Active] [Pending] [Inactive]
Status Indicator:
● Active (green)
○ Inactive (gray)
◐ Pending (yellow)
✕ Error (red)
Avatar:
┌───┐
│ U │ User Name
└───┘
Progress Bar:
[████████░░░░░░░░] 50%
Stats Card:
┌────────────────┐
│ 1,234 │
│ Revenue │
│ ↑ 12.5% │
└────────────────┘
Feedback Components
Alert - Success:
┌────────────────────────────────────────────────────────────────────┐
│ ✓ Success! Your changes have been saved. [×] │
└────────────────────────────────────────────────────────────────────┘
Alert - Error:
┌────────────────────────────────────────────────────────────────────┐
│ ✕ Error! Something went wrong. Please try again. [×] │
└────────────────────────────────────────────────────────────────────┘
Alert - Warning:
┌────────────────────────────────────────────────────────────────────┐
│ ⚠ Warning! This action cannot be undone. [×] │
└────────────────────────────────────────────────────────────────────┘
Toast Notification:
┌─────────────────────────────┐
│ ✓ Changes saved [×] │
└─────────────────────────────┘
Modal:
┌────────────────────────────────────────────────────────────────────┐
│ │
│ ┌────────────────────────────────────────────────────┐ │
│ │ Modal Title [×] │ │
│ ├────────────────────────────────────────────────────┤ │
│ │ │ │
│ │ Modal content goes here... │ │
│ │ │ │
│ ├────────────────────────────────────────────────────┤ │
│ │ [Cancel] [Confirm] │ │
│ └────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────────┘
🎨 Design Tokens
Colors
colors:
primary:
50: "#f0f9ff"
100: "#e0f2fe"
500: "#0ea5e9" # Main
600: "#0284c7" # Hover
700: "#0369a1" # Active
secondary:
500: "#6366f1"
600: "#4f46e5"
success:
500: "#22c55e"
warning:
500: "#f59e0b"
error:
500: "#ef4444"
neutral:
50: "#fafafa" # Background
100: "#f5f5f5" # Card bg
200: "#e5e5e5" # Border
500: "#737373" # Placeholder
700: "#404040" # Body text
900: "#171717" # Headings
Typography
typography:
fontFamily:
sans: "'Inter', -apple-system, sans-serif"
mono: "'JetBrains Mono', monospace"
fontSize:
xs: "0.75rem" # 12px
sm: "0.875rem" # 14px
base: "1rem" # 16px
lg: "1.125rem" # 18px
xl: "1.25rem" # 20px
2xl: "1.5rem" # 24px
3xl: "1.875rem" # 30px
4xl: "2.25rem" # 36px
fontWeight:
normal: 400
medium: 500
semibold: 600
bold: 700
Spacing
spacing:
0: "0"
1: "0.25rem" # 4px
2: "0.5rem" # 8px
3: "0.75rem" # 12px
4: "1rem" # 16px
5: "1.25rem" # 20px
6: "1.5rem" # 24px
8: "2rem" # 32px
10: "2.5rem" # 40px
12: "3rem" # 48px
16: "4rem" # 64px
Border Radius
borderRadius:
none: "0"
sm: "0.125rem" # 2px
default: "0.25rem" # 4px
md: "0.375rem" # 6px
lg: "0.5rem" # 8px
xl: "0.75rem" # 12px
2xl: "1rem" # 16px
full: "9999px" # Pill
Shadows
shadows:
sm: "0 1px 2px rgba(0,0,0,0.05)"
default: "0 1px 3px rgba(0,0,0,0.1)"
md: "0 4px 6px rgba(0,0,0,0.1)"
lg: "0 10px 15px rgba(0,0,0,0.1)"
xl: "0 20px 25px rgba(0,0,0,0.1)"
📱 Responsive Breakpoints
breakpoints:
sm: "640px" # Mobile landscape
md: "768px" # Tablet
lg: "1024px" # Desktop
xl: "1280px" # Large desktop
2xl: "1536px" # Extra large
layouts:
mobile:
columns: 4
gutter: "16px"
margin: "16px"
tablet:
columns: 8
gutter: "24px"
margin: "32px"
desktop:
columns: 12
gutter: "24px"
margin: "auto"
maxWidth: "1280px"
🔄 Workflow
Creating a New Mockup
1. Receive Input
├── From system-design-doc (Sitemap, Screen Specs)
└── Or from user requirements
2. Define Layout
├── Choose appropriate layout pattern
├── Define grid system
└── Specify responsive behavior
3. Create Wireframe
├── Draw ASCII wireframe
├── Specify components used
└── Define spacing
4. Create Component Specs
├── List components used
├── Specify states (default, hover, active, disabled)
└── Define interactions
5. Define Design Tokens
├── Colors
├── Typography
└── Spacing
6. Save Mockup
└── Create .mockup.md file in .mockups/ folder
Editing a Mockup
1. Read Existing Mockup
└── From .mockups/[page-name].mockup.md
2. Receive Change Request
├── Add/remove component
├── Change layout
├── Adjust design tokens
└── Add responsive breakpoint
3. Edit Mockup
├── Update ASCII wireframe
├── Update component specs
└── Update design tokens
4. Save Version
└── Update file + version history
📁 Output Files
When creating a mockup, files are saved at:
project-root/
└── .mockups/
├── _design-tokens.yaml # Shared design tokens
├── _component-library.md # Project component library
├── login.mockup.md # Login page mockup
├── dashboard.mockup.md # Dashboard mockup
├── user-list.mockup.md # User list mockup
└── ...
⚙️ Commands
| Command | Description |
|---|---|
/create-mockup [page] |
Create a new page mockup |
/edit-mockup [page] - [changes] |
Edit an existing mockup |
/list-mockups |
View all mockups |
/export-mockups |
Export mockups as summary |
⚠️ CRITICAL RULES (MUST FOLLOW)
Wireframe Rules
- ALL 3 breakpoint wireframes mandatory — Desktop (12 columns), Tablet (8 columns), Mobile (4 columns)
- No abbreviation — every wireframe must have actual ASCII art content, not "[wireframe here]" placeholders
- No placeholder text — "[TBD]", "[TODO]", "will be added" is forbidden in wireframe content
Design Token Rules
- Reference tokens from SKILL.md — use the design tokens defined in this skill (colors, typography, spacing)
- Include "Design Tokens Used" section — every mockup must list which tokens it uses
Component Rules
- Use Component Library symbols — use the standard ASCII symbols defined in the Component Library section above
- List all components — every mockup must have a "Components Used" table listing all components
CRUD Rules
- Match complexity — simple entities (< 10 fields) use modal pattern, complex entities (>= 10 fields) use page pattern
- Action column first — in data tables, the action column (View/Edit/Delete) must be the leftmost column
- SweetAlert2 for delete — all delete operations use SweetAlert2 confirmation dialog
- Enabled actions only — only show action icons for CRUD operations that are enabled
🔍 Self-Check Checklist (MANDATORY before submitting output)
Before completing the mockup, verify EVERY item:
- Desktop wireframe (12 columns) drawn with actual ASCII art?
- Tablet wireframe (8 columns) drawn with actual ASCII art?
- Mobile wireframe (4 columns) drawn with actual ASCII art?
- Design tokens referenced in "Design Tokens Used" section?
- All components listed in "Components Used" table?
- Action column is first (leftmost) in data tables?
- CRUD pattern matches entity complexity (modal vs page)?
- All required sections present (Page Info, Description, Layout Grid, Wireframe, Components, Interactions, Design Tokens, Responsive, Version History)?
If ANY checkbox is unchecked, DO NOT submit. Fix the issue first.
❌ Output Rejection Criteria
Your output will be REJECTED and you must REDO the entire mockup if:
- Any breakpoint wireframe is missing or contains only placeholder text
- "Design Tokens Used" section is missing
- "Components Used" table is missing
- Action column is not first in data tables
- CRUD pattern doesn't match entity complexity
⚠️ Penalty
Violating these rules means the task is FAILED. Your output will be REJECTED and you must redo the ENTIRE mockup from scratch. There are no partial passes.
📚 References
| File | Description |
|---|---|
references/ascii-patterns.md |
Additional ASCII wireframe patterns |
references/component-library.md |
Full component library |
references/responsive-patterns.md |
Responsive design patterns |
templates/mockup-template.md |
Template for mockup files |
templates/mockup_list.json |
Template for mockup tracking |
🎯 Entity Complexity Classification
Simple vs Complex Entities
| Complexity | Data Characteristics | UI Pattern | Examples |
|---|---|---|---|
| simple | Master data, fields < 10, no complex relations | Modal popup | Department, Status, Category, Position |
| complex | Fields >= 10, has complex relations, needs wizard | Separate page | User, Order, Product, Employee |
UI Pattern Decision
Entity Analysis
│
├── Fields < 10 && No complex relations
│ └── complexity: "simple"
│ └── UI Pattern: Modal
│ • View → Modal
│ • Create → Modal
│ • Edit → Modal
│ • Delete → SweetAlert2
│
└── Fields >= 10 || Complex relations
└── complexity: "complex"
└── UI Pattern: Page
• View → Detail Page
• Create → Form Page
• Edit → Form Page
• Delete → SweetAlert2
📊 CRUD Page Patterns
Complex Entity (3 pages)
For complex entities, 3 pages will be created:
| Page Type | Filename | Description |
|---|---|---|
| List | [NNN]-[entity]-list.mockup.md |
Table showing all records |
| Form | [NNN]-[entity]-form.mockup.md |
Create/edit form |
| Detail | [NNN]-[entity]-detail.mockup.md |
Record detail view |
Simple Entity (1 page with modals)
For simple entities (Master Data), 1 page will be created:
| Page Type | Filename | Description |
|---|---|---|
| List | [NNN]-[entity]-list.mockup.md |
Table + Modal for View/Create/Edit |
📁 File Naming Convention
Format: [NNN]-[page-name].mockup.md
| Component | Description | Example |
|---|---|---|
| NNN | 3-digit number from page ID | 001, 004, 015 |
| page-name | Page name in kebab-case | login, user-list, department-list |
Examples:
.mockups/
├── mockup_list.json
├── 001-login.mockup.md
├── 002-register.mockup.md
├── 003-dashboard.mockup.md
├── 004-user-list.mockup.md
├── 005-user-form.mockup.md
├── 006-user-detail.mockup.md
├── 010-department-list.mockup.md # simple entity (modal pattern)
└── _design-tokens.json
📋 Action Column Position
The action column must be at the front (leftmost) of the table:
┌────────┬─────┬────────────────────┬─────────────────┬──────────┐
│ Action │ ID │ Name │ Email │ Status │
├────────┼─────┼────────────────────┼─────────────────┼──────────┤
│ 👁 ✏️ 🗑 │ 001 │ John Doe │ john@email.com │ Active │
│ 👁 ✏️ 🗑 │ 002 │ Jane Smith │ jane@email.com │ Active │
└────────┴─────┴────────────────────┴─────────────────┴──────────┘
Action Icons
| Icon | Action | Simple Entity | Complex Entity |
|---|---|---|---|
| 👁 | View | Open View Modal | Navigate to Detail Page |
| ✏️ | Edit | Open Edit Modal | Navigate to Edit Page |
| 🗑 | Delete | SweetAlert2 | SweetAlert2 |
🔔 SweetAlert2 Usage
Delete confirmation always uses SweetAlert2 (for both simple and complex entities):
// Delete Confirmation (default: soft delete)
Swal.fire({
icon: 'warning',
title: 'Are you sure?',
text: "This item will be deactivated.",
showCancelButton: true,
confirmButtonColor: '#d33',
cancelButtonColor: '#3085d6',
confirmButtonText: 'Yes, deactivate it!',
cancelButtonText: 'Cancel'
})
// For hard delete: text: "This action cannot be undone.", confirmButtonText: "Yes, delete it!"
// Success
Swal.fire({
icon: 'success',
title: 'Success!',
text: 'Your record has been saved.',
confirmButtonText: 'OK'
})
// Error
Swal.fire({
icon: 'error',
title: 'Error!',
text: 'Something went wrong.',
confirmButtonText: 'OK'
})
🔗 Related Documents
Every page in mockup_list.json can have related_documents:
{
"related_documents": [
{"type": "system-design", "path": "system-design.md#user-management"},
{"type": "api", "path": "docs/api/users.md"},
{"type": "requirements", "path": "requirements.md#FR-001"}
]
}
Supported Document Types:
system-design- System Design Documentapi- API Specificationrequirements- Requirements Documentfigma- Figma Designerd- ER Diagramflow- Flow Diagramdata-dict- Data Dictionary
Weekly Installs
6
Repository
mounchons/agent…ketplaceFirst Seen
Mar 1, 2026
Security Audits
Installed on
opencode6
gemini-cli6
antigravity6
github-copilot6
codex6
kimi-cli6