Router for the frontend design stack. Use at the start of any frontend UI task (build a page or component, redesign, pick a style or palette, polish, audit, animate, review UI) to decide which installed skill leads, which ones support, and which rule wins when the packs disagree. Also use when two design skills give contradicting advice.
インストール方法を見るインストールする前に、エージェントに与えられる指示の中身を確認できます。
Five design packs are installed side by side. Each is good alone and each assumes it is the only one in the room. This skill decides who leads, so the agent loads one lead skill plus at most two supporting ones instead of five competing rulebooks.
Before picking anything, look for what the project already decided:
PRODUCT.md / DESIGN.md at the repo root (Impeccable's context files)design-system/*/MASTER.md (UI UX Pro Max --persist output)docs/brand-guidelines.md, assets/design-tokens.* (UI UX Pro Max brand
and design-system)tailwind.config.*, components/ui/, a
component library in package.jsonIf any of these exist, they outrank every skill below (see rule 1 of the precedence ladder). Your job becomes extending that system, not replacing it.
Keep one source of truth. If two of these files exist and disagree (palette,
fonts, spacing), ask the user which one wins before writing code. When the
project has none, DESIGN.md is the one to create (Impeccable init); do not
also run --persist or generate docs/brand-guidelines.md unless the user
asks, and if they do, keep the values identical to DESIGN.md.
| The task is... | Lead | Support |
|---|---|---|
| New landing page, portfolio, marketing site | taste:design-taste-frontend | frontend-design:frontend-design for direction, ui-ux-pro-max:ui-ux-pro-max for palette/font lookup |
| New product UI: dashboard, settings, tables, multi-step flows | frontend-design:frontend-design | ui-ux-pro-max:ui-ux-pro-max (stack + UX guidelines), impeccable:impeccable for harden at the end |
| "Plan it before coding", discovery, UX flow | impeccable:impeccable (shape) | - |
| Set up design context for a repo | impeccable:impeccable (init, then document) | - |
| Redesign an existing site or app | impeccable:impeccable (critique then audit) | taste:redesign-existing-projects for marketing pages |
| Polish before shipping | impeccable:impeccable (polish) | emil-design-eng:review-animations for interaction details |
| Accessibility, performance, responsive checks | impeccable:impeccable (audit, optimize, adapt) | - |
| Choose a style, palette, font pairing, chart type | ui-ux-pro-max:ui-ux-pro-max | - |
| Design tokens / design system architecture | ui-ux-pro-max:design-system | impeccable:impeccable (extract) |
| shadcn/ui + Tailwind component work | ui-ux-pro-max:ui-styling | emil-design-eng:pick-ui-library |
| Build an animation | emil-design-eng:animate | emil-design-eng:animation-vocabulary when the user describes motion vaguely |
| Review or fix existing motion | emil-design-eng:review-animations / improve-animations | - |
| "Where should this animate?" | emil-design-eng:find-animation-opportunities | - |
| Gesture, spring, Apple-feel UI | emil-design-eng:apple-design | - |
| Web app should feel native on phones | emil-design-eng:mobile-native | impeccable:impeccable (adapt) |
| Try several versions of a component | emil-design-eng:prototype | - |
| Which library for X (charts, OTP, virtual lists...) | emil-design-eng:pick-ui-library | - |
| Toasts with Sonner | emil-design-eng:ask-sonner | - |
| UX copy, errors, microcopy | impeccable:impeccable (clarify) | - |
| Brand voice, visual identity, brand guidelines | ui-ux-pro-max:brand | ui-ux-pro-max:design-system for tokens |
| Logo, icons, corporate identity (CIP), social photos | ui-ux-pro-max:design | - |
| Banners, ads, social images, website hero art | ui-ux-pro-max:banner-design | - |
| Slides, pitch deck | ui-ux-pro-max:slides | - |
| Brand-kit board as a generated image | taste-imagegen:brandkit (optional plugin, needs image generation) | - |
| Explicit look: minimalist, brutalist, "expensive agency" | taste:minimalist-ui / industrial-brutalist-ui / high-end-visual-design | taste:design-taste-frontend pre-flight checklist |
| Google Stitch DESIGN.md | taste:stitch-design-taste | - |
| React Native / Expo motion, Swift | emil-native:animate-expo / write-swift (optional plugin) | - |
| Mockup image first, then code | taste-imagegen:* (optional plugin, needs image generation) | - |
If a pack is not installed, fall back to the next row's lead or to
frontend-design:frontend-design, which covers general direction on its own.
When two loaded skills disagree, the higher rule wins:
DESIGN.md, tokens, the component
library already in use. Extend it; do not swap libraries or mix systems.audit is the referee.design-taste-frontend says it is not for dashboards, tables or multi-step
product UI, so it does not lead those.The rules that actually collide between packs, and how each is settled, are in references/conflicts.md. Read it when a supporting skill contradicts the lead.
design-taste-frontend, ui-ux-pro-max, impeccable) are long; loading all
of them burns context and produces averaged, generic output.minimalist-ui, industrial-brutalist-ui,
high-end-visual-design) never stack with each other. Pick one or none.taste:full-output-enforcement only when the user asks for complete output.ui-ux-pro-max:design
and design-system also cover slides and branding). Load only the row's lead.emil-design-eng:emil-design-eng as
support: without a direct question the umbrella replies with a stock greeting.For anything user-facing, end with a review pass before calling it done:
impeccable:impeccable audit (or delegate to the ui-reviewer agent)emil-design-eng:review-animationsまだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Design, implement, and audit inclusive digital products using WCAG 2.2 Level AA standards. Use this skill to generate semantic ARIA for Web and accessibility traits for Web and Native platforms (iOS/Android).
日本語の概要は準備中です。原文の説明を表示しています。
Whole site or product — a full web accessibility (a11y) audit against WCAG 2.2, following the WCAG-EM methodology. Defines scope, samples representative pages and flows, runs the automated tier (`accessibility-scan`) and the hands-on manual tier (`accessibility-inspect`), and produces one conformance report. Grades each finding by severity and evidence basis, and states per-criterion conformance as pass, fail, or undetermined (needs a human). Use it for 'audit my site for accessibility', 'is this product accessible', 'a11y audit', 'WCAG or Section 508 conformance report', or any multi-page assessment. Assesses; does not fix (use `accessibility-fix`) or diff (use `accessibility-diff`). For a single page use `accessibility-scan`; for hands-on keyboard and screen-reader checks use `accessibility-inspect`.
日本語の概要は準備中です。原文の説明を表示しています。
Regression check — diff a live page's web accessibility (a11y) violations against a baseline. By default it compares your uncommitted changes (stash-based); pass `--branch [<name>]` to compare against a branch. Reports the new WCAG violations introduced, the ones fixed, and the count of pre-existing ones. Use it for 'did my change break accessibility', 'what a11y issues did this PR add', or as a CI gate. For a full scan of one page use `accessibility-scan`; for a whole site use `accessibility-audit`.
日本語の概要は準備中です。原文の説明を表示しています。
Remediation only — repair web accessibility (a11y) violations against WCAG 2.2 with a baseline, edit, and verify loop. Takes a target (URL, files, directory) or a findings worklist from `accessibility-scan`/`accessibility-inspect`/`accessibility-audit`, applies mechanical fixes as given, leaves TODOs for visual or contextual judgment, and verifies by re-running the baseline check. It only fixes. To find issues use `accessibility-scan` (one page, automated), `accessibility-inspect` (one page, manual), or `accessibility-audit` (whole site, WCAG-EM); to check for regressions use `accessibility-diff`. Use it for 'fix the a11y issues in X', 'make this accessible', 'add missing alt text and labels', 'apply these accessibility fixes', 'remediate these violations'.
日本語の概要は準備中です。原文の説明を表示しています。
One page, hands-on manual tier — drive a live page through the web accessibility (a11y) checks a rule engine can't decide: keyboard operation and focus order, screen-reader names, roles and states from the accessibility tree, reflow and zoom, reduced motion, form errors, and target size. Grades each finding by evidence basis (verified / confirm-with-a-human / human-required) and severity, and closes every criterion in a ledger: verified, flagged, not exercised, or N/A. Locates and assesses; does not fix (use `accessibility-fix`). Use it for keyboard testing, focus-order checks, screen-reader or a11y-tree review, reflow and zoom at 200%, or 'is this operable, not just lint-clean'. The automated tier is `accessibility-scan`; `accessibility-audit` runs both across a sampled site.
日本語の概要は準備中です。原文の説明を表示しています。
One page, automated tier — run the web accessibility (a11y) rule engine against a live page and locate every violation it can detect mechanically. Pass a URL, a config target name (e.g. `accesslint:accessibility-scan dev`), or nothing to use the default target from `accesslint.config.json`. Ensures a debuggable Chrome, runs the @accesslint/core engine over CDP, and returns a worklist of live-DOM WCAG 2.2 violations, each grounded to its DOM selector and source `file:line`. Locates; doesn't edit. Use it for 'is this page accessible', 'check a11y on this URL', 'find contrast and alt-text issues', or to verify a UI change. For hands-on keyboard and screen-reader checks use `accessibility-inspect`; for a whole site or product use `accessibility-audit`; to diff against uncommitted changes or a branch use `accessibility-diff`.
日本語の概要は準備中です。原文の説明を表示しています。