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
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
You can build visually stunning interfaces by systematically applying visual hierarchy, color theory, and typography principles. Analyze inspiration from design platforms, generate and iterate on design images until they meet aesthetic standards, and create comprehensive design systems that ensure your interfaces are not only beautiful but also accessible and functionally sound.
by trungtv
You can write clean, maintainable Tailwind CSS directly in React JSX using utility-first principles. This skill helps you compose responsive layouts, implement dark mode themes, extract reusable component patterns, convert existing CSS to Tailwind, and troubleshoot Tailwind configuration issues. It's optimized for dashboards, forms, cards, modals, and other typical application interfaces.
by calesthio
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.
You can rapidly build user interfaces by leveraging pre-built, fully accessible React components that you own and control. Claude helps you select the right shadcn/ui components for your needs, customize them with Tailwind CSS, implement complex patterns like forms with validation, data tables, and charts, and integrate them seamlessly into Next.js, Vite, Remix, or Astro projects.
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 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
You can plan, build, and optimize complete UI/UX solutions for websites, dashboards, e-commerce platforms, and mobile apps. The skill provides curated design patterns (glassmorphism, minimalism, neumorphism, bento grids), 21 color palettes, 50 font pairings, 20+ chart types, and implementation guidance for 8 development stacks. Whether you're reviewing existing code, improving accessibility, or creating animations, you get framework-specific recommendations and responsive design strategies.
by trungtv