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 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.
by trungtv
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.
Create professional banners, design systems, and brand-compliant content across multiple platforms. This comprehensive skill suite provides design intelligence for building UI/UX with systematic token architecture, component specifications, visual identity management, and AI-powered creative asset generation. Perfect for designing branded experiences with consistency, speed, and professional quality.
You receive a detailed systematic audit of your IRB protocol against federal regulations, institutional policies, and ethical standards. The skill identifies specific compliance gaps, maps findings to regulatory citations, and generates documented recommendations for remediation. You get a structured compliance assessment that pinpoints risk areas before submission or inspection.
You can rapidly analyze multiple research papers, extract quality metrics using evidence hierarchy frameworks, and generate structured literature syntheses. Claude evaluates study design, sample sizes, bias risk, and statistical significance to produce clinically actionable summaries that support evidence-based decision-making for healthcare providers and researchers.
You'll master the librarian's approach to research by learning how to conduct structured reference interviews that clarify your exact information needs. This skill helps you design comprehensive, multi-database search strategies tailored to your research question, including optimized Boolean search strings, database selection logic, and source evaluation frameworks that ensure you find the most relevant academic sources efficiently.
This skill guides you through a comprehensive peer review process using structured assessment templates, detailed evaluation rubrics, and evidence-based feedback frameworks. You'll generate detailed, constructive reviews that identify both strengths and weaknesses, provide actionable recommendations, and produce consistent evaluations suitable for academic journals, grant agencies, or conference committees.
This skill systematically reviews your research proposal against funder requirements, institutional policies, and compliance checkpoints to identify issues before submission. It validates proposal structure, budget justifications, and timelines while flagging common violations that could trigger desk rejections or revision requests. You'll receive a detailed compliance report with specific issues, severity levels, and actionable remediation steps for each funder type.