ima2-uiux

# ima2 UI/UX: Intent Discovery, Patterns & Product Vocabulary

## Setup

```bash
npm install -g ima2-gen    # install globally (Node.js >= 20)
ima2 setup                 # first-time auth (GPT OAuth recommended)
ima2 serve                 # start local server
ima2 ping                  # verify
ima2 status                # config and OAuth status
```

**Agent bootstrap:** `ima2 ping` first. If unreachable: `ima2 serve &`. If not
installed: `npm install -g ima2-gen && ima2 setup`. Use `ima2 skill path` to
locate skills; read `../ima2-uiux/SKILL.md` (this file) for design direction,
`../ima2-front/SKILL.md` for implementation assets.

Activates by change surface when:
- User's design direction is vague ("깔끔하게", "모던하게", "just make it look good")
- Building onboarding, empty state, error state, or loading state UI
- User references a product aesthetic ("Notion 느낌", "Linear처럼")
- Starting a new design system or generating a color palette
- Choosing layout patterns or navigation architecture
- Setting up favicons, product logos, or brand identity elements
- Handling logo dark mode variants, OG images, or social sharing meta

Read this before style-specific references when the user cannot articulate a clear design direction.
For anti-slop detection and banned patterns, defer to `ima2 skill front ref anti-slop`, especially the 2026 gradient budget and one-note theme bans.

**Emoji ban (stub):** no emoji as UI visual elements (STRICT). Canonical rule, scope, and exemptions: `ima2-front` §5 / `ima2 skill front ref anti-slop` § Emoji Slop.

**Role separation:** This skill owns design judgment: intent discovery, information architecture, UX state meaning, typography/color/layout direction, product personality, brand vocabulary, anti-slop pattern judgment, and design-system decisions. `ima2-front` owns implementation: HTML/CSS/components, responsive mechanics, accessibility wiring, runtime behavior, and rendered verification. After choosing the design direction here, load `ima2-front` for concrete implementation.

**External/current design evidence:** For live product-reference claims, current
design-system docs, browser API behavior, accessibility guidance that may have
changed, or browser-rendered source evidence, search the web and
follow its query-rewrite, source-fetch, and evidence-status rules. Use browser
fetch/open/text/get-dom/snapshot only after candidate URLs exist.

> **C0/C1 work (small local patches):** For small patches, skip the full reference chain.

> **Rule class note (UX-STYLE-01):** Everything in this skill that expresses taste —
> product personalities, design-isms, preset tokens, aesthetic vocabulary — is
> `STYLE_SAMPLE`: examples to draw from, never universal requirements. Objective UX
> correctness (state coverage, accessibility, readability) is owned by `ima2-front`
> §1.5 and stays STRICT/DEFAULT.

## Modular References

> **Recommended: install skills to your agent's skill directory.**
> ```bash
> ima2 skill install --dir <agent-skill-path>   # agent provides its own path
> ima2 skill install --tmp                       # ephemeral fallback
> ```
> The agent determines its own skill directory and passes it via `--dir`.
> After install, SKILL.md and `references/` are on disk for native reading.
>
> **Ad-hoc reading (without install):**
> ```bash
> ima2 skill uiux refs              # list all reference modules with line counts
> ima2 skill uiux ref design-isms   # print one module (basename match)
> ```

| File | When to Read | What It Covers |
|------|-------------|----------------|
| `references/design-isms.md` | User names a style/movement | 16 design movements with CSS signatures, incl. Liquid Glass + Liquid Editorial default kit (2025-2026) + AI Serif Editorial + Organic Capsule (verified 2026-07-09) |
| `references/design-award-sources.md` | Looking for real-world design references | Tiered sourcing guide: award and gallery sites, what each is best for, and how to search |
| `references/compositional-patterns.md` | Composing hero, navigation, motion, or content structure | Canonical compositional patterns from award research with responsive and accessibility gates |
| `references/design-trends.md` | Checking dated prevalence, emerging techniques, or promotion status | 2026-07-14 axis-frequency snapshot, technique signals, signature ledger, and re-crawl protocol |
| `references/design-read-example.md` | Learning or reviewing Design Read format | Filled-in Design Read + dial setting example |
| `references/product-personalities.md` | User references a product | 10 product DNA profiles with exact tokens, incl. 2026 AI-product pastel + OpenAI warm-sans organic + Anthropic serif bookish |
| `references/layout-macrostructures.md` | Choosing page/component layout | Component layouts + page-level compositions |
| `references/ux-states.md` | Building any stateful UI | Onboarding, empty, error, loading, progressive disclosure |
| `references/color-system.md` | Generating colors/palette | OKLCH-based palette generation, hue budget, tinted neutrals, dark mode, accessibility |
| `references/design-system-bootstrap.md` | New project / design system | Token architecture, component hierarchy, **DESIGN.md format** (google-labs-code/design.md) |
| `references/responsive-nav.md` | Responsive or navigation work | Breakpoints, container queries, nav patterns by density |
| `references/ux-preflight.md` | **Before delivery** | UX state verification checklist |
| `references/typography-line-breaks.md` | **Always for text-heavy UI** | Heading break quality, **short descriptor category** (hero subtitle, card desc — use `balance` not `pretty`), orphan prevention, `ch` units, Korean orphan criteria, `-webkit-line-clamp` conflict |
| `references/favicon-logo.md` | **Favicon, product logo, or brand identity work** | Favicon file set, SVG dark mode, logo in nav/footer, dark mode variants, OG images, brand tokens, common mistakes |
| `references/logo-trust-sections.md` | Integration/partner/client