Skip to main content
ui-styling Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
Aller à l'installation Skills Marketplace Découvrez et explorez les compétences IA créées par la communauté.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Afficher les détails du prompt Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
npx skills add https://github.com/mrgoonie/claudekit-skills --skill ui-stylingLa commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.
Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.
Télécharger Zip Téléchargement... Plus depuis ce dépôt Integrate Bunny.net services (CDN, Storage, Stream, DNS, Edge Scripting, Shield, Magic Containers, Optimizer, Database). Use when building with Bunny.net APIs, deploying to Bunny CDN, uploading files to Edge Storage, managing video streaming, configuring DNS zones, writing edge scripts, setting up WAF/DDoS protection, deploying containers, or optimizing images. Triggers on "bunny", "bunnycdn", "b-cdn", "pull zone", "edge storage", "bunny stream".
Master context engineering for AI agent systems. Use when designing agent architectures, debugging context failures, optimizing token usage, implementing memory systems, building multi-agent coordination, evaluating agent performance, or developing LLM-powered pipelines. Covers context fundamentals, degradation patterns, optimization techniques (compaction, masking, caching), compression strategies, memory architectures, multi-agent patterns, LLM-as-Judge evaluation, tool design, and project development.
Create or update Claude skills. Use for new skills, skill references, skill scripts, optimizing existing skills, extending Claude's capabilities.
Explorateur de fichiers
98 fichiers Métiers associés SOC
Basé sur la classification professionnelle SOC
name ui-styling description Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications. license MIT version 1.0.0
UI Styling Skill
Comprehensive skill for creating beautiful, accessible user interfaces combining shadcn/ui components, Tailwind CSS utility styling, and canvas-based visual design systems.
Reference
When to Use This Skill
Use when:
Building UI with React-based frameworks (Next.js, Vite, Remix, Astro)
Implementing accessible components (dialogs, forms, tables, navigation)
Styling with utility-first CSS approach
Creating responsive, mobile-first layouts
Implementing dark mode and theme customization
Building design systems with consistent tokens
Generating visual designs, posters, or brand materials
Rapid prototyping with immediate visual feedback
Adding complex UI patterns (data tables, charts, command palettes)
Core Stack
Component Layer: shadcn/ui
Pre-built accessible components via Radix UI primitives
Copy-paste distribution model (components live in your codebase)
TypeScript-first with full type safety
Composable primitives for complex UIs
CLI-based installation and management
Styling Layer: Tailwind CSS
Utility-first CSS framework
Build-time processing with zero runtime overhead
Mobile-first responsive design
Consistent design tokens (colors, spacing, typography)
Automatic dead code elimination
Visual Design Layer: Canvas
Museum-quality visual compositions
Philosophy-driven design approach
Sophisticated visual communication
Minimal text, maximum visual impact
Systematic patterns and refined aesthetics
Quick Start
Component + Styling Setup Install shadcn/ui with Tailwind:
CLI prompts for framework, TypeScript, paths, and theme preferences. This configures both shadcn/ui and Tailwind CSS.
npx shadcn@latest add button card dialog form
Use components with utility styling:
import { Button } from "@/components/ui/button"
import { Card , CardHeader , CardTitle , CardContent } from "@/components/ui/card"
export function Dashboard (return (
<div className ="container mx-auto p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3" >
<Card className ="hover:shadow-lg transition-shadow" >
<CardHeader >
<CardTitle className ="text-2xl font-bold" > Analytics</CardTitle >
</CardHeader >
<CardContent className ="space-y-4" >
<p className ="text-muted-foreground" > View your metrics</p >
<Button variant ="default" className ="w-full" >
View Details
</Button >
</CardContent >
</Card >
</div >
Alternative: Tailwind-Only Setup npm install -D tailwindcss @tailwindcss/vite
import tailwindcss from '@tailwindcss/vite'
export default { plugins : [tailwindcss ()] }
Component Library Guide Comprehensive component catalog with usage patterns, installation, and composition examples.
See: references/shadcn-components.md
Form & input components (Button, Input, Select, Checkbox, Date Picker, Form validation)
Layout & navigation (Card, Tabs, Accordion, Navigation Menu)
Overlays & dialogs (Dialog, Drawer, Popover, Toast, Command)
Feedback & status (Alert, Progress, Skeleton)
Display components (Table, Data Table, Avatar, Badge)
Theme & Customization Theme configuration, CSS variables, dark mode implementation, and component customization.
See: references/shadcn-theming.md
Dark mode setup with next-themes
CSS variable system
Color customization and palettes
Component variant customization
Theme toggle implementation
Accessibility Patterns ARIA patterns, keyboard navigation, screen reader support, and accessible component usage.
See: references/shadcn-accessibility.md
Radix UI accessibility features
Keyboard navigation patterns
Focus management
Screen reader announcements
Form validation accessibility
Tailwind Utilities Core utility classes for layout, spacing, typography, colors, borders, and shadows.
See: references/tailwind-utilities.md
Layout utilities (Flexbox, Grid, positioning)
Spacing system (padding, margin, gap)
Typography (font sizes, weights, alignment, line height)
Colors and backgrounds
Borders and shadows
Arbitrary values for custom styling
Responsive Design Mobile-first breakpoints, responsive utilities, and adaptive layouts.
See: references/tailwind-responsive.md
Mobile-first approach
Breakpoint system (sm, md, lg, xl, 2xl)
Responsive utility patterns
Container queries
Max-width queries
Custom breakpoints
Tailwind Customization Config file structure, custom utilities, plugins, and theme extensions.
See: references/tailwind-customization.md
@theme directive for custom tokens
Custom colors and fonts
Spacing and breakpoint extensions
Custom utility creation
Custom variants
Layer organization (@layer base, components, utilities)
Apply directive for component extraction
Visual Design System Canvas-based design philosophy, visual communication principles, and sophisticated compositions.
See: references/canvas-design-system.md
Design philosophy approach
Visual communication over text
Systematic patterns and composition
Color, form, and spatial design
Minimal text integration
Museum-quality execution
Multi-page design systems
Utility Scripts Python automation for component installation and configuration generation.
shadcn_add.py Add shadcn/ui components with dependency handling:
python scripts/shadcn_add.py button card dialog
tailwind_config_gen.py Generate tailwind.config.js with custom theme:
python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter
Best Practices
Component Composition : Build complex UIs from simple, composable primitivesUtility-First Styling : Use Tailwind classes directly; extract components only for true repetitionMobile-First Responsive : Start with mobile styles, layer responsive variantsAccessibility-First : Leverage Radix UI primitives, add focus states, use semantic HTMLDesign Tokens : Use consistent spacing scale, color palettes, typography systemDark Mode Consistency : Apply dark variants to all themed elementsPerformance : Leverage automatic CSS purging, avoid dynamic class namesTypeScript : Use full type safety for better DXVisual Hierarchy : Let composition guide attention, use spacing and color intentionallyExpert Craftsmanship : Every detail matters - treat UI as a craft
Reference Navigation
references/shadcn-components.md - Complete component catalogreferences/shadcn-theming.md - Theming and customizationreferences/shadcn-accessibility.md - Accessibility patterns
references/tailwind-utilities.md - Core utility classesreferences/tailwind-responsive.md - Responsive designreferences/tailwind-customization.md - Configuration and extensions
references/canvas-design-system.md - Design philosophy and canvas workflows
scripts/shadcn_add.py - Component installationscripts/tailwind_config_gen.py - Config generation
Common Patterns import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Form , FormField , FormItem , FormLabel , FormControl , FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
const schema = z.object ({
email : z.string ().email (),
password : z.string ().min (8 )
})
export function LoginForm (const form = useForm ({
resolver : zodResolver (schema),
defaultValues : { email : "" , password : "" }
})
return (
<Form {...form }>
<form onSubmit ={form.handleSubmit(console.log)} className ="space-y-6" >
<FormField control ={form.control} name ="email" render ={({ field }) => (
<FormItem >
<FormLabel > Email</FormLabel >
<FormControl >
<Input type ="email" {...field } />
</FormControl >
<FormMessage />
</FormItem >
)} />
<Button type ="submit" className ="w-full" > Sign In</Button >
</form >
</Form > Responsive layout with dark mode:
<div className="min-h-screen bg-white dark:bg-gray-900" >
<div className ="container mx-auto px-4 py-8" >
<div className ="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" >
<Card className ="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700" >
<CardContent className ="p-6" >
<h3 className ="text-xl font-semibold text-gray-900 dark:text-white" >
Content
</h3 >
</CardContent >
</Card >
</div >
</div >
Resources 