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
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 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
This skill analyzes Request for Proposal documents to extract all compliance requirements and builds structured matrices showing which requirements your institution meets, which need work, and which require immediate action. It identifies gaps, maps requirements to your existing policies and procedures, and generates gap analysis reports with prioritized remediation plans to guide your compliance efforts before proposal submission.
Systematically categorize protocol deviations, evaluate their regulatory risk using evidence-based matrices, and compile comprehensive audit documentation that satisfies IRB and regulatory inspections. You'll generate detailed deviation logs with severity assessments, corrective action plans, and compliance narratives that demonstrate institutional oversight and quality assurance.
You can manage the complete subcontract lifecycle—from initial negotiation through execution, compliance monitoring, and closure—with built-in risk analysis and automated documentation. The skill verifies compliance requirements, identifies contractual risks, generates required documentation, and tracks key milestones and renewal dates. All workflows are customizable to your organization's procurement policies and risk tolerance.
You submit your research consent form and receive a systematic compliance review against 45 CFR 46 and 21 CFR 56 regulations. The skill identifies specific deficiencies, maps each gap to regulatory requirements, and generates institution-specific remediation guidance with reference language you can use to bring your form into compliance.
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.