Use the AI Skill

The ak-ui Skill is the recommended entry point. It first identifies your framework, styling system, brand tokens and headless components, then chooses CSS Core, Vue Registry or a token-only adapter. The underlying CSS interface remains stable and usable by hand, with no AI runtime dependency.

Install

Use the open Skills CLI maintained by Vercel Labs:

npx skills add YunYouJun/ak-ui --skill ak-ui

By default, the command installs into the current project. Add -g to use the skill across projects:

npx skills add YunYouJun/ak-ui --skill ak-ui -g

The Skills CLI configures the skill for detected clients such as Codex, Claude Code and Cursor. Consult the CLI's current documentation for installation locations and supported clients.

Example prompts

Use $ak-ui to integrate ak-ui into this project and restyle the dashboard.
Preserve the existing brand and accessible component behavior.

Use $ak-ui in accent mode to restyle this page.
Preserve the existing brand colors and layout.

Use $ak-ui to style this Reka UI Dialog.
Preserve its focus management and keyboard interactions.

Use $ak-ui to review this page against the ak-ui design contract.
Report findings without changing code.

Website-inspired examples

Website tasks load the skill's dated evidence and coverage matrix. Animation tasks load controller parameters and lifecycle guidance. See Website coverage and examples for a product bulletin, independent entrance/count-up controls, and the 1.1.0 interactive website showcase, with explicit boundaries around unverified official rendering details.

Use $ak-ui to build a product updates page with bilingual navigation and news rows.
Reuse existing components, distinguish source facts from adaptation values,
and verify narrow layouts and reduced motion.

Style intensity

Mode	Suitable for	Default effect
accent	Blogs, brand sites, established design systems	Preserve the layout; add tokens, signals, type hierarchy and restrained geometry
system	Dashboards, tools, web applications	Apply the full surface, hierarchy, density, geometry and state language; the default
terminal	Special pages, immersive terminals, showcases	May recompose the layout and add telemetry, perspective, layers and more prominent motion

Intensity controls styling scope; it is independent of light or dark appearance.

What the Skill does

• Integrate: choose tokens.css, full CSS Core or Vue Registry.
• Build: compose existing components around real product content first.
• Extend: apply the design contract to native elements or any unstyled headless primitives.
• Review: check tokens, hierarchy, states, responsiveness, accessibility and asset boundaries.
• Verify: when tools allow, inspect desktop and mobile layouts, keyboard focus, component states and reduced motion.

Preserve your brand

ak-ui does not require a new product identity. The Skill maps existing brand variables to semantic --ak-* tokens before applying ak-ui geometry, hierarchy, density and feedback:

.brand-console {
  --ak-font-command: var(--brand-display-font);
  --ak-signal-info: var(--brand-primary);
  --ak-signal-accent: var(--brand-accent);
  --ak-surface-canvas: var(--brand-canvas);
}

Warning, danger, success, disabled and focus roles must retain clear meaning and contrast.

Headless components

The Skill prefers your existing headless library, followed by native browser semantics. It considers Reka UI only when a Vue project needs a missing complex interaction foundation. See Adapting headless components and the Reka UI example.

Manual integration

You can also install CSS Core, use only design tokens, or copy editable components through Vue Registry without using AI.

Design boundary

ak-ui provides an independent design language inspired by Arknights. It does not aim to reproduce specific game screens pixel for pixel or recommend copying game logos, characters, illustrations, screenshots or extracted assets.