2.13.0-beta.20). Features may change before the next stable release.Switch to stable →Skills
Build a UI decision system with ak:ui-ux-pro-max
Turn product context into bundled design recommendations, persist approved rules, and verify the implemented experience.
Use ak:ui-ux-pro-max to choose and review product UI direction: layout,
style, color, typography, interaction, accessibility, responsive behavior,
forms, charts, and performance. Its search tools use packaged CSV datasets, so
the recommendations are reproducible within a release and are not live standards.
Choose ak:ui-ux-pro-max for design reasoning
Use it when
- You are designing or reviewing a page, component, design system, navigation, animation, form, chart, or mobile interaction.
- You need a reasoned style, palette, typography, landing-page, or product-pattern recommendation before writing code.
- You want a prioritized UX and accessibility review with explicit anti-patterns.
- You want to persist a master design system and page-specific overrides.
Choose another workflow when
- You are ready to add shadcn/ui components or Tailwind implementation. Use
ak:ui-stylingafter the direction is approved. - You only need a terse audit against current live web guidelines. Use
ak:web-design-guidelines. - The task is backend-only, infrastructure-only, or has no visual or interaction consequence.
Prepare the product context
- State product type, audience, key tasks, platforms, content density, brand constraints, accessibility target, supported themes, and target devices.
- Provide existing screenshots, tokens, components, analytics, and known UX problems when available. Separate evidence from aesthetic preference.
- Install Python to run the bundled search CLI. Search itself requires no network.
- Define whether the run may write under
design-system/; without persistence, the CLI only prints output.
| Runtime | Invocation | Evidence boundary |
|---|---|---|
| Claude Code | /ak:ui-ux-pro-max ... | Full supported Claude delivery is available when installed; rendering and project tests remain session-dependent. |
| Cursor | /ak:ui-ux-pro-max ... | Slash invocation is user-verified, not proof of full tool or Hook parity. |
| Codex | $ak:ui-ux-pro-max ... | Native discovery is supported with partial Hook projection. |
Run the Skill
/ak:ui-ux-pro-max "Design an accessible mobile-first checkout system for a subscription app; preserve the existing brand, cover loading/error/empty states, dark mode, reduced motion, and provide implementation-ready tokens"/ak:ui-ux-pro-max "Design an accessible mobile-first checkout system for a subscription app; preserve the existing brand, cover loading/error/empty states, dark mode, reduced motion, and provide implementation-ready tokens"$ak:ui-ux-pro-max "Design an accessible mobile-first checkout system for a subscription app; preserve the existing brand, cover loading/error/empty states, dark mode, reduced motion, and provide implementation-ready tokens"The Skill has no documented top-level mode flags. Its bundled search CLI does:
| CLI input | Result | File effect |
|---|---|---|
--design-system | Combines bundled product, style, color, landing, typography, and reasoning data | Prints an ASCII result by default; -f markdown prints Markdown. |
--domain <domain> | Searches one packaged dataset, such as style, color, typography, chart, ux, react, or web | Read-only terminal output; -n changes result count and --json changes format. |
--stack react-native | Searches the only packaged stack-specific dataset | Do not infer support for other stacks from the Skill description. |
--persist -p "Project" | Persists the generated system | Writes a project-slugged MASTER.md and creates a pages/ directory under design-system/. |
--page "checkout" with --persist | Adds page-specific deviations | Writes a page override that takes precedence over the master for that page. |
--output-dir <path> | Changes the persistence root | Resolve and review the path before writing. |
Follow the observable stages
- Frame the product. Capture audience, platform, primary action, content, brand, constraints, and measurable usability outcomes.
- Generate a baseline system. Start from the combined design-system search, then inspect the reasons and anti-patterns instead of treating the first match as a mandate.
- Deepen uncertain areas. Search focused domains for accessibility, interaction, charts, typography, performance, or platform behavior.
- Resolve conflicts. Project evidence, official requirements, and tested user needs take precedence over a packaged recommendation.
- Persist only the approved system. Write the master and page override files after names, paths, tokens, and exceptions are agreed.
- Implement and verify elsewhere. Use the project implementation workflow, then test the actual UI and report evidence.
Keep authority and freshness visible
Bundled guidance is not a live standard
The CSV datasets and checklist text are a point-in-time knowledge bundle. They do not replace current WCAG, platform, browser, framework, or brand guidance. Verify version-sensitive or high-stakes requirements at their primary source.
--persistwrites design-system files; it does not implement components or prove that existing code follows them.- A palette suggestion is not contrast evidence. Test actual foreground and background pairs in both themes and every interactive state.
- Do not overwrite an established design system without comparing tokens and documenting migration impact.
- Search commands have no provider cost or network effect. Later font loading, asset retrieval, implementation, or testing may.
Verify outputs and evidence
A complete result should include product assumptions, selected and rejected directions, semantic tokens, type and spacing scales, responsive behavior, component states, navigation rules, accessibility requirements, and page-level exceptions. Verify the implemented UI with keyboard and screen reader flows, touch targets, contrast, zoom or Dynamic Type, reduced motion, light/dark themes, small-phone and landscape layouts, loading and failure states, and chart table or text alternatives.
| Symptom | Safe next step |
|---|---|
| Recommendations feel generic | Add product type, audience, primary task, tone, density, and platform to the query, then compare focused domain results. |
| A documented stack is rejected | The packaged CLI only exposes react-native; use domain guidance cautiously and verify the actual stack separately. |
| Persistence writes to an unexpected folder | Stop, inspect the project slug and --output-dir, then move or regenerate only after confirming ownership. |
| Master and page rules conflict | Apply the page override only to that page and keep shared rules in the master; document the reason for every deviation. |
| The design passes the checklist but fails usability | Treat observed user or test evidence as higher authority and revise the system. |
Stable and beta contain identical ak:ui-ux-pro-max Skill, scripts, and bundled
datasets in the documented releases. Continue with
Runtime adapters,
Projects, artifacts, and checkpoints,
or the Engineer Kit overview.
Implement accessible UI with ak:ui-styling
Apply shadcn/ui, Tailwind, responsive theming, and visual checks without losing control of project files.
Audit web UI with ak:web-design-guidelines
Review selected files against freshly fetched Web Interface Guidelines and keep findings traceable to source lines.