One skill dedicated to structure and interaction. Implements layout/components by medium, sharing UI/UX principles across media. Color schemes/themes are in the sibling skill design-color。
Applicable / Not applicable
Applicable: Web page layout / prototype structure, App information architecture and navigation, CLI command structure and parameter layout, TUI panel layout and focus flow, component selection and state design, interaction flows and feedback, scenario adaptation (responsive / platform / TTY / resize), empty state / form / onboarding design.
Not applicable: color schemes / themes / palettes / dark mode colors — go to design-color. Dynamic systems requiring a backend go to code implementation.
🔴 Core hard gate · Three-direction first drafts (100% mandatory · skipping invalidates)
For any task that will produce a new layout / interaction structure,regardless of whether there is a reference or a brand name, the first step must be to producestructural first drafts of three differentiated directionsand wait for the user to choose before executing the final version.
- "Just do it according to the Notion layout" is not exempt — produce 3 differentiated structures within the Notion context
- The three directions must be genuinely differentiated (different information architecture / navigation mode / density), not the same design with things moved around
🛑 Failure modes and remedies (when the hard gate is violated)
| Trigger | First-line fix | Fallback |
|---|---|---|
| Weak runtime cannot produce three versions in parallel | Output them serially one version at a time, giving each version to the user as soon as it is saved | Single version + clearly note "only 1 version due to runtime limits; the user may specify that the other two directions be filled in" |
| User cannot decide among the three directions | Recommend priority by scenario (efficiency first → low-density skeleton / consistency first → platform native / commonality → mainstream patterns) | List the typical applicable scenarios for each of the three directions so the user can match themselves |
| reference path unreachable | Degrade to ui-ux/INDEX shared layer to get principles | Directly use built-in design principles (hierarchy/contrast/alignment/proximity/consistency/feedback/error tolerance) as a fallback to produce the structure |
| WebSearch fact verification fails | Mark as "unverified" and continue with conservative values; do not fabricate | Use known safe values from official platform documentation (e.g., iOS 44pt / WCAG 2.1 AA) |
Fact verification first
For assertions involving specific platforms / frameworks / specifications (e.g., iOS 44pt touch target, WCAG keyboard accessibility requirements), before starting, first WebSearch verify; do not assert based on training corpus.
Medium routing table
Upon receiving a task, first determine the medium (for multiple signals, follow row order), then enter the corresponding INDEX:
| Artifact form | Medium | Secondary index (selection guidance) |
|---|---|---|
| Web page / prototype / layout / component structure | HTML | html/INDEX |
| Native App (iOS / Android / desktop) information architecture / navigation | App | app/INDEX |
| Command-line tool command structure / parameter layout | CLI | cli/INDEX |
| Terminal full-screen TUI panel layout / focus flow | TUI | tui/INDEX |
Each medium's INDEX is split along three dimensions (layout / scenario / component).
Platform-agnostic shared layer · UI/UX methodology
Cross-medium design discipline, referenced by all mediums ui-ux/INDEX：
| Theme | File | Coverage |
|---|---|---|
| Design principles | ui-ux/principles | Hierarchy / contrast / alignment / proximity / consistency / feedback / error tolerance |
| Information architecture | ui-ux/information-architecture | Navigation / content priority / mental models |
| Interaction design | ui-ux/interaction-design | Interaction patterns / state completeness / feedback / error prevention |
| Usability / accessibility | ui-ux/usability-a11y | Nielsen 10 / WCAG / keyboard / contrast |
| Mainstream scenario design recommendations | ui-ux/scenarios | 14 scenarios (e-commerce/SaaS/BI/landing page/authentication/onboarding/search/settings/social/education/forms/collaboration/notifications) dedicated UX points + common pitfalls |
| Industry reasoning rules | ui-ux/industry-rules | 100 industries × 11 major categories (tech/finance/healthcare/e-commerce/creative/emerging/education/local/government/logistics/other) recommended patterns + color and typography atmosphere + decision rules + anti-patterns |
| Full UX rules checklist | ui-ux/rules | 10 categories ~170 items (accessibility/touch/performance/style/layout/typography and color/animation/forms/navigation/charts) with priority CRITICAL→LOW |
| Chart selection decision | ui-ux/charts | 25 chart types × 8 groups (trend/comparison/distribution/geographic/KPI/hierarchy/financial/multivariate) including a11y level + data volume thresholds + library selection |
| Typography font pairing | ui-ux/typography | 74 pairings × 6 categories (general SaaS/luxury editorial/tech data/creative style/professional multilingual/CJK-RTL) including Google Fonts integration + weight/line-height rules |
Layout decision path (single source of truth shared by the four medium branches; each medium file does not repeat this section)
- Determine medium + understand task flow: what the user wants to accomplish → determines information architecture. Completion criterion: medium is determined, task goal can be restated in one sentence.
- Three-direction draft gate: produce three differentiated structures (annotate suitable scenarios / advantages / costs) → user selects. Completion criterion: three directions have been produced and are genuinely differentiated (see hard gate definition), and the user has selected one or has explicitly requested the default.
- Choose layout skeleton: by medium (HTML grid / App platform navigation / CLI command tree / TUI panel patterns). Completion criterion: the skeleton has been applied to the corresponding medium's layout file template, not a vague description.
- Choose components + state completeness: see ui-ux/interaction-design.md §State completeness (single source of truth). Completion criterion: interactive components have been checked item by item against that section's state model, with no missing states.
- Scenario adaptation: responsive breakpoints / platform themes / TTY detection / resize redraw. Completion criterion: the target medium's adaptive branch (if applicable) has been verified not to break.
- Self-check: against the self-check checklist at the end of each medium file, view the actual result in a browser / actual environment; do not rely on mental simulation. Completion criterion: the self-check checklist has been gone through item by item, with no unchecked items left unexplained.
Layout implementation per medium
- HTML → grid / spacing scale steps / responsive breakpoints / container queries (html/layout + scenes + components）
- App → information architecture / navigation / platform layout / gestures (app/layout + scenes + components) + native polish rules and pre-delivery checklist (app/polish）
- CLI → Command structure / command tree / argument layout (cli/layout + scenes + components）
- TUI → Framework / layout patterns / grid / focus flow (tui/layout + scenes + components）
Sister skill
Color scheme / theme / palette / dark mode colors / data visualization colors → design-color. This skill only covers "structure and interaction"; color is not here.
Self-check
- Information architecture is clear (navigation ≤7 top-level items)
- Spacing is taken from a fixed scale step (no magic numbers)
- Component eight states are complete (including empty / error / loading states)
- Focus is visible (keyboard accessible)
- Scenario-adaptive coverage (responsive / platform / TTY / resize)
- Visual hierarchy has a single focus
- Do not convey information by color alone (add icons / text)