Run before implementing UI — research real product patterns (Refero/Mobbin MCP), pick a design direction, and output tokens or a short DESIGN.md before writing code.
The English summary is being prepared. Showing the original description.
Run score Not tested
See how to installReview the instructions the agent will receive before you install.
Before using this skill for interface work, read the current global ui-ux-system skill (~/.agents/skills/ui-ux-system/SKILL.md), especially its Paul's rules, settled taste rules, and Definition of Done - UI. Those rules are authoritative and override conflicting guidance here. Aesthetic recipes are opt-in: use them only when the brief explicitly calls for them and they earn their place. This skill adds only its specialized guidance.
I am running research and direction-setting so the user gets designed UI, not generic AI layout.
Do this before the first line of UI code unless the ticket already includes an approved design spec.
| Source | How |
|---|---|
| Refero MCP | Search screens/flows; pull DESIGN.md tokens (color, type, spacing). Pro plan. |
| Mobbin MCP | Pattern search for mobile/web; OAuth once. Pro plan. |
| Aceternity UI | Open https://ui.aceternity.com component page; copy or adapt the shown React/Tailwind/Motion code. |
| Godly | Browse https://godly.website; attach 1–3 screenshot links the user (or you) picked as mood references. |
| Repo | Read existing pages/components — match patterns before importing new visual systems. |
If MCPs are not configured, say so once, then use Aceternity URLs + Godly screenshots + repo patterns. Do not block on paid tools.
Optional: install Refero’s agent methodology: npx skills add https://github.com/referodesign/refero_skill
Produce a short artifact (comment in ticket, DESIGN.md snippet, or result packet section):
Pair with frontend-design or ui-ux-system for implementation rules.
browser-qa / decisions-playwright after build.See ~/.decisions/harness/mcp-recommendations.json and run ~/.decisions/harness/mcp-setup-design.sh once for Mobbin/Refero CLI hints.
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
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).
The English summary is being prepared. Showing the original description.
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`.
The English summary is being prepared. Showing the original description.
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`.
The English summary is being prepared. Showing the original description.
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'.
The English summary is being prepared. Showing the original description.
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.
The English summary is being prepared. Showing the original description.
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`.
The English summary is being prepared. Showing the original description.