@biggora/claude-plugins 1.2.0 → 1.2.2

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
+-->

package/src/skills/tailwindcss-best-practices/references/features-content-detection.md

@@ -0,0 +1,175 @@
+---
+name: features-content-detection
+description: How Tailwind detects classes in source files and how to customize content scanning
+---
+
+# Detecting Classes in Source Files
+
+Tailwind scans your project for utility classes and generates CSS based on what you've actually used.
+
+## How Classes Are Detected
+
+Tailwind treats all source files as plain text and looks for tokens that could be class names:
+
+```jsx
+export function Button({ color, children }) {
+  const colors = {
+    black: "bg-black text-white",
+    blue: "bg-blue-500 text-white",
+  };
+
+  return (
+    <button className={`${colors[color]} rounded-full px-2 py-1.5`}>
+      {children}
+    </button>
+  );
+}
+```
+
+Tailwind detects `bg-black`, `text-white`, `bg-blue-500`, `rounded-full`, `px-2`, and `py-1.5` from this file.
+
+## Dynamic Class Names
+
+Tailwind scans files as plain text, so it can't understand string concatenation or interpolation.
+
+### ❌ Don't Construct Classes Dynamically
+
+```html
+<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
+```
+
+The strings `text-red-600` and `text-green-600` don't exist in the file, so Tailwind won't generate them.
+
+### ✅ Use Complete Class Names
+
+```html
+<div class="{{ error ? 'text-red-600' : 'text-green-600' }}">
+  Content
+</div>
+```
+
+### ❌ Don't Build Classes from Props
+
+```jsx
+function Button({ color, children }) {
+  return <button className={`bg-${color}-600 hover:bg-${color}-500`}>{children}</button>;
+}
+```
+
+### ✅ Map Props to Static Classes
+
+```jsx
+function Button({ color, children }) {
+  const colorVariants = {
+    blue: "bg-blue-600 hover:bg-blue-500",
+    red: "bg-red-600 hover:bg-red-500",
+  };
+
+  return <button className={`${colorVariants[color]} ...`}>{children}</button>;
+}
+```
+
+## Which Files Are Scanned
+
+Tailwind scans every file in your project except:
+
+- Files in `.gitignore`
+- Files in `node_modules`
+- Binary files (images, videos, zip files)
+- CSS files
+- Common package manager lock files
+
+## Explicitly Registering Sources
+
+Use `@source` to explicitly register source paths:
+
+```css
+@import "tailwindcss";
+@source "../node_modules/@acmecorp/ui-lib";
+```
+
+This is useful for external libraries built with Tailwind that are in `.gitignore`.
+
+## Setting Base Path
+
+Set the base path for source detection:
+
+```css
+@import "tailwindcss" source("../src");
+```
+
+Useful in monorepos where build commands run from the root.
+
+## Ignoring Specific Paths
+
+Use `@source not` to ignore paths:
+
+```css
+@import "tailwindcss";
+@source not "../src/components/legacy";
+```
+
+## Disabling Automatic Detection
+
+Use `source(none)` to disable automatic detection:
+
+```css
+@import "tailwindcss" source(none);
+
+@source "../admin";
+@source "../shared";
+```
+
+Useful for projects with multiple Tailwind stylesheets.
+
+## Safelisting Utilities
+
+Force Tailwind to generate specific classes with `@source inline()`:
+
+```css
+@import "tailwindcss";
+@source inline("underline");
+```
+
+### Safelisting with Variants
+
+Generate classes with variants:
+
+```css
+@import "tailwindcss";
+@source inline("{hover:,focus:,}underline");
+```
+
+### Safelisting with Ranges
+
+Use brace expansion to generate multiple classes:
+
+```css
+@import "tailwindcss";
+@source inline("{hover:,}bg-red-{50,{100..900..100},950}");
+```
+
+This generates `bg-red-50` through `bg-red-950` with hover variants.
+
+## Explicitly Excluding Classes
+
+Use `@source not inline()` to prevent specific classes from being generated:
+
+```css
+@import "tailwindcss";
+@source not inline("{hover:,focus:,}bg-red-{50,{100..900..100},950}");
+```
+
+## Key Points
+
+- Tailwind scans files as plain text
+- Always use complete class names, never construct them dynamically
+- Map props/state to static class names
+- Use `@source` to explicitly register or ignore paths
+- Use `@source inline()` to safelist utilities
+- Brace expansion works in inline sources for ranges
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/detecting-classes-in-source-files
+-->