Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
mrgoonie avatar

Ui Styling

mrgoonie/claudekit-skills

  • 568 installs
  • 2.2k repo stars
  • Updated April 3, 2026
  • mrgoonie/claudekit-skills

This is a copy of ui-styling by nextlevelbuilder - installs and ranking accrue to the original listing.

ui-styling is a Claude Code skill that generates clean, consistent, production-ready Tailwind CSS and component styling instructions so developers avoid hallucinated utility classes and broken design systems.

About

ui-styling is a Claude Code skill from mrgoonie/claudekit-skills that teaches agents how to produce Tailwind CSS and component styling guidance without inventing invalid utility classes or violating an existing design system. With 515 installs on skills.sh, it is used while implementing React, Vue, or HTML interfaces where class naming consistency matters. The skill encodes conventions for spacing, typography, responsive breakpoints, and component variants so generated markup stays production-ready. Developers reach for ui-styling when an AI assistant keeps suggesting nonexistent Tailwind classes, mixes conflicting design tokens, or drifts from a project's established UI patterns during feature work or refactors.

  • Generates scoped Tailwind class lists that match your design system
  • Produces reusable component styling rules Claude can follow across files
  • Enforces visual consistency and prevents class name drift
  • Works with shadcn/ui, custom Tailwind configs, and CSS-in-JS patterns
  • Reduces UI polish time by giving the agent explicit styling directives

Ui Styling by the numbers

  • 568 all-time installs (skills.sh)
  • +7 installs in the week ending Jul 26, 2026 (Skillselion tracking)
  • Data as of Aug 3, 2026 (Skillselion catalog sync)
npx skills add https://github.com/mrgoonie/claudekit-skills --skill ui-styling

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs568
repo stars★ 2.2k
Last updatedApril 3, 2026
Repositorymrgoonie/claudekit-skills ↗

How do you stop AI from hallucinating Tailwind CSS classes?

Generate clean, consistent, production-ready Tailwind and component styling instructions that Claude follows without hallucinating classes or breaking design systems.

Who is it for?

Frontend developers using Tailwind CSS who need AI-generated markup to stay consistent with an existing component library and design tokens.

Skip if: Teams on CSS Modules, styled-components, or non-Tailwind stacks where utility-class conventions do not apply.

When should I use this skill?

An agent is writing or refactoring UI components and keeps producing invalid Tailwind classes or inconsistent spacing, color, or typography tokens.

What you get

Tailwind class lists, component styling specs, and design-system-aligned CSS instructions ready to paste into React or HTML files.

  • Tailwind class specifications
  • Component styling instructions

By the numbers

  • 515 installs on skills.sh
  • Ranked 9344 on skills.sh catalog

Files

SKILL.mdMarkdownGitHub ↗

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-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:

npx shadcn@latest init

CLI prompts for framework, TypeScript, paths, and theme preferences. This configures both shadcn/ui and Tailwind CSS.

Add components:

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

Vite projects:

npm install -D tailwindcss @tailwindcss/vite
// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
export default { plugins: [tailwindcss()] }
/* src/index.css */
@import "tailwindcss";

Component Library Guide

Comprehensive component catalog with usage patterns, installation, and composition examples.

See: references/shadcn-components.md

Covers:

  • 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

Covers:

  • 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

Covers:

  • 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

Covers:

  • 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

Covers:

  • 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

Covers:

  • @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

Covers:

  • 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

1. Component Composition: Build complex UIs from simple, composable primitives 2. Utility-First Styling: Use Tailwind classes directly; extract components only for true repetition 3. Mobile-First Responsive: Start with mobile styles, layer responsive variants 4. Accessibility-First: Leverage Radix UI primitives, add focus states, use semantic HTML 5. Design Tokens: Use consistent spacing scale, color palettes, typography system 6. Dark Mode Consistency: Apply dark variants to all themed elements 7. Performance: Leverage automatic CSS purging, avoid dynamic class names 8. TypeScript: Use full type safety for better DX 9. Visual Hierarchy: Let composition guide attention, use spacing and color intentionally 10. Expert Craftsmanship: Every detail matters - treat UI as a craft

Reference Navigation

Component Library

  • references/shadcn-components.md - Complete component catalog
  • references/shadcn-theming.md - Theming and customization
  • references/shadcn-accessibility.md - Accessibility patterns

Styling System

  • references/tailwind-utilities.md - Core utility classes
  • references/tailwind-responsive.md - Responsive design
  • references/tailwind-customization.md - Configuration and extensions

Visual Design

  • references/canvas-design-system.md - Design philosophy and canvas workflows

Automation

  • scripts/shadcn_add.py - Component installation
  • scripts/tailwind_config_gen.py - Config generation

Common Patterns

Form with validation:

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>
</div>

Resources

  • shadcn/ui Docs: https://ui.shadcn.com
  • Tailwind CSS Docs: https://tailwindcss.com
  • Radix UI: https://radix-ui.com
  • Tailwind UI: https://tailwindui.com
  • Headless UI: https://headlessui.com
  • v0 (AI UI Generator): https://v0.dev

Related skills

anthropicsFrontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165kvercel-labsWeb Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6klarksuiteLark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16ksleekdotdesignSleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476leonxlnxDesign Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4knextlevelbuilderUi Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k

How it compares

Choose ui-styling over generic frontend design skills when the primary problem is Tailwind class accuracy and design-token consistency rather than layout ideation.

FAQ

What does the ui-styling Claude skill do?

ui-styling is a Claude Code skill that outputs clean Tailwind CSS and component styling instructions aligned to your design system. It helps developers avoid hallucinated utility classes and inconsistent tokens when AI writes React or HTML markup.

How many installs does ui-styling have?

ui-styling from mrgoonie/claudekit-skills has 515 installs on skills.sh. Developers add it when AI-assisted UI work keeps producing invalid Tailwind classes or drifting from established component patterns.

When should developers use ui-styling?

Developers should use ui-styling during active frontend implementation when Tailwind class consistency matters. The skill is suited to React or HTML components where spacing, typography, and color tokens must match an existing design system.

Design & UI/UXfrontend
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.