@biggora/claude-plugins 1.2.0 → 1.3.0

package/src/skills/tailwindcss-best-practices/references/layout-object-fit-position.md

@@ -0,0 +1,64 @@
+---
+name: layout-object-fit-position
+description: Controlling how replaced elements (images, video) are resized and positioned within their container
+---
+
+# Object Fit & Object Position
+
+Utilities for controlling how replaced elements like `<img>` and `<video>` are resized and positioned within their container.
+
+## Usage
+
+### Object fit
+
+```html
+<!-- Cover container, may crop -->
+<img class="h-48 w-96 object-cover" src="photo.jpg" />
+
+<!-- Contain within, may letterbox -->
+<img class="h-48 w-96 object-contain" src="photo.jpg" />
+
+<!-- Stretch to fill -->
+<img class="h-48 w-96 object-fill" src="photo.jpg" />
+
+<!-- Scale down only if needed, else original size -->
+<img class="h-48 w-96 object-scale-down" src="photo.jpg" />
+
+<!-- Original size, ignore container -->
+<img class="h-48 w-96 object-none" src="photo.jpg" />
+```
+
+### Object position
+
+```html
+<!-- Named positions -->
+<img class="size-24 object-cover object-top-left" src="photo.jpg" />
+<img class="size-24 object-cover object-center" src="photo.jpg" />
+<img class="size-24 object-cover object-bottom-right" src="photo.jpg" />
+
+<!-- Custom value -->
+<img class="object-cover object-[25%_75%]" src="photo.jpg" />
+<img class="object-(--my-object)" src="photo.jpg" />
+```
+
+### Responsive
+
+```html
+<img class="object-contain md:object-cover object-center md:object-top" src="photo.jpg" />
+```
+
+## Key Points
+
+- `object-contain` - maintain aspect ratio, fit inside container
+- `object-cover` - maintain aspect ratio, cover container (may crop)
+- `object-fill` - stretch to fill container
+- `object-scale-down` - like `contain` but never upscale
+- `object-none` - original size, ignore container
+- Position: `object-top-left`, `object-top`, `object-top-right`, `object-left`, `object-center`, `object-right`, `object-bottom-left`, `object-bottom`, `object-bottom-right`
+- Custom: `object-[25%_75%]`, `object-(--custom-property)`
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/object-fit
+- https://tailwindcss.com/docs/object-position
+-->

package/src/skills/tailwindcss-best-practices/references/layout-overflow.md

@@ -0,0 +1,57 @@
+---
+name: layout-overflow
+description: Controlling how elements handle content that overflows their container
+---
+
+# Overflow
+
+Utilities for controlling how an element handles content that is too large for the container.
+
+## Usage
+
+### Basic overflow
+
+Use `overflow-auto`, `overflow-hidden`, `overflow-visible`, `overflow-scroll`:
+
+```html
+<div class="overflow-auto">Scrolls if needed</div>
+<div class="overflow-hidden">Clips overflow</div>
+<div class="overflow-visible">Shows overflow</div>
+<div class="overflow-scroll">Always shows scrollbars</div>
+```
+
+### Axis-specific overflow
+
+Use `overflow-x-*` or `overflow-y-*` for horizontal/vertical control:
+
+```html
+<div class="overflow-x-auto overflow-y-hidden">
+  Horizontal scroll, vertical clip
+</div>
+<div class="overflow-x-scroll overflow-y-auto">
+  Horizontal always scrolls, vertical scrolls if needed
+</div>
+```
+
+### Overflow clip
+
+Use `overflow-clip` for clip behavior (similar to hidden but different scroll behavior):
+
+```html
+<div class="overflow-clip">Clips without creating scroll container</div>
+```
+
+## Key Points
+
+- `overflow-auto` - shows scrollbars only when needed
+- `overflow-hidden` - clips content that overflows
+- `overflow-visible` - allows content to overflow (default for most elements)
+- `overflow-scroll` - always shows scrollbars
+- `overflow-clip` - clips without creating scroll container
+- Use `overflow-x-*` and `overflow-y-*` for axis-specific control
+- Common pattern: `overflow-hidden` for images, `overflow-auto` for scrollable content
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/overflow
+-->

package/src/skills/tailwindcss-best-practices/references/layout-padding.md

@@ -0,0 +1,77 @@
+---
+name: layout-padding
+description: Controlling element padding with spacing scale, logical properties, and directional utilities
+---
+
+# Padding
+
+Utilities for controlling an element's padding.
+
+## Usage
+
+### All sides
+
+Use `p-<number>` to set padding on all sides:
+
+```html
+<div class="p-4">Padding on all sides</div>
+<div class="p-8">Larger padding</div>
+```
+
+### Individual sides
+
+Use `pt-<number>`, `pr-<number>`, `pb-<number>`, `pl-<number>`:
+
+```html
+<div class="pt-6">Top padding</div>
+<div class="pr-4">Right padding</div>
+<div class="pb-8">Bottom padding</div>
+<div class="pl-2">Left padding</div>
+```
+
+### Horizontal and vertical
+
+Use `px-<number>` for horizontal, `py-<number>` for vertical:
+
+```html
+<div class="px-8">Horizontal padding</div>
+<div class="py-8">Vertical padding</div>
+```
+
+### Logical properties
+
+Use `ps-<number>` (padding-inline-start) and `pe-<number>` (padding-inline-end) for RTL support:
+
+```html
+<div dir="ltr">
+  <div class="ps-8">Left padding in LTR</div>
+  <div class="pe-8">Right padding in LTR</div>
+</div>
+<div dir="rtl">
+  <div class="ps-8">Right padding in RTL</div>
+  <div class="pe-8">Left padding in RTL</div>
+</div>
+```
+
+### Custom values
+
+Use arbitrary values for custom padding:
+
+```html
+<div class="p-[5px]">Custom padding</div>
+<div class="px-[calc(50%-1rem)]">Custom calculation</div>
+```
+
+## Key Points
+
+- Spacing scale: `p-0` through `p-96` (and beyond)
+- Individual: `pt-*`, `pr-*`, `pb-*`, `pl-*` for specific sides
+- Axes: `px-*` (horizontal), `py-*` (vertical)
+- Logical: `ps-*` (start), `pe-*` (end) adapt to text direction
+- No negative padding - padding cannot be negative in CSS
+- Common patterns: `p-4`, `px-6`, `py-8`, `pt-2`, `pb-4`
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/padding
+-->

package/src/skills/tailwindcss-best-practices/references/layout-position.md

@@ -0,0 +1,85 @@
+---
+name: layout-position
+description: Controlling element positioning with static, relative, absolute, fixed, and sticky utilities
+---
+
+# Position
+
+Utilities for controlling how an element is positioned in the document.
+
+## Usage
+
+### Static positioning
+
+Use `static` to position an element according to the normal flow. Offsets are ignored and it won't act as a position reference for absolutely positioned children:
+
+```html
+<div class="static">
+  <p>Static parent</p>
+  <div class="absolute bottom-0 left-0">
+    <p>Absolute child</p>
+  </div>
+</div>
+```
+
+### Relative positioning
+
+Use `relative` to position an element in normal flow. Offsets are calculated relative to the element's normal position, and it acts as a position reference for absolutely positioned children:
+
+```html
+<div class="relative">
+  <p>Relative parent</p>
+  <div class="absolute bottom-0 left-0">
+    <p>Absolute child</p>
+  </div>
+</div>
+```
+
+### Absolute positioning
+
+Use `absolute` to position an element outside the normal flow. Neighboring elements act as if it doesn't exist. Offsets are calculated relative to the nearest positioned parent:
+
+```html
+<div class="relative">
+  <div class="absolute top-0 right-0">
+    <p>Absolute child</p>
+  </div>
+</div>
+```
+
+### Fixed positioning
+
+Use `fixed` to position an element relative to the browser window. Offsets are calculated relative to the viewport:
+
+```html
+<div class="fixed top-0 right-0 left-0">
+  <p>Fixed header</p>
+</div>
+```
+
+### Sticky positioning
+
+Use `sticky` to position an element as `relative` until it crosses a threshold, then treat it as `fixed` until its parent is off screen:
+
+```html
+<div>
+  <div class="sticky top-0">
+    <p>Sticky header</p>
+  </div>
+  <div>Content...</div>
+</div>
+```
+
+## Key Points
+
+- `static` is the default - elements flow normally
+- `relative` maintains normal flow but allows offsets and becomes a positioning context
+- `absolute` removes from flow and positions relative to nearest positioned ancestor
+- `fixed` positions relative to viewport, stays in place when scrolling
+- `sticky` combines relative and fixed behavior based on scroll position
+- Always use with offset utilities like `top-0`, `right-0`, `inset-0`, etc.
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/position
+-->

package/src/skills/tailwindcss-best-practices/references/layout-tables.md

@@ -0,0 +1,67 @@
+---
+name: layout-tables
+description: Table layout and border behavior with border-collapse, table-layout
+---
+
+# Table Layout
+
+Utilities for controlling table display, border behavior, and layout algorithm.
+
+## Usage
+
+### Border collapse
+
+```html
+<!-- Collapsed: adjacent borders merge into single border -->
+<table class="border-collapse border border-gray-400">
+  <thead>
+    <tr>
+      <th class="border border-gray-300 p-2">State</th>
+      <th class="border border-gray-300 p-2">City</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td class="border border-gray-300 p-2">Indiana</td>
+      <td class="border border-gray-300 p-2">Indianapolis</td>
+    </tr>
+  </tbody>
+</table>
+
+<!-- Separate: each cell has its own borders -->
+<table class="border-separate border border-gray-400">...</table>
+```
+
+### Table layout
+
+```html
+<!-- Auto: columns sized to content -->
+<table class="table-auto">...</table>
+
+<!-- Fixed: columns use first row widths -->
+<table class="table-fixed">...</table>
+```
+
+### Table display (from layout-display)
+
+Combine with `table`, `table-row`, `table-cell`, `table-header-group`, etc. for semantic table structure.
+
+### Responsive
+
+```html
+<table class="border-collapse md:border-separate">...</table>
+```
+
+## Key Points
+
+- `border-collapse` - adjacent borders merge (single border between cells)
+- `border-separate` - each cell displays its own borders
+- `table-auto` - column widths from content
+- `table-fixed` - fixed layout; first row sets column widths
+- In v4, `border-*` and `divide-*` default to `currentColor`; specify a color (e.g. `border-gray-200`) explicitly
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/border-collapse
+- https://tailwindcss.com/docs/table-layout
+-->

package/src/skills/tailwindcss-best-practices/references/layout-width.md

@@ -0,0 +1,102 @@
+---
+name: layout-width
+description: Setting element width with spacing scale, fractions, container sizes, and viewport units
+---
+
+# Width
+
+Utilities for setting the width of an element.
+
+## Usage
+
+### Spacing scale
+
+Use `w-<number>` utilities based on the spacing scale:
+
+```html
+<div class="w-24">w-24</div>
+<div class="w-48">w-48</div>
+<div class="w-64">w-64</div>
+```
+
+### Percentage widths
+
+Use `w-full` or `w-<fraction>` for percentage-based widths:
+
+```html
+<div class="flex">
+  <div class="w-1/2">50%</div>
+  <div class="w-1/2">50%</div>
+</div>
+<div class="flex">
+  <div class="w-2/5">40%</div>
+  <div class="w-3/5">60%</div>
+</div>
+<div class="w-full">100%</div>
+```
+
+### Container scale
+
+Use container size utilities like `w-sm`, `w-md`, `w-lg`:
+
+```html
+<div class="w-sm">Small container</div>
+<div class="w-md">Medium container</div>
+<div class="w-xl">Extra large container</div>
+```
+
+### Viewport units
+
+Use `w-screen` for full viewport width, or dynamic viewport units:
+
+```html
+<div class="w-screen">Full viewport width</div>
+<div class="w-dvw">Dynamic viewport width</div>
+<div class="w-svw">Small viewport width</div>
+<div class="w-lvw">Large viewport width</div>
+```
+
+### Content-based widths
+
+Use `w-auto`, `w-fit`, `w-min`, `w-max` for content-based sizing:
+
+```html
+<div class="w-auto">Auto width</div>
+<div class="w-fit">Fit content</div>
+<div class="w-min">Min content</div>
+<div class="w-max">Max content</div>
+```
+
+### Size utility
+
+Use `size-<number>` to set both width and height:
+
+```html
+<div class="size-16">16x16</div>
+<div class="size-24">24x24</div>
+<div class="size-full">100% x 100%</div>
+```
+
+### Custom values
+
+Use arbitrary values for custom widths:
+
+```html
+<div class="w-[117px]">Custom pixel width</div>
+<div class="w-[50%]">Custom percentage</div>
+<div class="w-[calc(100%-2rem)]">Custom calculation</div>
+```
+
+## Key Points
+
+- Spacing scale: `w-0` through `w-96` (and beyond)
+- Fractions: `w-1/2`, `w-1/3`, `w-2/3`, `w-1/4`, `w-3/4`, `w-1/5`, `w-4/5`, `w-1/6`, `w-5/6`
+- Container sizes: `w-3xs`, `w-2xs`, `w-xs`, `w-sm`, `w-md`, `w-lg`, `w-xl`, `w-2xl`, `w-3xl`, `w-4xl`, `w-5xl`, `w-6xl`, `w-7xl`
+- Viewport units: `w-screen` (100vw), `w-dvw`, `w-svw`, `w-lvw`
+- `size-*` utilities set both width and height simultaneously
+- Use `w-auto` to reset width at specific breakpoints
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/width
+-->

package/src/skills/tailwindcss-best-practices/references/transform-base.md

@@ -0,0 +1,68 @@
+---
+name: transform-base
+description: Base transform utilities for enabling transforms, hardware acceleration, and custom transform values
+---
+
+# Transform
+
+Base utilities for transforming elements.
+
+## Usage
+
+### Hardware acceleration
+
+Use `transform-gpu` to force GPU acceleration for better performance:
+
+```html
+<div class="scale-150 transform-gpu">
+  GPU-accelerated transform
+</div>
+```
+
+### CPU rendering
+
+Use `transform-cpu` to force CPU rendering if needed:
+
+```html
+<div class="scale-150 transform-cpu">
+  CPU-rendered transform
+</div>
+```
+
+### Removing transforms
+
+Use `transform-none` to remove all transforms:
+
+```html
+<div class="skew-y-3 md:transform-none">
+  Skewed on mobile, normal on desktop
+</div>
+```
+
+### Custom transforms
+
+Use arbitrary values for custom transform functions:
+
+```html
+<div class="transform-[matrix(1,2,3,4,5,6)]">
+  Custom matrix transform
+</div>
+<div class="transform-[perspective(1000px)_rotateX(45deg)]">
+  Custom 3D transform
+</div>
+```
+
+## Key Points
+
+- `transform-gpu` enables hardware acceleration with `translateZ(0)`
+- `transform-cpu` forces CPU rendering (removes GPU acceleration)
+- `transform-none` removes all transforms at once
+- Use `transform-gpu` for better animation performance
+- Custom transforms use arbitrary values: `transform-[...]`
+- Transform utilities (translate, rotate, scale, skew) automatically enable transform
+- Hardware acceleration is usually beneficial for animations
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/transform
+-->

package/src/skills/tailwindcss-best-practices/references/transform-rotate.md

@@ -0,0 +1,70 @@
+---
+name: transform-rotate
+description: Rotating elements in 2D and 3D space with degree values and custom rotations
+---
+
+# Rotate
+
+Utilities for rotating elements.
+
+## Usage
+
+### 2D rotation
+
+Use `rotate-<number>` to rotate by degrees:
+
+```html
+<div class="rotate-45">45 degrees</div>
+<div class="rotate-90">90 degrees</div>
+<div class="-rotate-45">-45 degrees (counterclockwise)</div>
+```
+
+### 3D rotation
+
+Use `rotate-x-<number>`, `rotate-y-<number>`, `rotate-z-<number>` for 3D rotation:
+
+```html
+<div class="rotate-x-50 rotate-z-45">3D rotation</div>
+<div class="rotate-y-25 rotate-z-30">Combined 3D rotation</div>
+```
+
+### Common rotations
+
+```html
+<div class="rotate-90">Quarter turn</div>
+<div class="rotate-180">Half turn</div>
+<div class="rotate-270">Three-quarter turn</div>
+```
+
+### Custom values
+
+Use arbitrary values for custom rotations:
+
+```html
+<div class="rotate-[3.142rad]">Custom radian rotation</div>
+<div class="rotate-[45deg]">Explicit degree rotation</div>
+```
+
+### Removing rotation
+
+Use `rotate-none` to remove rotation:
+
+```html
+<div class="rotate-45 md:rotate-none">Rotated on mobile only</div>
+```
+
+## Key Points
+
+- `rotate-*` rotates in 2D plane (around z-axis)
+- `rotate-x-*` rotates around x-axis (3D)
+- `rotate-y-*` rotates around y-axis (3D)
+- `rotate-z-*` rotates around z-axis (3D, same as `rotate-*`)
+- Negative values rotate counterclockwise: `-rotate-45`
+- Common values: `45`, `90`, `180`, `270` degrees
+- Can combine multiple axes: `rotate-x-50 rotate-y-30 rotate-z-45`
+- Use `rotate-none` to remove all rotations
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/rotate
+-->

package/src/skills/tailwindcss-best-practices/references/transform-scale.md

@@ -0,0 +1,83 @@
+---
+name: transform-scale
+description: Scaling elements uniformly or on specific axes with percentage values
+---
+
+# Scale
+
+Utilities for scaling elements.
+
+## Usage
+
+### Uniform scaling
+
+Use `scale-<number>` to scale on both axes (number represents percentage):
+
+```html
+<div class="scale-75">75% size</div>
+<div class="scale-100">100% size (default)</div>
+<div class="scale-125">125% size</div>
+<div class="scale-150">150% size</div>
+```
+
+### Axis-specific scaling
+
+Use `scale-x-<number>` or `scale-y-<number>` to scale on one axis:
+
+```html
+<div class="scale-x-75">75% width</div>
+<div class="scale-y-125">125% height</div>
+```
+
+### Negative scaling
+
+Use negative values to mirror and scale:
+
+```html
+<div class="-scale-x-100">Mirrored horizontally</div>
+<div class="-scale-y-100">Mirrored vertically</div>
+<div class="-scale-100">Mirrored both axes</div>
+```
+
+### Hover effects
+
+Common pattern for interactive scaling:
+
+```html
+<div class="scale-95 hover:scale-100 transition-transform">
+  Grows on hover
+</div>
+```
+
+### Removing scale
+
+Use `scale-none` to remove scaling:
+
+```html
+<div class="scale-125 md:scale-none">Scaled on mobile only</div>
+```
+
+### Custom values
+
+Use arbitrary values for custom scaling:
+
+```html
+<div class="scale-[1.7]">Custom scale value</div>
+<div class="scale-x-[0.8]">Custom x-axis scale</div>
+```
+
+## Key Points
+
+- `scale-*` scales uniformly on both axes
+- `scale-x-*` scales horizontally only
+- `scale-y-*` scales vertically only
+- Values represent percentages: `scale-75` = 75%, `scale-125` = 125%
+- `scale-100` is the default (no scaling)
+- Negative values mirror the element: `-scale-x-100` flips horizontally
+- Common for hover effects: `hover:scale-110`, `active:scale-95`
+- Use `scale-none` to remove all scaling
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/scale
+-->