ui-styling

Files (96)

• 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/
• Outfit-OFL.txt · canvas-fonts/
• …and 36 more

SKILL.md (first lines)

# 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

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

From Infrasity-Labs/dev-gtm-claude-skills, MIT.

More from Infrasity-Labs/dev-gtm-claude-skills