ww-w-aiww-w-ai/bkit-codex/.agents/skills/phase-3-mockup/SKILL.md

phase-3-mockup

Skill69 starsChanged 8 months agoApache-2.0View on GitHub

Phase 3: UI/UX Mockups and Wireframe Design. Create wireframes, screen flows, and user journey maps. Next: $phase-4-api. Triggers: mockup, wireframe, UI design, UX, screen design, prototype, 목업, 와이어프레임, 화면 설계, UI 디자인, モックアップ, ワイヤーフレーム, 原型设计, 线框图, maqueta, wireframe, maquette, Wireframe, Mockup Do NOT use for: coding conventions (use $phase-2-convention), components (use $phase-5-design-system).

We split this skill into the rules it gives an agent

2 rules. 0 are common, 2 are distinctive, and 0 are very specific to this project.

0
Common
Most of the 3 edited versions we read keep these.
2
Distinctive
This author's own choices. Worth a look.
0
Very specific
Tied to their project's names, files or tools. Probably skip.

Common
Distinctive
Very specific

Distinctive:
Use ASCII for text-based wireframes:
line 59
Distinctive:
When mockups are complete, proceed to $phase-4-api for API design.
line 124

“Common” is measured: kept by at least 6 in 10 of the 3 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.

Files

SKILL.md

Phase 3: Mockup & UI/UX Design

Design screens and user flows before building components.

Purpose

Phase 3 creates visual blueprints for the application. Mockups prevent expensive redesigns during development and align stakeholders on the user experience.

Actions

Action	Description	Example
`start`	Begin Phase 3	`$phase-3-mockup start`
`screens`	List all screens needed	`$phase-3-mockup screens`
`flow`	Create user flow diagram	`$phase-3-mockup flow`

Deliverables

Screen Inventory - List of all screens/pages
Wireframes - Low-fidelity layout for each screen
User Flow Diagram - Navigation paths between screens
Responsive Breakpoints - Mobile/tablet/desktop layouts
Mockup Document - docs/02-design/mockup.md

Process

Step 1: Screen Inventory

List every screen the application needs:

### Public Pages
- [ ] Landing Page - Hero, features, CTA
- [ ] Login - Email/password form
- [ ] Register - Signup form
- [ ] Password Reset - Recovery flow

### Authenticated Pages
- [ ] Dashboard - Overview, stats, recent activity
- [ ] Profile - User info, settings
- [ ] Item List - CRUD list with filters
- [ ] Item Detail - Single item view/edit

Step 2: Wireframe Each Screen

Use ASCII for text-based wireframes:

+-----------------------------------+
| [Logo]        [Nav]    [Login]    |
+-----------------------------------+
|                                   |
|     Welcome to AppName            |
|     Subtitle description          |
|                                   |
|     [Get Started Button]          |
|                                   |
+-----------------------------------+
|  Feature 1  | Feature 2  | F3    |
|  Icon+Text  | Icon+Text  |       |
+-----------------------------------+
|         Footer Links              |
+-----------------------------------+

Step 3: User Flow

Landing -> Login -> Dashboard
                 -> Register -> Email Verify -> Dashboard

Dashboard -> Item List -> Item Detail -> Edit Item
          -> Profile -> Settings
          -> Logout -> Landing

Step 4: Responsive Design

Breakpoint	Width	Layout Changes
Mobile	< 640px	Single column, hamburger menu
Tablet	640-1024px	Two columns, condensed nav
Desktop	> 1024px	Full layout, sidebar visible

Step 5: Component Identification

Identify reusable components from wireframes:

Header (logo, nav, user menu)
Footer (links, copyright)
Card (image, title, description, actions)
Form (input, select, checkbox, submit)
Table (sortable, filterable, paginated)
Modal (confirm, form, info)
Toast/Alert (success, error, warning, info)

Mockup Patterns

See references/mockup-patterns.md for common layout, form, and list patterns.

Output Location

docs/02-design/
├── mockup.md         # Screen wireframes
├── user-flow.md      # Navigation flow diagram
└── screen-list.md    # Screen inventory

Next Phase

When mockups are complete, proceed to $phase-4-api for API design.

Common Mistakes

Mistake	Solution
Skipping mobile layout	Design mobile-first, then scale up
Too detailed too early	Start with low-fi wireframes
Missing error states	Design empty, loading, and error states
No user flow	Map the full journey before screen details
Forgetting edge cases	Include 0 items, max items, long text states

Download now (ZIP)

Other versions3 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 3
ww-w-ai/bkit-claude-code★ 605same name
popup-studio-ai/bkit-claude-code★ 601same name
ww-w-ai/bkit-gemini★ 66same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository27 other files it gives its agents.
- AGENTS.mdAGENTS.md
- bkend-authSkill
- bkend-cookbookSkill
- bkend-dataSkill
- bkend-quickstartSkill
- bkend-storageSkill
- bkit-rulesSkill
- bkit-templatesSkill
- code-reviewSkill
- codex-learningSkill
- desktop-appSkill
- development-pipelineSkill
- dynamicSkill
- enterpriseSkill
- mobile-appSkill
- pdcaSkill
- phase-1-schemaSkill
- phase-2-conventionSkill
- phase-4-apiSkill
- phase-5-design-systemSkill
- phase-6-ui-integrationSkill
- phase-7-seo-securitySkill
- phase-8-reviewSkill
- phase-9-deploymentSkill
- plan-plusSkill
- starterSkill
- zero-script-qaSkill

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

It worked
Partly
It didn't

What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free