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
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 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 can streamline the entire editorial process by automating peer review coordination, synthesizing reviewer feedback into coherent editorial decisions, and generating professional correspondence at scale. The skill helps you manage manuscript timelines, track reviewer assignments, and produce consistent decision documents that maintain your journal's professional standards while saving hours of editorial work.
You systematically verify OSINT source credibility by identifying when secondary sources echo unverified claims, detecting coordinated information laundering across multiple outlets, and establishing audit trails for source evaluation decisions. The framework enables you to generate confidence levels defensible in intelligence briefings, recognize attribution spoofing, and distinguish genuine primary sources from recycled or manipulated information—critical for assessments that inform operational decisions.
This skill provides a comprehensive framework for conducting structured peer reviews that balance technical rigor with constructive feedback. It systematically evaluates code quality, architecture decisions, testing, security, and documentation while delivering specific, prioritized recommendations. You'll ensure consistent, professional review standards across your team and help developers grow through clear, actionable guidance.
This skill analyzes grant requirements, interprets funder regulations, and coordinates compliance workflows for research institutions. You'll receive structured compliance guidance, multi-funder requirement synthesis, deadline tracking, and risk assessments that help you navigate complex sponsored research administration with confidence.
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.