cursor-kit-cli 1.2.0-beta → 1.2.0-beta.2

package/templates/skills/ui-styling/SKILL.mdc

@@ -0,0 +1,321 @@
+---
+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.
+license: MIT
+version: 1.0.0
+---
+
+# 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.**
+
+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:
+```bash
+python scripts/shadcn_add.py button card dialog
+```
+
+### tailwind_config_gen.py
+Generate tailwind.config.js with custom theme:
+```bash
+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:**
+```tsx
+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:**
+```tsx
+<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

package/templates/skills/ui-styling/references/canvas-design-system.md

@@ -0,0 +1,320 @@
+# Canvas Design System
+
+Visual design philosophy, systematic composition, and sophisticated visual communication.
+
+## Design Philosophy Approach
+
+Canvas design operates through two-phase process:
+
+### Phase 1: Design Philosophy Creation
+
+Create visual philosophy - aesthetic movement expressed through form, space, color, composition. Not layouts or templates, but pure visual philosophy.
+
+**What is created:** Design manifesto emphasizing:
+- Visual expression over text
+- Spatial communication
+- Artistic interpretation
+- Minimal words as visual accent
+
+**Philosophy structure (4-6 paragraphs):**
+- Space and form principles
+- Color and material approach
+- Scale and rhythm guidance
+- Composition and balance rules
+- Visual hierarchy system
+
+### Phase 2: Visual Expression
+
+Express philosophy through canvas artifacts:
+- 90% visual design
+- 10% essential text
+- Museum-quality execution
+- Systematic patterns
+- Sophisticated composition
+
+## Core Principles
+
+### 1. Visual Communication First
+
+Information lives in design, not paragraphs. Express ideas through:
+- Color zones and fields
+- Geometric precision
+- Spatial relationships
+- Visual weight and tension
+- Form and structure
+
+### 2. Minimal Text Integration
+
+Text as rare, powerful gesture:
+- Never paragraphs
+- Only essential words
+- Integrated into visual architecture
+- Small labels, huge impact
+- Typography as visual element
+
+### 3. Expert Craftsmanship
+
+Work must appear:
+- Meticulously crafted
+- Labored over with care
+- Product of countless hours
+- From absolute top of field
+- Master-level execution
+
+### 4. Systematic Patterns
+
+Use scientific visual language:
+- Repeating patterns
+- Perfect shapes
+- Dense accumulation of marks
+- Layered elements
+- Patient repetition rewards sustained viewing
+
+## Design Movement Examples
+
+### Concrete Poetry
+**Philosophy:** Communication through monumental form and bold geometry.
+
+**Expression:**
+- Massive color blocks
+- Sculptural typography (huge words, tiny labels)
+- Brutalist spatial divisions
+- Polish poster energy meets Le Corbusier
+- Ideas through visual weight and spatial tension
+- Text as rare, powerful gesture
+
+### Chromatic Language
+**Philosophy:** Color as primary information system.
+
+**Expression:**
+- Geometric precision
+- Color zones create meaning
+- Typography minimal - small sans-serif labels
+- Josef Albers' interaction meets data visualization
+- Information encoded spatially and chromatically
+- Words only anchor what color shows
+
+### Analog Meditation
+**Philosophy:** Quiet visual contemplation through texture and breathing room.
+
+**Expression:**
+- Paper grain, ink bleeds
+- Vast negative space
+- Photography and illustration dominate
+- Typography whispered (small, restrained)
+- Japanese photobook aesthetic
+- Images breathe across pages
+- Text appears sparingly - short phrases only
+
+### Organic Systems
+**Philosophy:** Natural clustering and modular growth patterns.
+
+**Expression:**
+- Rounded forms
+- Organic arrangements
+- Color from nature through architecture
+- Information through visual diagrams
+- Spatial relationships and iconography
+- Text only for key labels floating in space
+- Composition tells story through spatial orchestration
+
+### Geometric Silence
+**Philosophy:** Pure order and restraint.
+
+**Expression:**
+- Grid-based precision
+- Bold photography or stark graphics
+- Dramatic negative space
+- Typography precise but minimal
+- Small essential text, large quiet zones
+- Swiss formalism meets Brutalist material honesty
+- Structure communicates, not words
+- Every alignment from countless refinements
+
+## Implementation Guidelines
+
+### Subtle Reference Integration
+
+Embed conceptual DNA without announcing:
+- Niche reference woven invisibly
+- Those who know feel it intuitively
+- Others experience masterful abstract composition
+- Like jazz musician quoting another song
+- Sophisticated, never literal
+- Reference enhances depth quietly
+
+### Color Approach
+
+**Intentional palette:**
+- Limited colors (2-5)
+- Cohesive system
+- Purposeful relationships
+- oklch color space for precision
+- Each shade carries meaning
+
+**Example palette:**
+```
+--color-primary: oklch(0.55 0.22 264)
+--color-accent: oklch(0.75 0.18 45)
+--color-neutral: oklch(0.90 0.02 264)
+--color-dark: oklch(0.25 0.15 264)
+```
+
+### Typography System
+
+**Thin fonts preferred:**
+- Light weights (200-300)
+- Clean sans-serifs
+- Geometric precision
+- Small sizes for labels
+- Large sizes for impact moments
+
+**Font integration:**
+- Search `./canvas-fonts` directory
+- Download needed fonts
+- Bring typography onto canvas
+- Part of art, not typeset digitally
+
+### Composition Rules
+
+**Systematic approach:**
+- Repeating patterns establish rhythm
+- Perfect geometric shapes
+- Clinical typography
+- Reference markers suggest imaginary discipline
+- Dense accumulation builds meaning
+- Layered patterns reward attention
+
+**Spacing discipline:**
+- Nothing falls off page
+- Nothing overlaps
+- Every element within canvas boundaries
+- Proper margins non-negotiable
+- Breathing room and clear separation
+- Professional execution mandatory
+
+### Canvas Boundaries
+
+**Technical specs:**
+- Single page default (multi-page when requested)
+- PDF or PNG output
+- High resolution
+- Clean margins
+- Contained composition
+- Flawless formatting
+
+## Multi-Page Design Systems
+
+When creating multiple pages:
+
+### Approach
+- Treat first page as single page in coffee table book
+- Create more pages along same philosophy
+- Distinctly different but cohesive
+- Pages tell story tastefully
+- Full creative freedom
+
+### Consistency Elements
+- Shared color palette
+- Consistent typography system
+- Related compositional approach
+- Visual language continuity
+- Philosophical thread throughout
+
+### Variation Strategy
+- Unique twist per page
+- Different focal points
+- Varied spatial arrangements
+- Complementary patterns
+- Progressive visual narrative
+
+## Execution Checklist
+
+Before finalizing:
+
+- [ ] Philosophy guides every decision
+- [ ] 90% visual, 10% text maximum
+- [ ] Text minimal and integrated
+- [ ] Nothing overlaps or falls off page
+- [ ] Margins and spacing pristine
+- [ ] Composition cohesive with art
+- [ ] Appears meticulously crafted
+- [ ] Master-level execution evident
+- [ ] Sophisticated, never amateur
+- [ ] Could be displayed in museum
+- [ ] Proves undeniable expertise
+- [ ] Formatting flawless
+- [ ] Every detail perfect
+
+## Quality Standards
+
+### What to Avoid
+- Cartoony aesthetics
+- Amateur execution
+- Text-heavy composition
+- Random placement
+- Overlapping elements
+- Inconsistent spacing
+- Obvious AI generation
+- Lack of refinement
+
+### What to Achieve
+- Museum quality
+- Magazine worthy
+- Art object status
+- Countless hours appearance
+- Top-of-field craftsmanship
+- Philosophical coherence
+- Visual sophistication
+- Systematic precision
+
+## Refinement Process
+
+### Initial Pass
+Create based on philosophy and principles.
+
+### Second Pass (Critical)
+- Don't add more graphics
+- Refine what exists
+- Make extremely crisp
+- Respect minimalism philosophy
+- Increase cohesion with art
+- Make existing elements more artistic
+- Polish rather than expand
+
+### Final Verification
+User already said: "It isn't perfect enough. Must be pristine, masterpiece of craftsmanship, as if about to be displayed in museum."
+
+Apply this standard before delivery.
+
+## Output Format
+
+**Required files:**
+1. Design philosophy (.md file)
+2. Visual expression (.pdf or .png)
+
+**Philosophy file contains:**
+- Movement name
+- 4-6 paragraph philosophy
+- Visual principles
+- Execution guidance
+
+**Canvas file contains:**
+- Visual interpretation
+- Minimal text
+- Systematic composition
+- Expert-level execution
+
+## Use Cases
+
+Apply canvas design for:
+- Brand identity systems
+- Poster designs
+- Visual manifestos
+- Design system documentation
+- Art pieces and compositions
+- Conceptual visual frameworks
+- Editorial design
+- Exhibition materials
+- Coffee table books
+- Design philosophy demonstrations