@biggora/claude-plugins 1.2.0 → 1.3.0

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

@@ -0,0 +1,112 @@
+---
+name: layout-flexbox
+description: Flexbox layout utilities including flex-direction, justify, items, gap, grow, shrink, and wrap
+---
+
+# Flexbox
+
+Utilities for building flex layouts: direction, alignment, gap, and item sizing.
+
+## Usage
+
+### Flex direction and wrap
+
+```html
+<div class="flex flex-row">Horizontal (default)</div>
+<div class="flex flex-row-reverse">Reversed</div>
+<div class="flex flex-col">Vertical</div>
+<div class="flex flex-col-reverse">Vertical reversed</div>
+
+<div class="flex flex-wrap">Wrap when needed</div>
+<div class="flex flex-nowrap">No wrap (default)</div>
+<div class="flex flex-wrap-reverse">Wrap reversed</div>
+```
+
+### Justify content
+
+```html
+<div class="flex justify-start">Start</div>
+<div class="flex justify-end">End</div>
+<div class="flex justify-center">Center</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 items
+
+```html
+<div class="flex items-start">Align start</div>
+<div class="flex items-end">Align end</div>
+<div class="flex items-center">Center (common)</div>
+<div class="flex items-baseline">Baseline</div>
+<div class="flex items-stretch">Stretch (default)</div>
+```
+
+### Align self (on flex children)
+
+```html
+<div class="flex">
+  <div class="self-auto">Auto</div>
+  <div class="self-start">Start</div>
+  <div class="self-center">Center</div>
+  <div class="self-stretch">Stretch</div>
+</div>
+```
+
+### Gap
+
+```html
+<div class="flex gap-4">gap-4 (1rem)</div>
+<div class="flex gap-x-2 gap-y-4">Different x/y gap</div>
+<div class="flex gap-0">No gap</div>
+```
+
+### Flex grow, shrink, basis
+
+```html
+<div class="flex">
+  <div class="w-14 flex-none">Fixed</div>
+  <div class="flex-1">Grows and shrinks</div>
+  <div class="flex-initial">Shrink only</div>
+  <div class="flex-auto">Grow/shrink with initial size</div>
+</div>
+```
+
+- `flex-1` = `flex: 1 1 0%` - equal distribution
+- `flex-initial` = `flex: 0 1 auto` - shrink, don't grow
+- `flex-auto` = `flex: 1 1 auto` - grow/shrink from content size
+- `flex-none` = `flex: none` - no grow or shrink
+
+### Order
+
+```html
+<div class="flex">
+  <div class="order-2">Second</div>
+  <div class="order-1">First</div>
+  <div class="order-last">Last</div>
+</div>
+```
+
+## Key Points
+
+- Use `flex` or `inline-flex` as container (see layout-display)
+- Direction: `flex-row`, `flex-col`, `flex-row-reverse`, `flex-col-reverse`
+- Justify: `justify-start`, `justify-center`, `justify-between`, `justify-evenly`
+- Align: `items-center`, `items-start`, `items-stretch`
+- Gap: `gap-{n}`, `gap-x-{n}`, `gap-y-{n}` (spacing scale)
+- Item sizing: `flex-1`, `flex-none`, `flex-auto`, `flex-initial`
+- Self alignment: `self-center`, `self-start`, etc.
+- Safe alignment (v4.1): `justify-center-safe`, `items-center-safe` (falls back to `start` on overflow)
+- Order: `order-{n}`, `order-first`, `order-last`
+- **v4 note**: `flex-shrink-*` → `shrink-*`, `flex-grow-*` → `grow-*` (old names removed)
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/flex-direction
+- https://tailwindcss.com/docs/justify-content
+- https://tailwindcss.com/docs/align-items
+- https://tailwindcss.com/docs/gap
+- https://tailwindcss.com/docs/flex
+- https://tailwindcss.com/docs/order
+-->

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

@@ -0,0 +1,87 @@
+---
+name: layout-grid
+description: CSS Grid utilities including grid-cols, grid-rows, gap, place-items, and grid placement
+---
+
+# Grid
+
+Utilities for CSS Grid layouts: columns, rows, gap, and item placement.
+
+## Usage
+
+### Grid columns and rows
+
+```html
+<div class="grid grid-cols-3 gap-4">3 equal columns</div>
+<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">Responsive</div>
+<div class="grid grid-cols-none">No explicit tracks</div>
+
+<div class="grid grid-rows-3 gap-2">3 rows</div>
+<div class="grid grid-rows-[auto_1fr_auto]">Custom rows</div>
+```
+
+### Custom grid template
+
+```html
+<div class="grid grid-cols-[200px_minmax(900px,1fr)_100px]">Custom template</div>
+<div class="grid grid-cols-(--my-cols)">CSS variable</div>
+```
+
+### Subgrid
+
+```html
+<div class="grid grid-cols-4 gap-4">
+  <div>01</div><div>02</div><div>03</div><div>04</div>
+  <div>05</div>
+  <div class="col-span-3 grid grid-cols-subgrid gap-4">
+    <div class="col-start-2">06</div>
+  </div>
+</div>
+```
+
+### Gap
+
+```html
+<div class="grid gap-4">Uniform gap</div>
+<div class="grid gap-x-2 gap-y-4">Different x/y</div>
+```
+
+### Place items (align + justify)
+
+```html
+<div class="grid place-items-center">Center both</div>
+<div class="grid place-items-start">Start both</div>
+<div class="grid items-center justify-center">Equivalent</div>
+```
+
+### Grid placement (col/row span and start)
+
+```html
+<div class="grid grid-cols-4 gap-4">
+  <div class="col-span-2">Spans 2 columns</div>
+  <div class="col-start-3">Starts at col 3</div>
+  <div class="row-span-2">Spans 2 rows</div>
+  <div class="col-span-full">Full width</div>
+</div>
+```
+
+## Key Points
+
+- `grid` / `inline-grid` - Grid container (see layout-display)
+- Columns: `grid-cols-{n}`, `grid-cols-none`, `grid-cols-subgrid`, `grid-cols-[...]`
+- Rows: `grid-rows-{n}`, `grid-rows-[...]`
+- Gap: `gap-{n}`, `gap-x-{n}`, `gap-y-{n}`
+- Placement: `col-span-{n}`, `col-start-{n}`, `row-span-{n}`, `row-start-{n}`
+- `col-span-full` / `row-span-full` - span all
+- `place-items-*` - shorthand for align + justify
+- Use `grid-cols-[...]` for custom templates like `minmax()` or `repeat()`
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/grid-template-columns
+- https://tailwindcss.com/docs/grid-template-rows
+- https://tailwindcss.com/docs/gap
+- https://tailwindcss.com/docs/place-items
+- https://tailwindcss.com/docs/grid-column
+- https://tailwindcss.com/docs/grid-row
+-->

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

@@ -0,0 +1,97 @@
+---
+name: layout-height
+description: Setting element height with spacing scale, fractions, viewport units, and content-based sizing
+---
+
+# Height
+
+Utilities for setting the height of an element.
+
+## Usage
+
+### Spacing scale
+
+Use `h-<number>` utilities based on the spacing scale:
+
+```html
+<div class="h-24">h-24</div>
+<div class="h-48">h-48</div>
+<div class="h-64">h-64</div>
+```
+
+### Percentage heights
+
+Use `h-full` or `h-<fraction>` for percentage-based heights:
+
+```html
+<div class="h-full">100%</div>
+<div class="h-1/2">50%</div>
+<div class="h-3/4">75%</div>
+<div class="h-9/10">90%</div>
+```
+
+### Viewport units
+
+Use `h-screen` for full viewport height, or dynamic viewport units:
+
+```html
+<div class="h-screen">Full viewport height (100vh)</div>
+<div class="h-dvh">Dynamic viewport height</div>
+<div class="h-svh">Small viewport height</div>
+<div class="h-lvh">Large viewport height</div>
+```
+
+### Content-based heights
+
+Use `h-auto`, `h-fit`, `h-min`, `h-max` for content-based sizing:
+
+```html
+<div class="h-auto">Auto height</div>
+<div class="h-fit">Fit content</div>
+<div class="h-min">Min content</div>
+<div class="h-max">Max content</div>
+```
+
+### Line height
+
+Use `h-lh` to match line height:
+
+```html
+<div class="h-lh">Matches line height</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 heights:
+
+```html
+<div class="h-[117px]">Custom pixel height</div>
+<div class="h-[50vh]">Custom viewport height</div>
+<div class="h-[calc(100vh-2rem)]">Custom calculation</div>
+```
+
+## Key Points
+
+- Spacing scale: `h-0` through `h-96` (and beyond)
+- Fractions: `h-1/2`, `h-1/3`, `h-2/3`, `h-1/4`, `h-3/4`, `h-9/10`
+- Viewport units: `h-screen` (100vh), `h-dvh`, `h-svh`, `h-lvh`
+- `h-dvh` adapts to browser UI (address bar, etc.)
+- `h-svh` uses smallest viewport height
+- `h-lvh` uses largest viewport height
+- `size-*` utilities set both width and height simultaneously
+- Use `h-auto` to reset height at specific breakpoints
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/height
+-->

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