Ark UI skill

---
name: ark-ui
description: "Design, implement, audit, or refactor web and game-adjacent interfaces using an evidence-based Hypergryph visual language with two independent choices: product family and application depth (1 minimal, 2 moderate, 3 complex, 4 maximal). Use for Hypergryph-, Arknights-, Endfield-, Rhodes Island-, industrial sci-fi-, editorial game-UI-, or bilingual technical-interface requests; for landing pages, dashboards, menus, HUD-like panels, design systems, HTML/CSS/JS/React components, and visual QA where the result should carry this family resemblance without copying protected logos or artwork."
---

# Ark UI

Build original interfaces from documented visual and implementation evidence, not from vague “cyberpunk” prompting. Preserve usability, accessibility, project conventions, and the user's product identity.

## Start here

1. Inspect the target project, framework, viewport, existing tokens, and user content.
2. Choose one family; do not average every product into one style:
   - `ark`: black/white/cyan industrial information system.
   - `endfield`: white/charcoal/signal-yellow technical field system.
   - `exa`: midnight/white/aqua cosmic-archival system with serif contrast.
   - `popucom`: blue/yellow/orange playful platform system.
   - `corporate`: black/white/acid-lime restrained studio identity.
3. Choose one application depth independently from the family:
   - `1 / minimal / 极简`: family identity through tokens, type, geometry, and one strong state cue.
   - `2 / moderate / 中等`: family shell plus one controlled texture/instrument layer and restrained reveal motion.
   - `3 / complex / 复杂`: multi-zone shell, layered stage, broad component coverage, and coordinated instrumentation. Use the anonymized system-wide reference in `references/depth-levels.md` as the calibration baseline.
   - `4 / maximal / 极繁`: bespoke section compositions, state-driven instrumentation, and coordinated motion across a fully re-art-directed responsive system.
4. If the user specifies a depth, preserve it. Otherwise default to `moderate` for productivity/product UI and `complex` for game-adjacent or showcase UI; state the assumption. Ask only when the depth would materially change scope or rework.
5. Read [references/design-language.md](references/design-language.md), [references/depth-levels.md](references/depth-levels.md), and only the chosen family in [references/recipes.md](references/recipes.md). For multi-family comparisons or family-specific depth behavior, also read [references/family-depth-matrix.md](references/family-depth-matrix.md).
6. For implementation or code review, also read [references/frontend-evidence.md](references/frontend-evidence.md).
7. For source attribution, provenance, or asset decisions, read [references/source-ledger.md](references/source-ledger.md) and [references/legal.md](references/legal.md).

## Lock the design contract

Before changing code, state a compact contract: `family`, `depth`, evidence pattern, and what the primary screen must let the user do. Treat family and depth as orthogonal axes: `endfield + minimal` and `endfield + maximal` share identity but not visual saturation.

When the user asks to choose, present the four numbered levels with one recommended level based on product type. Keep family selection and depth selection as separate decisions instead of showing a large cross-product matrix.

Depth measures implementation coverage and orchestration, not content density. Increasing depth may add meaningful layers, responsive recomposition, and state-aware motion; it never permits fake telemetry, duplicate copy, extra colors, smaller essential text, or weaker accessibility. Read the full rubric in [references/depth-levels.md](references/depth-levels.md) before implementation.

## Implement

- Start from semantic content and task hierarchy. Use the visual grammar to expose state, navigation, and priority.
- Reuse project components and tokens when present. Otherwise copy `assets/starter-vanilla/` or use `assets/react/ArkUI.jsx` with `assets/react/ark-ui.css`.
- When renaming starter classes, IDs, data attributes, or ARIA targets, update every JavaScript selector and reference in the same pass. A styled page with broken DOM wiring is not complete.
- Use `assets/tokens/ark-ui.tokens.json` as a reference, then rename tokens to match the target project.
- Represent the contract with root attributes when practical: `data-ark-theme="endfield"` and `data-ark-depth="complex"`. Keep component selectors semantic so either axis can change independently.
- Prefer CSS/SVG geometry, gradients, rules, masks, and original abstractions over copied game art.
- Keep one dominant accent. Treat secondary accents as state or product-family signals.