iberi22/skills/web-design-guidelines
skills/web-design-guidelines/SKILL.md
--- name: web-design-guidelines description: Review UI code for compliance with web interface best practices. Audits your code for 100+ rules covering accessibility, performance, and UX. Use when: "Review my UI", "Check accessibility", "Audit design", "Review UX", "Check my site against best practices". license: MIT metadata: author: swal version: "1.0.0" --- # Web Design Guidelines Comprehensive UI audit skill for accessibility, performance, and UX best practices. Inspired by Vercel's web
development
Updated Apr 23, 2026
$ install --global
skillsauthnpx skillsauth add iberi22/swal-skills skills/web-design-guidelinesInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 23, 2026, 5:32 PM30.5s1 file scanned
SKILL.md
- name:
- web-design-guidelines
- description:
- Review UI code for compliance with web interface best practices. Audits your code for 100+ rules covering accessibility, performance, and UX. Use when: "Review my UI", "Check accessibility", "Audit design", "Review UX", "Check my site against best practices".
- license:
- MIT
- author:
- swal
- version:
- 1.0.0
Web Design Guidelines
Comprehensive UI audit skill for accessibility, performance, and UX best practices. Inspired by Vercel's web-design-guidelines.
When to Use
Trigger on these requests:
- "Review my UI"
- "Check accessibility"
- "Audit design"
- "Review UX"
- "Check my site against best practices"
- "Fix accessibility issues"
Rule Categories (100+ Rules)
🔴 Critical — Accessibility
| Rule | Description |
|------|-------------|
| a11y-aria-labels | All interactive elements have aria-label |
| a11y-semantic-html | Use <button>, <nav>, <main>, <article> instead of <div> |
| a11y-keyboard-nav | Focusable elements are keyboard navigable |
| a11y-lang-attr | <html> has lang attribute |
| a11y-color-contrast | Text has ≥4.5:1 contrast ratio |
| a11y-image-alt | All images have alt text |
| a11y-form-labels | All form inputs have associated labels |
| a11y-error-messages | Form errors are announced to screen readers |
🟡 High — Focus & Interaction
| Rule | Description |
|------|-------------|
| focus-visible | Custom focus styles use :focus-visible, not :focus |
| focus-trap | Modals trap focus within the dialog |
| skip-link | Page has skip-to-content link |
| touch-target | Touch targets ≥44x44px |
| tap-highlight | tap-highlight-color disabled on mobile |
🟢 Medium — Forms & Validation
| Rule | Description |
|------|-------------|
| form-autocomplete | Inputs use autocomplete attribute |
| form-validation | Inline validation on blur, not on submit |
| form-error-style | Errors are red, visible, and specific |
| form-required-mark | Required fields are visually marked |
🔵 Medium — Animation & Motion
| Rule | Description |
|------|-------------|
| motion-reduced | prefers-reduced-motion respected |
| motion-safe | Animations use transform/opacity only |
| motion-duration | No animation exceeds 300ms |
| no-autooplay | Videos/animations require user interaction |
🟣 Low-Medium — Typography
| Rule | Description |
|------|-------------|
| typo-curly-quotes | Use " and " (curly quotes), not straight |
| typo-ellipsis | Use … (ellipsis char), not three dots |
| typo-tabular-nums | Numbers in tables use tabular-nums |
| typo-line-height | Body text has line-height ≥1.5 |
⚫ Low — Performance
| Rule | Description |
|------|-------------|
| perf-lazy-load | Images below fold use loading="lazy" |
| perf-preconnect | Third-party origins use <link rel="preconnect"> |
| perf-font-display | Web fonts use font-display: swap |
| perf-no-layout-shift | Images have explicit width/height |
🔘 Low — Dark Mode & Theming
| Rule | Description |
|------|-------------|
| theme-color-scheme | <meta> includes color-scheme |
| theme-dark-mode | Dark mode styles use prefers-color-scheme or CSS vars |
| theme-toggle | Theme switcher is accessible and visible |
🏁 Low — Images & Media
| Rule | Description |
|------|-------------|
| img-width-height | All images have explicit dimensions |
| img-srcset | Responsive images use srcset |
| img-format | Use WebP/AVIF over JPEG/PNG when possible |
| video-captions | Videos have captions/subtitles |
Navigation & State
| Rule | Description |
|------|-------------|
| nav-url-state | URL reflects current state |
| nav-deep-link | Sections are linkable via hash |
| state-no-flash | No flash of unstyled content (FOUC) |
How to Audit
1. Scan the codebase for HTML/React/Vue components
2. Check against each rule category above
3. Report findings grouped by severity
4. Provide specific code fixes for each issue
Example Audit Output
## 🔴 Critical Issues Found: 3
### a11y-aria-labels
**File:** `Button.tsx:12`
```tsx
// ❌ Missing
<button onClick={handleClick}>Click</button>
// ✅ Fixed
<button onClick={handleClick} aria-label="Submit form">Submit</button>
🟡 Medium Issues Found: 5
...
## Reference Files
For detailed rule implementations, see:
- `rules/a11y-aria-labels.md`
- `rules/motion-reduced.md`
- `rules/focus-visible.md`
---
*Part of SWAL Skills — swal/iberi22*
Related Skills
iberi22/xavier2-context
testing
VerifiedTrustedCommunity
Xavier2 as the central context engine for SWAL - intelligent memory, decision-making, and context orchestration. Xavier2 is the CEO brain that stores memories, coordinates agents, and maintains project state.
SKILL.mdUpdated Apr 30, 2026
iberi22/coding-agent
tools
VerifiedTrustedCommunity
Delegate coding tasks to Codex, Claude Code, or Pi agents via background process. Use when: (1) building/creating new features or apps, (2) reviewing PRs (spawn in temp dir), (3) refactoring large codebases, (4) iterative coding that needs file exploration. NOT for: simple one-liner fixes (just edit), reading code (use read tool), thread-bound ACP harness requests in chat (for example spawn/run Codex or Claude Code in a Discord thread; use sessions_spawn with runtime:"acp"), or any work in ~/clawd workspace (never spawn agents here). Claude Code: use --print --permission-mode bypassPermissions (no PTY). Codex/Pi/OpenCode: pty:true required.
SKILL.mdUpdated Apr 30, 2026
iberi22/worldexams-validator
testing
VerifiedTrustedCommunity
Validador automático para WorldExams. Verifica integridad técnica y calidad pedagógica, activando regeneración automática si es necesario.
SKILL.mdUpdated Apr 23, 2026
iberi22/worldexams-generator
tools
VerifiedTrustedCommunity
Generador de bundles de preguntas ICFES Colombia (Matemáticas, Lectura Crítica, Ciencias, Sociales, Inglés) para grados 6, 9 y 11 usando MiniMax MCP.
SKILL.mdUpdated Apr 23, 2026