UI Craft
MemTensor/memmy-agent
Design, build, redesign, or modify browser-visible web interfaces with product-quality composition, visual systems, interaction states, responsive behavior, accessibility, and browser visual QA.
Review UI code for Web Interface Guidelines compliance. An agent skill from CloudAI-X/claude-workflow-v2.
Install Web Design Guidelines
$ npx skills add CloudAI-X/claude-workflow-v2 --skill web-design-guidelines -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install CloudAI-X/claude-workflow-v2 web-design-guidelines --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/CloudAI-X/claude-workflow-v2.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/web-design-guidelines .claude/skills/web-design-guidelines && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "web-design-guidelines" agent skill from https://github.com/CloudAI-X/claude-workflow-v2/tree/main/skills/web-design-guidelines into .claude/skills/web-design-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-design-guidelines", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/CloudAI-X/claude-workflow-v2/tree/main/skills/web-design-guidelinesType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add CloudAI-X/claude-workflow-v2 --skill web-design-guidelines -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install CloudAI-X/claude-workflow-v2 web-design-guidelines --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/CloudAI-X/claude-workflow-v2.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/web-design-guidelines .agents/skills/web-design-guidelines && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "web-design-guidelines" agent skill from https://github.com/CloudAI-X/claude-workflow-v2/tree/main/skills/web-design-guidelines into .agents/skills/web-design-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-design-guidelines", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add CloudAI-X/claude-workflow-v2 --skill web-design-guidelines -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install CloudAI-X/claude-workflow-v2 web-design-guidelines --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/CloudAI-X/claude-workflow-v2.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/web-design-guidelines .cursor/skills/web-design-guidelines && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "web-design-guidelines" agent skill from https://github.com/CloudAI-X/claude-workflow-v2/tree/main/skills/web-design-guidelines into .cursor/skills/web-design-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-design-guidelines", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/CloudAI-X/claude-workflow-v2.git --path skills/web-design-guidelines--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add CloudAI-X/claude-workflow-v2 --skill web-design-guidelines -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install CloudAI-X/claude-workflow-v2 web-design-guidelines --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/CloudAI-X/claude-workflow-v2.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/web-design-guidelines .gemini/skills/web-design-guidelines && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "web-design-guidelines" agent skill from https://github.com/CloudAI-X/claude-workflow-v2/tree/main/skills/web-design-guidelines into .gemini/skills/web-design-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-design-guidelines", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install CloudAI-X/claude-workflow-v2 web-design-guidelinesInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add CloudAI-X/claude-workflow-v2 --skill web-design-guidelines -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/CloudAI-X/claude-workflow-v2.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/web-design-guidelines .github/skills/web-design-guidelines && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "web-design-guidelines" agent skill from https://github.com/CloudAI-X/claude-workflow-v2/tree/main/skills/web-design-guidelines into .github/skills/web-design-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-design-guidelines", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add CloudAI-X/claude-workflow-v2 --skill web-design-guidelines -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install CloudAI-X/claude-workflow-v2 web-design-guidelines --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/CloudAI-X/claude-workflow-v2.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/web-design-guidelines .opencode/skills/web-design-guidelines && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "web-design-guidelines" agent skill from https://github.com/CloudAI-X/claude-workflow-v2/tree/main/skills/web-design-guidelines into .opencode/skills/web-design-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-design-guidelines", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
web-design-guidelines- GitHub stars
- 1.4k
- Token cost
- ~1.7k tokens
- SKILL.md length
- 815 words
- Files
- 1
- Skills in repo
- 13
- Repo updated
- First seen
- Licence
- MIT
At a glance
Review UI code for Web Interface Guidelines compliance. An agent skill from CloudAI-X/claude-workflow-v2.
- Works in 7 steps: Accessibility (A11Y) → Performance (PERF) → Responsive Design (RD) → …
- Asked to review my UI
- SKILL.md covers Output Format, 1. Accessibility (A11Y), 2. Performance (PERF) and 3. Responsive Design (RD), plus 3 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Web Design Guidelines is an agent skill from CloudAI-X/claude-workflow-v2. Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", "check my site against best practices", or "web interface guidelines".
Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering Accessibility, Frontend development and Responsive design. The repository describes itself as: Universal Claude Code workflow plugin with agents, skills, hooks, and commands. The licence is MIT.
When your agent uses it
- Asked to review my UI
- Check accessibility
- Check my site against best practices
- Web interface guidelines
Example prompts
- “review my UI”
- “check accessibility”
- “audit design”
- “/web-design-guidelines”
Workflow steps
7 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 3b5a89e. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Web Design Guidelines loads about 1.7k tokens when it runs. Until then it costs about 59 tokens; SKILL.md has 815 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from CloudAI-X/claude-workflow-v2 at commit 3b5a89e, republished under its MIT licence (© CloudAI-X). 815 words, ~1,654 tokens.
Download SKILL.mdSave it as
.claude/skills/web-design-guidelines/SKILL.md (or your agent's skills folder).- name
- web-design-guidelines
- description
- Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", "check my site against best practices", or "web interface guidelines".
Web Interface Guidelines
When to Load
- Trigger: UI audit, accessibility checks, responsive design review, UX best practices evaluation
- Skip: Backend-only work with no UI components
Self-contained guidelines for reviewing web interfaces. Apply these rules when auditing UI code.
Output Format
Report findings as: file:line — [RULE_ID] description
Example: src/Button.tsx:12 — [A11Y-01] Missing aria-label on icon button
1. Accessibility (A11Y)
A11Y-01: Semantic HTML
- Use
<button>for actions,<a>for navigation,<input>for data entry - Never use
<div onClick>or<span onClick>for interactive elements - Use
<nav>,<main>,<aside>,<header>,<footer>for landmarks
A11Y-02: ARIA Labels
- All interactive elements need accessible names
- Icon-only buttons MUST have
aria-label - Form inputs MUST have associated
<label>oraria-label - Images need
alttext (decorative images:alt="")
A11Y-03: Keyboard Navigation
- All interactive elements must be reachable via Tab
- Custom components need proper
role,tabIndex, and key handlers - Focus must be visible (never
outline: nonewithout replacement) - Modal/dialog must trap focus and return focus on close
A11Y-04: Color & Contrast
- Text contrast ratio: 4.5:1 minimum (3:1 for large text)
- Never use color alone to convey meaning (add icons, text, patterns)
- Ensure UI is usable at 200% zoom
A11Y-05: Screen Readers
- Dynamic content changes need
aria-liveregions - Loading states need
aria-busy="true" - Error messages linked to inputs via
aria-describedby
2. Performance (PERF)
PERF-01: Image Optimization
- Use
next/imageor responsive images withsrcset - Specify
widthandheightto prevent layout shift - Lazy load below-fold images:
loading="lazy" - Use WebP/AVIF with fallback
PERF-02: Bundle Size
- No barrel imports:
import Button from 'lib/Button'notimport { Button } from 'lib'(or enableoptimizePackageImports) - Tree-shake CSS: use CSS modules or Tailwind
contentconfig (v3) / automatic detection (v4) - Lazy load routes and heavy components:
React.lazy()or dynamic imports
PERF-03: Rendering
- Avoid layout thrashing: don't read then write DOM in loops
- Use
will-changesparingly (only for known animations) - Prefer CSS animations over JS animations
- Use
transformandopacityfor 60fps animations (compositor-only)
PERF-04: Core Web Vitals
- LCP < 2.5s: Optimize largest image/text, preload critical resources
- INP < 200ms: No long tasks on main thread, defer non-critical JS
- CLS < 0.1: Set dimensions on images/embeds, no injected content above fold
3. Responsive Design (RD)
RD-01: Mobile First
- Base styles for mobile, then
@media (min-width)for larger screens - Touch targets minimum 44x44px
- No horizontal scroll on any viewport
RD-02: Fluid Layout
- Use
rem/emfor typography, notpx - Use
clamp()for fluid typography:font-size: clamp(1rem, 2.5vw, 2rem) - Flex/Grid over fixed widths
- Max content width:
max-width: 65chfor readability
RD-03: Breakpoints
- Don't target devices, target content breakpoints
- Common: 640px (sm), 768px (md), 1024px (lg), 1280px (xl)
- Test at 320px, 375px, 768px, 1024px, 1440px, 1920px
4. Component Patterns (CP)
CP-01: Forms
- Show validation errors inline, next to the field
- Use
type="email",type="tel",inputmode="numeric"for mobile keyboards - Disable submit button during submission (prevent double-submit)
- Preserve form state on error (don't clear fields)
CP-02: Loading States
- Show skeleton screens over spinners for content areas
- Indicate progress for long operations (progress bar > spinner)
- Disable interactive elements during loading
- Set
aria-busy="true"on loading containers
Show full SKILL.md (325 more words)Show less
CP-03: Error States
- Always show actionable error messages ("Try again" button, not just "Error")
- Don't show technical errors to users (log internally, show friendly message)
- Error boundaries for React component trees
- Retry logic for network failures
CP-04: Empty States
- Never show blank pages — provide helpful empty states
- Include call-to-action: "No items yet. Create your first item."
- Use illustrations sparingly (they add bundle weight)
CP-05: Modals & Dialogs
- Use
<dialog>element or properrole="dialog" - Trap focus within modal
- Close on Escape key and backdrop click
- Return focus to trigger element on close
- Prevent body scroll while open
5. CSS Practices (CSS)
CSS-01: Specificity
- Prefer class selectors over ID or element selectors
- Avoid
!important(use specificity or cascade layers) - Use CSS custom properties for theming
- One direction for spacing: prefer
margin-bottomovermargin-top
CSS-02: Layout
- Use Flexbox for 1D layout, Grid for 2D layout
- Avoid
position: absolutefor layout (use for overlays only) - Use
gapover margins between flex/grid children - Use
min-height: 100dvh(not100vh) for full-height layouts
CSS-03: Dark Mode
- Use
prefers-color-schememedia query - Define all colors as CSS custom properties
- Test both modes — check contrast in both
- Don't just invert colors — design intentionally for dark mode
6. Security (SEC)
SEC-01: Content Security
- Never use
dangerouslySetInnerHTMLwithout sanitization - Sanitize user-generated content before rendering
- Use
rel="noopener noreferrer"on external links withtarget="_blank"
SEC-02: Forms & Input
- CSRF protection on all forms
- Rate limit form submissions
- Validate on both client AND server
7. Internationalization (I18N)
I18N-01: Text
- Don't hardcode strings — use i18n library or constants
- Support RTL layouts: use
logical properties(margin-inline-startovermargin-left) - Don't truncate text — designs must accommodate 40% text expansion
- Use
langattribute on<html>tag
Review Checklist
When auditing a file, check in this order (CRITICAL first):
- CRITICAL: A11Y-01, A11Y-02, SEC-01 — Semantic HTML, ARIA, XSS prevention
- HIGH: PERF-04, A11Y-03, CP-01 — Core Web Vitals, keyboard, forms
- MEDIUM: RD-01, CSS-02, CP-02, CP-03 — Responsive, layout, loading/errors
- LOW: CSS-03, I18N-01, CP-04 — Dark mode, i18n, empty states
© CloudAI-X, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in skills/web-design-guidelines of CloudAI-X/claude-workflow-v2.
Open the folder on GitHubat commit 3b5a89e
Compare with similar skills
Web Design Guidelines next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Web Design Guidelines this skillCloudAI-X/claude-workflow-v2 | 1.4k | — | ~1.7k | Automated safety check: Pass | MIT | |
| UI CraftMemTensor/memmy-agent | 2.1k | — | ~2.9k | Automated safety check: Pass | MIT | |
| Web Design Guidelinesehmo/platform-design-skills | 606 | — | ~9.7k | Automated safety check: Pass | MIT | |
| UI Guidelineshmislk/hmis | 236 | — | ~816 | Automated safety check: Pass | GPL-3.0 | |
| Frontend DesignRedWoodOG/Hermes-Desktop | 177 | — | ~1.2k | Automated safety check: Pass | None | |
| Common Web Visual TestingHoangNguyen0403/agent-skills-standard | 571 | — | ~760 | Automated safety check: Pass | MIT |
Similar skills
Web Design Guidelines
ehmo/platform-design-skills
Web platform design and accessibility guidelines. An agent skill from ehmo/platform-design-skills.
UI Guidelines
hmislk/hmis
HMIS UI development guidelines for JSF/XHTML pages. An agent skill from hmislk/hmis.
Frontend Design
RedWoodOG/Hermes-Desktop
Frontend development with modern frameworks, responsive design, and accessibility best practices.
Common Web Visual Testing
HoangNguyen0403/agent-skills-standard
Standardizes visual audits, responsive design, and behavioral testing for web apps.
HTML Coder
TokenRhythm/opensquilla
Guides semantic, accessible HTML work: pages, forms, media and HTML5 APIs, plus how to deliver a runnable webpage project with a preview.
More from CloudAI-X/claude-workflow-v2
All 13 skills in this repoAnalyzing Projects
CloudAI-X/claude-workflow-v2
Analyzes codebases to understand structure, tech stack, patterns, and conventions.
Designing APIs
CloudAI-X/claude-workflow-v2
Designs REST and GraphQL APIs including endpoints, error handling, versioning, and documentation.
Designing Architecture
CloudAI-X/claude-workflow-v2
Designs software architecture and selects appropriate patterns for projects.
Designing Tests
CloudAI-X/claude-workflow-v2
Designs and implements testing strategies for any codebase. An agent skill from CloudAI-X/claude-workflow-v2.
Managing Git
CloudAI-X/claude-workflow-v2
Manages Git workflows including branching, commits, and pull requests.
Optimizing Performance
CloudAI-X/claude-workflow-v2
Analyzes and optimizes application performance across frontend, backend, and database layers.
Related
Categories
Questions about Web Design Guidelines
What does Web Design Guidelines do?
Review UI code for Web Interface Guidelines compliance. An agent skill from CloudAI-X/claude-workflow-v2. Web Design Guidelines is an agent skill from CloudAI-X/claude-workflow-v2. Review UI code for Web Interface Guidelines compliance.
When should I use Web Design Guidelines?
Web Design Guidelines fits situations like: asked to review my UI; check accessibility; check my site against best practices; web interface guidelines.
How do I install Web Design Guidelines in Claude Code?
Run `npx skills add CloudAI-X/claude-workflow-v2 --skill web-design-guidelines -a claude-code`. Or copy the skill folder (skills/web-design-guidelines in CloudAI-X/claude-workflow-v2) into .claude/skills/web-design-guidelines in your project. Claude Code loads it when a task matches its description.
How do I install Web Design Guidelines in Codex?
Run `npx skills add CloudAI-X/claude-workflow-v2 --skill web-design-guidelines -a codex`. Or copy the skill folder (skills/web-design-guidelines in CloudAI-X/claude-workflow-v2) into .agents/skills/web-design-guidelines in your project. Codex loads it when a task matches its description.
Can I use Web Design Guidelines in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add CloudAI-X/claude-workflow-v2 --skill web-design-guidelines -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/web-design-guidelines, .gemini/skills/web-design-guidelines, .github/skills/web-design-guidelines and .opencode/skills/web-design-guidelines in your project.
What does Web Design Guidelines need to run?
SKILL.md names no scripts, command-line tools or credentials: Web Design Guidelines is instructions for the agent only.
Does Web Design Guidelines access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Web Design Guidelines safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Web Design Guidelines use?
Web Design Guidelines is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Web Design Guidelines use?
About 1.7k tokens (SKILL.md is roughly 6.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Web Design Guidelines?
Skills that share tags, products or a category with Web Design Guidelines: UI Craft (MemTensor/memmy-agent, 2.1k stars), Web Design Guidelines (ehmo/platform-design-skills, 606 stars), UI Guidelines (hmislk/hmis, 236 stars) and Frontend Design (RedWoodOG/Hermes-Desktop, 177 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Web Design Guidelines?
CloudAI-X (a GitHub user) maintains it in CloudAI-X/claude-workflow-v2, which has 1,418 GitHub stars. The repository holds 13 skills in this directory. The repository was last updated on October 6, 2026.
Source: CloudAI-X/claude-workflow-v2 on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.