Ckm:Ui Styling
Build accessible React UIs with shadcn/ui components and Tailwind CSS styling
What You Can Do
You can rapidly build beautiful, fully accessible React interfaces using shadcn/ui's component library paired with Tailwind CSS's utility-first styling system. This skill handles everything from responsive layouts and complex component patterns (data tables, modals, forms, dropdowns) to dark mode implementation and design system customization, all with WCAG-compliant accessibility baked in.
Features
Pre-built accessible React components based on Radix UI primitives with TypeScript support
Mobile-first responsive design using utility classes with zero runtime overhead
Automatic theme switching with proper color token management across your UI
WCAG-compliant components including proper ARIA attributes, keyboard navigation, and focus management
Mobile-first design patterns that adapt seamlessly across all screen sizes
Consistent color palettes, typography scales, and spacing systems for brand coherence
Data tables, command palettes, multi-step forms, and advanced component compositions
Generate visual designs, posters, and brand materials alongside component code
Example Output
Example 1: Accessible Form Component
<form className="space-y-6">
<div className="space-y-2">
<label htmlFor="email" className="text-sm font-medium">Email</label>
<input id="email" type="email" className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500" />
</div>
<button className="w-full bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
Submit
</button>
</form>
Example 2: Dark Mode Responsive Card
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 max-w-md mx-auto">
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-3">Feature Title</h2>
<p className="text-gray-600 dark:text-gray-400 mb-4">Description with automatic dark mode contrast.</p>
<button className="w-full bg-blue-600 dark:bg-blue-500 text-white py-2 rounded hover:bg-blue-700 dark:hover:bg-blue-600">
Action
</button>
</div>
Example 3: Accessible Data Table Fully accessible table with proper header semantics, row selection, sorting, and keyboard navigation patterns.
What's Included
- SKILL.md: Complete instruction file with reference links to shadcn/ui and Tailwind CSS documentation
- Component templates: Copy-paste ready patterns for forms, tables, dialogs, navigation, and complex layouts
- Tailwind CSS utility class library: Comprehensive styling reference for responsive design, dark mode, and accessibility
- Dark mode configuration framework: Theme switching patterns and color token system setup
- Accessibility checklist: WCAG compliance guidelines for focus management, ARIA attributes, and keyboard navigation
- Design system starter kit: Color palettes, typography scales, spacing tokens, and consistent styling patterns
Who It's For
- React/Next.js developers — Building modern web applications with component-based architecture
- Full-stack engineers — Creating UI layers for applications requiring both frontend and backend integration
- Design systems engineers — Establishing consistent, accessible design tokens and component libraries
- Product designers implementing code — Transitioning from design tools to production-ready UI implementation
- Rapid prototypers — Creating quick, polished mockups and MVPs with professional styling and accessibility
Best For
- Building responsive web interfaces — Mobile-first layouts that work across all device sizes
- Implementing accessible components — Dialogs, forms, dropdowns, tables, and navigation with WCAG compliance
- Dark mode implementation — Theme switching with proper color contrast and token management
- Design system creation — Establishing consistent styling patterns, tokens, and reusable components
- Complex UI patterns — Data-heavy interfaces, command palettes, multi-step workflows, and advanced interactions
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
Design comprehensive brand identity systems from scratch, including logos in 55+ styles, corporate identity programs with 50+ deliverables, design tokens and UI styling frameworks, professional banners in 22+ styles, custom SVG icons, and optimized social media assets across 8+ platforms. Claude generates production-ready files with mockups, specifications, and platform-specific formatting for immediate use.
Provide comprehensive research guidance to library patrons by creating customized search strategies, evaluating information sources, and developing literacy materials. You can conduct consultations, design reference guides, and help patrons navigate complex research questions across any subject area.
Streamline your editorial workflow by automatically synthesizing peer review feedback into actionable quality assessments. This skill transforms multiple reviewer comments into structured evaluation reports with recommendations for accept, revise, or reject decisions. You'll save hours consolidating reviews and make more consistent, defensible editorial choices backed by consistent quality criteria.
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 conduct comprehensive, systematic compliance audits for grants and contracts by analyzing documents against regulatory requirements, categorizing risks by severity, and documenting findings with supporting evidence. The skill generates detailed audit reports, regulatory gap analyses, and remediation roadmaps tailored to your specific compliance framework (FAR, OMB circulars, funder requirements, etc.). It accelerates audit cycles by automating finding documentation, comparative compliance mapping, and risk prioritization.
Streamline your systematic reviews by using Claude to screen abstracts against inclusion criteria, extract structured data from full texts, and synthesize findings across studies. Reduce manual screening time by 60-80% while maintaining rigorous documentation of your review methodology. Claude becomes your collaborative partner throughout the entire evidence synthesis workflow, from protocol planning to final data synthesis.
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