web-design-guidelines
by Charlie85270Use web-design-guidelines to review UI code against the latest Web Interface Guidelines. Ideal for a focused web-design-guidelines for UX Audit workflow with terse file:line findings, accessibility checks, and interface compliance review before release.
This skill scores 68/100, which means it is worth listing but best framed as a focused utility with some adoption caveats. Directory users get a clear trigger, a concrete review workflow, and a defined output format, but they should expect to supply files/patterns and rely on an external guidelines fetch at runtime.
- Clear triggerability: the frontmatter names common use cases like reviewing UI, accessibility, UX, and design best practices.
- Operational workflow is explicit: fetch guidelines, read files, check all rules, then return terse file:line findings.
- Good install-decision signal: the skill has a valid frontmatter, no placeholders, and enough body content to show real usage intent.
- No bundled rules, references, or support files; the skill depends on fetching external guidelines each time.
- Limited progressive disclosure for edge cases: if no files are provided, it only says to ask the user which files to review.
Overview of web-design-guidelines skill
What the web-design-guidelines skill does
The web-design-guidelines skill reviews UI code against the latest Web Interface Guidelines. It is best for a focused design or UX audit when you want concrete findings, not a generic opinion. In practice, this skill helps you catch accessibility gaps, interface inconsistencies, and rule violations before a release.
Who should install it
Install web-design-guidelines if you routinely review frontend changes, build product UI, or need a repeatable web-design-guidelines for UX Audit workflow. It is especially useful for agents that can inspect files and return terse, file-level issues.
What makes it different
The skill is tied to a live guidelines source, so the review is meant to follow current rules rather than a stale checklist. That matters if you need a web-design-guidelines guide that stays aligned with the upstream standard and produces findings in a compact file:line format.
How to Use web-design-guidelines skill
Install and trigger it correctly
Use the web-design-guidelines install command from the repo instructions: npx skills add Charlie85270/Dorothy --skill web-design-guidelines. Then invoke the skill with a file or pattern argument, such as src/app/page.tsx or app/**/*.tsx, so the review has a clear target.
Give it the right input
The web-design-guidelines usage pattern is simple: name the files you want checked, or ask the agent to request them if you do not know the exact path. Strong inputs describe the change intent, for example: “Review app/settings/page.tsx and components/modal.tsx for accessibility and interface guideline compliance after the dialog refactor.”
Read these files first
Start with SKILL.md because it explains the workflow, then fetch the guidelines source the skill depends on. If you are adapting the process in your own repo, inspect the target UI files next and keep the review scoped to what changed; broad audits without file names usually slow the first pass.
Workflow tips that improve output
Before running the review, confirm the agent can fetch the latest rules and can read the exact files you care about. Ask for terse findings only, because the skill is designed to output concise issues rather than a long narrative. If your goal is a clean install decision, use the skill on one representative screen first, then expand to the rest of the app.
web-design-guidelines skill FAQ
Is web-design-guidelines only for accessibility?
No. Accessibility is part of the value, but the skill is broader: it checks UI code against the Web Interface Guidelines as a whole. Use it when you want a design-system-aware review, not just an accessibility lint pass.
Do I need to be an expert to use it?
No. The skill is beginner-friendly if you can point to files or a path pattern. What matters most is giving the agent the right scope and a clear review target, not writing a perfect prompt.
When should I not use this skill?
Do not use web-design-guidelines if you only want brainstorming, copywriting, or visual mood feedback without code context. It is also a poor fit when you cannot provide files to review or when the repository cannot fetch the latest guidelines source.
How is it different from a generic prompt?
A generic prompt often leaves the reviewer guessing which standard to apply and how to format results. This skill narrows the task to guideline compliance, which improves consistency, makes web-design-guidelines usage repeatable, and reduces missed issues in routine UX audits.
How to Improve web-design-guidelines skill
Provide sharper review scope
The best results come from narrow, change-based prompts. Instead of “review my site,” say what changed and where: “Review the new checkout flow in app/checkout/** for layout, form, and accessibility regressions.” That gives the web-design-guidelines skill enough context to focus on real risk.
Include the decision context
Tell the reviewer what matters most: accessibility blockers, visual consistency, mobile behavior, or guideline violations that would block merge. When the priority is clear, the skill can rank findings better and avoid burying the issues that matter most to your release.
Iterate on the first pass
If the first output is too broad, tighten the file set or ask for a second pass on only the highest-risk components. If the review is too shallow, provide the relevant user flow, expected behavior, or screenshots so the agent can compare implementation details against the web-design-guidelines guide more effectively.