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

package/templates/skills/ui-styling/references/tailwind-utilities.md

@@ -0,0 +1,455 @@
+# Tailwind CSS Utility Reference
+
+Core utility classes for layout, spacing, typography, colors, borders, and shadows.
+
+## Layout Utilities
+
+### Display
+
+```html
+<div class="block">Block</div>
+<div class="inline-block">Inline Block</div>
+<div class="inline">Inline</div>
+<div class="flex">Flexbox</div>
+<div class="inline-flex">Inline Flex</div>
+<div class="grid">Grid</div>
+<div class="inline-grid">Inline Grid</div>
+<div class="hidden">Hidden</div>
+```
+
+### Flexbox
+
+**Container:**
+```html
+<div class="flex flex-row">Row (default)</div>
+<div class="flex flex-col">Column</div>
+<div class="flex flex-row-reverse">Reverse row</div>
+<div class="flex flex-col-reverse">Reverse column</div>
+```
+
+**Justify (main axis):**
+```html
+<div class="flex justify-start">Start</div>
+<div class="flex justify-center">Center</div>
+<div class="flex justify-end">End</div>
+<div class="flex justify-between">Space between</div>
+<div class="flex justify-around">Space around</div>
+<div class="flex justify-evenly">Space evenly</div>
+```
+
+**Align (cross axis):**
+```html
+<div class="flex items-start">Start</div>
+<div class="flex items-center">Center</div>
+<div class="flex items-end">End</div>
+<div class="flex items-baseline">Baseline</div>
+<div class="flex items-stretch">Stretch</div>
+```
+
+**Gap:**
+```html
+<div class="flex gap-4">All sides</div>
+<div class="flex gap-x-6 gap-y-2">X and Y</div>
+```
+
+**Wrap:**
+```html
+<div class="flex flex-wrap">Wrap</div>
+<div class="flex flex-nowrap">No wrap</div>
+```
+
+### Grid
+
+**Columns:**
+```html
+<div class="grid grid-cols-1">1 column</div>
+<div class="grid grid-cols-2">2 columns</div>
+<div class="grid grid-cols-3">3 columns</div>
+<div class="grid grid-cols-4">4 columns</div>
+<div class="grid grid-cols-12">12 columns</div>
+<div class="grid grid-cols-[1fr_500px_2fr]">Custom</div>
+```
+
+**Rows:**
+```html
+<div class="grid grid-rows-3">3 rows</div>
+<div class="grid grid-rows-[auto_1fr_auto]">Custom</div>
+```
+
+**Span:**
+```html
+<div class="col-span-2">Span 2 columns</div>
+<div class="row-span-3">Span 3 rows</div>
+```
+
+**Gap:**
+```html
+<div class="grid gap-4">All sides</div>
+<div class="grid gap-x-8 gap-y-4">X and Y</div>
+```
+
+### Positioning
+
+```html
+<div class="static">Static (default)</div>
+<div class="relative">Relative</div>
+<div class="absolute">Absolute</div>
+<div class="fixed">Fixed</div>
+<div class="sticky">Sticky</div>
+
+<!-- Position values -->
+<div class="absolute top-0 right-0">Top right</div>
+<div class="absolute inset-0">All sides 0</div>
+<div class="absolute inset-x-4">Left/right 4</div>
+<div class="absolute inset-y-8">Top/bottom 8</div>
+```
+
+### Z-Index
+
+```html
+<div class="z-0">z-index: 0</div>
+<div class="z-10">z-index: 10</div>
+<div class="z-20">z-index: 20</div>
+<div class="z-50">z-index: 50</div>
+```
+
+## Spacing Utilities
+
+### Padding
+
+```html
+<div class="p-4">All sides</div>
+<div class="px-6">Left and right</div>
+<div class="py-3">Top and bottom</div>
+<div class="pt-8">Top</div>
+<div class="pr-4">Right</div>
+<div class="pb-2">Bottom</div>
+<div class="pl-6">Left</div>
+```
+
+### Margin
+
+```html
+<div class="m-4">All sides</div>
+<div class="mx-auto">Center horizontally</div>
+<div class="my-6">Top and bottom</div>
+<div class="mt-8">Top</div>
+<div class="-mt-4">Negative top</div>
+<div class="ml-auto">Push to right</div>
+```
+
+### Space Between
+
+```html
+<div class="space-x-4">Horizontal spacing</div>
+<div class="space-y-6">Vertical spacing</div>
+```
+
+### Spacing Scale
+
+- `0`: 0px
+- `px`: 1px
+- `0.5`: 0.125rem (2px)
+- `1`: 0.25rem (4px)
+- `2`: 0.5rem (8px)
+- `3`: 0.75rem (12px)
+- `4`: 1rem (16px)
+- `6`: 1.5rem (24px)
+- `8`: 2rem (32px)
+- `12`: 3rem (48px)
+- `16`: 4rem (64px)
+- `24`: 6rem (96px)
+
+## Typography
+
+### Font Size
+
+```html
+<p class="text-xs">Extra small (12px)</p>
+<p class="text-sm">Small (14px)</p>
+<p class="text-base">Base (16px)</p>
+<p class="text-lg">Large (18px)</p>
+<p class="text-xl">XL (20px)</p>
+<p class="text-2xl">2XL (24px)</p>
+<p class="text-3xl">3XL (30px)</p>
+<p class="text-4xl">4XL (36px)</p>
+<p class="text-5xl">5XL (48px)</p>
+```
+
+### Font Weight
+
+```html
+<p class="font-thin">Thin (100)</p>
+<p class="font-light">Light (300)</p>
+<p class="font-normal">Normal (400)</p>
+<p class="font-medium">Medium (500)</p>
+<p class="font-semibold">Semibold (600)</p>
+<p class="font-bold">Bold (700)</p>
+<p class="font-black">Black (900)</p>
+```
+
+### Text Alignment
+
+```html
+<p class="text-left">Left</p>
+<p class="text-center">Center</p>
+<p class="text-right">Right</p>
+<p class="text-justify">Justify</p>
+```
+
+### Line Height
+
+```html
+<p class="leading-none">1</p>
+<p class="leading-tight">1.25</p>
+<p class="leading-normal">1.5</p>
+<p class="leading-relaxed">1.75</p>
+<p class="leading-loose">2</p>
+```
+
+### Combined Font Utilities
+
+```html
+<h1 class="text-4xl/tight font-bold">
+  Font size 4xl with tight line height
+</h1>
+```
+
+### Text Transform
+
+```html
+<p class="uppercase">UPPERCASE</p>
+<p class="lowercase">lowercase</p>
+<p class="capitalize">Capitalize</p>
+<p class="normal-case">Normal</p>
+```
+
+### Text Decoration
+
+```html
+<p class="underline">Underline</p>
+<p class="line-through">Line through</p>
+<p class="no-underline">No underline</p>
+```
+
+### Text Overflow
+
+```html
+<p class="truncate">Truncate with ellipsis...</p>
+<p class="line-clamp-3">Clamp to 3 lines...</p>
+<p class="text-ellipsis overflow-hidden">Ellipsis</p>
+```
+
+## Colors
+
+### Text Colors
+
+```html
+<p class="text-black">Black</p>
+<p class="text-white">White</p>
+<p class="text-gray-500">Gray 500</p>
+<p class="text-red-600">Red 600</p>
+<p class="text-blue-500">Blue 500</p>
+<p class="text-green-600">Green 600</p>
+```
+
+### Background Colors
+
+```html
+<div class="bg-white">White</div>
+<div class="bg-gray-100">Gray 100</div>
+<div class="bg-blue-500">Blue 500</div>
+<div class="bg-red-600">Red 600</div>
+```
+
+### Color Scale
+
+Each color has 11 shades (50-950):
+- `50`: Lightest
+- `100-400`: Light variations
+- `500`: Base color
+- `600-800`: Dark variations
+- `950`: Darkest
+
+### Opacity Modifiers
+
+```html
+<div class="bg-black/75">75% opacity</div>
+<div class="text-blue-500/30">30% opacity</div>
+<div class="bg-purple-500/[0.87]">87% opacity</div>
+```
+
+### Gradients
+
+```html
+<div class="bg-gradient-to-r from-blue-500 to-purple-600">
+  Left to right gradient
+</div>
+<div class="bg-gradient-to-br from-pink-500 via-red-500 to-yellow-500">
+  With via color
+</div>
+```
+
+Directions: `to-t | to-tr | to-r | to-br | to-b | to-bl | to-l | to-tl`
+
+## Borders
+
+### Border Width
+
+```html
+<div class="border">1px all sides</div>
+<div class="border-2">2px all sides</div>
+<div class="border-t">Top only</div>
+<div class="border-r-4">Right 4px</div>
+<div class="border-b-2">Bottom 2px</div>
+<div class="border-l">Left only</div>
+<div class="border-0">No border</div>
+```
+
+### Border Color
+
+```html
+<div class="border border-gray-300">Gray</div>
+<div class="border-2 border-blue-500">Blue</div>
+<div class="border border-red-600/50">Red with opacity</div>
+```
+
+### Border Radius
+
+```html
+<div class="rounded">0.25rem</div>
+<div class="rounded-md">0.375rem</div>
+<div class="rounded-lg">0.5rem</div>
+<div class="rounded-xl">0.75rem</div>
+<div class="rounded-2xl">1rem</div>
+<div class="rounded-full">9999px</div>
+
+<!-- Individual corners -->
+<div class="rounded-t-lg">Top corners</div>
+<div class="rounded-br-xl">Bottom right</div>
+```
+
+### Border Style
+
+```html
+<div class="border border-solid">Solid</div>
+<div class="border-2 border-dashed">Dashed</div>
+<div class="border border-dotted">Dotted</div>
+```
+
+## Shadows
+
+```html
+<div class="shadow-sm">Small</div>
+<div class="shadow">Default</div>
+<div class="shadow-md">Medium</div>
+<div class="shadow-lg">Large</div>
+<div class="shadow-xl">Extra large</div>
+<div class="shadow-2xl">2XL</div>
+<div class="shadow-none">No shadow</div>
+```
+
+### Colored Shadows
+
+```html
+<div class="shadow-lg shadow-blue-500/50">Blue shadow</div>
+```
+
+## Width & Height
+
+### Width
+
+```html
+<div class="w-full">100%</div>
+<div class="w-1/2">50%</div>
+<div class="w-1/3">33.333%</div>
+<div class="w-64">16rem</div>
+<div class="w-[500px]">500px</div>
+<div class="w-screen">100vw</div>
+
+<!-- Min/Max width -->
+<div class="min-w-0">min-width: 0</div>
+<div class="max-w-md">max-width: 28rem</div>
+<div class="max-w-screen-xl">max-width: 1280px</div>
+```
+
+### Height
+
+```html
+<div class="h-full">100%</div>
+<div class="h-screen">100vh</div>
+<div class="h-64">16rem</div>
+<div class="h-[500px]">500px</div>
+
+<!-- Min/Max height -->
+<div class="min-h-screen">min-height: 100vh</div>
+<div class="max-h-96">max-height: 24rem</div>
+```
+
+## Arbitrary Values
+
+Use square brackets for custom values:
+
+```html
+<!-- Spacing -->
+<div class="p-[17px]">Custom padding</div>
+<div class="top-[117px]">Custom position</div>
+
+<!-- Colors -->
+<div class="bg-[#bada55]">Hex color</div>
+<div class="text-[rgb(123,45,67)]">RGB</div>
+
+<!-- Sizes -->
+<div class="w-[500px]">Custom width</div>
+<div class="text-[22px]">Custom font size</div>
+
+<!-- CSS variables -->
+<div class="bg-[var(--brand-color)]">CSS var</div>
+
+<!-- Complex values -->
+<div class="grid-cols-[1fr_500px_2fr]">Custom grid</div>
+```
+
+## Aspect Ratio
+
+```html
+<div class="aspect-square">1:1</div>
+<div class="aspect-video">16:9</div>
+<div class="aspect-[4/3]">4:3</div>
+```
+
+## Overflow
+
+```html
+<div class="overflow-auto">Auto scroll</div>
+<div class="overflow-hidden">Hidden</div>
+<div class="overflow-scroll">Always scroll</div>
+<div class="overflow-x-auto">Horizontal scroll</div>
+<div class="overflow-y-hidden">No vertical scroll</div>
+```
+
+## Opacity
+
+```html
+<div class="opacity-0">0%</div>
+<div class="opacity-50">50%</div>
+<div class="opacity-75">75%</div>
+<div class="opacity-100">100%</div>
+```
+
+## Cursor
+
+```html
+<div class="cursor-pointer">Pointer</div>
+<div class="cursor-wait">Wait</div>
+<div class="cursor-not-allowed">Not allowed</div>
+<div class="cursor-default">Default</div>
+```
+
+## User Select
+
+```html
+<div class="select-none">No select</div>
+<div class="select-text">Text selectable</div>
+<div class="select-all">Select all</div>
+```

package/templates/rules/frontend-design.mdc

@@ -1,48 +0,0 @@
----
-globs: *.tsx,*.jsx,*.ts,*.js,*.svelte,*.vue,*.mdx
-alwaysApply: false
----
-
-## Purpose
-Acting as a senior frontend engineer, design the frontend of a web application with production-ready UI/UX, animations, and impressive visual impact. The user interface should be clean, modern, and minimalistic and consistent across the application.
-
-<use_interesting_fonts>
-Typography instantly signals quality. Avoid using boring, generic fonts.
-
-Never use: Inter, Roboto, Open Sans, Lato, default system fonts (unless the codebase is user-configurable)
-
-Here are some examples of good, impactful choices:
-
-- Code aesthetic: JetBrains Mono, Fira Code, Space Grotesk
-- Editorial: Playfair Display, Crimson Pro
-- Technical: IBM Plex family, Source Sans 3
-- Distinctive: Bricolage Grotesque, Newsreader
-
-Pairing principle: High contrast = interesting. Display + monospace, serif + geometric sans, variable font across weights.
-
-Use extremes: 100/200 weight vs 800/900, not 400 vs 600. Size jumps of 3x+, not 1.5x.
-
-Pick one distinctive font, use it decisively. Load from Google Fonts.
-</use_interesting_fonts>
-
-<frontend_aesthetics>
-Frontend aesthetics should be clean, modern, and minimalistic.
-
-Focus on:
-
-- Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics.
-- Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Draw from IDE themes and cultural aesthetics for inspiration.
-- Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions.
-- Backgrounds: Create atmosphere and depth rather than defaulting to solid colors. Layer CSS gradients, use geometric patterns, or add contextual effects that match the overall aesthetic.
-- UI: Use latest shadcn/ui + Tailwind, customize as needed, keep the UI clean and consistent.
-- Coding: Design components as compound components (composition). Use React Context only when children need shared state.
-
-Avoid generic AI-generated aesthetics:
-
-- Overused font families (Inter, Roboto, Arial, system fonts)
-- Clichéd color schemes (particularly purple gradients on white backgrounds)
-- Predictable layouts and component patterns
-- Cookie-cutter design that lacks context-specific character
-
-Interpret creatively and make unexpected choices that feel genuinely designed for the context. Vary between light and dark themes, different fonts, different aesthetics. You still tend to converge on common choices (Space Grotesk, for example) across generations. Avoid this: it is critical that you think outside the box!
-</frontend_aesthetics>

package/templates/rules/performance.mdc

@@ -1,54 +0,0 @@
----
-description: Performance optimization guidelines
-globs: 
-alwaysApply: false
----
-
-# Performance Guidelines
-
-## General Principles
-- Measure before optimizing (profile first)
-- Optimize hot paths, not everything
-- Consider the tradeoff between readability and performance
-- Cache expensive computations
-
-## JavaScript/TypeScript
-- Avoid blocking the main thread
-- Use Web Workers for heavy computation
-- Implement proper debouncing/throttling
-- Prefer `const` and `let` over `var`
-- Use appropriate data structures (Map, Set)
-
-## React Specific
-- Use `React.memo` for expensive pure components
-- Implement `useMemo` for expensive calculations
-- Use `useCallback` for stable function references
-- Virtualize long lists (react-window, react-virtualized)
-- Code-split with `React.lazy` and `Suspense`
-
-## Network
-- Minimize HTTP requests
-- Use HTTP/2 or HTTP/3 when possible
-- Implement caching strategies
-- Compress responses (gzip, brotli)
-- Use CDN for static assets
-
-## Bundle Size
-- Tree-shake unused code
-- Dynamic import for non-critical features
-- Analyze bundle with webpack-bundle-analyzer
-- Use lighter alternatives when possible
-
-## Database
-- Index frequently queried columns
-- Avoid N+1 queries
-- Use pagination for large datasets
-- Cache frequently accessed data
-- Use connection pooling
-
-## Images & Assets
-- Use modern formats (WebP, AVIF)
-- Implement responsive images
-- Lazy load below-the-fold images
-- Optimize SVGs
-- Use appropriate compression levels

package/templates/rules/react.mdc

@@ -1,58 +0,0 @@
----
-description: React component patterns and best practices
-globs: ["**/*.tsx", "**/*.jsx"]
-alwaysApply: false
----
-
-# React Guidelines
-
-## Component Design
-- Prefer functional components with hooks
-- Keep components small and focused
-- Use composition over inheritance
-- Design components as compound components when appropriate
-
-## Props & State
-- Destructure props in function signature
-- Use TypeScript interfaces for prop types
-- Keep state as close to where it's used as possible
-- Lift state only when necessary for sharing
-
-## Hooks
-- Follow the Rules of Hooks
-- Extract reusable logic into custom hooks
-- Use `useMemo` and `useCallback` judiciously (profile first)
-- Prefer `useReducer` for complex state logic
-
-## Event Handlers
-- Prefix with "handle" (e.g., `handleClick`, `handleChange`)
-- Define handlers outside of JSX for readability
-- Use proper TypeScript event types
-
-## Performance
-- Avoid inline object/array creation in JSX
-- Use React.memo only when proven necessary
-- Implement proper key props in lists
-- Consider code-splitting for large components
-
-## Patterns to Follow
-```tsx
-// Good: Compound component pattern
-<Select>
-  <Select.Option value="a">Option A</Select.Option>
-  <Select.Option value="b">Option B</Select.Option>
-</Select>
-
-// Good: Custom hook for logic
-function useToggle(initial = false) {
-  const [state, setState] = useState(initial);
-  const toggle = useCallback(() => setState(s => !s), []);
-  return [state, toggle] as const;
-}
-```
-
-## Avoid
-- Prop drilling more than 2 levels (use Context or state management)
-- Business logic in components (extract to hooks/utils)
-- Inline styles (use CSS-in-JS or CSS modules)
-- Index as key in dynamic lists

package/templates/rules/security.mdc

@@ -1,50 +0,0 @@
----
-description: Security best practices
-globs: 
-alwaysApply: true
----
-
-# Security Guidelines
-
-## Input Validation
-- Validate all user inputs on both client and server
-- Sanitize inputs before use in queries or rendering
-- Use allowlists over denylists when possible
-- Validate file uploads (type, size, content)
-
-## Authentication
-- Never store passwords in plain text
-- Use strong hashing algorithms (bcrypt, argon2)
-- Implement proper session management
-- Use secure, httpOnly, sameSite cookies
-
-## Authorization
-- Check permissions on every protected operation
-- Implement principle of least privilege
-- Validate user access at API level, not just UI
-- Use role-based or attribute-based access control
-
-## Data Protection
-- Encrypt sensitive data at rest and in transit
-- Use HTTPS everywhere
-- Don't log sensitive information
-- Implement proper key management
-
-## Common Vulnerabilities to Prevent
-- **XSS**: Escape output, use Content Security Policy
-- **CSRF**: Use anti-CSRF tokens
-- **SQL Injection**: Use parameterized queries
-- **Path Traversal**: Validate and sanitize file paths
-
-## API Security
-- Use rate limiting
-- Implement proper CORS configuration
-- Validate and sanitize all API inputs
-- Use API keys and tokens appropriately
-- Don't expose stack traces or internal errors
-
-## Dependencies
-- Keep dependencies updated
-- Audit for known vulnerabilities regularly
-- Use lockfiles for reproducible builds
-- Review new dependencies before adding