@biggora/claude-plugins 1.2.0 → 1.2.2

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

@@ -0,0 +1,103 @@
+---
+name: layout-inset
+description: Controlling placement of positioned elements with top, right, bottom, left, and inset utilities
+---
+
+# Top / Right / Bottom / Left
+
+Utilities for controlling the placement of positioned elements.
+
+## Usage
+
+### Basic positioning
+
+Use `top-<number>`, `right-<number>`, `bottom-<number>`, `left-<number>` to position elements:
+
+```html
+<!-- Pin to top left corner -->
+<div class="relative size-32">
+  <div class="absolute top-0 left-0 size-16">01</div>
+</div>
+
+<!-- Span top edge -->
+<div class="relative size-32">
+  <div class="absolute inset-x-0 top-0 h-16">02</div>
+</div>
+
+<!-- Fill entire parent -->
+<div class="relative size-32">
+  <div class="absolute inset-0">05</div>
+</div>
+```
+
+### Inset utilities
+
+Use `inset-<number>` for all sides, `inset-x-<number>` for horizontal, `inset-y-<number>` for vertical:
+
+```html
+<div class="absolute inset-0">Fill parent</div>
+<div class="absolute inset-x-0 top-0">Span top</div>
+<div class="absolute inset-y-0 left-0">Span left</div>
+```
+
+### Negative values
+
+Prefix with a dash for negative values:
+
+```html
+<div class="relative size-32">
+  <div class="absolute -top-4 -left-4 size-14"></div>
+</div>
+```
+
+### Logical properties (inline direction)
+
+Use `inset-s-<number>` and `inset-e-<number>` for RTL-aware inline positioning:
+
+```html
+<div dir="ltr">
+  <div class="absolute inset-s-0 top-0">Left in LTR</div>
+</div>
+<div dir="rtl">
+  <div class="absolute inset-s-0 top-0">Right in RTL</div>
+</div>
+```
+
+> **Deprecation (v4.2):** `start-*` and `end-*` are deprecated. Use `inset-s-*` and `inset-e-*` instead.
+
+### Logical properties (block direction, v4.2+)
+
+Use `inset-bs-<number>` and `inset-be-<number>` for writing-mode-aware block positioning:
+
+```html
+<div class="absolute inset-bs-0">Block-start: 0</div>
+<div class="absolute inset-be-4">Block-end: 1rem</div>
+```
+
+### Percentage and custom values
+
+Use fractions for percentages or arbitrary values:
+
+```html
+<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+  Centered
+</div>
+<div class="absolute top-[117px] left-[20%]">
+  Custom position
+</div>
+```
+
+## Key Points
+
+- `inset-0` sets all sides to 0 (equivalent to `top-0 right-0 bottom-0 left-0`)
+- `inset-x-0` sets left and right to 0
+- `inset-y-0` sets top and bottom to 0
+- Use `inset-s-*`/`inset-e-*` for inline logical properties (`start-*`/`end-*` deprecated in v4.2)
+- Use `inset-bs-*`/`inset-be-*` for block logical properties (v4.2+)
+- Negative values use dash prefix: `-top-4`, `-left-8`
+- Combine with `position` utilities (`absolute`, `fixed`, `relative`, `sticky`)
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/top-right-bottom-left
+-->

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

@@ -0,0 +1,92 @@
+---
+name: layout-logical-properties
+description: Writing-mode-aware logical property utilities added in Tailwind CSS v4.2 — inline/block sizing, spacing, and inset
+---
+
+# Logical Property Utilities (v4.2+)
+
+Writing-mode-aware utilities for internationalization and vertical text support. These use CSS logical properties that adapt to the document's writing mode (LTR, RTL, vertical). Added in Tailwind CSS v4.2.
+
+## Logical Sizing
+
+Size elements relative to the writing mode:
+
+```html
+<!-- Inline size (width in LTR, height in vertical writing) -->
+<div class="inline-full">Full inline size</div>
+<div class="inline-80">Fixed inline size</div>
+<div class="min-inline-0">Minimum inline size</div>
+<div class="max-inline-lg">Maximum inline size</div>
+
+<!-- Block size (height in LTR, width in vertical writing) -->
+<div class="block-screen">Full block size (viewport)</div>
+<div class="block-64">Fixed block size</div>
+<div class="min-block-0">Minimum block size</div>
+<div class="max-block-full">Maximum block size</div>
+```
+
+## Block Spacing
+
+Spacing utilities for block-start and block-end:
+
+```html
+<!-- Block padding -->
+<div class="pbs-4">Padding block-start: 1rem</div>
+<div class="pbe-8">Padding block-end: 2rem</div>
+
+<!-- Block margin -->
+<div class="mbs-4">Margin block-start: 1rem</div>
+<div class="mbe-8">Margin block-end: 2rem</div>
+
+<!-- Scroll padding/margin -->
+<div class="scroll-pbs-4">Scroll padding block-start</div>
+<div class="scroll-mbs-4">Scroll margin block-start</div>
+```
+
+## Block Borders
+
+Border utilities for block direction:
+
+```html
+<div class="border-bs border-bs-gray-200">Border block-start</div>
+<div class="border-be-2 border-be-blue-500">Border block-end (2px blue)</div>
+```
+
+## Logical Inset
+
+Position elements using logical directions:
+
+```html
+<!-- Inline positioning (replaces start-*/end-*) -->
+<div class="absolute inset-s-0">Inline-start: 0</div>
+<div class="absolute inset-e-4">Inline-end: 1rem</div>
+
+<!-- Block positioning -->
+<div class="absolute inset-bs-0">Block-start: 0</div>
+<div class="absolute inset-be-4">Block-end: 1rem</div>
+```
+
+> **Deprecation note:** `start-*` and `end-*` utilities are deprecated in v4.2. Use `inset-s-*` and `inset-e-*` instead.
+
+## When to Use Logical Properties
+
+- **Internationalization (i18n):** When your app supports RTL languages (Arabic, Hebrew)
+- **Vertical writing modes:** For CJK vertical text layouts
+- **Future-proofing:** Logical properties adapt automatically to any writing mode
+
+For Western-only LTR layouts, physical properties (`w-*`, `h-*`, `pt-*`, `mb-*`) remain perfectly fine.
+
+## Key Points
+
+- `inline-*` = width in LTR, height in vertical writing
+- `block-*` = height in LTR, width in vertical writing
+- `pbs-*`/`pbe-*` = padding block-start/end
+- `mbs-*`/`mbe-*` = margin block-start/end
+- `border-bs-*`/`border-be-*` = border block-start/end
+- `inset-s-*`/`inset-e-*` replace deprecated `start-*`/`end-*`
+- All use the spacing scale like regular spacing utilities
+
+<!--
+Source references:
+- https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.2.0
+-->

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

@@ -0,0 +1,126 @@
+---
+name: layout-margin
+description: Controlling element margins with spacing scale, negative values, logical properties, and space utilities
+---
+
+# Margin
+
+Utilities for controlling an element's margin.
+
+## Usage
+
+### All sides
+
+Use `m-<number>` to set margin on all sides:
+
+```html
+<div class="m-4">Margin on all sides</div>
+<div class="m-8">Larger margin</div>
+```
+
+### Individual sides
+
+Use `mt-<number>`, `mr-<number>`, `mb-<number>`, `ml-<number>`:
+
+```html
+<div class="mt-6">Top margin</div>
+<div class="mr-4">Right margin</div>
+<div class="mb-8">Bottom margin</div>
+<div class="ml-2">Left margin</div>
+```
+
+### Horizontal and vertical
+
+Use `mx-<number>` for horizontal, `my-<number>` for vertical:
+
+```html
+<div class="mx-8">Horizontal margin</div>
+<div class="my-8">Vertical margin</div>
+```
+
+### Negative margins
+
+Prefix with dash for negative values:
+
+```html
+<div class="-mt-8">Negative top margin</div>
+<div class="-mx-4">Negative horizontal margin</div>
+```
+
+### Auto margins
+
+Use `m-auto` or directional auto margins for centering:
+
+```html
+<div class="mx-auto">Centered horizontally</div>
+<div class="ml-auto">Pushed to right</div>
+```
+
+### Logical properties
+
+Use `ms-<number>` (margin-inline-start) and `me-<number>` (margin-inline-end) for RTL support:
+
+```html
+<div dir="ltr">
+  <div class="ms-8">Left margin in LTR</div>
+  <div class="me-8">Right margin in LTR</div>
+</div>
+<div dir="rtl">
+  <div class="ms-8">Right margin in RTL</div>
+  <div class="me-8">Left margin in RTL</div>
+</div>
+```
+
+### Space between children
+
+Use `space-x-<number>` or `space-y-<number>` to add margin between children:
+
+```html
+<div class="flex space-x-4">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+</div>
+
+<div class="flex flex-col space-y-8">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+</div>
+```
+
+### Reversing space
+
+Use `space-x-reverse` or `space-y-reverse` with reversed flex directions:
+
+```html
+<div class="flex flex-row-reverse space-x-4 space-x-reverse">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+</div>
+```
+
+### Custom values
+
+Use arbitrary values for custom margins:
+
+```html
+<div class="m-[5px]">Custom margin</div>
+<div class="mx-[calc(50%-1rem)]">Custom calculation</div>
+```
+
+## Key Points
+
+- Spacing scale: `m-0` through `m-96` (and beyond)
+- Negative: prefix with dash (`-m-4`, `-mt-8`, `-mx-4`)
+- Auto: `m-auto`, `mx-auto`, `my-auto`, `mt-auto`, etc.
+- Logical: `ms-*` (start), `me-*` (end) adapt to text direction
+- Space utilities: `space-x-*`, `space-y-*` add margin to all children except last
+- Space reverse: `space-x-reverse`, `space-y-reverse` for reversed flex layouts
+- Limitations: Space utilities don't work well with grids or complex layouts - use `gap` utilities instead
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/margin
+-->

package/src/skills/tailwindcss-best-practices/references/layout-min-max-sizing.md

@@ -0,0 +1,63 @@
+---
+name: layout-min-max-sizing
+description: Setting minimum and maximum width and height with min-w, max-w, min-h, max-h
+---
+
+# Min & Max Sizing
+
+Utilities for constraining element dimensions with minimum and maximum width/height.
+
+## Usage
+
+### Min width
+
+```html
+<!-- Spacing scale -->
+<div class="min-w-24">min-w-24</div>
+<div class="min-w-64">min-w-64</div>
+
+<!-- Percentage -->
+<div class="min-w-full">min-w-full</div>
+<div class="min-w-3/4">min-w-3/4</div>
+
+<!-- Container scale -->
+<div class="min-w-sm">min-w-sm</div>
+<div class="min-w-xl">min-w-xl</div>
+
+<!-- Content-based -->
+<div class="min-w-min">min-content</div>
+<div class="min-w-max">max-content</div>
+<div class="min-w-fit">fit-content</div>
+<div class="min-w-auto">auto</div>
+
+<!-- Custom -->
+<div class="min-w-[220px]">Custom</div>
+```
+
+### Max width
+
+Use `max-w-<value>` with similar scales: spacing numbers, fractions (`max-w-1/2`), container sizes (`max-w-md`), `max-w-full`, `max-w-screen`, `max-w-min`, `max-w-max`, `max-w-fit`, `max-w-none`.
+
+### Min / Max height
+
+```html
+<div class="min-h-screen">At least full viewport height</div>
+<div class="min-h-0">Allow shrinking in flex</div>
+<div class="max-h-96 overflow-y-auto">Scrollable with max height</div>
+```
+
+## Key Points
+
+- min-w: spacing scale, fractions, container scale (3xs–7xl), `full`, `screen`, `min`, `max`, `fit`, `auto`
+- max-w: same options plus `none`
+- min-h / max-h: similar scales; `min-h-0` important for flex children to shrink
+- Viewport units: `min-w-screen`, `min-w-dvw`, `min-w-svw`, `min-w-lvw`
+- Container scale: `min-w-3xs` through `min-w-7xl` map to `--container-*` variables
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/min-width
+- https://tailwindcss.com/docs/max-width
+- https://tailwindcss.com/docs/min-height
+- https://tailwindcss.com/docs/max-height
+-->

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