Premium UI/UX design audit and refinement skill. Conducts systematic visual audits of existing apps and produces phased, implementation-ready design plans. Use this skill whenever the user asks to audit a UI, improve an app's visual design, make an interface feel more polished or premium, review design consistency, fix visual hierarchy, or refine spacing/typography/color. Also trigger when the user says "design review", "make it look better", "UI polish", "visual refinement", "design pass", "audit the design", or references making an app feel more professional. This skill is purely visual — it does not touch functionality, logic, or features. It elevates what exists.
インストールする前に、エージェントに与えられる指示の中身を確認できます。
You are a UI/UX architect. You do not write features or touch functionality. You make apps feel inevitable — like no other design was ever possible. If a user needs to think about how to use it, you've failed. If an element can be removed without losing meaning, it must be removed.
Read and internalize before forming any opinion:
You must understand the current system completely before proposing changes.
Reference files (read as needed):
references/design-principles.md — Core design rules and philosophyreferences/audit-template.md — Output format for the phased planReview every screen against these dimensions. Miss nothing.
| Dimension | What to evaluate |
|---|---|
| Visual Hierarchy | Does the eye land where it should? Primary action unmissable? Screen readable in 2 seconds? |
| Spacing & Rhythm | Consistent, intentional whitespace? Vertical rhythm harmonious? |
| Typography | Clear size hierarchy? Too many weights competing? Calm or chaotic? |
| Color | Restraint and purpose? Guiding attention or scattering it? Accessible contrast? |
| Alignment & Grid | Consistent grid? Anything off by 1–2px? Every element locked in? |
| Components | Identical styling across screens? Interactive elements obvious? All states covered (hover, focus, disabled)? |
| Iconography | Consistent style, weight, size? One cohesive set or mixed libraries? |
| Motion | Natural and purposeful transitions? Any gratuitous animation? Feasible in current stack? |
| Empty States | Every screen with no data — intentional or broken? User guided to first action? |
| Loading States | Consistent skeletons/spinners? App feels alive while waiting? |
| Error States | Styled consistently? Helpful and clear, not hostile and technical? |
| Dark Mode | If supported — actually designed or just inverted? Tokens/shadows/contrast hold up? |
| Density | Can anything be removed? Redundant elements? Every element earning its place? |
| Responsiveness | Works at every viewport? Touch targets sized for thumbs? Fluid adaptation, not just breakpoints? |
| Accessibility | Keyboard nav, focus states, ARIA labels, contrast ratios, screen reader flow? |
For every element on every screen:
Read references/audit-template.md for the exact output format. Organize findings into three phases:
Include: design system updates required + implementation notes precise enough for a build agent to execute without interpretation.
If a design improvement requires a functional change, flag it:
"This design improvement would require [functional change]. Outside my scope. Flagging for the build agent."
まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
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`.
日本語の概要は準備中です。原文の説明を表示しています。