ckm:ui-styling

Files (98)

• LICENSE.txt
• SKILL.md
• ArsenalSC-OFL.txt · canvas-fonts/
• ArsenalSC-Regular.ttf · canvas-fonts/
• BigShoulders-Bold.ttf · canvas-fonts/
• BigShoulders-OFL.txt · canvas-fonts/
• BigShoulders-Regular.ttf · canvas-fonts/
• Boldonse-OFL.txt · canvas-fonts/
• Boldonse-Regular.ttf · canvas-fonts/
• BricolageGrotesque-Bold.ttf · canvas-fonts/
• BricolageGrotesque-OFL.txt · canvas-fonts/
• BricolageGrotesque-Regular.ttf · canvas-fonts/
• CrimsonPro-Bold.ttf · canvas-fonts/
• CrimsonPro-Italic.ttf · canvas-fonts/
• CrimsonPro-OFL.txt · canvas-fonts/
• CrimsonPro-Regular.ttf · canvas-fonts/
• DMMono-OFL.txt · canvas-fonts/
• DMMono-Regular.ttf · canvas-fonts/
• EricaOne-OFL.txt · canvas-fonts/
• EricaOne-Regular.ttf · canvas-fonts/
• GeistMono-Bold.ttf · canvas-fonts/
• GeistMono-OFL.txt · canvas-fonts/
• GeistMono-Regular.ttf · canvas-fonts/
• Gloock-OFL.txt · canvas-fonts/
• Gloock-Regular.ttf · canvas-fonts/
• IBMPlexMono-Bold.ttf · canvas-fonts/
• IBMPlexMono-OFL.txt · canvas-fonts/
• IBMPlexMono-Regular.ttf · canvas-fonts/
• IBMPlexSerif-Bold.ttf · canvas-fonts/
• IBMPlexSerif-BoldItalic.ttf · canvas-fonts/
• IBMPlexSerif-Italic.ttf · canvas-fonts/
• IBMPlexSerif-Regular.ttf · canvas-fonts/
• InstrumentSans-Bold.ttf · canvas-fonts/
• InstrumentSans-BoldItalic.ttf · canvas-fonts/
• InstrumentSans-Italic.ttf · canvas-fonts/
• InstrumentSans-OFL.txt · canvas-fonts/
• InstrumentSans-Regular.ttf · canvas-fonts/
• InstrumentSerif-Italic.ttf · canvas-fonts/
• InstrumentSerif-Regular.ttf · canvas-fonts/
• Italiana-OFL.txt · canvas-fonts/
• Italiana-Regular.ttf · canvas-fonts/
• JetBrainsMono-Bold.ttf · canvas-fonts/
• JetBrainsMono-OFL.txt · canvas-fonts/
• JetBrainsMono-Regular.ttf · canvas-fonts/
• Jura-Light.ttf · canvas-fonts/
• Jura-Medium.ttf · canvas-fonts/
• Jura-OFL.txt · canvas-fonts/
• LibreBaskerville-OFL.txt · canvas-fonts/
• LibreBaskerville-Regular.ttf · canvas-fonts/
• Lora-Bold.ttf · canvas-fonts/
• Lora-BoldItalic.ttf · canvas-fonts/
• Lora-Italic.ttf · canvas-fonts/
• Lora-OFL.txt · canvas-fonts/
• Lora-Regular.ttf · canvas-fonts/
• NationalPark-Bold.ttf · canvas-fonts/
• NationalPark-OFL.txt · canvas-fonts/
• NationalPark-Regular.ttf · canvas-fonts/
• NothingYouCouldDo-OFL.txt · canvas-fonts/
• NothingYouCouldDo-Regular.ttf · canvas-fonts/
• Outfit-Bold.ttf · canvas-fonts/
• …and 38 more

SKILL.md (first lines)

---
name: ckm: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
  version: "1.0.0"
trigger: 需要创建美观的用户界面
input: 设计需求
output: UI 组件和样式
next: 无
dependencies: 无
---

# 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:**
```bash
npx shadcn@latest init
```

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

**Add components:**
```bash
npx shadcn@latest add button card dialog form
```

**Use components with utility styling:**
```tsx
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:**
```bash
npm install -D tailwindcss @tailwindcss/vite
```

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

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

## Component Library Guide

From lennney/gate-all-skills, MIT.

More from lennney/gate-all-skills