ima2-front

# ima2 Frontend — Domain-Correct Frontend Engineering

## 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 capabilities --json   # check models, limits, providers
ima2 defaults --json       # inspect default model/reasoning
```

**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 the skills directory; read `../ima2-uiux/SKILL.md` for design direction
and `../ima2-front/SKILL.md` (this file) for implementation.

Build production-grade frontend implementations from an established product/design direction.
This skill owns HTML/CSS/component/runtime implementation, responsive behavior, accessibility
wiring, visual verification, and frontend platform rules.

> **Role separation:** For design judgment — typography/color/layout direction, UX decision
> gates, product personalities, or vague visual briefs — load `ima2-uiux` first. This
> skill implements the chosen direction; `ima2-uiux` makes the design decisions.
> Implementation anti-slop enforcement stays here; design taste/pattern judgment lives there.

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

## Modular References

> **Loading references via CLI:**
> **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 (e.g. `~/.codex/skills/`,
> `./skills/`, etc.) and passes it via `--dir`. After install, SKILL.md and
> `references/` are on disk — the agent reads them natively via relative paths.
>
> **Ad-hoc reading (without install):**
> ```bash
> ima2 skill front refs              # list all reference modules with line counts
> ima2 skill front ref motion        # print one module (basename match)
> ima2 skill front ref stacks/react  # print a nested module
> ```

| File                                      | When to Read                         | What It Covers                                                                    |
| ----------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------- |
| `references/crud-ui.md`              | C2 list/detail/form product screens  | State coverage (loading/empty/error/permission), forms, objective UX gates         |
| `references/anti-slop.md`            | New components or UI redesign        | 2026 AI slop patterns, Korean slop, oversized text, fake assets, default UI smells |
| `references/aesthetics.md`           | Implementing an established visual direction | Domain-correct typography, color, composition, serif three-role system, expressive/functional layers, AI-brand grammar                    |
| `references/product-density.md`      | Apps, tools, dashboards              | Density profiles for landing, consumer app, SaaS, ops, finance, devtools          |
| `references/asset-requirements.md`   | Any public/product/visual surface    | Required screenshots, images, diagrams, charts, generated bitmaps, or 3D assets, mockup production pipeline   |
| `references/visual-verification.md`  | Changes affecting rendered layout    | Screenshot, viewport, text fit, state, asset, and motion verification              |
| `references/korea-2026.md`           | Korean-first or Korea-facing UI      | Korean service patterns, CJK typography, formats, mobile flows, Korean serif/myeongjo display                     |
| `references/ux-writing-ko.md`        | Korean UI copy                       | Natural Korean labels, error messages, tone, spacing, punctuation                  |
| `references/soft-3d-asset-gates.md`  | 3D/miniature/character-like visuals  | Toss-style soft 3D vs generic cute asset slop, domain gates                        |
| `references/motion.md`               | Motion/animation needed              | CSS animations, Framer Motion, CSS scroll-driven timelines, pointer-proximity chip motion (magnetic/dock), View Transitions, domain gates, organic bg + capsule label, product-led hero motion |
| `references/liquid-glass.md`         | Translucent materials, glass chrome, pill-chip surfaces | Liquid Glass layer discipline, named material states (pill-at-top/pill-scrolled/media-overlay/clear), FE-PILL-NEST-01, blur-free pill alternative, perf + a11y gates |
| `references/top-bar.md`              | Top/nav bar composition, sticky chrome | Top-bar grammar: geometry, slots, scroll-state contract (FE-TOPBAR-STATE-01), hover-surface contract (FE-TOPBAR-HOVER-01), domain gate, mobile collapse |
| `references/iterative-design.md`     | Multi-round design                   | LLM convergence problem, Diverge→Kill→Mutate process, upgrade techniques           |
| `references/prototype-variants.md`   | Runnable design variants             | `?variant=` switchers, structurally distinct options, cleanup after winner selection |
| `references/typography-wrapping.md`  | Heading/descriptor text changes      | `text-wrap: balance/pretty`, natural phrase breaks at any width, dynamic-viewport verification, `ch` units, Korean keep-all/orphan rules (verified 2026-07-07) |
| `references/logo-sections.md`        | Integration/partner logo display     | Marquee CSS, static grid, orphan cell fix, grayscale treatment, no individual hover |
| `references/brand-asset-sourcing.md` | Brand logos in UI                    | Simple Icons/SVGL sourcing, AI agent strategy, placeholder hierarchy, legal guide  |
| `references/reference-capture.md`    | Cloning/analyzing other sites        | HTML+asset capture mechanics (pageAssets/curl), analysis-only legal line, provenance manifest, never