UI Craft Bundle
Turn a user's product task into a distinctive, usable screen whose controls work. Optimize the usefulness and completeness of interaction, not its quantity. Load only the references needed for the current phase.
Start from the product
- Inspect the current screen, nearby implementation, design tokens, navigation, data model, dependencies, and project instructions. Reuse existing conventions unless the user requests a redesign. Do not migrate a stack as a styling shortcut.
- Identify the user, immediate job, main content object, and primary action. Determine whether this is a marketing page, working product screen, or native app. Avoid turning a working application into a landing page.
- State a brief working direction and act. Infer reversible details; ask only when an unresolved choice would materially alter the product. Do not require approval of a mood board before ordinary implementation.
- Actually inspect supplied references. Extract hierarchy, density, layout, and interaction ideas; distinguish observation from inference. If images or a running screen are inaccessible, disclose that and proceed from available evidence.
Route by requested work
| Work |
Read |
| Turn generic UI symptoms into concrete corrections |
anti-slop-methods.md |
| Choose common UX principles and platform-specific checks |
ux-foundations.md |
| Apply Toss design research to copy, forms, motion, or product structure |
toss-design.md |
| New screen or visual redesign |
art-direction.md |
| Choose palette roles and balance color across a screen |
color-composition.md |
| Compose page hierarchy, alignment, spacing, and responsive regions |
layout-composition.md |
| Reuse or update design decisions across screens |
design-memory.md |
| Choose a task-appropriate layout or density |
pattern-selection.md |
| Search, editing, selection, gestures, async actions |
interaction-design.md |
| Fix a specific input, navigation, or feedback defect |
interaction-recipes.md |
| Motion or feedback |
motion.md |
| Web implementation |
web.md |
| Android, iOS, React Native, Flutter |
native.md |
| Critique, completion, regression checks |
verification.md |
| Comparing or adding upstream skills |
sources.md |
| Compare skill versions on real UI tasks |
behavior-evaluation.md |
| Evaluate and improve project-local skill rules |
local-learning.md, then manual CLI |
For a small fix, load only the relevant reference. For a substantial screen, work through direction, interaction, platform implementation, and verification. Do not load all references by default. Treat the repository's explicit design system and the user's choices as stronger context than generic aesthetic preferences from this or an optional upstream skill.
Make decisions concrete
For substantial work, record a compact design contract in existing project documentation or working notes. Use design-contract.md when a durable handoff helps. A minor fix needs no new document.
Read the existing design record before choosing new values. Follow design-memory.md to map semantic roles to actual code tokens, resolve document/code drift, and preserve justified page exceptions. Before applying a broad visual direction everywhere, inspect representative controls and states with component-specimen.md, preferably inside an existing preview surface.
- Name the main job, content structure, visual hierarchy, density, and deliberate visual signature.
- Choose a layout that supports the job: comparison table, editable list, timeline, workspace, reading surface, or another appropriate structure. Neither cards nor gradients are universally wrong; unexplained repetition is the problem.
- Use realistic domain content and edge cases. Label prototype data honestly. Do not invent customer logos, claims, prices, or integrations to make a screen look finished.
- Define observable behavior for visible controls in scope: trigger, resulting state, feedback, recovery, and persistence. Never satisfy a functional action with a cosmetic toast alone.
Implement an end-to-end slice
Build the primary journey first, including data changes and relevant non-happy states. Connect existing APIs when available; for a local prototype, implement local behavior and disclose its persistence boundary. Keep an unavailable integration clearly unavailable instead of simulating success.
Use existing primitives and platform components. Add a dependency only when it solves a concrete behavior gap. Never install an animation framework just for button hover effects. Do not require Figma, paid services, an MCP server, or an upstream skill.
Preserve focus, keyboard and touch access, input values, and recovery from errors. Drag interactions need appropriate click/tap alternatives plus keyboard support on applicable platforms. Motion should explain state and respect reduced-motion preferences.
Inspect the result
Read verification.md. Run the screen when supported; exercise the primary journey and actually inspect rendered images. Use the environment's authorized preview/test mechanism. This skill does not authorize external-site interaction, login, deployment, or unrelated changes.
Fix observed issues in order: broken task or inaccessible control, layout/hierarchy, then detail. Verify affected behavior after fixes. Stop when the scoped journey works and material limitations are documented; avoid endless cosmetic revisions or arbitrary score thresholds.
Report what changed, which interactions were exercised, actual verification evidence, and what remains unverified. Separate implemented, visually inspected, and behavior-tested claims. A build passing is not visual QA; a screenshot is not proof of interaction.
Distribution and invocation
Use $ui-craft-bundle with a product task; use the host's skill selector or a plain-language request if dollar invocation is unavailable. This original entrypoint remains independently usable. Read bundle-guide.ko.md for Korean usage and installation boundaries. Packaging tools belong to the source repository, not an installed skill directory.
1---2name: ui-craft-bundle3description: Preserve the original UI Craft Bundle workflow and provide shared web/native design, interaction, motion, and verification references. Use when the user explicitly requests ui-craft-bundle or an existing workflow depends on its references. For a new broad AI-slop-removal request, prefer ai-slop-remover when installed; exclude backend-only work and standalone graphic design.4---56# UI Craft Bundle78Turn a user's product task into a distinctive, usable screen whose controls work. Optimize the usefulness and completeness of interaction, not its quantity. Load only the references needed for the current phase.910## Start from the product1112- Inspect the current screen, nearby implementation, design tokens, navigation, data model, dependencies, and project instructions. Reuse existing conventions unless the user requests a redesign. Do not migrate a stack as a styling shortcut.13- Identify the user, immediate job, main content object, and primary action. Determine whether this is a marketing page, working product screen, or native app. Avoid turning a working application into a landing page.14- State a brief working direction and act. Infer reversible details; ask only when an unresolved choice would materially alter the product. Do not require approval of a mood board before ordinary implementation.15- Actually inspect supplied references. Extract hierarchy, density, layout, and interaction ideas; distinguish observation from inference. If images or a running screen are inaccessible, disclose that and proceed from available evidence.1617## Route by requested work1819| Work | Read |20| --- | --- |21| Turn generic UI symptoms into concrete corrections | [anti-slop-methods.md](references/anti-slop-methods.md) |22| Choose common UX principles and platform-specific checks | [ux-foundations.md](references/ux-foundations.md) |23| Apply Toss design research to copy, forms, motion, or product structure | [toss-design.md](references/toss-design.md) |24| New screen or visual redesign | [art-direction.md](references/art-direction.md) |25| Choose palette roles and balance color across a screen | [color-composition.md](references/color-composition.md) |26| Compose page hierarchy, alignment, spacing, and responsive regions | [layout-composition.md](references/layout-composition.md) |27| Reuse or update design decisions across screens | [design-memory.md](references/design-memory.md) |28| Choose a task-appropriate layout or density | [pattern-selection.md](references/pattern-selection.md) |29| Search, editing, selection, gestures, async actions | [interaction-design.md](references/interaction-design.md) |30| Fix a specific input, navigation, or feedback defect | [interaction-recipes.md](references/interaction-recipes.md) |31| Motion or feedback | [motion.md](references/motion.md) |32| Web implementation | [web.md](references/web.md) |33| Android, iOS, React Native, Flutter | [native.md](references/native.md) |34| Critique, completion, regression checks | [verification.md](references/verification.md) |35| Comparing or adding upstream skills | [sources.md](references/sources.md) |36| Compare skill versions on real UI tasks | [behavior-evaluation.md](references/behavior-evaluation.md) |37| Evaluate and improve project-local skill rules | [local-learning.md](references/local-learning.md), then [manual CLI](references/local-learning-cli.md) |3839For a small fix, load only the relevant reference. For a substantial screen, work through direction, interaction, platform implementation, and verification. Do not load all references by default. Treat the repository's explicit design system and the user's choices as stronger context than generic aesthetic preferences from this or an optional upstream skill.4041## Make decisions concrete4243For substantial work, record a compact design contract in existing project documentation or working notes. Use [design-contract.md](assets/design-contract.md) when a durable handoff helps. A minor fix needs no new document.4445Read the existing design record before choosing new values. Follow [design-memory.md](references/design-memory.md) to map semantic roles to actual code tokens, resolve document/code drift, and preserve justified page exceptions. Before applying a broad visual direction everywhere, inspect representative controls and states with [component-specimen.md](assets/component-specimen.md), preferably inside an existing preview surface.4647- Name the main job, content structure, visual hierarchy, density, and deliberate visual signature.48- Choose a layout that supports the job: comparison table, editable list, timeline, workspace, reading surface, or another appropriate structure. Neither cards nor gradients are universally wrong; unexplained repetition is the problem.49- Use realistic domain content and edge cases. Label prototype data honestly. Do not invent customer logos, claims, prices, or integrations to make a screen look finished.50- Define observable behavior for visible controls in scope: trigger, resulting state, feedback, recovery, and persistence. Never satisfy a functional action with a cosmetic toast alone.5152## Implement an end-to-end slice5354Build the primary journey first, including data changes and relevant non-happy states. Connect existing APIs when available; for a local prototype, implement local behavior and disclose its persistence boundary. Keep an unavailable integration clearly unavailable instead of simulating success.5556Use existing primitives and platform components. Add a dependency only when it solves a concrete behavior gap. Never install an animation framework just for button hover effects. Do not require Figma, paid services, an MCP server, or an upstream skill.5758Preserve focus, keyboard and touch access, input values, and recovery from errors. Drag interactions need appropriate click/tap alternatives plus keyboard support on applicable platforms. Motion should explain state and respect reduced-motion preferences.5960## Inspect the result6162Read [verification.md](references/verification.md). Run the screen when supported; exercise the primary journey and actually inspect rendered images. Use the environment's authorized preview/test mechanism. This skill does not authorize external-site interaction, login, deployment, or unrelated changes.6364Fix observed issues in order: broken task or inaccessible control, layout/hierarchy, then detail. Verify affected behavior after fixes. Stop when the scoped journey works and material limitations are documented; avoid endless cosmetic revisions or arbitrary score thresholds.6566Report what changed, which interactions were exercised, actual verification evidence, and what remains unverified. Separate implemented, visually inspected, and behavior-tested claims. A build passing is not visual QA; a screenshot is not proof of interaction.6768## Distribution and invocation6970Use `$ui-craft-bundle` with a product task; use the host's skill selector or a plain-language request if dollar invocation is unavailable. This original entrypoint remains independently usable. Read [bundle-guide.ko.md](assets/bundle-guide.ko.md) for Korean usage and installation boundaries. Packaging tools belong to the source repository, not an installed skill directory.
ch4570