Rules that cite their success criteria
Platform Design Web is the web folder of ehmo's platform-design-skills pack. Its SKILL.md holds framework-agnostic rules based on WCAG 2.2 and MDN Web Docs, in three sections: accessibility, responsive design and forms, with HTML and CSS examples that cite WCAG success criteria.
Many rules in this skill name the WCAG success criterion behind them: SC 2.4.1 for skip links, SC 1.4.3 for contrast, SC 1.4.10 for reflow at 320px, SC 1.3.5 for autocomplete. Reviews can point to a standard.
The file describes itself as framework-agnostic and based on WCAG 2.2, MDN Web Docs and modern web platform APIs. Its frontmatter triggers include HTML, CSS, web components, WCAG compliance and responsive design.
Three sections
- Accessibility and WCAG is CRITICAL, with twelve rules from semantic elements to label in name.
- Responsive design is CRITICAL, with seven rules from mobile-first to no horizontal scrolling.
- Forms is HIGH, covering labels, autocomplete attributes and correct input types.
Details worth knowing
Rule 1.12 covers Label in Name under SC 2.5.3: when a control has visible text, its accessible name must contain it, otherwise voice control users who speak the visible label cannot activate it.
On layout, the skill favors base styles for the smallest viewport, clamp, min and max for fluid sizing, container queries for components, and breakpoints set where content breaks instead of at device widths.
Fit
Good for
- Agents generating HTML and CSS that need accessible, responsive defaults.
- Audits of a page against contrast, focus, keyboard and reflow rules.
- Form work where labels, autocomplete and input types are routinely skipped.
Complementary tools
- Related: web-accessibility-skill.
- Speed work this skill does not detail. Related: web-performance-skill and Core Web Vitals.
Use it with UiChemy
UiChemy converts Figma designs into editable Elementor pages. This skill does not drive that conversion. Use it to write your brief, such as requiring visible focus and 44px targets in the design, then check the result. Click Get Started on uichemy.com. Related: fixing-accessibility.
How to install Platform Design Web: WCAG 2.2 and Responsive Rules for Agents
git clone https://github.com/ehmo/platform-design-skills.gitClone the pack
Run the command above. The README's only install line uses a skills CLI, so this page uses a plain clone.
Copy skills/web
Take that folder, which includes SKILL.md, AGENTS.md, metadata.json and rules, and keep its structure intact.
Add it to your agent
Place it where your agent loads skills. The pack states no agent folders, so use your tool's documented path.
Try an audit prompt
Ask the agent to audit a page for accessibility and responsive issues, then check that it cites rule numbers.
Check that it loaded
Ask the agent to audit one HTML page. A working install produces findings that mention contrast ratios, focus indicators or the 320px reflow rule with their numbers.
Key features
- Semantic HTML tableRule 1.1 maps elements to their purpose, because correct structure gives accessibility, SEO and reader mode for free.
- ARIA and keyboard rulesRules cover ARIA labels, keyboard navigation, visible focus indicators, skip links, live regions and a quick reference of ARIA roles.
- Contrast ratiosNormal text needs 4.5:1 and large text 3:1, with the thresholds tied to SC 1.4.3, 1.4.6 and 1.4.11.
- Label in NameVisible button text must appear inside its aria-label, so voice control commands match what users see.
- Mobile-first CSSBase styles target the smallest viewport and layer complexity with min-width media queries.
- Fluid sizing and container queriesclamp, min and max size things without breakpoints, and container queries size components by their container.
- Content-based breakpointsBreakpoints go where the content breaks, not at fixed device widths.
- Touch target sizing44x44 CSS pixels as the target, noting that SC 2.5.8 needs only 24x24 at AA, with at least 24px between adjacent targets.
- Reflow at 320pxContent must reflow at 320px width with no horizontal scrolling, per SC 1.4.10, with a viewport meta tag always present.
- Form fundamentalsLabel every input, add autocomplete attributes for SC 1.3.5, and choose input types that trigger the right mobile keyboard.
Frequently asked questions
What is the web design skill?
It is the web folder of the platform-design-skills repository. The SKILL.md holds framework-agnostic rules for accessible, performant, responsive web interfaces based on WCAG 2.2 and MDN Web Docs, with HTML and CSS examples.
How do I install it?
The README documents a skills CLI command, which this page skips. Clone ehmo/platform-design-skills and copy skills/web into the folder where your agent loads skills. No agent folder names are given in the pack, so check your agent's docs.
Which WCAG criteria does it cite?
Several, including SC 2.4.1 for skip links, SC 1.4.3, 1.4.6 and 1.4.11 for contrast, SC 2.5.3 for Label in Name, SC 1.4.10 for reflow, SC 1.3.5 for autocomplete and SC 2.5.5 and 2.5.8 for touch targets.
What contrast ratios does it require?
Normal text needs at least 4.5:1, and large text needs 3:1. Large means 24px or more, or 18.66px or more when bold. The rule references SC 1.4.3, 1.4.6 and 1.4.11.
What does it say about touch targets?
Aim for 44x44 CSS pixels, noting that the WCAG AAA criterion SC 2.5.5 asks for that while SC 2.5.8 at AA asks for only 24x24 pixels. It also asks for at least 24px spacing between adjacent targets.
Does it include responsive layout guidance?
Yes. It covers mobile-first CSS, fluid sizing with clamp, min and max, container queries, content-based breakpoints, touch targets, the viewport meta tag and a rule that content must reflow at 320px width without horizontal scrolling.
Does it work with Claude and other agents?
The README says skills activate automatically when agents detect platform-relevant tasks and does not list supported agents. The folder uses the SKILL.md format plus AGENTS.md, so Claude or another agent that loads that format should read it.
What license is it under?
The repository is MIT licensed according to GitHub metadata and the README. Keep the license text with any copy placed in another repository or shared with a team, so the terms stay attached.