Ui Styling
Build accessible UIs with shadcn/ui, Tailwind CSS, and canvas design
What You Can Do
You can rapidly prototype and build accessible user interfaces by combining shadcn/ui's pre-built Radix UI components with Tailwind CSS utility-first styling. This skill enables you to implement complex UI patterns, responsive layouts, dark mode themes, and design systems while maintaining full type safety and accessibility standards. Generate visual designs, posters, and branded materials alongside functional interface components.
Features
Copy-paste accessible components (dialogs, forms, tables, dropdowns, navigation) built on Radix UI primitives
Utility-first CSS framework with mobile-first responsive design and zero runtime overhead
Create consistent design tokens, color themes, typography scales, and spacing systems across applications
Build multi-theme support with automatic color token switching and persistent user preferences
Generate visual mockups, posters, brand materials, and design previews alongside interactive components
Mobile-first breakpoint system with flexible grid and flexbox layouts
WCAG-compliant components with built-in ARIA labels, keyboard navigation, and screen reader support
Full type safety for props, slots, and component composition patterns
Example Output
Example 1: Form Component with Validation
<form class="space-y-6 w-full max-w-md">
<div class="space-y-2">
<label class="text-sm font-medium text-gray-900 dark:text-white">Email</label>
<input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500" />
</div>
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 rounded-md transition">Submit</button>
</form>
Example 2: Data Table with Sorting
- Table headers with hover states and sort indicators
- Zebra striped rows with accessibility markup
- Dark mode support with gray-900/gray-50 tokens
- Responsive overflow handling on mobile
Example 3: Dark Mode Theme Toggle
- System preference detection with
prefers-color-scheme - Persistent user selection in localStorage
- Seamless color transition with CSS variables
- Complete component palette redefined per theme
What's Included
- SKILL.md instruction file: Complete reference for shadcn/ui and Tailwind CSS APIs
- Component templates: Pre-configured React component scaffolds (forms, modals, tables, navigation bars)
- Tailwind configuration: Theme tokens, color palettes, custom utilities, and dark mode setup
- Responsive breakpoint guide: Mobile-first layout patterns and breakpoint reference
- Accessibility checklist: WCAG compliance patterns and common a11y pitfalls to avoid
Who It's For
- Frontend developers building React/Next.js applications with modern component libraries
- UI/UX designers implementing design systems and establishing component specifications
- Product teams rapidly prototyping interfaces and user experiences
- Full-stack developers creating accessible, responsive web applications
- Design system maintainers standardizing component behavior and styling patterns
Best For
- Building accessible component libraries and design systems
- Creating responsive layouts that work across all device sizes
- Implementing dark mode and multi-theme support
- Rapid UI prototyping and iterating on component designs
- Generating visual mockups, posters, and branded marketing materials
- Building complex UI patterns like data tables, command palettes, and form systems
You might also like
Diagnose and fix performance bottlenecks across your entire stack. Measure Core Web Vitals against 2026 standards, analyze bundle size bloat, identify unused dependencies, and optimize rendering strategies and caching. You'll receive specific code changes, configuration tweaks, and architecture recommendations tailored to your framework.
You can create professional presentations in multiple modes—from quick lightweight prototypes to fully referenced decks with visualization planning. The skill guides you through a serial pipeline that normalizes source material, detects your input mode (quick, basic, or advanced), compiles your deck structure, and produces either self-contained HTML or exportable PPTX formats. You maintain control at each gate with clear confirmation points before advancing to the next phase.
by russell-cell
You can create self-contained HTML presentations with distinctive design aesthetics, smooth animations, and custom typography that feel intentional rather than generic. Convert PowerPoint files directly into interactive web slides, or build custom decks from scratch with precise control over layout, color schemes, and motion. Every slide fits perfectly in the viewport—no scrolling, no dependencies, no setup required.
Analyze your entire codebase to identify hardcoded design values (colors, typography, spacing) that violate design system compliance. Claude generates targeted refactoring suggestions and automated replacements that map hardcoded values to your design token system. You maintain a single source of truth for your UI, making brand updates and scaling design changes seamless across all components.
You can process multimedia content across multiple formats: transcribe audio files up to 9.5 hours with timestamps and speaker identification, analyze images for objects, text, and visual relationships, extract structured data from PDF documents including tables and charts, and generate images from text prompts with refinement capabilities. This skill unifies fragmented multimodal workflows into one coherent Claude-powered interface, eliminating context-switching between different tools.
by trungtv
This skill analyzes your React component codebase to identify structural issues, redundancy, and performance bottlenecks. Claude evaluates your components against React best practices, generates a prioritized refactoring roadmap, and provides actionable code improvements for extracting reusable patterns, optimizing props drilling, fixing memory leaks, and improving type safety. You'll receive detailed refactoring recommendations with before/after code examples and implementation guidance.
You can rapidly build responsive, production-ready UI designs using Tailwind's utility-first approach. Apply low-level utility classes directly to HTML elements to create custom designs without writing CSS, implement mobile-first responsive layouts, add dark mode and theme customization, and generate optimized CSS bundles through build-time processing that includes only the classes you actually use.
by calesthio
You can diagnose why layouts break at specific breakpoints and receive precise CSS fixes to resolve them. The skill identifies root causes of overflow problems, flex/grid misalignment, and mobile usability failures, then provides responsive design patterns to prevent similar issues from recurring across your entire project.
by calesthio