web-design-guidelines
by ehmoweb-design-guidelines is a framework-agnostic guide for building, reviewing, and fixing accessible, responsive web UI. Use it for semantic HTML, WCAG 2.2 checks, forms, focus states, contrast, dark mode, performance, and layout decisions across HTML, CSS, and JS.
This skill scores 84/100, which means it is a solid listing candidate for directory users. It gives agents a clear trigger, strong operational guidance, and enough structured coverage to be meaningfully better than a generic web-design prompt, though users should still expect some reliance on the full markdown rules rather than a lightweight install experience.
- Strong triggerability: frontmatter explicitly says to use it for HTML, CSS, web components, WCAG compliance, responsive design, and web performance.
- High workflow value: the repo includes a large SKILL.md plus AGENTS.md and sectioned rules, with 13 H2s, 79 H3s, and named categories like accessibility, forms, performance, dark mode, and i18n.
- Good install decision evidence: metadata cites WCAG 2.2, MDN, web.dev, and a 70+ rule abstract, which signals a real standards-based reference skill rather than a placeholder.
- No install command or scripts are provided, so adoption is mainly manual and depends on reading the markdown guidance.
- The SKILL.md contains placeholder markers, so users should verify that any referenced sections are complete before relying on it for high-stakes work.
Overview of web-design-guidelines skill
What this skill is for
The web-design-guidelines skill is a practical web platform design and accessibility guide for building, reviewing, or fixing UI on the web. It is best for people who need more than a generic prompt: frontend engineers, designers working with code, accessibility reviewers, and agents that must make defensible HTML/CSS/JS choices.
What it helps you decide
Use this skill when the job is to choose semantic markup, meet WCAG 2.2 expectations, improve responsive behavior, or avoid common web UI regressions. The main value of the web-design-guidelines skill is that it turns broad goals like “make this form accessible” or “improve this layout on mobile” into concrete platform rules.
Why it is different
This repository is framework-agnostic and opinionated about fundamentals: semantic HTML, keyboard access, focus states, contrast, responsive design, and performance. For web-design-guidelines for UI Design, that makes it useful across React, Vue, plain HTML, and design-system work because the guidance sits below framework choice.
How to Use web-design-guidelines skill
Install and load the right files
Use the web-design-guidelines install command for the skill package:
npx skills add ehmo/platform-design-skills --skill web-design-guidelines
After install, load SKILL.md for the full ruleset. If you only need one concern, check rules/_sections.md first. AGENTS.md is the fastest path to the file structure, scope, and priority levels.
Turn a vague request into a useful prompt
The skill works best when your input names the UI surface, target constraint, and decision you want made. Better prompts include:
- “Audit this checkout form for keyboard and label issues.”
- “Refactor this card grid to stay readable on mobile and meet contrast rules.”
- “Review this modal for focus trapping, escape behavior, and ARIA naming.”
For web-design-guidelines usage, include the actual markup, component API, or layout constraints. If you only say “improve accessibility,” the output is usually too broad to be reliable.
Suggested reading order
Start with SKILL.md, then AGENTS.md, then rules/_sections.md for selective loading. If you are debugging a specific issue, read only the relevant section first: accessibility, forms, responsive design, typography, performance, or navigation. That keeps the work focused and reduces irrelevant advice.
Workflow that produces better results
Use this sequence: identify the user problem, locate the relevant rule section, apply the minimum structural fix, then re-check keyboard, labels, contrast, and mobile behavior. The skill is strongest when you ask it to produce a review or a patch, not just explain best practices in the abstract.
web-design-guidelines skill FAQ
Is this only for accessibility work?
No. Accessibility is the largest section, but the skill also covers responsive layouts, forms, typography, performance, dark mode, navigation, touch, i18n, animation, and PWA-related concerns. If your task is broader than WCAG, this skill still fits.
Do I need to be a frontend expert to use it?
No. The web-design-guidelines skill is beginner-friendly if you can share the HTML, component code, or a screenshot-backed description of the problem. You do need to be specific about the interface and the behavior you want changed.
When should I not use it?
Skip it if your task is purely visual branding, copywriting, or product strategy with no UI implementation. It is also not the right tool for server-side architecture questions unless the answer depends on web interface behavior.
How is it better than a normal prompt?
A normal prompt often returns generic advice. This skill is anchored to platform rules, so web-design-guidelines guide requests can produce more dependable decisions about semantic elements, keyboard flow, ARIA usage, and responsive behavior without guesswork.
How to Improve web-design-guidelines skill
Give the smallest complete UI context
The best inputs include the component name, relevant code, and the failure mode. For example: “This is a modal with a close icon, two inputs, and a primary action; audit it for focus management and labeling.” That is much stronger than “make it accessible.”
State the constraint that matters most
If you care most about mobile, mention viewport limits, breakpoints, or touch targets. If you care about accessibility, name the target issue: keyboard access, contrast, labels, reduced motion, or screen-reader naming. web-design-guidelines usage improves when the skill knows which tradeoff matters.
Watch for the usual failure modes
The most common misses are semantic overuse of <div>, hidden interactive controls without labels, weak focus states, and layouts that break when text is translated or zoomed. If your first output feels generic, ask for a rule-based review of the exact component tree or CSS.
Iterate with a review loop
After the first pass, ask for a second-pass check against the exact concern you still doubt: “re-audit for keyboard order,” “verify contrast and focus styling,” or “identify markup changes only.” That keeps the web-design-guidelines skill focused and usually produces a sharper final implementation.