@biggora/claude-plugins 1.1.1 → 1.2.2

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

package/src/skills/tailwindcss-best-practices/references/typography-list-style.md

@@ -0,0 +1,65 @@
+---
+name: typography-list-style
+description: Controlling list marker style and position with list-style-type and list-style-position
+---
+
+# List Style
+
+Utilities for controlling the marker style and position of list items.
+
+## Usage
+
+### List style type
+
+```html
+<ul class="list-disc">
+  <li>Disc bullets (default for ul)</li>
+</ul>
+
+<ol class="list-decimal">
+  <li>Decimal numbers (default for ol)</li>
+</ol>
+
+<ul class="list-none">
+  <li>No markers (often with custom bullets via before/after)</li>
+</ul>
+
+<!-- Custom value -->
+<ol class="list-[upper-roman]">Roman numerals</ol>
+<ul class="list-(--my-marker)">Custom property</ul>
+```
+
+### List style position
+
+```html
+<!-- Bullets inside content flow -->
+<ul class="list-inside list-disc">
+  <li>5 cups chopped Porcini mushrooms</li>
+</ul>
+
+<!-- Bullets outside content flow (default) -->
+<ul class="list-outside list-disc">
+  <li>5 cups chopped Porcini mushrooms</li>
+</ul>
+```
+
+### Responsive
+
+```html
+<ul class="list-none md:list-disc md:list-outside">...</ul>
+```
+
+## Key Points
+
+- `list-disc` - disc bullets (ul default)
+- `list-decimal` - decimal numbers (ol default)
+- `list-none` - no markers
+- Custom: `list-[upper-roman]`, `list-[lower-alpha]`, `list-(--var)`
+- `list-inside` - markers inside content box
+- `list-outside` - markers outside content box (default)
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/list-style-type
+- https://tailwindcss.com/docs/list-style-position
+-->

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

@@ -0,0 +1,60 @@
+---
+name: typography-text-align
+description: Controlling text alignment with left, center, right, justify, and logical properties
+---
+
+# Text Align
+
+Utilities for controlling the alignment of text.
+
+## Usage
+
+### Basic alignment
+
+Use `text-left`, `text-center`, `text-right`, `text-justify`:
+
+```html
+<p class="text-left">Left aligned</p>
+<p class="text-center">Center aligned</p>
+<p class="text-right">Right aligned</p>
+<p class="text-justify">Justified text</p>
+```
+
+### Logical properties
+
+Use `text-start` and `text-end` for RTL-aware alignment:
+
+```html
+<div dir="ltr">
+  <p class="text-start">Left in LTR</p>
+  <p class="text-end">Right in LTR</p>
+</div>
+<div dir="rtl">
+  <p class="text-start">Right in RTL</p>
+  <p class="text-end">Left in RTL</p>
+</div>
+```
+
+### Responsive alignment
+
+```html
+<p class="text-left md:text-center lg:text-right">
+  Responsive alignment
+</p>
+```
+
+## Key Points
+
+- `text-left` - aligns to left edge
+- `text-center` - centers text
+- `text-right` - aligns to right edge
+- `text-justify` - justifies text (spaces words evenly)
+- `text-start` - aligns to start (left in LTR, right in RTL)
+- `text-end` - aligns to end (right in LTR, left in RTL)
+- Use logical properties (`text-start`, `text-end`) for internationalization
+- Common pattern: `text-center` for headings, `text-left` for body text
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/text-align
+-->

package/src/skills/tailwindcss-best-practices/references/visual-background.md

@@ -0,0 +1,76 @@
+---
+name: visual-background
+description: Background color, gradient, image, and attachment utilities
+---
+
+# Background
+
+Utilities for background color, gradients, images, and attachment.
+
+## Usage
+
+### Background color
+
+```html
+<div class="bg-white">White</div>
+<div class="bg-gray-100">Light gray</div>
+<div class="bg-blue-500">Blue</div>
+<div class="bg-sky-500/50">50% opacity</div>
+<div class="bg-[#1da1f2]">Arbitrary</div>
+<div class="bg-(--my-bg)">CSS variable</div>
+```
+
+Color palette follows theme (red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, slate, gray, zinc, neutral, stone).
+
+### Background image and gradient
+
+```html
+<div class="bg-gradient-to-r from-blue-500 to-purple-600">Linear gradient</div>
+<div class="bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500">Multi-stop</div>
+
+<div class="bg-[url('/img/hero.jpg')]">Image</div>
+<div class="bg-[url('/img/hero.jpg')] bg-cover bg-center">Image with size/position</div>
+```
+
+Gradient directions: `to-t`, `to-tr`, `to-r`, `to-br`, `to-b`, `to-bl`, `to-l`, `to-tl`.
+
+### Background size and position
+
+```html
+<div class="bg-auto">auto</div>
+<div class="bg-cover">cover</div>
+<div class="bg-contain">contain</div>
+
+<div class="bg-center">center</div>
+<div class="bg-top">top</div>
+<div class="bg-bottom">bottom</div>
+<div class="bg-left">left</div>
+<div class="bg-right">right</div>
+<div class="bg-[position:2rem_2rem]">Arbitrary</div>
+```
+
+### Background repeat and attachment
+
+```html
+<div class="bg-repeat">repeat (default)</div>
+<div class="bg-no-repeat">no-repeat</div>
+<div class="bg-repeat-x">repeat-x</div>
+
+<div class="bg-fixed">fixed (parallax)</div>
+<div class="bg-local">local</div>
+<div class="bg-scroll">scroll</div>
+```
+
+## Key Points
+
+- Colors: `bg-{color}-{shade}`, opacity `/50`, arbitrary `bg-[#hex]`
+- Gradients: `bg-gradient-to-{dir}`, `from-*`, `via-*`, `to-*`
+- Image: `bg-[url('...')]`, `bg-cover`, `bg-center`, etc.
+- Size: `bg-auto`, `bg-cover`, `bg-contain`
+- Position: `bg-center`, `bg-top`, `bg-[position:...]`
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/background-color
+- https://tailwindcss.com/docs/background-image
+-->

package/src/skills/tailwindcss-best-practices/references/visual-border.md

@@ -0,0 +1,108 @@
+---
+name: visual-border
+description: Border width, color, style, and border radius
+---
+
+# Border
+
+Utilities for border width, color, style, and radius.
+
+## Usage
+
+### Border width
+
+```html
+<div class="border">1px all sides</div>
+<div class="border-2">2px</div>
+<div class="border-0">No border</div>
+
+<div class="border-t border-r border-b border-l">Per side</div>
+<div class="border-x-2">Horizontal</div>
+<div class="border-y">Vertical</div>
+```
+
+### Border color
+
+```html
+<div class="border border-gray-300">Gray border</div>
+<div class="border-2 border-blue-500">Blue</div>
+<div class="border border-red-500/50">With opacity</div>
+```
+
+### Border style
+
+```html
+<div class="border border-solid">Solid (default)</div>
+<div class="border border-dashed">Dashed</div>
+<div class="border border-dotted">Dotted</div>
+<div class="border border-double">Double</div>
+<div class="border border-none">None</div>
+```
+
+### Border radius
+
+```html
+<div class="rounded">Small (default)</div>
+<div class="rounded-sm">2px</div>
+<div class="rounded-md">6px</div>
+<div class="rounded-lg">8px</div>
+<div class="rounded-xl">12px</div>
+<div class="rounded-2xl">16px</div>
+<div class="rounded-full">Pill/circle</div>
+<div class="rounded-none">0</div>
+
+<div class="rounded-t-lg rounded-b-none">Per corner</div>
+<div class="rounded-s-md rounded-e-xl">Logical (start/end)</div>
+```
+
+### Divide (between children)
+
+```html
+<div class="divide-y divide-gray-200">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</div>
+<div class="divide-x divide-gray-300 flex">
+  <div>Col 1</div>
+  <div>Col 2</div>
+</div>
+```
+
+### Ring (focus outline)
+
+```html
+<button class="ring-2 ring-blue-500 ring-offset-2">Ring</button>
+<button class="focus:ring-3 focus:ring-blue-500">Focus ring</button>
+```
+
+### Outline
+
+Separate from border; used for focus states. In v4: `outline` = 1px; `outline-2`, `outline-4` for width. Use `outline-offset-2` for offset.
+
+```html
+<button class="outline outline-offset-2 outline-sky-500">Outline</button>
+<button class="focus:outline-2 focus:outline-cyan-500">Focus outline</button>
+<!-- Accessibility: invisible but visible in forced-colors -->
+<button class="focus:outline-hidden">Focus outline-hidden</button>
+```
+
+v4: `outline-none` = `outline-style: none`; `outline-hidden` = invisible but shows in forced-colors mode.
+
+## Key Points
+
+- Width: `border`, `border-{0,2,4,8}`, `border-{t,r,b,l,x,y}`
+- Color: `border-{color}`, opacity modifier
+- Radius: `rounded-{size}`, `rounded-full`, `rounded-{t,r,b,l,s,e}-*`, logical `rounded-s-*`, `rounded-e-*`
+- Divide: `divide-{x,y}`, `divide-{color}` for borders between flex/grid children
+- Ring: `ring`, `ring-{n}`, `ring-{color}`, `ring-offset-{n}` (v4 default ring = 1px; use `ring-3` for 3px)
+- Outline: `outline`, `outline-{n}`, `outline-{color}`, `outline-offset-{n}`, `outline-hidden`, `outline-none`
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/border-width
+- https://tailwindcss.com/docs/border-color
+- https://tailwindcss.com/docs/border-radius
+- https://tailwindcss.com/docs/divide-width
+- https://tailwindcss.com/docs/ring-width
+-->