@h1dr0n/skill-pool 0.1.0

package/skills/web/skills/tailwind-patterns/SKILL.md

@@ -0,0 +1,269 @@
+---
+name: tailwind-patterns
+description: Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
+allowed-tools: Read, Write, Edit, Glob, Grep
+---
+
+# Tailwind CSS Patterns (v4 - 2025)
+
+> Modern utility-first CSS with CSS-native configuration.
+
+---
+
+## 1. Tailwind v4 Architecture
+
+### What Changed from v3
+
+| v3 (Legacy) | v4 (Current) |
+|-------------|--------------|
+| `tailwind.config.js` | CSS-based `@theme` directive |
+| PostCSS plugin | Oxide engine (10x faster) |
+| JIT mode | Native, always-on |
+| Plugin system | CSS-native features |
+| `@apply` directive | Still works, discouraged |
+
+### v4 Core Concepts
+
+| Concept | Description |
+|---------|-------------|
+| **CSS-first** | Configuration in CSS, not JavaScript |
+| **Oxide Engine** | Rust-based compiler, much faster |
+| **Native Nesting** | CSS nesting without PostCSS |
+| **CSS Variables** | All tokens exposed as `--*` vars |
+
+---
+
+## 2. CSS-Based Configuration
+
+### Theme Definition
+
+```
+@theme {
+  /* Colors - use semantic names */
+  --color-primary: oklch(0.7 0.15 250);
+  --color-surface: oklch(0.98 0 0);
+  --color-surface-dark: oklch(0.15 0 0);
+  
+  /* Spacing scale */
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 2rem;
+  
+  /* Typography */
+  --font-sans: 'Inter', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+}
+```
+
+### When to Extend vs Override
+
+| Action | Use When |
+|--------|----------|
+| **Extend** | Adding new values alongside defaults |
+| **Override** | Replacing default scale entirely |
+| **Semantic tokens** | Project-specific naming (primary, surface) |
+
+---
+
+## 3. Container Queries (v4 Native)
+
+### Breakpoint vs Container
+
+| Type | Responds To |
+|------|-------------|
+| **Breakpoint** (`md:`) | Viewport width |
+| **Container** (`@container`) | Parent element width |
+
+### Container Query Usage
+
+| Pattern | Classes |
+|---------|---------|
+| Define container | `@container` on parent |
+| Container breakpoint | `@sm:`, `@md:`, `@lg:` on children |
+| Named containers | `@container/card` for specificity |
+
+### When to Use
+
+| Scenario | Use |
+|----------|-----|
+| Page-level layouts | Viewport breakpoints |
+| Component-level responsive | Container queries |
+| Reusable components | Container queries (context-independent) |
+
+---
+
+## 4. Responsive Design
+
+### Breakpoint System
+
+| Prefix | Min Width | Target |
+|--------|-----------|--------|
+| (none) | 0px | Mobile-first base |
+| `sm:` | 640px | Large phone / small tablet |
+| `md:` | 768px | Tablet |
+| `lg:` | 1024px | Laptop |
+| `xl:` | 1280px | Desktop |
+| `2xl:` | 1536px | Large desktop |
+
+### Mobile-First Principle
+
+1. Write mobile styles first (no prefix)
+2. Add larger screen overrides with prefixes
+3. Example: `w-full md:w-1/2 lg:w-1/3`
+
+---
+
+## 5. Dark Mode
+
+### Configuration Strategies
+
+| Method | Behavior | Use When |
+|--------|----------|----------|
+| `class` | `.dark` class toggles | Manual theme switcher |
+| `media` | Follows system preference | No user control |
+| `selector` | Custom selector (v4) | Complex theming |
+
+### Dark Mode Pattern
+
+| Element | Light | Dark |
+|---------|-------|------|
+| Background | `bg-white` | `dark:bg-zinc-900` |
+| Text | `text-zinc-900` | `dark:text-zinc-100` |
+| Borders | `border-zinc-200` | `dark:border-zinc-700` |
+
+---
+
+## 6. Modern Layout Patterns
+
+### Flexbox Patterns
+
+| Pattern | Classes |
+|---------|---------|
+| Center (both axes) | `flex items-center justify-center` |
+| Vertical stack | `flex flex-col gap-4` |
+| Horizontal row | `flex gap-4` |
+| Space between | `flex justify-between items-center` |
+| Wrap grid | `flex flex-wrap gap-4` |
+
+### Grid Patterns
+
+| Pattern | Classes |
+|---------|---------|
+| Auto-fit responsive | `grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))]` |
+| Asymmetric (Bento) | `grid grid-cols-3 grid-rows-2` with spans |
+| Sidebar layout | `grid grid-cols-[auto_1fr]` |
+
+> **Note:** Prefer asymmetric/Bento layouts over symmetric 3-column grids.
+
+---
+
+## 7. Modern Color System
+
+### OKLCH vs RGB/HSL
+
+| Format | Advantage |
+|--------|-----------|
+| **OKLCH** | Perceptually uniform, better for design |
+| **HSL** | Intuitive hue/saturation |
+| **RGB** | Legacy compatibility |
+
+### Color Token Architecture
+
+| Layer | Example | Purpose |
+|-------|---------|---------|
+| **Primitive** | `--blue-500` | Raw color values |
+| **Semantic** | `--color-primary` | Purpose-based naming |
+| **Component** | `--button-bg` | Component-specific |
+
+---
+
+## 8. Typography System
+
+### Font Stack Pattern
+
+| Type | Recommended |
+|------|-------------|
+| Sans | `'Inter', 'SF Pro', system-ui, sans-serif` |
+| Mono | `'JetBrains Mono', 'Fira Code', monospace` |
+| Display | `'Outfit', 'Poppins', sans-serif` |
+
+### Type Scale
+
+| Class | Size | Use |
+|-------|------|-----|
+| `text-xs` | 0.75rem | Labels, captions |
+| `text-sm` | 0.875rem | Secondary text |
+| `text-base` | 1rem | Body text |
+| `text-lg` | 1.125rem | Lead text |
+| `text-xl`+ | 1.25rem+ | Headings |
+
+---
+
+## 9. Animation & Transitions
+
+### Built-in Animations
+
+| Class | Effect |
+|-------|--------|
+| `animate-spin` | Continuous rotation |
+| `animate-ping` | Attention pulse |
+| `animate-pulse` | Subtle opacity pulse |
+| `animate-bounce` | Bouncing effect |
+
+### Transition Patterns
+
+| Pattern | Classes |
+|---------|---------|
+| All properties | `transition-all duration-200` |
+| Specific | `transition-colors duration-150` |
+| With easing | `ease-out` or `ease-in-out` |
+| Hover effect | `hover:scale-105 transition-transform` |
+
+---
+
+## 10. Component Extraction
+
+### When to Extract
+
+| Signal | Action |
+|--------|--------|
+| Same class combo 3+ times | Extract component |
+| Complex state variants | Extract component |
+| Design system element | Extract + document |
+
+### Extraction Methods
+
+| Method | Use When |
+|--------|----------|
+| **React/Vue component** | Dynamic, JS needed |
+| **@apply in CSS** | Static, no JS needed |
+| **Design tokens** | Reusable values |
+
+---
+
+## 11. Anti-Patterns
+
+| Don't | Do |
+|-------|-----|
+| Arbitrary values everywhere | Use design system scale |
+| `!important` | Fix specificity properly |
+| Inline `style=` | Use utilities |
+| Duplicate long class lists | Extract component |
+| Mix v3 config with v4 | Migrate fully to CSS-first |
+| Use `@apply` heavily | Prefer components |
+
+---
+
+## 12. Performance Principles
+
+| Principle | Implementation |
+|-----------|----------------|
+| **Purge unused** | Automatic in v4 |
+| **Avoid dynamism** | No template string classes |
+| **Use Oxide** | Default in v4, 10x faster |
+| **Cache builds** | CI/CD caching |
+
+---
+
+> **Remember:** Tailwind v4 is CSS-first. Embrace CSS variables, container queries, and native features. The config file is now optional.

package/src/adapters/antigravity.js

@@ -0,0 +1,164 @@
+import path from 'node:path';
+import {
+  ensureDir,
+  writeFileAtomic,
+  readFileContent,
+  removeFile,
+  fileExists,
+  listDir,
+  copyDir,
+  removeDir,
+  isDirectory,
+} from '../utils/fs.js';
+import { getSkillsDir } from '../core/manifest.js';
+
+const MARKER_PREFIX = '<!-- skill-pool:';
+const MARKER_SUFFIX = ' -->';
+const MARKER_FILE = '.skill-pool-marker';
+
+function makeMarker(packName, version) {
+  return `${MARKER_PREFIX}${packName}:${version}${MARKER_SUFFIX}`;
+}
+
+function parseMarker(line) {
+  if (!line.startsWith(MARKER_PREFIX)) return null;
+  const inner = line.slice(MARKER_PREFIX.length, line.indexOf(MARKER_SUFFIX));
+  const [pack, version] = inner.split(':');
+  return { pack, version };
+}
+
+function contentHasMarker(content, packName) {
+  const firstLine = content.split('\n')[0];
+  const parsed = parseMarker(firstLine);
+  return parsed && parsed.pack === packName;
+}
+
+export async function detect(projectDir) {
+  return fileExists(path.join(projectDir, '.agent'));
+}
+
+export async function install(manifest, projectDir) {
+  const installed = [];
+  const skillsDir = getSkillsDir();
+  const marker = makeMarker(manifest.name, manifest.version);
+
+  // Rules -> .agent/rules/<pack>-<name>.md
+  for (const rulePath of manifest.rules) {
+    const srcPath = path.join(skillsDir, manifest.name, rulePath);
+    const content = await readFileContent(srcPath);
+    const basename = path.basename(rulePath, path.extname(rulePath));
+    const rulesDir = path.join(projectDir, '.agent', 'rules');
+    await ensureDir(rulesDir);
+    const destPath = path.join(rulesDir, `${manifest.name}-${basename}.md`);
+    await writeFileAtomic(destPath, `${marker}\n\n${content}`);
+    installed.push(destPath);
+  }
+
+  // Skills -> .agent/skills/<pack>-<name>/
+  for (const skillPath of manifest.skills) {
+    const srcPath = path.join(skillsDir, manifest.name, skillPath);
+    const basename = path.basename(skillPath, path.extname(skillPath));
+    const destDir = path.join(projectDir, '.agent', 'skills', `${manifest.name}-${basename}`);
+
+    if (await isDirectory(srcPath)) {
+      await copyDir(srcPath, destDir);
+      await writeFileAtomic(path.join(destDir, MARKER_FILE), marker);
+      installed.push(destDir);
+    } else {
+      await ensureDir(destDir);
+      const content = await readFileContent(srcPath);
+      await writeFileAtomic(path.join(destDir, 'SKILL.md'), `${marker}\n\n${content}`);
+      await writeFileAtomic(path.join(destDir, MARKER_FILE), marker);
+      installed.push(destDir);
+    }
+  }
+
+  // Agents -> .agent/agents/<pack>-<name>.md
+  for (const agentPath of manifest.agents) {
+    const srcPath = path.join(skillsDir, manifest.name, agentPath);
+    const content = await readFileContent(srcPath);
+    const basename = path.basename(agentPath, path.extname(agentPath));
+    const agentsDir = path.join(projectDir, '.agent', 'agents');
+    await ensureDir(agentsDir);
+    const destPath = path.join(agentsDir, `${manifest.name}-${basename}.md`);
+    await writeFileAtomic(destPath, `${marker}\n\n${content}`);
+    installed.push(destPath);
+  }
+
+  return installed;
+}
+
+export async function remove(packName, projectDir) {
+  const removed = [];
+
+  // Remove rules
+  await removeMarkedFiles(path.join(projectDir, '.agent', 'rules'), packName, removed);
+
+  // Remove agents
+  await removeMarkedFiles(path.join(projectDir, '.agent', 'agents'), packName, removed);
+
+  // Remove skills
+  const skillsBase = path.join(projectDir, '.agent', 'skills');
+  const skillDirs = await listDir(skillsBase);
+  for (const dir of skillDirs) {
+    const markerPath = path.join(skillsBase, dir, MARKER_FILE);
+    if (await fileExists(markerPath)) {
+      const content = await readFileContent(markerPath);
+      if (contentHasMarker(content, packName)) {
+        await removeDir(path.join(skillsBase, dir));
+        removed.push(path.join(skillsBase, dir));
+      }
+    }
+  }
+
+  return removed;
+}
+
+async function removeMarkedFiles(dirPath, packName, removed) {
+  const files = await listDir(dirPath);
+  for (const file of files) {
+    const filePath = path.join(dirPath, file);
+    if (await isDirectory(filePath)) continue;
+    const content = await readFileContent(filePath);
+    if (contentHasMarker(content, packName)) {
+      await removeFile(filePath);
+      removed.push(filePath);
+    }
+  }
+}
+
+export async function list(projectDir) {
+  const results = [];
+
+  // List rules
+  await listMarkedFiles(path.join(projectDir, '.agent', 'rules'), 'rule', results);
+
+  // List agents
+  await listMarkedFiles(path.join(projectDir, '.agent', 'agents'), 'agent', results);
+
+  // List skills
+  const skillsBase = path.join(projectDir, '.agent', 'skills');
+  const skillDirs = await listDir(skillsBase);
+  for (const dir of skillDirs) {
+    const markerPath = path.join(skillsBase, dir, MARKER_FILE);
+    if (await fileExists(markerPath)) {
+      const content = await readFileContent(markerPath);
+      const parsed = parseMarker(content);
+      if (parsed) results.push({ ...parsed, file: dir, type: 'skill' });
+    }
+  }
+
+  return results;
+}
+
+async function listMarkedFiles(dirPath, type, results) {
+  const files = await listDir(dirPath);
+  for (const file of files) {
+    const filePath = path.join(dirPath, file);
+    if (await isDirectory(filePath)) continue;
+    const content = await readFileContent(filePath);
+    const firstLine = content.split('\n')[0];
+    const parsed = parseMarker(firstLine);
+    if (parsed) results.push({ ...parsed, file, type });
+  }
+}

package/src/adapters/claude.js

@@ -0,0 +1,188 @@
+import path from 'node:path';
+import {
+  ensureDir,
+  writeFileAtomic,
+  readFileContent,
+  removeFile,
+  fileExists,
+  listDir,
+  copyDir,
+  removeDir,
+  isDirectory,
+} from '../utils/fs.js';
+import { getSkillsDir } from '../core/manifest.js';
+
+const MARKER_PREFIX = '<!-- skill-pool:';
+const MARKER_SUFFIX = ' -->';
+const MARKER_FILE = '.skill-pool-marker';
+
+function makeMarker(packName, version) {
+  return `${MARKER_PREFIX}${packName}:${version}${MARKER_SUFFIX}`;
+}
+
+function parseMarker(line) {
+  if (!line.startsWith(MARKER_PREFIX)) return null;
+  const inner = line.slice(MARKER_PREFIX.length, line.indexOf(MARKER_SUFFIX));
+  const [pack, version] = inner.split(':');
+  return { pack, version };
+}
+
+function contentHasMarker(content, packName) {
+  const firstLine = content.split('\n')[0];
+  const parsed = parseMarker(firstLine);
+  return parsed && parsed.pack === packName;
+}
+
+export async function detect(projectDir) {
+  return fileExists(path.join(projectDir, '.claude'));
+}
+
+export async function install(manifest, projectDir) {
+  const installed = [];
+  const skillsDir = getSkillsDir();
+  const marker = makeMarker(manifest.name, manifest.version);
+
+  // Install rules -> .claude/rules/<pack>-<name>.md
+  for (const rulePath of manifest.rules) {
+    const srcPath = path.join(skillsDir, manifest.name, rulePath);
+    const content = await readFileContent(srcPath);
+    const basename = path.basename(rulePath, path.extname(rulePath));
+    const rulesDir = path.join(projectDir, '.claude', 'rules');
+    await ensureDir(rulesDir);
+    const destPath = path.join(rulesDir, `${manifest.name}-${basename}.md`);
+    await writeFileAtomic(destPath, `${marker}\n\n${content}`);
+    installed.push(destPath);
+  }
+
+  // Install skills -> .claude/skills/<pack>-<name>/
+  for (const skillPath of manifest.skills) {
+    const srcPath = path.join(skillsDir, manifest.name, skillPath);
+    const basename = path.basename(skillPath, path.extname(skillPath));
+    const destDir = path.join(projectDir, '.claude', 'skills', `${manifest.name}-${basename}`);
+
+    if (await isDirectory(srcPath)) {
+      // Multi-file skill: copy entire directory
+      await copyDir(srcPath, destDir);
+      // Add marker file
+      await writeFileAtomic(path.join(destDir, MARKER_FILE), marker);
+      installed.push(destDir);
+    } else {
+      // Single-file skill: wrap in directory as SKILL.md
+      await ensureDir(destDir);
+      const content = await readFileContent(srcPath);
+      const destPath = path.join(destDir, 'SKILL.md');
+      await writeFileAtomic(destPath, `${marker}\n\n${content}`);
+      await writeFileAtomic(path.join(destDir, MARKER_FILE), marker);
+      installed.push(destPath);
+    }
+  }
+
+  // Install agents -> .claude/agents/<pack>-<name>.md
+  for (const agentPath of manifest.agents) {
+    const srcPath = path.join(skillsDir, manifest.name, agentPath);
+    const content = await readFileContent(srcPath);
+    const basename = path.basename(agentPath, path.extname(agentPath));
+    const agentsDir = path.join(projectDir, '.claude', 'agents');
+    await ensureDir(agentsDir);
+    const destPath = path.join(agentsDir, `${manifest.name}-${basename}.md`);
+    await writeFileAtomic(destPath, `${marker}\n\n${content}`);
+    installed.push(destPath);
+  }
+
+  return installed;
+}
+
+export async function remove(packName, projectDir) {
+  const removed = [];
+
+  // Remove rules
+  await removeMarkedFiles(path.join(projectDir, '.claude', 'rules'), packName, removed);
+
+  // Remove agents
+  await removeMarkedFiles(path.join(projectDir, '.claude', 'agents'), packName, removed);
+
+  // Remove skills (directories with marker files)
+  const skillsBase = path.join(projectDir, '.claude', 'skills');
+  const skillDirs = await listDir(skillsBase);
+  for (const dir of skillDirs) {
+    const markerPath = path.join(skillsBase, dir, MARKER_FILE);
+    if (await fileExists(markerPath)) {
+      const markerContent = await readFileContent(markerPath);
+      if (contentHasMarker(markerContent, packName)) {
+        await removeDir(path.join(skillsBase, dir));
+        removed.push(path.join(skillsBase, dir));
+      }
+    }
+    // Fallback: check SKILL.md marker for old format
+    const skillFile = path.join(skillsBase, dir, 'SKILL.md');
+    if (await fileExists(skillFile) && !(await fileExists(markerPath))) {
+      const content = await readFileContent(skillFile);
+      if (contentHasMarker(content, packName)) {
+        await removeDir(path.join(skillsBase, dir));
+        removed.push(path.join(skillsBase, dir));
+      }
+    }
+  }
+
+  return removed;
+}
+
+async function removeMarkedFiles(dirPath, packName, removed) {
+  const files = await listDir(dirPath);
+  for (const file of files) {
+    const filePath = path.join(dirPath, file);
+    if (await isDirectory(filePath)) continue;
+    const content = await readFileContent(filePath);
+    if (contentHasMarker(content, packName)) {
+      await removeFile(filePath);
+      removed.push(filePath);
+    }
+  }
+}
+
+export async function list(projectDir) {
+  const results = [];
+
+  // List from rules
+  await listMarkedFiles(path.join(projectDir, '.claude', 'rules'), 'rule', results);
+
+  // List from agents
+  await listMarkedFiles(path.join(projectDir, '.claude', 'agents'), 'agent', results);
+
+  // List from skills
+  const skillsBase = path.join(projectDir, '.claude', 'skills');
+  const skillDirs = await listDir(skillsBase);
+  for (const dir of skillDirs) {
+    const markerPath = path.join(skillsBase, dir, MARKER_FILE);
+    const skillFile = path.join(skillsBase, dir, 'SKILL.md');
+
+    let parsed = null;
+    if (await fileExists(markerPath)) {
+      const content = await readFileContent(markerPath);
+      parsed = parseMarker(content.split('\n')[0]);
+    } else if (await fileExists(skillFile)) {
+      const content = await readFileContent(skillFile);
+      parsed = parseMarker(content.split('\n')[0]);
+    }
+
+    if (parsed) {
+      results.push({ ...parsed, file: dir, type: 'skill' });
+    }
+  }
+
+  return results;
+}
+
+async function listMarkedFiles(dirPath, type, results) {
+  const files = await listDir(dirPath);
+  for (const file of files) {
+    const filePath = path.join(dirPath, file);
+    if (await isDirectory(filePath)) continue;
+    const content = await readFileContent(filePath);
+    const firstLine = content.split('\n')[0];
+    const parsed = parseMarker(firstLine);
+    if (parsed) {
+      results.push({ ...parsed, file, type });
+    }
+  }
+}