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.
npx skills add Infrasity-Labs/dev-gtm-claude-skills --skill ui-styling --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 - shadcn/ui: https://ui.shadcn.com/llms.txt - Tailwind CSS: https://tailwindcss.com/docs ## 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-ti
- Reference
- When to Use This Skill
- Core Stack
- Component Layer: shadcn/ui
- Styling Layer: Tailwind CSS
- Visual Design Layer: Canvas
- Quick Start
- Component + Styling Setup
- Alternative: Tailwind-Only Setup
- Component Library Guide
- Theme & Customization
- Accessibility Patterns
- Tailwind Utilities
- Responsive Design
npx shadcn@latest init npx shadcn@latest add button card dialog form npm install -D tailwindcss @tailwindcss/vite python scripts/shadcn_add.py button card dialog python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter
What does the ui-styling skill do?
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.
How do I install it?
Run `npx skills add Infrasity-Labs/dev-gtm-claude-skills --skill ui-styling --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From Infrasity-Labs/dev-gtm-claude-skills, a repository with 97 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.