skills.rest
remiconnesson
remiconnessonCOMMUNITY
Explore all skills by this author →
GitHub

ui-design

Identify accessibility, layout, typography, color, form, and motion issues in HTML and CSS.

Updated Apr 9, 2026
Search Tags:#accessibility#frontend#forms#ui design#core web vitals#responsive layout
One-click install
npx skills add https://github.com/remiconnesson/insights-garden --skill ui-design-remiconnesson
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/remiconnesson/insights-garden/tree/main/.agents/skills/ui-design
Command: npx skills add https://github.com/remiconnesson/insights-garden --skill ui-design-remiconnesson

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps teams design, review, and refine frontend interfaces that are accessible, responsive, visually coherent, and performant. It reduces guesswork when making HTML, CSS, layout, form, typography, color, and motion decisions for web products.

Core Features & Use Cases

  • Accessibility guidance: Improves keyboard navigation, semantic structure, focus states, alt text, ARIA labeling, and touch target sizing.
  • UI quality checks: Strengthens visual hierarchy, spacing, grid consistency, typography, and color contrast for clearer interfaces.
  • Performance-aware frontend advice: Supports Core Web Vitals improvements such as responsive images, lazy loading, CLS control, and font loading strategy.
  • Use case: A designer or developer can use this Skill to review a landing page, fix mobile usability issues, and align components with accessible frontend best practices.

Quick Start

Ask the skill to review your frontend component or page and suggest specific accessibility, responsive layout, and performance improvements.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I check my frontend code for accessibility and responsive layout issues?▼

To check frontend code for accessibility and responsive layout issues, review HTML and CSS for semantic markup, keyboard navigation support, focus states, and touch target sizing. This skill evaluates ARIA labeling, visual hierarchy, and grid consistency to ensure interfaces are accessible and polished.

What is the best way to improve Core Web Vitals when refactoring UI components?▼

The best way to improve Core Web Vitals during UI component refactors is to analyze responsive images, lazy loading, cumulative layout shift (CLS) control, and font loading strategies. This skill identifies frontend performance issues and suggests specific optimizations for web applications.

Does this UI design review work with existing HTML and CSS design systems?▼

Yes, UI design review works with existing HTML and CSS design systems by evaluating typography, color contrast, spacing, and visual hierarchy. It supports design-system maintenance by enforcing accessible interaction patterns and consistent frontend interface quality across components.

How do I fix mobile usability problems on a landing page?▼

To fix mobile usability problems on a landing page, review responsive layout structures, touch target sizing, and visual hierarchy. This skill identifies mobile interface issues and applies accessible frontend best practices to refine component behavior and layout for smaller screens.

Why does my web form fail keyboard navigation and accessibility standards?▼

Web forms fail keyboard navigation and accessibility standards due to missing semantic markup, inadequate ARIA labeling, and poor focus states. This skill identifies form accessibility issues and recommends accessible interaction patterns to ensure keyboard support and compliance.

Related Skills

Explore More Design & Creative Skills→
rakibulismrakibulism
2

design-to-code

Translate Figma mockups, screenshots, and layout descriptions into React, Vue, or HTML/CSS component code.

Community
Advanced
JochenYangJochenYang
21

performance-optimizer

Identify performance bottlenecks and optimize application speed across backend, database, and frontend workflows.

Community
Intermediate
coastdigitalgroupcoastdigitalgroup
2

site-navigation-system

Design accessible website navigation systems with ARIA and keyboard support.

Official
Advanced
shynlee04shynlee04

web-design-guidelines

Review UI code against web interface guidelines and report violations in file:line format.

Community
Intermediate