@biggora/claude-plugins 1.2.0 → 1.2.2

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

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

@@ -0,0 +1,62 @@
+---
+name: transform-skew
+description: Skewing elements on x and y axes with degree values
+---
+
+# Skew
+
+Utilities for skewing (distorting) elements.
+
+## Usage
+
+### Skewing both axes
+
+Use `skew-<number>` to skew on both axes:
+
+```html
+<div class="skew-3">Slight skew</div>
+<div class="skew-6">Moderate skew</div>
+<div class="skew-12">Strong skew</div>
+```
+
+### Axis-specific skewing
+
+Use `skew-x-<number>` or `skew-y-<number>` to skew on one axis:
+
+```html
+<div class="skew-x-12">Skewed horizontally</div>
+<div class="skew-y-6">Skewed vertically</div>
+```
+
+### Negative skewing
+
+Use negative values for opposite direction:
+
+```html
+<div class="-skew-3">Negative skew</div>
+<div class="-skew-x-12">Negative x-axis skew</div>
+```
+
+### Custom values
+
+Use arbitrary values for custom skew:
+
+```html
+<div class="skew-[3.142rad]">Custom radian skew</div>
+<div class="skew-x-[15deg]">Custom degree skew</div>
+```
+
+## Key Points
+
+- `skew-*` skews on both x and y axes
+- `skew-x-*` skews horizontally only
+- `skew-y-*` skews vertically only
+- Values are in degrees: `skew-3` = 3 degrees
+- Negative values skew in opposite direction
+- Common values: `3`, `6`, `12` degrees for subtle effects
+- Use sparingly - excessive skewing can make text hard to read
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/skew
+-->

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

@@ -0,0 +1,77 @@
+---
+name: transform-translate
+description: Translating elements on x, y, and z axes with spacing scale, percentages, and custom values
+---
+
+# Translate
+
+Utilities for translating (moving) elements.
+
+## Usage
+
+### Spacing scale
+
+Use `translate-<number>` to translate on both axes, or `translate-x-<number>` / `translate-y-<number>` for single axis:
+
+```html
+<div class="translate-2">Moved 2 units</div>
+<div class="-translate-4">Moved -4 units</div>
+<div class="translate-x-4">Moved right 4 units</div>
+<div class="translate-y-6">Moved down 6 units</div>
+```
+
+### Percentage translation
+
+Use `translate-<fraction>` to translate by percentage of element size:
+
+```html
+<div class="translate-1/2">Moved 50% on both axes</div>
+<div class="translate-x-1/4">Moved 25% right</div>
+<div class="-translate-y-full">Moved 100% up</div>
+```
+
+### Centering elements
+
+Common pattern for centering absolutely positioned elements:
+
+```html
+<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+  Centered
+</div>
+```
+
+### Z-axis translation
+
+Use `translate-z-<number>` for 3D translation (requires `transform-3d` on parent):
+
+```html
+<div class="transform-3d">
+  <div class="translate-z-4">Forward in 3D space</div>
+  <div class="-translate-z-8">Backward in 3D space</div>
+</div>
+```
+
+### Custom values
+
+Use arbitrary values for custom translations:
+
+```html
+<div class="translate-[3.142rad]">Custom translation</div>
+<div class="translate-x-[117px]">Custom pixel value</div>
+```
+
+## Key Points
+
+- `translate-*` moves on both x and y axes
+- `translate-x-*` moves horizontally (right = positive)
+- `translate-y-*` moves vertically (down = positive)
+- `translate-z-*` moves in 3D space (forward = positive)
+- Negative values use dash prefix: `-translate-4`, `-translate-x-8`
+- Percentages are relative to element's own size
+- Common centering: `top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2`
+- Z-axis requires `transform-3d` utility on parent element
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/translate
+-->

package/src/skills/tailwindcss-best-practices/references/typography-font-text.md

@@ -0,0 +1,142 @@
+---
+name: typography-font-text
+description: Font size, weight, style, text color, line height, letter spacing, and text decoration
+---
+
+# Typography: Font & Text
+
+Utilities for font styling, text color, line height, letter spacing, and decoration.
+
+## Usage
+
+### Font size
+
+```html
+<p class="text-xs">Extra small</p>
+<p class="text-sm">Small</p>
+<p class="text-base">Base (default)</p>
+<p class="text-lg">Large</p>
+<p class="text-xl">Extra large</p>
+<p class="text-2xl">2xl</p>
+<p class="text-[17px]">Arbitrary</p>
+```
+
+### Font weight
+
+```html
+<p class="font-thin">100</p>
+<p class="font-light">300</p>
+<p class="font-normal">400</p>
+<p class="font-medium">500</p>
+<p class="font-semibold">600</p>
+<p class="font-bold">700</p>
+<p class="font-extrabold">800</p>
+```
+
+### Font style and family
+
+```html
+<p class="italic">Italic</p>
+<p class="not-italic">Not italic</p>
+<p class="font-sans">Sans (default)</p>
+<p class="font-serif">Serif</p>
+<p class="font-mono">Monospace</p>
+```
+
+### Text color
+
+```html
+<p class="text-gray-900">Dark text</p>
+<p class="text-blue-500">Blue</p>
+<p class="text-red-500/50">50% opacity</p>
+<p class="text-[#1da1f2]">Arbitrary color</p>
+<p class="text-(--my-color)">CSS variable</p>
+```
+
+### Line height
+
+```html
+<p class="leading-none">1</p>
+<p class="leading-tight">1.25</p>
+<p class="leading-normal">1.5</p>
+<p class="leading-relaxed">1.625</p>
+<p class="leading-loose">2</p>
+<p class="leading-[3rem]">Arbitrary</p>
+```
+
+### Letter spacing
+
+```html
+<p class="tracking-tighter">-0.05em</p>
+<p class="tracking-tight">-0.025em</p>
+<p class="tracking-normal">0</p>
+<p class="tracking-wide">0.025em</p>
+<p class="tracking-widest">0.1em</p>
+```
+
+### Text decoration
+
+```html
+<p class="underline">Underline</p>
+<p class="line-through">Strikethrough</p>
+<p class="no-underline">Remove</p>
+<p class="overline">Overline</p>
+<p class="underline decoration-2 underline-offset-4">Custom</p>
+```
+
+### Text transform and overflow
+
+```html
+<p class="uppercase">UPPERCASE</p>
+<p class="lowercase">lowercase</p>
+<p class="capitalize">Capitalize Each</p>
+<p class="normal-case">Normal</p>
+
+<p class="truncate">Single line ellipsis</p>
+<p class="text-ellipsis overflow-hidden">Ellipsis</p>
+<p class="line-clamp-3">Clamp to 3 lines</p>
+```
+
+### Text wrapping (v4.1+)
+
+```html
+<!-- Break long words without breaking layout -->
+<p class="wrap-break-word">superlongwordthatwontfitinasmallcontainer</p>
+
+<!-- Allow mid-word breaks (works in flex containers) -->
+<div class="flex">
+  <div class="wrap-anywhere">longwordinsideaflex</div>
+</div>
+
+<!-- Normal wrapping behavior -->
+<p class="wrap-normal">Default wrapping</p>
+```
+
+### Font feature settings (v4.2+)
+
+```html
+<p class="font-features-['tnum']">Tabular numbers: 1234567890</p>
+<p class="font-features-['smcp']">Small caps text</p>
+```
+
+## Key Points
+
+- Font size: `text-xs` through `text-9xl`, theme scale
+- Weight: `font-thin` to `font-black`
+- Color: `text-{color}-{shade}`, opacity modifier `/50`, arbitrary `text-[#hex]`
+- Line height: `leading-none`, `leading-tight`, `leading-normal`, `leading-loose`
+- Letter spacing: `tracking-tighter` to `tracking-widest`
+- Decoration: `underline`, `line-through`, `no-underline`, `decoration-*`, `underline-offset-*`
+- Overflow: `truncate` (ellipsis), `line-clamp-{n}`
+- Wrapping (v4.1): `wrap-break-word`, `wrap-anywhere`, `wrap-normal`
+- Font features (v4.2): `font-features-['tnum']`, `font-features-['smcp']`
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/font-size
+- https://tailwindcss.com/docs/font-weight
+- https://tailwindcss.com/docs/text-color
+- https://tailwindcss.com/docs/line-height
+- https://tailwindcss.com/docs/letter-spacing
+- https://tailwindcss.com/docs/text-decoration
+-->