UI Styling

What it does

When your agent uses it

• Building user interfaces
• Implementing design systems
• Creating responsive layouts
• Adding accessible components (dialogs

Example prompts

• “/ui-styling”

Requirements

• Python 3
• Node.js

Workflow steps

10 steps, taken from the first numbered list in SKILL.md.

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

What it can do on your machine

Read from SKILL.md and the folder at commit 10ddd27. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Ships 7 files in scripts/ (Python), which the agent can run.

  Shell commands in SKILL.md call:

  • npx
  • python
  • npm

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  Links to these hosts (documentation or services it may open):

  • ui.shadcn.com
  • tailwindcss.com
  • radix-ui.com
  • tailwindui.com
  • headlessui.com
  • v0.dev

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

UI Styling loads about 2.5k tokens when it runs, and up to ~19k if it reads all its reference files. Until then it costs about 125 tokens; SKILL.md has 697 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~125

When it runs · the whole SKILL.md, loaded when a task matches

~2.5k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~19k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from Ohh-889/skyroc at commit 10ddd27, republished under its MIT licence (© Ohh-889). 697 words, ~2,512 tokens.

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.

argument-hint

[component or layout]

license

MIT

metadata.author

claudekit

metadata.version

1.0.0

npx shadcn@latest init

npx shadcn@latest add button card dialog form

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>
  )
}

npm install -D tailwindcss @tailwindcss/vite

// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
export default { plugins: [tailwindcss()] }

/* src/index.css */
@import "tailwindcss";

python scripts/shadcn_add.py button card dialog

python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter

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>
  )
}

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

© Ohh-889, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 15 other files (scripts, references) in .agents/skills/ui-styling of Ohh-889/skyroc.

• SKILL.md
• LICENSE.txt
• references/canvas-design-system.md
• references/shadcn-accessibility.md
• references/shadcn-components.md
• references/shadcn-theming.md
• references/tailwind-customization.md
• references/tailwind-responsive.md
• references/tailwind-utilities.md
• scripts/requirements.txt
• scripts/shadcn_add.py
• scripts/tailwind_config_gen.py
• scripts/tests/coverage-ui.json
• scripts/tests/requirements.txt
• scripts/tests/test_shadcn_add.py
• scripts/tests/test_tailwind_config_gen.py

Open the folder on GitHubat commit 10ddd27

Used in 13 other repositories

We found 22 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 13 other GitHub owners. This page covers the copy in Ohh-889/skyroc, which our catalogue first saw on October 7, 2026.

• nextlevelbuilder/ui-ux-pro-max-skill.claude/skills/ui-stylingcli/assets/skills/ui-styling
• futureboard/futureboard-studio.agents/skills/ui-styling.claude/skills/ui-styling+1 more
• cdavid817/vanehub-ai.claude/skills/ui-styling
• Microck/ordinary-claude-skillsskills_all/ui-stylingskills_categorized/design/ui-styling
• aiskillstore/marketplaceskills/nextlevelbuilder/ui-stylingskills/nextlevelbuilder/ckm-ui-styling
• lingxling/awesome-skills-cnui-ux-pro-max-skill/.claude/skills/ui-stylingui-ux-pro-max-skill/cli/assets/skills/ui-styling
• Infrasity-Labs/dev-gtm-claude-skills.claude/skills/ui-styling
• criptogus/agent-evolve-network.claude/skills/ui-styling
• Sidiora-Labs/centra-llm-agentsprotocol/skills/ui-styling
• diodeme/Gold-Band.agents/skills/ckm-ui-styling.claude/skills/ckm-ui-styling
• owshq-mec/semana-ai-data-engineer.claude/skills/ui-styling
• Jason904/ui-skill-labskills/ui-ux-pro-max-skill/.claude/skills/ui-styling.codex/skills/ui-ux-pro-max-skill/.claude/skills/ui-styling
• henryalouf/ruflow.agents/skills/ui-styling.claude/skills/ui-styling