baekenough/web-design-guidelines
templates/.claude/skills/web-design-guidelines/SKILL.md
UI code review with 100+ rules for accessibility, performance, and UX
$ install --global
skillsauthnpx skillsauth add baekenough/oh-my-customcode 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 3, 2026, 8:18 PM5.3s1 file scanned
SKILL.md
- name:
- web-design-guidelines
- description:
- UI code review with 100+ rules for accessibility, performance, and UX
- scope:
- core
- user-invocable:
- false
When to Use
- UI code review
- Accessibility audit
- Design consistency check
- UX best practices verification
Command Triggers
- "Review UI"
- "Check accessibility"
- "Design audit"
- "Verify best practices"
Categories
ARIA Labels
- All interactive elements have labels
- Proper role attributes
- aria-live for dynamic content
- Descriptive aria-describedby
Focus States
- Visible focus indicators
- Logical focus order
- Focus trapping in modals
- Skip links for navigation
Form Validation
- Inline error messages
- Accessible error announcements
- Clear input requirements
- Proper label associations
Animations
- Respect prefers-reduced-motion
- Meaningful animations only
- Performance-optimized transforms
- No animation on load
Typography
- Readable font sizes (16px min)
- Proper line height (1.5+)
- Sufficient color contrast
- Responsive text scaling
Images
- Alt text for all images
- Decorative images marked
- Responsive images
- Lazy loading implemented
Performance
- Minimize layout shifts
- Optimize largest contentful paint
- Reduce time to interactive
- Efficient CSS selectors
Navigation
- Keyboard accessible
- Clear current state
- Consistent patterns
- Breadcrumbs where needed
Dark Mode
- System preference detection
- Smooth transitions
- Consistent color tokens
- Image adjustments
Touch Interaction
- Minimum 44px touch targets
- Appropriate spacing
- Gesture alternatives
- Haptic feedback consideration
i18n
- RTL support
- Text expansion room
- Locale-aware formatting
- Translation-ready strings
Execution Flow
1. Scan UI components
2. Check against category rules
3. Report violations
4. Suggest fixes
Related Skills
baekenough/wiki
development
VerifiedTrustedCommunity
Generate and maintain a persistent codebase wiki — LLM-built interlinked markdown knowledge base (Karpathy LLM Wiki pattern)
15SKILL.mdUpdated Apr 16, 2026
baekenough/wiki-rag
development
VerifiedTrustedCommunity
Use the project wiki as RAG knowledge source — search wiki pages to answer codebase questions before exploring raw files
15SKILL.mdUpdated Apr 16, 2026
baekenough/skill-extractor
tools
VerifiedTrustedCommunity
Analyze task trajectories to propose reusable SKILL.md candidates from successful patterns
15SKILL.mdUpdated Apr 16, 2026
baekenough/hada-scout
data-ai
VerifiedTrustedCommunity
hada.io RSS feed monitoring for AI agent/harness articles with automated /scout analysis
15SKILL.mdUpdated Apr 16, 2026