cli-jaw 0.1.0

package/skills_ref/web-artifacts-builder/SKILL.md

@@ -0,0 +1,74 @@
+---
+name: web-artifacts-builder
+description: Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
+license: Complete terms in LICENSE.txt
+---
+
+# Web Artifacts Builder
+
+To build powerful frontend claude.ai artifacts, follow these steps:
+1. Initialize the frontend repo using `scripts/init-artifact.sh`
+2. Develop your artifact by editing the generated code
+3. Bundle all code into a single HTML file using `scripts/bundle-artifact.sh`
+4. Display artifact to user
+5. (Optional) Test the artifact
+
+**Stack**: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui
+
+## Design & Style Guidelines
+
+VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.
+
+## Quick Start
+
+### Step 1: Initialize Project
+
+Run the initialization script to create a new React project:
+```bash
+bash scripts/init-artifact.sh <project-name>
+cd <project-name>
+```
+
+This creates a fully configured project with:
+- ✅ React + TypeScript (via Vite)
+- ✅ Tailwind CSS 3.4.1 with shadcn/ui theming system
+- ✅ Path aliases (`@/`) configured
+- ✅ 40+ shadcn/ui components pre-installed
+- ✅ All Radix UI dependencies included
+- ✅ Parcel configured for bundling (via .parcelrc)
+- ✅ Node 18+ compatibility (auto-detects and pins Vite version)
+
+### Step 2: Develop Your Artifact
+
+To build the artifact, edit the generated files. See **Common Development Tasks** below for guidance.
+
+### Step 3: Bundle to Single HTML File
+
+To bundle the React app into a single HTML artifact:
+```bash
+bash scripts/bundle-artifact.sh
+```
+
+This creates `bundle.html` - a self-contained artifact with all JavaScript, CSS, and dependencies inlined. This file can be directly shared in Claude conversations as an artifact.
+
+**Requirements**: Your project must have an `index.html` in the root directory.
+
+**What the script does**:
+- Installs bundling dependencies (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)
+- Creates `.parcelrc` config with path alias support
+- Builds with Parcel (no source maps)
+- Inlines all assets into single HTML using html-inline
+
+### Step 4: Share Artifact with User
+
+Finally, share the bundled HTML file in conversation with the user so they can view it as an artifact.
+
+### Step 5: Testing/Visualizing the Artifact (Optional)
+
+Note: This is a completely optional step. Only perform if necessary or requested.
+
+To test/visualize the artifact, use available tools (including other Skills or built-in tools like Playwright or Puppeteer). In general, avoid testing the artifact upfront as it adds latency between the request and when the finished artifact can be seen. Test later, after presenting the artifact, if requested or if issues arise.
+
+## Reference
+
+- **shadcn/ui components**: https://ui.shadcn.com/docs/components

package/skills_ref/web-artifacts-builder/scripts/bundle-artifact.sh

@@ -0,0 +1,54 @@
+#!/bin/bash
+set -e
+
+echo "📦 Bundling React app to single HTML artifact..."
+
+# Check if we're in a project directory
+if [ ! -f "package.json" ]; then
+  echo "❌ Error: No package.json found. Run this script from your project root."
+  exit 1
+fi
+
+# Check if index.html exists
+if [ ! -f "index.html" ]; then
+  echo "❌ Error: No index.html found in project root."
+  echo "   This script requires an index.html entry point."
+  exit 1
+fi
+
+# Install bundling dependencies
+echo "📦 Installing bundling dependencies..."
+pnpm add -D parcel @parcel/config-default parcel-resolver-tspaths html-inline
+
+# Create Parcel config with tspaths resolver
+if [ ! -f ".parcelrc" ]; then
+  echo "🔧 Creating Parcel configuration with path alias support..."
+  cat > .parcelrc << 'EOF'
+{
+  "extends": "@parcel/config-default",
+  "resolvers": ["parcel-resolver-tspaths", "..."]
+}
+EOF
+fi
+
+# Clean previous build
+echo "🧹 Cleaning previous build..."
+rm -rf dist bundle.html
+
+# Build with Parcel
+echo "🔨 Building with Parcel..."
+pnpm exec parcel build index.html --dist-dir dist --no-source-maps
+
+# Inline everything into single HTML
+echo "🎯 Inlining all assets into single HTML file..."
+pnpm exec html-inline dist/index.html > bundle.html
+
+# Get file size
+FILE_SIZE=$(du -h bundle.html | cut -f1)
+
+echo ""
+echo "✅ Bundle complete!"
+echo "📄 Output: bundle.html ($FILE_SIZE)"
+echo ""
+echo "You can now use this single HTML file as an artifact in Claude conversations."
+echo "To test locally: open bundle.html in your browser"

package/skills_ref/web-artifacts-builder/scripts/init-artifact.sh

@@ -0,0 +1,322 @@
+#!/bin/bash
+
+# Exit on error
+set -e
+
+# Detect Node version
+NODE_VERSION=$(node -v | cut -d'v' -f2 | cut -d'.' -f1)
+
+echo "🔍 Detected Node.js version: $NODE_VERSION"
+
+if [ "$NODE_VERSION" -lt 18 ]; then
+  echo "❌ Error: Node.js 18 or higher is required"
+  echo "   Current version: $(node -v)"
+  exit 1
+fi
+
+# Set Vite version based on Node version
+if [ "$NODE_VERSION" -ge 20 ]; then
+  VITE_VERSION="latest"
+  echo "✅ Using Vite latest (Node 20+)"
+else
+  VITE_VERSION="5.4.11"
+  echo "✅ Using Vite $VITE_VERSION (Node 18 compatible)"
+fi
+
+# Detect OS and set sed syntax
+if [[ "$OSTYPE" == "darwin"* ]]; then
+  SED_INPLACE="sed -i ''"
+else
+  SED_INPLACE="sed -i"
+fi
+
+# Check if pnpm is installed
+if ! command -v pnpm &> /dev/null; then
+  echo "📦 pnpm not found. Installing pnpm..."
+  npm install -g pnpm
+fi
+
+# Check if project name is provided
+if [ -z "$1" ]; then
+  echo "❌ Usage: ./create-react-shadcn-complete.sh <project-name>"
+  exit 1
+fi
+
+PROJECT_NAME="$1"
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+COMPONENTS_TARBALL="$SCRIPT_DIR/shadcn-components.tar.gz"
+
+# Check if components tarball exists
+if [ ! -f "$COMPONENTS_TARBALL" ]; then
+  echo "❌ Error: shadcn-components.tar.gz not found in script directory"
+  echo "   Expected location: $COMPONENTS_TARBALL"
+  exit 1
+fi
+
+echo "🚀 Creating new React + Vite project: $PROJECT_NAME"
+
+# Create new Vite project (always use latest create-vite, pin vite version later)
+pnpm create vite "$PROJECT_NAME" --template react-ts
+
+# Navigate into project directory
+cd "$PROJECT_NAME"
+
+echo "🧹 Cleaning up Vite template..."
+$SED_INPLACE '/<link rel="icon".*vite\.svg/d' index.html
+$SED_INPLACE 's/<title>.*<\/title>/<title>'"$PROJECT_NAME"'<\/title>/' index.html
+
+echo "📦 Installing base dependencies..."
+pnpm install
+
+# Pin Vite version for Node 18
+if [ "$NODE_VERSION" -lt 20 ]; then
+  echo "📌 Pinning Vite to $VITE_VERSION for Node 18 compatibility..."
+  pnpm add -D vite@$VITE_VERSION
+fi
+
+echo "📦 Installing Tailwind CSS and dependencies..."
+pnpm install -D tailwindcss@3.4.1 postcss autoprefixer @types/node tailwindcss-animate
+pnpm install class-variance-authority clsx tailwind-merge lucide-react next-themes
+
+echo "⚙️  Creating Tailwind and PostCSS configuration..."
+cat > postcss.config.js << 'EOF'
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+EOF
+
+echo "📝 Configuring Tailwind with shadcn theme..."
+cat > tailwind.config.js << 'EOF'
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}
+EOF
+
+# Add Tailwind directives and CSS variables to index.css
+echo "🎨 Adding Tailwind directives and CSS variables..."
+cat > src/index.css << 'EOF'
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+EOF
+
+# Add path aliases to tsconfig.json
+echo "🔧 Adding path aliases to tsconfig.json..."
+node -e "
+const fs = require('fs');
+const config = JSON.parse(fs.readFileSync('tsconfig.json', 'utf8'));
+config.compilerOptions = config.compilerOptions || {};
+config.compilerOptions.baseUrl = '.';
+config.compilerOptions.paths = { '@/*': ['./src/*'] };
+fs.writeFileSync('tsconfig.json', JSON.stringify(config, null, 2));
+"
+
+# Add path aliases to tsconfig.app.json
+echo "🔧 Adding path aliases to tsconfig.app.json..."
+node -e "
+const fs = require('fs');
+const path = 'tsconfig.app.json';
+const content = fs.readFileSync(path, 'utf8');
+// Remove comments manually
+const lines = content.split('\n').filter(line => !line.trim().startsWith('//'));
+const jsonContent = lines.join('\n');
+const config = JSON.parse(jsonContent.replace(/\/\*[\s\S]*?\*\//g, '').replace(/,(\s*[}\]])/g, '\$1'));
+config.compilerOptions = config.compilerOptions || {};
+config.compilerOptions.baseUrl = '.';
+config.compilerOptions.paths = { '@/*': ['./src/*'] };
+fs.writeFileSync(path, JSON.stringify(config, null, 2));
+"
+
+# Update vite.config.ts
+echo "⚙️  Updating Vite configuration..."
+cat > vite.config.ts << 'EOF'
+import path from "path";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});
+EOF
+
+# Install all shadcn/ui dependencies
+echo "📦 Installing shadcn/ui dependencies..."
+pnpm install @radix-ui/react-accordion @radix-ui/react-aspect-ratio @radix-ui/react-avatar @radix-ui/react-checkbox @radix-ui/react-collapsible @radix-ui/react-context-menu @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-hover-card @radix-ui/react-label @radix-ui/react-menubar @radix-ui/react-navigation-menu @radix-ui/react-popover @radix-ui/react-progress @radix-ui/react-radio-group @radix-ui/react-scroll-area @radix-ui/react-select @radix-ui/react-separator @radix-ui/react-slider @radix-ui/react-slot @radix-ui/react-switch @radix-ui/react-tabs @radix-ui/react-toast @radix-ui/react-toggle @radix-ui/react-toggle-group @radix-ui/react-tooltip
+pnpm install sonner cmdk vaul embla-carousel-react react-day-picker react-resizable-panels date-fns react-hook-form @hookform/resolvers zod
+
+# Extract shadcn components from tarball
+echo "📦 Extracting shadcn/ui components..."
+tar -xzf "$COMPONENTS_TARBALL" -C src/
+
+# Create components.json for reference
+echo "📝 Creating components.json config..."
+cat > components.json << 'EOF'
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}
+EOF
+
+echo "✅ Setup complete! You can now use Tailwind CSS and shadcn/ui in your project."
+echo ""
+echo "📦 Included components (40+ total):"
+echo "  - accordion, alert, aspect-ratio, avatar, badge, breadcrumb"
+echo "  - button, calendar, card, carousel, checkbox, collapsible"
+echo "  - command, context-menu, dialog, drawer, dropdown-menu"
+echo "  - form, hover-card, input, label, menubar, navigation-menu"
+echo "  - popover, progress, radio-group, resizable, scroll-area"
+echo "  - select, separator, sheet, skeleton, slider, sonner"
+echo "  - switch, table, tabs, textarea, toast, toggle, toggle-group, tooltip"
+echo ""
+echo "To start developing:"
+echo "  cd $PROJECT_NAME"
+echo "  pnpm dev"
+echo ""
+echo "📚 Import components like:"
+echo "  import { Button } from '@/components/ui/button'"
+echo "  import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'"
+echo "  import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'"

package/skills_ref/web-perf/SKILL.md

@@ -0,0 +1,193 @@
+---
+name: web-perf
+description: Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (FCP, LCP, TBT, CLS, Speed Index), identifies render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps. Use when asked to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed.
+---
+
+# Web Performance Audit
+
+Audit web page performance using Chrome DevTools MCP tools. This skill focuses on Core Web Vitals, network optimization, and high-level accessibility gaps.
+
+## FIRST: Verify MCP Tools Available
+
+**Run this before starting.** Try calling `navigate_page` or `performance_start_trace`. If unavailable, STOP—the chrome-devtools MCP server isn't configured.
+
+Ask the user to add this to their MCP config:
+
+```json
+"chrome-devtools": {
+  "type": "local",
+  "command": ["npx", "-y", "chrome-devtools-mcp@latest"]
+}
+```
+
+## Key Guidelines
+
+- **Be assertive**: Verify claims by checking network requests, DOM, or codebase—then state findings definitively.
+- **Verify before recommending**: Confirm something is unused before suggesting removal.
+- **Quantify impact**: Use estimated savings from insights. Don't prioritize changes with 0ms impact.
+- **Skip non-issues**: If render-blocking resources have 0ms estimated impact, note but don't recommend action.
+- **Be specific**: Say "compress hero.png (450KB) to WebP" not "optimize images".
+- **Prioritize ruthlessly**: A site with 200ms LCP and 0 CLS is already excellent—say so.
+
+## Quick Reference
+
+| Task | Tool Call |
+|------|-----------|
+| Load page | `navigate_page(url: "...")` |
+| Start trace | `performance_start_trace(autoStop: true, reload: true)` |
+| Analyze insight | `performance_analyze_insight(insightSetId: "...", insightName: "...")` |
+| List requests | `list_network_requests(resourceTypes: ["Script", "Stylesheet", ...])` |
+| Request details | `get_network_request(reqid: <id>)` |
+| A11y snapshot | `take_snapshot(verbose: true)` |
+
+## Workflow
+
+Copy this checklist to track progress:
+
+```
+Audit Progress:
+- [ ] Phase 1: Performance trace (navigate + record)
+- [ ] Phase 2: Core Web Vitals analysis (includes CLS culprits)
+- [ ] Phase 3: Network analysis
+- [ ] Phase 4: Accessibility snapshot
+- [ ] Phase 5: Codebase analysis (skip if third-party site)
+```
+
+### Phase 1: Performance Trace
+
+1. Navigate to the target URL:
+   ```
+   navigate_page(url: "<target-url>")
+   ```
+
+2. Start a performance trace with reload to capture cold-load metrics:
+   ```
+   performance_start_trace(autoStop: true, reload: true)
+   ```
+
+3. Wait for trace completion, then retrieve results.
+
+**Troubleshooting:**
+- If trace returns empty or fails, verify the page loaded correctly with `navigate_page` first
+- If insight names don't match, inspect the trace response to list available insights
+
+### Phase 2: Core Web Vitals Analysis
+
+Use `performance_analyze_insight` to extract key metrics.
+
+**Note:** Insight names may vary across Chrome DevTools versions. If an insight name doesn't work, check the `insightSetId` from the trace response to discover available insights.
+
+Common insight names:
+
+| Metric | Insight Name | What to Look For |
+|--------|--------------|------------------|
+| LCP | `LCPBreakdown` | Time to largest contentful paint; breakdown of TTFB, resource load, render delay |
+| CLS | `CLSCulprits` | Elements causing layout shifts (images without dimensions, injected content, font swaps) |
+| Render Blocking | `RenderBlocking` | CSS/JS blocking first paint |
+| Document Latency | `DocumentLatency` | Server response time issues |
+| Network Dependencies | `NetworkRequestsDepGraph` | Request chains delaying critical resources |
+
+Example:
+```
+performance_analyze_insight(insightSetId: "<id-from-trace>", insightName: "LCPBreakdown")
+```
+
+**Key thresholds (good/needs-improvement/poor):**
+- TTFB: < 800ms / < 1.8s / > 1.8s
+- FCP: < 1.8s / < 3s / > 3s
+- LCP: < 2.5s / < 4s / > 4s
+- INP: < 200ms / < 500ms / > 500ms
+- TBT: < 200ms / < 600ms / > 600ms
+- CLS: < 0.1 / < 0.25 / > 0.25
+- Speed Index: < 3.4s / < 5.8s / > 5.8s
+
+### Phase 3: Network Analysis
+
+List all network requests to identify optimization opportunities:
+```
+list_network_requests(resourceTypes: ["Script", "Stylesheet", "Document", "Font", "Image"])
+```
+
+**Look for:**
+
+1. **Render-blocking resources**: JS/CSS in `<head>` without `async`/`defer`/`media` attributes
+2. **Network chains**: Resources discovered late because they depend on other resources loading first (e.g., CSS imports, JS-loaded fonts)
+3. **Missing preloads**: Critical resources (fonts, hero images, key scripts) not preloaded
+4. **Caching issues**: Missing or weak `Cache-Control`, `ETag`, or `Last-Modified` headers
+5. **Large payloads**: Uncompressed or oversized JS/CSS bundles
+6. **Unused preconnects**: If flagged, verify by checking if ANY requests went to that origin. If zero requests, it's definitively unused—recommend removal. If requests exist but loaded late, the preconnect may still be valuable.
+
+For detailed request info:
+```
+get_network_request(reqid: <id>)
+```
+
+### Phase 4: Accessibility Snapshot
+
+Take an accessibility tree snapshot:
+```
+take_snapshot(verbose: true)
+```
+
+**Flag high-level gaps:**
+- Missing or duplicate ARIA IDs
+- Elements with poor contrast ratios (check against WCAG AA: 4.5:1 for normal text, 3:1 for large text)
+- Focus traps or missing focus indicators
+- Interactive elements without accessible names
+
+## Phase 5: Codebase Analysis
+
+**Skip if auditing a third-party site without codebase access.**
+
+Analyze the codebase to understand where improvements can be made.
+
+### Detect Framework & Bundler
+
+Search for configuration files to identify the stack:
+
+| Tool | Config Files |
+|------|--------------|
+| Webpack | `webpack.config.js`, `webpack.*.js` |
+| Vite | `vite.config.js`, `vite.config.ts` |
+| Rollup | `rollup.config.js`, `rollup.config.mjs` |
+| esbuild | `esbuild.config.js`, build scripts with `esbuild` |
+| Parcel | `.parcelrc`, `package.json` (parcel field) |
+| Next.js | `next.config.js`, `next.config.mjs` |
+| Nuxt | `nuxt.config.js`, `nuxt.config.ts` |
+| SvelteKit | `svelte.config.js` |
+| Astro | `astro.config.mjs` |
+
+Also check `package.json` for framework dependencies and build scripts.
+
+### Tree-Shaking & Dead Code
+
+- **Webpack**: Check for `mode: 'production'`, `sideEffects` in package.json, `usedExports` optimization
+- **Vite/Rollup**: Tree-shaking enabled by default; check for `treeshake` options
+- **Look for**: Barrel files (`index.js` re-exports), large utility libraries imported wholesale (lodash, moment)
+
+### Unused JS/CSS
+
+- Check for CSS-in-JS vs. static CSS extraction
+- Look for PurgeCSS/UnCSS configuration (Tailwind's `content` config)
+- Identify dynamic imports vs. eager loading
+
+### Polyfills
+
+- Check for `@babel/preset-env` targets and `useBuiltIns` setting
+- Look for `core-js` imports (often oversized)
+- Check `browserslist` config for overly broad targeting
+
+### Compression & Minification
+
+- Check for `terser`, `esbuild`, or `swc` minification
+- Look for gzip/brotli compression in build output or server config
+- Check for source maps in production builds (should be external or disabled)
+
+## Output Format
+
+Present findings as:
+
+1. **Core Web Vitals Summary** - Table with metric, value, and rating (good/needs-improvement/poor)
+2. **Top Issues** - Prioritized list of problems with estimated impact (high/medium/low)
+3. **Recommendations** - Specific, actionable fixes with code snippets or config changes
+4. **Codebase Findings** - Framework/bundler detected, optimization opportunities (omit if no codebase access)

package/skills_ref/web-routing/SKILL.md

@@ -0,0 +1,26 @@
+---
+name: web-routing
+description: 브라우저 관련 요청을 browser/webapp-testing으로 단순 분기하는 가이드 스킬.
+---
+
+# Web Routing
+
+브라우저 계열 요청을 아래 규칙으로 분기합니다.
+
+## Routing Rules
+
+1. 일반 웹 탐색/조작/폼 입력/스크린샷/게시글 작성
+- `browser` 사용
+
+2. 로컬 웹앱 E2E/회귀/테스트 자동화
+- `webapp-testing` 사용
+
+3. `playwright`라는 이름으로 들어온 요청
+- 독립 스킬로 취급하지 않고 `browser`로 매핑
+- 단, 테스트 목적이 명확하면 `webapp-testing` 사용
+
+## Fast Decision
+
+- 테스트 관련 키워드(`e2e`, `regression`, `smoke`, `test`)가 있으면: `webapp-testing`
+- 없으면: `browser`
+