Skills
.Work. You
Rest

ui-design-brain-pro

Community

Master UI component selection and pattern guidance with industry best practices.

Design & Creative#accessibility#responsive design#ui design#component selection#pattern guidance
Authortruongnat
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill addresses the challenge of selecting the right UI components and applying best practices for layout, interaction, and code structure, helping designers and developers build modern, accessible, and high-quality interfaces.

Core Features & Use Cases

  • Component Selection: Offers guidance on choosing the best UI components for various contexts and use cases.
  • Layout Best Practices: Provides responsive design patterns and grid systems to ensure UIs look great on all devices.
  • Interaction Rules: Defines 5-state interaction models for UI components and accessibility guidelines.
  • Code Structure: Recommends best practices for implementing UI components, including semantic HTML and accessibility considerations.
  • Use Case: When building a dashboard, you can use this Skill to select the appropriate UI components for displaying data, and to apply best practices for responsive design and accessibility.

Quick Start

Use the ui-design-brain-pro skill to suggest a component pattern for a mobile navigation bar.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 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: ui-design-brain-pro
Download link: https://github.com/truongnat/aix/archive/main.zip#ui-design-brain-pro

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 620,000+ vetted skills library on demand.