skills.rest
froide-kk
froide-kkOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-ui-patterns

Provide UI component design guidelines for accessible, responsive interfaces.

1|Updated Mar 28, 2026
Search Tags:#accessibility#components#interaction#responsive#ui-design#ux#design-patterns
One-click install
npx skills add https://github.com/froide-kk/michinushi --skill design-ui-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-ui-patterns
Source: https://github.com/froide-kk/michinushi/tree/main/design-ui-patterns
Command: npx skills add https://github.com/froide-kk/michinushi --skill design-ui-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provide library-agnostic, prescriptive guidance to eliminate ambiguity in UI component design so teams can deliver consistent, accessible, and responsive interfaces without reinventing interaction patterns.

Core Features & Use Cases

  • Design Principles: Covers consistency, visual feedback, explicit state modelling (Empty / Loading / Loaded / Error / Partial), accessibility requirements, and responsive breakpoints.
  • Typical Patterns: Concrete guidance for forms, lists, confirmation dialogs, and notification strategies that designers and implementers can apply across projects.
  • Implementation Aid: Includes a practical checklist to validate state coverage, feedback, responsiveness, and WCAG contrast conformance; useful for design reviews, component library grooming, and accessibility audits.

Quick Start

Audit the User List component for missing states, accessibility issues, and visual feedback and produce a prioritized implementation checklist.

Frequently Asked Questions about design-ui-patterns

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

FAQPage Schema
How do I design accessible UI components that handle all interaction states?▼

To design accessible UI components, model explicit states including empty, loading, loaded, error, and partial. Apply visual feedback patterns, ensure keyboard accessibility, meet WCAG AA color contrast, and define responsive breakpoint behavior.

What UI design guidelines should I follow for consistent forms and dialogs?▼

For consistent forms and dialogs, follow prescriptive design guidelines covering visual feedback, explicit state modelling, and accessibility requirements. Apply these library-agnostic patterns during feature design, refactors, or accessibility audits to eliminate ambiguity.

How do I audit a UI component for missing states and accessibility issues?▼

Audit a UI component by validating state coverage for empty, loading, error, and partial scenarios. Check visual feedback patterns, keyboard accessibility, WCAG AA color contrast conformance, and responsive breakpoint behavior to produce a prioritized implementation checklist.

Can I use these design patterns with any front-end component library?▼

Yes, these UI component design patterns are library-agnostic and prescriptive. They provide universal guidance for consistent, accessible, and responsive interfaces without reinventing interaction patterns across different projects and front-end frameworks.

What's the best way to ensure responsive breakpoint behavior and WCAG AA contrast in UI design?▼

The best way to ensure responsive breakpoint behavior and WCAG AA contrast is to apply library-agnostic design principles that cover consistency, visual feedback, explicit state modelling, and accessibility requirements during feature design or component library grooming.

Why does my UI component design lack consistency across different projects?▼

Your UI component design lacks consistency without prescriptive guidance for interaction patterns. Apply universal design guidelines covering explicit state modelling, visual feedback, keyboard accessibility, WCAG AA contrast, and responsive breakpoints to deliver uniform interfaces.

Related Skills

Explore More Design & Creative Skills→
matsuni-kkmatsuni-kk

mini-app-design

Generate UI/UX design documents with wireframes, components, colors, and typography for mini-apps.

Community
Intermediate
jordanhubbardjordanhubbard
105

web-designer-engineer

Translate design specifications into accessible, responsive web components.

Community
Advanced
intelligentcode-aiintelligentcode-ai
35

web-designer

Design user interfaces and design systems for web and mobile experiences.

Official
Basic
HouseofmvpsHouseofmvps
115

a11y

Detect and fix deterministic WCAG 2.2 A/AA accessibility violations in HTML files.

Community
Advanced