@biggora/claude-plugins 1.2.0 → 1.3.0

package/src/skills/tailwindcss-best-practices/references/core-variants.md

@@ -0,0 +1,204 @@
+---
+name: core-variants
+description: Using variants to apply utilities conditionally based on states, pseudo-classes, and media queries
+---
+
+# Variants
+
+Variants let you apply utility classes conditionally based on states, pseudo-classes, pseudo-elements, media queries, and more.
+
+## Overview
+
+Add a variant prefix to any utility class to apply it conditionally:
+
+```html
+<!-- Apply bg-sky-700 only on hover -->
+<button class="bg-sky-500 hover:bg-sky-700">Save</button>
+```
+
+Variants can be stacked to target specific situations:
+
+```html
+<!-- Dark mode, medium breakpoint, on hover -->
+<button class="dark:md:hover:bg-fuchsia-600">Save</button>
+```
+
+## Pseudo-Class Variants
+
+### Interactive States
+
+```html
+<button class="bg-violet-500 hover:bg-violet-600 focus:outline-2 focus:outline-violet-500 active:bg-violet-700">
+  Save changes
+</button>
+```
+
+Common interactive variants:
+- `hover:` - `:hover` pseudo-class
+- `focus:` - `:focus` pseudo-class
+- `active:` - `:active` pseudo-class
+- `focus-visible:` - `:focus-visible`
+- `focus-within:` - `:focus-within`
+- `visited:` - `:visited`
+
+### Structural Variants
+
+```html
+<ul>
+  <li class="py-4 first:pt-0 last:pb-0">Item 1</li>
+  <li class="py-4 first:pt-0 last:pb-0">Item 2</li>
+  <li class="py-4 first:pt-0 last:pb-0">Item 3</li>
+</ul>
+```
+
+Common structural variants:
+- `first:` - `:first-child`
+- `last:` - `:last-child`
+- `odd:` - `:nth-child(odd)`
+- `even:` - `:nth-child(even)`
+- `only:` - `:only-child`
+
+### Form States
+
+```html
+<input class="border-gray-300 required:border-red-500 invalid:border-red-500" />
+```
+
+Common form variants:
+- `required:` - `:required`
+- `optional:` - `:optional`
+- `invalid:` - `:invalid`
+- `valid:` - `:valid`
+- `disabled:` - `:disabled`
+- `enabled:` - `:enabled`
+- `checked:` - `:checked`
+- `user-valid:` - `:user-valid` (v4.1) — validation after user interaction
+- `user-invalid:` - `:user-invalid` (v4.1) — invalid after user interaction
+
+```html
+<!-- Better UX: only show validation state after user interacts -->
+<input required class="border user-valid:border-green-500 user-invalid:border-red-500" />
+```
+
+## Pseudo-Element Variants
+
+```html
+<input class="placeholder:text-gray-400 before:content-['*'] after:content-['required']" />
+```
+
+Common pseudo-element variants:
+- `before:` - `::before`
+- `after:` - `::after`
+- `placeholder:` - `::placeholder`
+- `selection:` - `::selection`
+- `first-line:` - `::first-line`
+- `first-letter:` - `::first-letter`
+
+## Media Query Variants
+
+### Responsive Variants
+
+```html
+<div class="text-sm md:text-base lg:text-lg">Responsive text</div>
+```
+
+### Dark Mode
+
+```html
+<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
+  Content
+</div>
+```
+
+By default uses `prefers-color-scheme`, but can be customized to use a class or data attribute.
+
+### Reduced Motion
+
+```html
+<div class="transition-all motion-reduce:transition-none">
+  Animated content
+</div>
+```
+
+### Pointer Device Variants (v4.1+)
+
+Target specific input devices:
+
+```html
+<!-- Larger touch targets on touch devices -->
+<button class="p-2 pointer-coarse:p-4 pointer-coarse:text-lg">
+  Touch-friendly button
+</button>
+
+<!-- Fine details only on mouse/trackpad -->
+<div class="hidden pointer-fine:block">
+  Precise hover details
+</div>
+```
+
+- `pointer-fine:` — precise pointing device (mouse, trackpad)
+- `pointer-coarse:` — imprecise device (touchscreen)
+- `pointer-none:` — no pointing device
+- `any-pointer-fine:` / `any-pointer-coarse:` — any available device
+
+### Other New Variants (v4.1+)
+
+```html
+<!-- Style <details> content -->
+<details class="details-content:mt-3 details-content:p-4" open>
+  <summary>FAQ Question</summary>
+  <div>Answer content</div>
+</details>
+
+<!-- Show fallback when JS disabled -->
+<div class="hidden noscript:block">Please enable JavaScript.</div>
+
+<!-- Respect inverted colors preference -->
+<img class="inverted-colors:hue-rotate-180" />
+```
+
+- `details-content:` — target content inside `<details>`
+- `noscript:` — styles when JavaScript is disabled
+- `inverted-colors:` — when user has inverted colors preference
+
+## Attribute Selector Variants
+
+```html
+<!-- RTL support -->
+<div class="text-left rtl:text-right">Content</div>
+
+<!-- Open state -->
+<details class="[&[open]]:bg-gray-100">Details</details>
+```
+
+## Arbitrary Variants
+
+Use arbitrary variants for custom selectors:
+
+```html
+<ul>
+  <li class="lg:[&:nth-child(-n+3)]:hover:underline">Item</li>
+</ul>
+```
+
+## Child Selector Variants
+
+```html
+<div class="[&>*]:mb-4 [&>*:last-child]:mb-0">
+  <p>Paragraph 1</p>
+  <p>Paragraph 2</p>
+</div>
+```
+
+## Key Points
+
+- Variants prefix utilities to apply them conditionally
+- Variants can be stacked: `dark:md:hover:bg-blue-600`
+- Use variants for states, pseudo-classes, media queries, and more
+- Arbitrary variants enable custom selector patterns
+- Child selector variants target descendant elements
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/hover-focus-and-other-states
+-->

package/src/skills/tailwindcss-best-practices/references/effects-form-controls.md

@@ -0,0 +1,76 @@
+---
+name: effects-form-controls
+description: Form control styling with accent-color, appearance, caret-color, and resize
+---
+
+# Form Controls & Input Styling
+
+Utilities for styling form controls: accent color, native appearance, caret color, and resize behavior.
+
+## Usage
+
+### Accent color
+
+Control the accent color of checkboxes, radio buttons, range inputs, and progress:
+
+```html
+<input type="checkbox" class="accent-pink-500" checked />
+<input type="radio" class="accent-rose-500" name="opt" />
+<input type="range" class="accent-indigo-500" />
+
+<!-- Opacity modifier -->
+<input type="checkbox" class="accent-purple-500/75" />
+```
+
+### Appearance
+
+Remove native form control styling for custom designs:
+
+```html
+<!-- Custom select with overlay icon -->
+<div class="grid">
+  <select class="col-start-1 row-start-1 appearance-none bg-gray-50 ...">
+    <option>Yes</option>
+  </select>
+  <svg class="pointer-events-none col-start-1 row-start-1 ...">...</svg>
+</div>
+
+<!-- Restore default in forced-colors mode (accessibility) -->
+<input type="checkbox" class="appearance-none forced-colors:appearance-auto" />
+```
+
+### Caret color
+
+Set the text input cursor color:
+
+```html
+<textarea class="caret-pink-500">Focus to see caret</textarea>
+<input class="caret-blue-500" />
+```
+
+### Resize
+
+Control textarea resize behavior:
+
+```html
+<textarea class="resize-y">Vertical only</textarea>
+<textarea class="resize-x">Horizontal only</textarea>
+<textarea class="resize">Both directions</textarea>
+<textarea class="resize-none">No resize handle</textarea>
+```
+
+## Key Points
+
+- `accent-*` - theme colors for checkboxes, radio, range; use `accent-[#hex]` or `accent-(--var)` for custom
+- `appearance-none` - remove native styling (custom selects, checkboxes)
+- `appearance-auto` - restore default (e.g. for `forced-colors: active`)
+- `caret-*` - theme colors for input cursor; matches text color patterns
+- `resize` - both; `resize-x` - horizontal; `resize-y` - vertical; `resize-none` - no handle
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/accent-color
+- https://tailwindcss.com/docs/appearance
+- https://tailwindcss.com/docs/caret-color
+- https://tailwindcss.com/docs/resize
+-->

package/src/skills/tailwindcss-best-practices/references/effects-mask.md

@@ -0,0 +1,91 @@
+---
+name: effects-mask
+description: Composable mask utilities added in Tailwind CSS v4.1 — linear gradient masks, radial masks, and positioning
+---
+
+# Mask Utilities (v4.1+)
+
+Composable mask system for creating fade, reveal, and shape effects. Added in Tailwind CSS v4.1.
+
+## Linear Gradient Masks
+
+Fade elements from a direction using gradient masks:
+
+```html
+<!-- Fade from top (visible at top, fades to transparent) -->
+<div class="mask-t-from-50%">Content fades from top</div>
+
+<!-- Fade from right -->
+<div class="mask-r-from-30%">Content fades from right</div>
+
+<!-- Fade from bottom -->
+<div class="mask-b-from-20%">Content fades from bottom</div>
+
+<!-- Fade from left -->
+<div class="mask-l-from-40%">Content fades from left</div>
+```
+
+The `from-` value sets where the mask starts becoming transparent.
+
+## Radial Masks
+
+Create circular or elliptical mask effects:
+
+```html
+<!-- Radial mask with from/to values -->
+<div class="mask-radial-from-70% mask-radial-to-85%">
+  Circular fade from center
+</div>
+
+<!-- Position the radial mask -->
+<div class="mask-radial-from-50% mask-radial-at-top-left">
+  Fade from top-left corner
+</div>
+```
+
+## Composing Masks
+
+Masks can be composed — multiple mask utilities combine:
+
+```html
+<!-- Fade from both right and bottom -->
+<div class="mask-r-from-80% mask-b-from-80%">
+  Fades from both edges
+</div>
+
+<!-- Radial mask with directional fade -->
+<div class="mask-radial-from-70% mask-radial-to-85% mask-t-from-50%">
+  Complex mask composition
+</div>
+```
+
+## Common Patterns
+
+### Image with fade-out edges
+
+```html
+<div class="mask-b-from-70% overflow-hidden">
+  <img src="/photo.jpg" class="w-full" />
+</div>
+```
+
+### Spotlight / vignette effect
+
+```html
+<div class="mask-radial-from-60% mask-radial-to-90%">
+  <img src="/hero.jpg" class="w-full" />
+</div>
+```
+
+## Key Points
+
+- Linear mask directions: `mask-t-*`, `mask-r-*`, `mask-b-*`, `mask-l-*`
+- Radial masks: `mask-radial-from-*`, `mask-radial-to-*`, `mask-radial-at-*`
+- Masks are composable — multiple masks combine together
+- Works with all variants: `hover:mask-b-from-50%`
+- The `from-` percentage controls where the fade begins
+
+<!--
+Source references:
+- https://tailwindcss.com/blog/tailwindcss-v4-1
+-->

package/src/skills/tailwindcss-best-practices/references/effects-scroll-snap.md

@@ -0,0 +1,59 @@
+---
+name: effects-scroll-snap
+description: CSS scroll snap for carousels and scroll containers
+---
+
+# Scroll Snap
+
+Utilities for scroll snap behavior in overflow containers. Use for carousels, horizontal galleries, or paged scroll.
+
+## Usage
+
+### Container
+
+```html
+<!-- Horizontal snap (carousel) -->
+<div class="snap-x snap-mandatory overflow-x-auto flex gap-4">
+  <div class="snap-center shrink-0 w-80">Slide 1</div>
+  <div class="snap-center shrink-0 w-80">Slide 2</div>
+  <div class="snap-center shrink-0 w-80">Slide 3</div>
+</div>
+
+<!-- Vertical snap -->
+<div class="snap-y snap-mandatory overflow-y-auto h-screen">
+  <div class="snap-start h-screen">Section 1</div>
+  <div class="snap-start h-screen">Section 2</div>
+</div>
+
+<!-- Both axes -->
+<div class="snap-both overflow-auto">...</div>
+```
+
+### Strictness
+
+- `snap-mandatory` - always rest on a snap point
+- `snap-proximity` - snap only when close to a point (default)
+
+### Child alignment
+
+```html
+<div class="snap-x overflow-x-auto">
+  <div class="snap-center">Center snap</div>
+  <div class="snap-start">Start snap</div>
+  <div class="snap-end">End snap</div>
+  <div class="snap-align-none">No snap</div>
+</div>
+```
+
+## Key Points
+
+- `snap-x` - horizontal; `snap-y` - vertical; `snap-both` - both; `snap-none` - disable
+- `snap-mandatory` / `snap-proximity` - strictness
+- Child: `snap-center`, `snap-start`, `snap-end`, `snap-align-none`
+- Requires overflow (e.g. `overflow-x-auto`) and scroll on container
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/scroll-snap-type
+- https://tailwindcss.com/docs/scroll-snap-align
+-->

package/src/skills/tailwindcss-best-practices/references/effects-text-shadow.md

@@ -0,0 +1,78 @@
+---
+name: effects-text-shadow
+description: Text shadow utilities added in Tailwind CSS v4.1 — sizes, colors, and opacity modifiers
+---
+
+# Text Shadow (v4.1+)
+
+Text shadow utilities for adding shadows to text content. Added in Tailwind CSS v4.1.
+
+## Sizes
+
+Five default sizes:
+
+```html
+<p class="text-shadow-2xs">Extra extra small shadow</p>
+<p class="text-shadow-xs">Extra small shadow</p>
+<p class="text-shadow-sm">Small shadow</p>
+<p class="text-shadow-md">Medium shadow</p>
+<p class="text-shadow-lg">Large shadow</p>
+```
+
+Remove text shadow:
+
+```html
+<p class="text-shadow-none">No shadow</p>
+```
+
+## Colors
+
+Apply a color to the text shadow:
+
+```html
+<p class="text-shadow-lg text-shadow-blue-500">Blue shadow</p>
+<p class="text-shadow-md text-shadow-gray-900">Dark shadow</p>
+```
+
+## Opacity Modifiers
+
+Control shadow opacity with the slash modifier:
+
+```html
+<p class="text-shadow-lg/50">50% opacity shadow</p>
+<p class="text-shadow-md text-shadow-sky-300/25">Sky shadow at 25%</p>
+```
+
+## Common Patterns
+
+### Readable text over images
+
+```html
+<div class="relative">
+  <img src="/hero.jpg" class="w-full" />
+  <h1 class="absolute text-white text-shadow-lg text-shadow-black/50">
+    Hero Title
+  </h1>
+</div>
+```
+
+### Subtle heading enhancement
+
+```html
+<h2 class="text-4xl font-bold text-shadow-sm text-shadow-gray-300">
+  Section Title
+</h2>
+```
+
+## Key Points
+
+- Text shadows are separate from box shadows (`shadow-*`)
+- Size and color are independent utilities that combine
+- Opacity modifier goes on the size: `text-shadow-lg/50`
+- Use `text-shadow-none` to remove shadows
+- Works with all variants: `hover:text-shadow-lg`, `dark:text-shadow-md`
+
+<!--
+Source references:
+- https://tailwindcss.com/blog/tailwindcss-v4-1
+-->

package/src/skills/tailwindcss-best-practices/references/effects-transition-animation.md

@@ -0,0 +1,80 @@
+---
+name: effects-transition-animation
+description: CSS transitions, animation keyframes, and reduced motion support
+---
+
+# Transition & Animation
+
+Utilities for CSS transitions and animations.
+
+## Usage
+
+### Transition property
+
+```html
+<button class="transition hover:bg-blue-600">Transitions common properties</button>
+<button class="transition-all hover:scale-110">All properties</button>
+<button class="transition-colors hover:bg-indigo-500">Colors only</button>
+<button class="transition-opacity hover:opacity-75">Opacity only</button>
+<button class="transition-transform hover:translate-y-1">Transform only</button>
+<button class="transition-none">No transition</button>
+```
+
+### Transition duration and delay
+
+```html
+<button class="transition duration-150">150ms (default)</button>
+<button class="transition duration-300">300ms</button>
+<button class="transition duration-500">500ms</button>
+<button class="transition delay-150">Delay 150ms</button>
+<button class="transition duration-300 delay-100">Both</button>
+```
+
+### Transition timing
+
+```html
+<button class="transition ease-linear">Linear</button>
+<button class="transition ease-in">Ease in</button>
+<button class="transition ease-out">Ease out</button>
+<button class="transition ease-in-out">Ease in-out (default)</button>
+<button class="transition ease-[cubic-bezier(0.4,0,0.2,1)]">Arbitrary</button>
+```
+
+### Animation keyframes
+
+```html
+<div class="animate-spin">Spinning</div>
+<div class="animate-ping">Ping effect</div>
+<div class="animate-pulse">Pulse</div>
+<div class="animate-bounce">Bounce</div>
+```
+
+Built-in: `animate-spin`, `animate-ping`, `animate-pulse`, `animate-bounce`. Use `@keyframes` in custom CSS for more.
+
+### Reduced motion
+
+```html
+<button class="transition hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:translate-y-0">
+  Respects prefers-reduced-motion
+</button>
+<div class="animate-spin motion-reduce:animate-none">Spinner hidden when reduced motion</div>
+```
+
+Use `motion-reduce:` to disable or simplify animations when user prefers reduced motion.
+
+## Key Points
+
+- Transition: `transition`, `transition-all`, `transition-colors`, `transition-opacity`, `transition-transform`
+- Duration: `duration-{75,100,150,200,300,500,700,1000}`
+- Delay: `delay-{75,100,150,200,300,500,700,1000}`
+- Timing: `ease-{linear,in,in-out,out}`
+- Animation: `animate-spin`, `animate-ping`, `animate-pulse`, `animate-bounce`
+- Always consider `motion-reduce:` for accessibility
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/transition-property
+- https://tailwindcss.com/docs/transition-duration
+- https://tailwindcss.com/docs/transition-timing-function
+- https://tailwindcss.com/docs/animation
+-->

package/src/skills/tailwindcss-best-practices/references/effects-visibility-interactivity.md

@@ -0,0 +1,82 @@
+---
+name: effects-visibility-interactivity
+description: Visibility, cursor, pointer-events, user-select, and z-index
+---
+
+# Visibility & Interactivity
+
+Utilities for visibility, cursor, pointer-events, user-select, and stacking.
+
+## Usage
+
+### Visibility
+
+```html
+<div class="visible">Visible (default)</div>
+<div class="invisible">Hidden but in layout</div>
+<div class="collapse">Table collapse</div>
+```
+
+Use `invisible` when you need to keep layout space; use `hidden` (display:none) to remove from flow.
+
+### Cursor
+
+```html
+<button class="cursor-pointer">Pointer</button>
+<div class="cursor-not-allowed">Disabled</div>
+<div class="cursor-wait">Loading</div>
+<div class="cursor-move">Draggable</div>
+<div class="cursor-grab">Grab</div>
+<div class="cursor-grabbing">Grabbing</div>
+<div class="cursor-text">Text select</div>
+<div class="cursor-default">Default</div>
+<div class="cursor-none">No cursor</div>
+```
+
+### Pointer events
+
+```html
+<div class="pointer-events-none">Ignore all pointer events</div>
+<div class="pointer-events-auto">Default behavior</div>
+```
+
+Useful for overlays: make overlay `pointer-events-none` so clicks pass through, or `pointer-events-none` on disabled elements.
+
+### User select
+
+```html
+<p class="select-none">Cannot select</p>
+<p class="select-text">Select text (default)</p>
+<p class="select-all">Select all on click</p>
+<p class="select-auto">Browser default</p>
+```
+
+### Z-index
+
+```html
+<div class="z-0">0</div>
+<div class="z-10">10</div>
+<div class="z-20">20</div>
+<div class="z-50">50</div>
+<div class="z-auto">Auto</div>
+<div class="z-[100]">Arbitrary</div>
+```
+
+Common: `z-0` (base), `z-10` (dropdowns), `z-20` (fixed nav), `z-50` (modal), `z-40` (overlay).
+
+## Key Points
+
+- Visibility: `visible`, `invisible`, `collapse`
+- Cursor: `cursor-{pointer,not-allowed,wait,move,grab,text,default,none}`
+- Pointer events: `pointer-events-none`, `pointer-events-auto`
+- User select: `select-none`, `select-text`, `select-all`
+- Z-index: `z-{0,10,20,30,40,50,auto}`, `z-[n]`
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/visibility
+- https://tailwindcss.com/docs/cursor
+- https://tailwindcss.com/docs/pointer-events
+- https://tailwindcss.com/docs/user-select
+- https://tailwindcss.com/docs/z-index
+-->