agentsclimarketplace

Ui styling

Skill wachawo/claude-skills/skills/ui-styling

Claude Skills for software engineers and developers

Install
npx -y skills add wachawo/claude-skills --skill ui-styling

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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.

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

9.8 KB, as published. Nobody here has run it

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:

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

Gives 0 of the 12 instructions most css styling skills give

Counted across 586 of the 596 authors here whose files we hold, read 2026-08-06

  • avoid excessive centered layoutsin 55 of 586, across 12 files
  • bundle code into single HTML filein 54 of 586, across 14 files
  • Respect prefers-reduced-motion user settingsin 52 of 586, across 35 files
  • avoid purple gradientsin 51 of 586, across 11 files
  • avoid uniform rounded cornersin 51 of 586, across 11 files
  • avoid Inter fontin 51 of 586, across 11 files
  • edit generated files to develop artifactin 50 of 586, across 10 files
  • animate only transform and opacity propertiesin 43 of 586
  • Make touch targets at least 44x44 pixelsin 41 of 586, across 15 files
  • Ensure minimum color contrast of 4.5:1in 39 of 586, across 10 files
  • use tailwind cssin 39 of 586, across 24 files
  • Use SVG icons instead of emojisin 38 of 586, across 11 files

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.