skills.rest
asakuno
asakunoCOMMUNITY
Explore all skills by this author →
GitHub

ui-design-guidelines

Identify UI design oversights across accessibility, performance, responsiveness, animation, forms, and semantic HTML.

Updated Dec 29, 2025
Search Tags:#performance#accessibility#verification#ui-design#ux#ai-oversights
One-click install
npx skills add https://github.com/asakuno/template-repository --skill ui-design-guidelines-asakuno
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-guidelines
Source: https://github.com/asakuno/template-repository/tree/main/.claude/skills/ui-design-guidelines
Command: npx skills add https://github.com/asakuno/template-repository --skill ui-design-guidelines-asakuno

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

AI often overlooks critical UI/UX validation steps during design reviews; this skill codifies concrete verification to prevent regressions in accessibility, performance, responsiveness, animation, forms, and semantic structure.

Core Features & Use Cases

  • Clear validation checklists covering Accessibility, Performance, Responsive Testing, Animation Constraints, Forms ARIA, Semantic HTML, and Feedback Timing.
  • Phase-based workflow guidance (Phase 1 planning, Phase 4 verification) with references to the verification guides.
  • Reference materials and verification guides for practical, real-world usage.

Quick Start

Review the Quick Reference to plan accessibility, performance, and responsive checks before implementation.

Frequently Asked Questions about ui-design-guidelines

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

FAQPage Schema
How do I catch AI design oversights during UI design reviews?▼

Catch AI design oversights by applying checklist-driven UI QA that verifies accessibility, performance, responsiveness, animation, forms, and semantic HTML validation to prevent regressions.

What UI accessibility and performance checks should I run before implementation?▼

Run UI accessibility and performance checks by referencing a quick reference guide to plan validation for responsive testing, ARIA forms, and semantic HTML structure prior to development.

How does checklist-driven UI QA mitigate accessibility regressions?▼

Checklist-driven UI QA mitigates accessibility regressions by codifying concrete verification steps across ARIA forms, semantic HTML, and feedback timing to override AI oversights.

Does this UI verification process cover semantic HTML and animation constraints?▼

This UI verification process covers semantic HTML and animation constraints by providing specific validation checklists that ensure structural and visual design compliance.

What is the best way to integrate UI verification into a phase-based workflow?▼

Integrate UI verification into a phase-based workflow by applying planning references in Phase 1 and executing concrete verification guides during Phase 4 to validate design quality.

Related Skills

Explore More Design & Creative Skills→
humanerd-drewhumanerd-drew
2

designer

Create UI/UX mockups, SVG assets, and design documentation.

Official
Intermediate
amo-tech-aiamo-tech-ai

Frontend Component Builder

Generate React and TypeScript components with Tailwind CSS and accessibility attributes.

Community
Intermediate
leboncoinleboncoin
92

check-accessibility

Automate WCAG 2.1 AA accessibility testing of Spark UI components with Playwright.

Official
Intermediate
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

Validate UI modifications for visual regression, compliance, and accessibility.

Community
Advanced