Skills
.Work. You
Rest

design-ui-patterns

Official

Design reusable, accessible UI components fast

Design & Creative#accessibility#components#interaction#responsive#ui-design#ux#design-patterns
Authorfroide-kk
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: design-ui-patterns
Download link: https://github.com/froide-kk/michinushi/archive/main.zip#design-ui-patterns

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.