Skills
.Work. You
Rest

UI Design Implementation

Community

Build stunning, responsive UIs with Tailwind CSS.

Software Engineering#accessibility#responsive design#design system#shadcn/ui#tailwind css#ui design#front-end development
Authoramo-tech-ai
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides comprehensive guidance for designing and implementing user interfaces that are consistent, responsive, and accessible. It eliminates guesswork and ensures your UI components are production-ready, saving you time on design reviews and rework.

Core Features & Use Cases

  • Design System Guidelines: Provides clear color palettes, typography scales, spacing systems, and border radius conventions.
  • Layout & Component Patterns: Offers templates for container, grid, flex layouts, and common components like cards, forms, and buttons using shadcn/ui.
  • Responsive & Accessible Design: Guides on mobile-first breakpoints, hide/show by breakpoint, ARIA labels, and semantic HTML for inclusive UIs.
  • Use Case: When creating a new dashboard screen, use this skill to quickly implement a responsive grid layout with consistent spacing, accessible form fields, and branded buttons, ensuring a polished user experience.

Quick Start

Example: Basic Card Component

<Card> <CardHeader> <CardTitle>Card Title</CardTitle> </CardHeader> <CardContent> <p>Card content here</p> </CardContent> </Card>

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 Implementation
Download link: https://github.com/amo-tech-ai/medellin-spark/archive/main.zip#ui-design-implementation

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