skills.rest
Harmitx7
Harmitx7COMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Review UI code for WCAG 3.0 APCA contrast, Core Web Vitals, and design quality.

3|1|Updated Feb 20, 2026
Search Tags:#ui#performance#accessibility#web design#guidelines#ux
One-click install
npx skills add https://github.com/Harmitx7/tribunal-kit --skill web-design-guidelines-harmitx7
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Harmitx7/tribunal-kit/tree/main/.agent/skills/web-design-guidelines
Command: npx skills add https://github.com/Harmitx7/tribunal-kit --skill web-design-guidelines-harmitx7

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps ensure that user interfaces meet modern standards for accessibility, performance, energy efficiency, and visual design quality, preventing common pitfalls and clichés.

Core Features & Use Cases

  • Accessibility Auditing: Checks against WCAG 3.0 APCA contrast ratios, cognitive safety (reduced motion), keyboard navigation, semantic HTML, and interaction buffers.
  • Performance Benchmarking: Reviews Core Web Vitals (LCP, INP, CLS) against premium targets and identifies optimization opportunities.
  • Design Quality Evaluation: Assesses spacing, typography, color usage, shadow depth, and micro-interactions.
  • Use Case: A developer can use this skill to audit a new feature's UI before launch, ensuring it's accessible, fast, and visually polished.

Quick Start

Review the attached UI code for compliance with Next-Generation Web Interface Guidelines.

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit my UI code for WCAG 3.0 APCA contrast and accessibility compliance?▼

Core Web Vitals performance benchmarking evaluates your UI code against premium LCP, INP, and CLS targets. It identifies extreme optimization opportunities to ensure your interface meets modern speed standards and prevents common loading pitfalls.

What is the best way to check web design quality for spacing, typography, and micro-interactions?▼

Checking web design quality involves assessing your UI code for modern visual principles, including spacing, typography, color usage, shadow depth, and micro-interactions. This evaluation prevents common design clichés and ensures a visually polished interface.

Can I review my interface for energy efficiency and neuro-inclusivity before launch?▼

Yes, you can review your interface for energy efficiency and neuro-inclusivity before launch by auditing UI code against Next-Generation Web Interface Guidelines. This ensures your feature meets modern standards for cognitive safety and reduced motion without external dependencies.

Why does my UI fail modern web interface guidelines for interaction buffers and keyboard navigation?▼

Your UI fails modern web interface guidelines when interaction buffers and keyboard navigation lack fluidity or semantic structure. Auditing the code identifies these specific accessibility issues, ensuring compliance with cognitive safety and WCAG 3.0 standards.

Related Skills

Explore More Design & Creative Skills→
Tahona-AITahona-AI

fixing-accessibility

Evaluate UI code for accessibility issues against WCAG guidelines.

Official
Intermediate
billlzzz26billlzzz26
4

spark-app-template

Scaffold a Vite React TypeScript app with Tailwind CSS and shadcn UI.

Community
Intermediate
mauriciodelriomauriciodelrio
3

a11y-rules

Audit React and Next.js components for WCAG 2.2 AA accessibility violations.

Community
Intermediate
spartDevspartDev
6

Design System Violation Detector

Detect design-system violations in React components against DESIGN_GUIDELINES.md.

Community
Advanced