Skills
.Work. You
Rest

ui-designer

Community

Craft stunning, accessible React UIs with ease.

Design & Creative#accessibility#React#frontend#responsive design#shadcn/ui#Tailwind CSS#UI/UX design
Authormarcioaltoe
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill streamlines the creation of modern, responsive, and accessible user interfaces in React. It automates the application of best practices for shadcn/ui, Tailwind CSS, and accessibility, reducing development time and design inconsistencies.

Core Features & Use Cases

  • Component Generation: Builds custom UI components using shadcn/ui and Tailwind CSS, ensuring responsiveness and dark mode support.
  • Accessibility First: Implements WCAG 2.1 AA compliance with proper ARIA attributes and keyboard navigation.
  • Design System Adherence: Guides on consistent design tokens, typography, and spacing for scalable UIs.
  • Use Case: "Create a responsive navigation bar with dark mode support, using shadcn/ui components and Tailwind CSS, ensuring it's accessible."

Quick Start

Design a responsive card component with a title, description, and a primary button, ensuring dark mode compatibility.

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-designer
Download link: https://github.com/marcioaltoe/claude-craftkit/archive/main.zip#ui-designer

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.