@biggora/claude-plugins 1.2.0 → 1.2.2

package/src/skills/tailwindcss-best-practices/references/features-custom-styles.md

@@ -0,0 +1,203 @@
+---
+name: features-custom-styles
+description: Adding custom styles, utilities, variants, and working with arbitrary values
+---
+
+# Adding Custom Styles
+
+Tailwind is designed to be extensible. This guide covers customizing your theme, using arbitrary values, adding custom CSS, and extending the framework.
+
+## Customizing Your Theme
+
+Add custom design tokens using `@theme`:
+
+```css
+@import "tailwindcss";
+
+@theme {
+  --font-display: "Satoshi", "sans-serif";
+  --breakpoint-3xl: 120rem;
+  --color-brand-500: oklch(0.65 0.2 250);
+  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
+}
+```
+
+## Arbitrary Values
+
+Use square bracket notation for one-off values that don't belong in your theme:
+
+```html
+<!-- Arbitrary values -->
+<div class="top-[117px] bg-[#bada55] text-[22px]">
+  Content
+</div>
+
+<!-- With variants -->
+<div class="top-[117px] lg:top-[344px]">
+  Content
+</div>
+```
+
+### CSS Variables as Arbitrary Values
+
+Reference CSS variables:
+
+```html
+<div class="fill-(--my-brand-color)">
+  Content
+</div>
+```
+
+This is shorthand for `fill-[var(--my-brand-color)]`.
+
+## Arbitrary Properties
+
+Use square brackets for CSS properties Tailwind doesn't have utilities for:
+
+```html
+<div class="[mask-type:luminance]">
+  Content
+</div>
+
+<!-- With variants -->
+<div class="[mask-type:luminance] hover:[mask-type:alpha]">
+  Content
+</div>
+```
+
+### CSS Variables
+
+Set CSS variables with arbitrary properties:
+
+```html
+<div class="[--scroll-offset:56px] lg:[--scroll-offset:44px]">
+  Content
+</div>
+```
+
+## Arbitrary Variants
+
+Create custom selectors on the fly:
+
+```html
+<ul>
+  <li class="lg:[&:nth-child(-n+3)]:hover:underline">Item</li>
+</ul>
+```
+
+## Handling Whitespace
+
+Use underscores for spaces in arbitrary values:
+
+```html
+<div class="grid-cols-[1fr_500px_2fr]">
+  Content
+</div>
+```
+
+Tailwind converts underscores to spaces, except in contexts where underscores are valid (like URLs).
+
+## Custom Utilities
+
+Add custom utilities with `@utility`:
+
+```css
+@import "tailwindcss";
+
+@utility tab-4 {
+  tab-size: 4;
+}
+```
+
+Now you can use `tab-4` utility class, and it works with variants:
+
+```html
+<div class="tab-4 hover:tab-8">
+  Content
+</div>
+```
+
+## Custom Variants
+
+Add custom variants with `@custom-variant`:
+
+```css
+@import "tailwindcss";
+
+@custom-variant theme-midnight (&:where([data-theme="midnight"] *));
+```
+
+Now you can use `theme-midnight:` variant:
+
+```html
+<div class="theme-midnight:bg-black theme-midnight:text-white">
+  Content
+</div>
+```
+
+## Using Variants in CSS
+
+Apply Tailwind variants to custom CSS with `@variant`:
+
+```css
+.my-element {
+  background: white;
+  
+  @variant dark {
+    background: black;
+  }
+  
+  @variant hover {
+    background: gray;
+  }
+}
+```
+
+## Base Styles
+
+Add base styles to the `base` layer:
+
+```css
+@layer base {
+  h1 {
+    font-size: var(--text-2xl);
+    font-weight: 600;
+  }
+  
+  h2 {
+    font-size: var(--text-xl);
+    font-weight: 600;
+  }
+  
+  a {
+    color: var(--color-blue-600);
+    text-decoration-line: underline;
+  }
+}
+```
+
+## Component Styles
+
+Add component styles to the `components` layer:
+
+```css
+@layer components {
+  .btn-primary {
+    @apply bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded;
+  }
+}
+```
+
+## Key Points
+
+- Use `@theme` to customize design tokens
+- Arbitrary values with `[]` for one-off values
+- Arbitrary properties for CSS properties without utilities
+- `@utility` for custom utilities
+- `@custom-variant` for custom variants
+- `@layer` for organizing base and component styles
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/adding-custom-styles
+-->

package/src/skills/tailwindcss-best-practices/references/features-dark-mode.md

@@ -0,0 +1,137 @@
+---
+name: features-dark-mode
+description: Implementing dark mode with Tailwind's dark variant and custom dark mode strategies
+---
+
+# Dark Mode
+
+Tailwind includes a `dark` variant that lets you style your site differently when dark mode is enabled.
+
+## Overview
+
+Use the `dark:` variant to apply styles in dark mode:
+
+```html
+<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
+  Content
+</div>
+```
+
+## Default Behavior
+
+By default, the `dark` variant uses the `prefers-color-scheme` CSS media feature:
+
+```css
+@media (prefers-color-scheme: dark) {
+  .dark\:bg-gray-800 {
+    background-color: rgb(31 41 55);
+  }
+}
+```
+
+## Manual Toggle with Class
+
+Override the `dark` variant to use a class selector:
+
+```css
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+```
+
+Now dark mode utilities apply when the `dark` class is present:
+
+```html
+<html class="dark">
+  <body>
+    <div class="bg-white dark:bg-black">Content</div>
+  </body>
+</html>
+```
+
+## Manual Toggle with Data Attribute
+
+Use a data attribute instead:
+
+```css
+@import "tailwindcss";
+
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+```
+
+```html
+<html data-theme="dark">
+  <body>
+    <div class="bg-white dark:bg-black">Content</div>
+  </body>
+</html>
+```
+
+## Three-Way Theme Toggle
+
+Support light mode, dark mode, and system preference:
+
+```js
+// On page load
+document.documentElement.classList.toggle(
+  "dark",
+  localStorage.theme === "dark" ||
+    (!("theme" in localStorage) && 
+     window.matchMedia("(prefers-color-scheme: dark)").matches)
+);
+
+// Set light mode
+localStorage.theme = "light";
+document.documentElement.classList.remove("dark");
+
+// Set dark mode
+localStorage.theme = "dark";
+document.documentElement.classList.add("dark");
+
+// Respect system preference
+localStorage.removeItem("theme");
+document.documentElement.classList.toggle(
+  "dark",
+  window.matchMedia("(prefers-color-scheme: dark)").matches
+);
+```
+
+## Common Patterns
+
+### Cards
+
+```html
+<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-none">
+  <h2 class="text-gray-900 dark:text-white">Title</h2>
+  <p class="text-gray-500 dark:text-gray-400">Description</p>
+</div>
+```
+
+### Borders
+
+```html
+<div class="border border-gray-200 dark:border-gray-700">
+  Content
+</div>
+```
+
+### Buttons
+
+```html
+<button class="bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 text-white">
+  Button
+</button>
+```
+
+## Key Points
+
+- Use `dark:` variant for dark mode styles
+- Default uses `prefers-color-scheme` media query
+- Override with `@custom-variant` for manual toggles
+- Can use class or data attribute selectors
+- Combine with responsive variants: `dark:md:bg-gray-800`
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/dark-mode
+-->

package/src/skills/tailwindcss-best-practices/references/features-functions-directives.md

@@ -0,0 +1,241 @@
+---
+name: features-functions-directives
+description: Tailwind's CSS directives (@import, @theme, @utility, @variant) and functions (--alpha, --spacing)
+---
+
+# Functions and Directives
+
+Tailwind provides custom CSS directives and functions for working with your design system.
+
+## Directives
+
+Directives are custom Tailwind-specific at-rules that offer special functionality.
+
+### @import
+
+Import CSS files, including Tailwind:
+
+```css
+@import "tailwindcss";
+```
+
+### @theme
+
+Define your project's design tokens:
+
+```css
+@theme {
+  --font-display: "Satoshi", "sans-serif";
+  --breakpoint-3xl: 120rem;
+  --color-brand-500: oklch(0.65 0.2 250);
+  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
+}
+```
+
+### @source
+
+Explicitly specify source files for class detection:
+
+```css
+@import "tailwindcss";
+@source "../node_modules/@my-company/ui-lib";
+```
+
+### @utility
+
+Add custom utilities:
+
+```css
+@utility tab-4 {
+  tab-size: 4;
+}
+```
+
+Custom utilities work with variants:
+
+```html
+<div class="tab-4 hover:tab-8">Content</div>
+```
+
+### @variant
+
+Apply Tailwind variants to styles in your CSS:
+
+```css
+.my-element {
+  background: white;
+  
+  @variant dark {
+    background: black;
+  }
+}
+```
+
+### @custom-variant
+
+Add custom variants:
+
+```css
+@custom-variant theme-midnight (&:where([data-theme="midnight"] *));
+```
+
+```html
+<div class="theme-midnight:bg-black">Content</div>
+```
+
+### @apply
+
+Inline existing utility classes into custom CSS:
+
+```css
+.select2-dropdown {
+  @apply rounded-b-lg shadow-md;
+}
+
+.select2-search {
+  @apply rounded border border-gray-300;
+}
+```
+
+### @reference
+
+Import stylesheet for reference without including styles (useful for Vue/Svelte components):
+
+```html
+<style>
+  @reference "../../app.css";
+  
+  h1 {
+    @apply text-2xl font-bold text-red-500;
+  }
+</style>
+```
+
+Or reference Tailwind directly:
+
+```html
+<style>
+  @reference "tailwindcss";
+  
+  h1 {
+    @apply text-2xl font-bold;
+  }
+</style>
+```
+
+### Subpath Imports
+
+Directives support subpath imports (like TypeScript path aliases):
+
+```json
+{
+  "imports": {
+    "#app.css": "./src/css/app.css"
+  }
+}
+```
+
+```html
+<style>
+  @reference "#app.css";
+  
+  h1 {
+    @apply text-2xl font-bold;
+  }
+</style>
+```
+
+## Functions
+
+Tailwind provides build-time functions for working with colors and spacing.
+
+### --alpha()
+
+Adjust the opacity of a color:
+
+```css
+.my-element {
+  color: --alpha(var(--color-lime-300) / 50%);
+}
+```
+
+Compiles to:
+
+```css
+.my-element {
+  color: color-mix(in oklab, var(--color-lime-300) 50%, transparent);
+}
+```
+
+### --spacing()
+
+Generate spacing values based on your theme:
+
+```css
+.my-element {
+  margin: --spacing(4);
+}
+```
+
+Compiles to:
+
+```css
+.my-element {
+  margin: calc(var(--spacing) * 4);
+}
+```
+
+Useful in arbitrary values with `calc()`:
+
+```html
+<div class="py-[calc(--spacing(4)-1px)]">
+  Content
+</div>
+```
+
+## Compatibility Directives
+
+For compatibility with Tailwind CSS v3.x:
+
+### @config
+
+Load a legacy JavaScript-based configuration:
+
+```css
+@config "../../tailwind.config.js";
+```
+
+### @plugin
+
+Load a legacy JavaScript-based plugin:
+
+```css
+@plugin "@tailwindcss/typography";
+```
+
+### theme()
+
+Access theme values using dot notation (deprecated):
+
+```css
+.my-element {
+  margin: theme(spacing.12);
+}
+```
+
+**Note:** Prefer using CSS theme variables instead.
+
+## Key Points
+
+- Directives are Tailwind-specific at-rules
+- `@theme` defines design tokens
+- `@utility` creates custom utilities
+- `@custom-variant` creates custom variants
+- `@apply` inlines utilities into CSS
+- `--alpha()` and `--spacing()` are build-time functions
+- Compatibility directives support v3.x configs
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/functions-and-directives
+-->