skills.rest
DishaAnand
DishaAnandCOMMUNITY
Explore all skills by this author →
GitHub

ui-design

Generate accessibility-focused component checklists for React UI projects.

Updated Aug 5, 2025
Search Tags:#typography#a11y#frontend#responsive#ui-design#ux
One-click install
npx skills add https://github.com/DishaAnand/FocusNest --skill ui-design-dishaanand
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/DishaAnand/FocusNest/tree/main/.agents/skills/ui-design
Command: npx skills add https://github.com/DishaAnand/FocusNest --skill ui-design-dishaanand

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill consolidates UI/UX best practices for frontend teams to ensure accessible, performant, and usable interfaces, reducing design debt and implementation errors.

Core Features & Use Cases

  • Accessibility-first markup and semantic HTML guidance aligned with WCAG
  • Core Web Vitals optimization guidance for fonts, images, and layout
  • Responsive, mobile-friendly design patterns and typography rules
  • Design token guidance for color, typography, and components to improve consistency
  • Use Case: when creating a new reusable component, generate a checklist covering structure, styling, and accessibility

Quick Start

Use the ui-design skill to generate a starter accessibility-focused component checklist for a new React UI card, including markup, styling, and responsive tokens.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I ensure my React components meet WCAG accessibility standards?▼

To ensure React components meet WCAG accessibility standards, apply semantic HTML structure and accessibility-first markup guidelines. This skill provides a structured framework reinforcing a11y compliance and usable interfaces for web projects.

What are the best practices for responsive typography and color design tokens?▼

Best practices for responsive typography and color design tokens involve consistent scaling and contrast rules. This skill provides frontend UI guidelines covering mobile-friendly design patterns, typography, and design token implementation to improve interface consistency.

How do I optimize Core Web Vitals when building frontend UI layouts?▼

Optimizing Core Web Vitals for frontend UI layouts involves refining font loading, image sizing, and CSS structure. This skill provides performance optimization guidance to ensure fast, accessible, and high-quality web interfaces.

Can I generate an accessibility checklist for a new UI card component?▼

Yes, you can generate an accessibility-focused component checklist for a new UI card. This skill outputs structured guidance covering semantic markup, styling, responsive design tokens, and a11y best practices for web and React projects.

Does this UI/UX framework work for plain HTML and CSS projects?▼

Yes, this UI/UX framework works for plain HTML and CSS projects. It consolidates frontend best practices covering HTML structure, CSS styling, forms, and animation to ensure accessible and performant interfaces across web and React implementations.

Related Skills

Explore More Design & Creative Skills→
windyskywindysky

moai-domain-uiux

Establish domain UI/UX foundations with design tokens and theming for React and Vue.

Community
Basic
oghieoghie
8

uiux-frontend-engineering

Design and validate frontend UI/UX with token-driven design systems.

Community
Advanced
thec3ukthec3uk

Frontend Responsive

Enforce responsive design standards across React, Vue, Angular, and HTML/CSS projects.

Official
Basic
89jobrien89jobrien
4

web-accessibility

Audit web content for WCAG 2.1/2.2 conformance and accessibility issues.

Community
Advanced