Skills
.Work. You
Rest

ui-design

Community

Craft pixel-perfect UIs with AI.

Design & Creative#accessibility#responsive design#css#frontend development#ui design#component design
AuthorArnavPuri
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill streamlines the creation of user interfaces by providing structured design principles, interactive state management, and responsive design strategies, ensuring polished and accessible digital experiences.

Core Features & Use Cases

  • Component Design: Implements Atomic Design principles for modular UI development.
  • Visual Hierarchy: Guides element ranking using size, weight, color, and spacing.
  • Interactive States: Ensures buttons and elements have defined hover, active, focus, and disabled states.
  • Accessibility: Integrates contrast, focus indicators, and semantic structure for inclusive design.
  • Use Case: Design a responsive navigation bar for a web application, ensuring it looks good and functions correctly on both desktop and mobile devices, with proper interactive states and accessibility considerations.

Quick Start

Generate a responsive navigation bar component using the provided design context or default styles.

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: ui-design
Download link: https://github.com/ArnavPuri/designskills/archive/main.zip#ui-design

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