srcdev-nuxt-components 9.2.3 → 9.2.4

package/.claude/skills/components/input-copy.md

@@ -0,0 +1,169 @@
+# InputCopy Component
+
+## Overview
+
+`InputCopy` renders a readonly text input with a copy-to-clipboard button. Displays a copyable value (e.g., license key, API token) with optional description text below. Shows visual feedback ("Copied!") in the button after a successful copy. Emits `copy` and `copied` events for consumer-side toast/feedback handling.
+
+---
+
+## Props reference
+
+> **Hyphenation rule**: Vue's ESLint config enforces `vue/attribute-hyphenation`. Always write camelCase prop names hyphenated in templates: `:style-class-passthrough`.
+
+| Prop (template form)       | Type                   | Default          | Notes                                                        |
+| -------------------------- | ---------------------- | ---------------- | ------------------------------------------------------------ |
+| `:value`                   | `string`               | (required)       | The text to copy to clipboard (e.g., license key, API token).|
+| `:label`                   | `string`               | (optional)       | Short label for the field; used in aria-label if ariaLabel not set. |
+| `:aria-label`              | `string`               | (optional)       | Custom aria-label for the input; overrides label.           |
+| `:description`             | `string`               | (optional)       | Helper text displayed below the input.                       |
+| `:button-text`             | `string`               | `"Copy"`         | Label on the copy button.                                    |
+| `:copied-text`             | `string`               | `"Copied!"`      | Text shown in button after copy succeeds.                    |
+| `:copied-duration`         | `number`               | `2000`           | Milliseconds the "Copied!" state persists before resetting.  |
+| `:is-disabled`             | `boolean`              | `false`          | Disables the copy button.                                    |
+| `:style-class-passthrough` | `string \| string[]`   | `[]`             | Extra CSS classes applied to the root element.              |
+
+---
+
+## Events
+
+| Event    | Payload              | Notes                                                      |
+| -------- | -------------------- | ---------------------------------------------------------- |
+| `copy`   | `value: string`      | Emitted when the copy button is clicked (before clipboard write). |
+| `copied` | `value: string`      | Emitted after successful clipboard write; fires after `copy`. |
+
+---
+
+## Slots
+
+None. Use events to customize feedback behavior.
+
+---
+
+## CSS Token Customization
+
+All `--input-copy-*` tokens can be overridden at global, page, or instance scope. See `CONSUMER-STYLING.md` in the component directory for full token documentation and examples.
+
+**Common tokens:**
+- `--input-copy-input-bg` — input field background
+- `--input-copy-input-border` — input field border
+- `--input-copy-button-bg` — copy button background
+- `--input-copy-button-bg-hover` — button background on hover
+- `--input-copy-description-color` — description text color
+
+---
+
+## Usage Examples
+
+### License key display (most common)
+
+```vue
+<InputCopy
+  :value="licenseKey"
+  label="License key"
+  description="Your license key is ready to use. Copy it to embed in your application."
+  @copied="showSuccessToast('License key copied!')"
+/>
+```
+
+### API token with custom button text
+
+```vue
+<InputCopy
+  :value="apiToken"
+  label="API token"
+  description="Do not share this token with anyone."
+  button-text="Copy token"
+  copied-text="Token copied!"
+  @copy="logCopy"
+  @copied="logCopied"
+/>
+```
+
+### Disabled state (e.g., loading or error)
+
+```vue
+<InputCopy
+  :value="temporaryCode"
+  label="Temporary code"
+  button-text="Unavailable"
+  :is-disabled="isGenerating"
+  description="Code is being generated. Please wait."
+/>
+```
+
+### With custom styling via CSS tokens
+
+```vue
+<InputCopy
+  :value="shareLink"
+  label="Share link"
+  description="Share this link with others"
+  style="
+    --input-copy-input-bg: #f0f0f0;
+    --input-copy-button-bg: var(--brand-primary);
+    --input-copy-button-text-color: white;
+  "
+/>
+```
+
+### With page-scoped styling
+
+In your page's `<style>` block:
+
+```css
+.success-page .input-copy {
+  --input-copy-input-border: 2px solid var(--success-color);
+  --input-copy-button-bg: var(--success-color);
+  --input-copy-description-color: var(--slate-06);
+}
+```
+
+Then in the template:
+
+```vue
+<div class="success-page">
+  <InputCopy
+    :value="licenseKey"
+    label="Your license key"
+    description="Copy this key to activate the component in your application."
+  />
+</div>
+```
+
+### With toast feedback (consumer-side)
+
+```vue
+<template>
+  <InputCopy
+    :value="apiKey"
+    label="API key"
+    @copied="handleCopied"
+  />
+</template>
+
+<script setup>
+const handleCopied = (value: string) => {
+  // Use your app's toast library
+  useToast().success(`Copied: ${value.slice(0, 8)}...`);
+};
+</script>
+```
+
+---
+
+## Accessibility
+
+- Input always has `aria-label` set from `label` or `aria-label` prop
+- Button has descriptive aria-label: "Copy [label] to clipboard"
+- Button is disabled during the "Copied!" feedback window to prevent repeated clicks
+- Icon-only display on mobile (<480px); text shown on desktop for clarity
+- Readonly input has `readonly` attribute; not editable
+
+---
+
+## Notes
+
+- **Clipboard API**: Uses native `navigator.clipboard.writeText()`. Fails silently if unavailable (e.g., insecure context).
+- **Button text hide on mobile**: By default, only the copy icon displays on screens <480px. Text appears on desktop (≥480px).
+- **No toast built-in**: This component does not show toasts. Listen to `@copied` event and use your app's toast library for feedback.
+- **Manual reset**: The "Copied!" state automatically resets after `copied-duration` milliseconds. No manual reset needed.

package/.claude/skills/components/pricing-card.md

@@ -0,0 +1,163 @@
+# PricingCard Component
+
+## Overview
+
+`PricingCard` renders a SaaS-style pricing plan card with plan name, price, description, feature list, and call-to-action button. Supports "Most Popular" highlight state with optional badge. Features are highly customizable via CSS token overrides, and the CTA button can be customized via the `#cta` slot for custom variants and themes.
+
+---
+
+## Props reference
+
+> **Hyphenation rule**: Vue's ESLint config enforces `vue/attribute-hyphenation`. Always write camelCase prop names hyphenated in templates: `:style-class-passthrough`.
+
+| Prop (template form)       | Type                          | Default      | Notes                                                              |
+| -------------------------- | ----------------------------- | ------------ | ------------------------------------------------------------------ |
+| `tag`                      | `"div" \| "section" \| "article"` | `"article"` | Root element tag for semantic HTML.                               |
+| `:plan-name`               | `string`                      | (required)   | Plan/tier name (e.g., "Basic", "Professional", "Enterprise").     |
+| `:price`                   | `number`                      | (required)   | Price amount (e.g., `99`, `4.99`). Currency symbol added in template. |
+| `:billing-period`          | `string`                      | `"one-time"` | Billing frequency text (e.g., "monthly", "yearly").              |
+| `:description`             | `string`                      | (optional)   | Short plan description.                                            |
+| `:features`                | `string[]`                    | `[]`         | Array of feature strings. Rendered with checkmark icons.          |
+| `:is-highlighted`          | `boolean`                     | `false`      | Highlight state; applies "Most Popular" badge, border, shadow, and scale. |
+| `:cta-text`                | `string`                      | `"Get started"` | Button label text.                                              |
+| `:cta-disabled`            | `boolean`                     | `false`      | Disables the CTA button.                                          |
+| `:style-class-passthrough` | `string \| string[]`          | `[]`         | Extra CSS classes applied to the card root.                       |
+
+---
+
+## Events
+
+| Event  | Payload    | Notes                                    |
+| ------ | ---------- | ---------------------------------------- |
+| `select` | `planName: string` | Emitted when the CTA button is clicked. |
+
+---
+
+## Slots
+
+### Default slot (features)
+
+Override the default feature list rendering. Receives no slot scope.
+
+```vue
+<PricingCard plan-name="Pro" :price="99">
+  <template #features>
+    <li>Custom feature HTML here</li>
+  </template>
+</PricingCard>
+```
+
+### #cta slot
+
+Customize the CTA button. Default renders `InputButtonCore` with theme support.
+
+**Slot scope:**
+- `ctaText: string` — button label from `:cta-text` prop
+- `isDisabled: boolean` — button disabled state from `:cta-disabled` prop
+- `planName: string` — plan name for context
+- `onSelect: () => void` — callback to trigger `select` event
+
+```vue
+<PricingCard plan-name="Pro" :price="99" @select="handleSelect">
+  <template #cta="{ ctaText, isDisabled, onSelect }">
+    <InputButtonCore
+      :button-text="ctaText"
+      variant="secondary"
+      theme="custom"
+      :readonly="isDisabled"
+      @click="onSelect"
+    />
+  </template>
+</PricingCard>
+```
+
+---
+
+## CSS Token Customization
+
+All `--pricing-card-*` tokens can be overridden at global, page, or instance scope. See `CONSUMER-STYLING.md` in the component directory for full token documentation and examples.
+
+**Common tokens:**
+- `--pricing-card-padding` — card internal spacing
+- `--pricing-card-border-radius` — card corners
+- `--pricing-card-cta-bg` — button background
+- `--pricing-card-highlight-border` — highlighted card border
+- `--pricing-card-name-color` — plan name text color
+
+---
+
+## Usage Examples
+
+### Single card with default button
+
+```vue
+<PricingCard
+  plan-name="Basic"
+  :price="29.99"
+  billing-period="monthly"
+  description="Perfect for getting started"
+  :features="['Feature 1', 'Feature 2', 'Feature 3']"
+  cta-text="Get started"
+  @select="handleSelect"
+/>
+```
+
+### Highlighted "Most Popular" card
+
+```vue
+<PricingCard
+  plan-name="Professional"
+  :price="79.99"
+  billing-period="monthly"
+  :is-highlighted="true"
+  :features="['All Basic features', 'Priority support', 'Advanced analytics']"
+  @select="handleSelect"
+/>
+```
+
+### Card with custom button variant
+
+```vue
+<PricingCard
+  plan-name="Enterprise"
+  :price="199.99"
+  billing-period="monthly"
+  description="Everything you need"
+  :features="['Unlimited access', 'Dedicated support', 'Custom integrations']"
+  @select="handleSelect"
+>
+  <template #cta="{ ctaText, isDisabled, onSelect }">
+    <InputButtonCore
+      :button-text="ctaText"
+      variant="primary"
+      :readonly="isDisabled"
+      @click="onSelect"
+    />
+  </template>
+</PricingCard>
+```
+
+### Three-column grid with token customization
+
+```vue
+<div class="pricing-grid">
+  <PricingCard
+    v-for="plan in plans"
+    :key="plan.id"
+    :plan-name="plan.name"
+    :price="plan.price"
+    :is-highlighted="plan.id === 'pro'"
+    :features="plan.features"
+    @select="handleSelect"
+    style="--pricing-card-padding: 2.5rem; --pricing-card-cta-bg: var(--brand-primary)"
+  />
+</div>
+```
+
+---
+
+## Notes
+
+- Feature checkmarks are always rendered with a teal checkmark (`✓`). Customize the color via `--teal-06` or component tokens.
+- The `#cta` slot is preferred over CSS-only button customization when you need variant or theme changes.
+- Highlighted cards apply a 1.05x scale transform — consider z-index when nesting in flex/grid layouts.

package/.claude/skills/index.md

@@ -48,6 +48,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 ├── qa-panel.md                       — collapsible dev-only panel for toggling component props live on a page (demo pages and consuming apps)
 ├── release-notes.md                  — produce release notes as a fenced markdown block from git log
 ├── pull-request-description.md       — produce a PR description as a fenced markdown block from git diff vs main
+├── using-component-skills.md         — discover and use component skills in consumer apps: where skills land, browsing patterns, workflow for deciding build vs. compose
 ├── composable-canonical-url.md       — useCanonicalUrl: set <link rel="canonical"> from runtimeConfig.public.canonicalHost; layout setup, node types
 ├── composable-whatsapp.md            — useWhatsApp: open pre-filled wa.me link from form payload; runtime config, security, usage
 ├── composable-zod-validation.md      — useZodValidation: schema-driven form validation, error binding, submit flow, API error push
@@ -73,7 +74,8 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── expanding-panel.md      — ExpandingPanel v-model, forceOpened, slots (summary/icon/content), ARIA wiring
     ├── glass-panel.md          — GlassPanel props, slots, CSS token API (--glass-panel-bg/border-color/shadow/highlight), theming override
     ├── navigation-horizontal.md — NavigationHorizontal props, NavItemData type, CSS token API, import path gotcha
-    ├── input-copy-core.md      — InputCopyCore: readonly copy-to-clipboard input; props, emits, slots, CSS classes, usage
+    ├── pricing-card.md         — PricingCard: SaaS-style plan card with highlight, feature list, #cta slot for button customization, CSS token API
+    ├── input-copy.md           — InputCopy: readonly copy-to-clipboard input, visual feedback, Clipboard API, accessibility, CSS token API
     ├── banner-video.md         — BannerVideo: full-width hero video banner, depth tier system, objectFit/objectPosition, playIcon/pauseIcon/toggle-icon slot, reduced-motion fallback, CSS tokens
     ├── grid-stack.md           — GridStack: CSS Grid z-axis stacking, slot API, z-order rules, sizing, video+overlay and image+text patterns
     ├── scroll-reveal-frame.md  — ScrollRevealFrame: generic parallax clipping frame, slot API, image grid pattern, CSS tokens, browser support

package/.claude/skills/setup-postinstall.md

@@ -2,12 +2,14 @@
 
 ## Overview
 
-Prevent two common "forgot to run after install" problems in a consuming app:
+Prevent common "forgot to run after install" problems in a consuming app:
 
 1. `nuxt prepare` — generates Nuxt type declarations. Skipping it causes TypeScript errors after install or package updates.
 2. `npm run setup:claude` — copies the latest `srcdev-nuxt-components` skills into `.claude/skills/srcdev-nuxt-components/`. Skipping it leaves Claude working from stale skill docs after a package update.
 
-A `postinstall` script runs both automatically after every `npm install`.
+Additionally, `srcdev-nuxt-components` automatically copies VSCode snippet files (`.code-snippets`) to your `.vscode/` folder during its own postinstall, so components' code snippets are available immediately.
+
+A consumer app's `postinstall` script runs both automatically after every `npm install`.
 
 ## Steps
 
@@ -41,5 +43,6 @@ From this point on, `npm install` and `npm ci` trigger both steps automatically.
 ## Notes
 
 - Skills land in `.claude/skills/srcdev-nuxt-components/` — safe to re-run without overwriting your own project's skills.
+- VSCode snippets are copied to `.vscode/` automatically by the layer's postinstall — no extra step needed on the consumer's side. They're available in VSCode's autocomplete immediately after `npm install`.
 - `postinstall` also fires on `npm ci`, so CI environments get the skills too if they have a `.claude/` directory in the project.
 - If you do not want `postinstall` running in CI, guard it: `"postinstall": "[ \"$CI\" = \"true\" ] || (nuxt prepare && npm run setup:claude)"`.

package/.claude/skills/using-component-skills.md

@@ -0,0 +1,215 @@
+# Using Component Skills
+
+## Overview
+
+Component skills are reference documentation files for every reusable component in `srcdev-nuxt-components`. They land in your consumer app after running `npm run setup:claude` and serve two purposes:
+
+1. **As human-readable reference** — browse component skills to understand props, slots, CSS tokens, and usage patterns
+2. **As discovery tool** — before building custom components, check if a suitable pattern already exists in the layer
+
+---
+
+## Setup
+
+### 1. Copy skills from the layer
+
+After scaffolding a new Nuxt app that extends `srcdev-nuxt-components`, run:
+
+```bash
+npm run setup:claude
+```
+
+This copies all skills (including component skills) into `.claude/skills/srcdev-nuxt-components/`.
+
+### 2. After upgrading the layer
+
+When you upgrade `srcdev-nuxt-components` to a new version (which may include new components), re-run the command to refresh:
+
+```bash
+npm run setup:claude
+```
+
+---
+
+## File structure
+
+Component skills land in `.claude/skills/srcdev-nuxt-components/components/`:
+
+```
+.claude/
+├── skills/
+│   └── srcdev-nuxt-components/
+│       ├── index.md                    — overview of all skills
+│       ├── new-app-scaffold.md         — scaffolding a new app
+│       ├── theming-colour-ramps.md     — theme customization
+│       ├── composable-*.md             — utility composables
+│       └── components/
+│           ├── pricing-card.md         — SaaS pricing plan card
+│           ├── input-copy.md           — copy-to-clipboard input
+│           ├── expanding-panel.md      — single expand/collapse panel
+│           ├── accordian-core.md       — native accordion (grouped panels)
+│           ├── display-avatar.md       — circular avatar component
+│           ├── card-core.md            — generic card container
+│           ├── auto-grid.md            — responsive auto-fit grid
+│           ├── display-dialog.md       — native dialog overlay
+│           ├── display-toast.md        — toast notifications
+│           └── ... (40+ more components)
+```
+
+---
+
+## Discovering components
+
+### Via your file explorer
+
+Browse `.claude/skills/srcdev-nuxt-components/components/` to see all available components with one-line descriptions.
+
+### Via grep
+
+Search for components by pattern:
+
+```bash
+# Find all form-related components
+grep -l "input\|form\|button" .claude/skills/srcdev-nuxt-components/components/*.md
+
+# Find components with slot patterns
+grep -l "slot" .claude/skills/srcdev-nuxt-components/components/*.md
+
+# Find components with CSS token customization
+grep -l "CSS token" .claude/skills/srcdev-nuxt-components/components/*.md
+```
+
+### Via Claude Code
+
+If your `.claude/settings.json` includes the layer's skills in `additionalDirectories`, Claude can reference them:
+
+```json
+{
+  "permissions": {
+    "additionalDirectories": [
+      "path/to/srcdev-nuxt-components/.claude/skills/components"
+    ]
+  }
+}
+```
+
+Then ask Claude: *"What button components are available in the layer?"* or *"Show me the expanding-panel skill."*
+
+---
+
+## Understanding a component skill
+
+Each component skill documents:
+
+### Props
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `:prop-name` | type | default | What this prop does |
+
+### Slots
+
+Explains what content goes inside each slot and provides scoped variables if applicable.
+
+### Events / Emits
+
+When the component emits events and what data they carry.
+
+### CSS Tokens
+
+All `--component-*` tokens available for customization via global/page/instance scope.
+
+### Usage Examples
+
+Practical examples showing:
+- Basic usage (simplest case)
+- Common customizations
+- Advanced patterns (slots, tokens, events)
+
+### Accessibility
+
+ARIA attributes, keyboard support, screen reader behavior.
+
+### Notes
+
+Edge cases, browser support, performance considerations, common gotchas.
+
+---
+
+## Workflow: Build a feature
+
+### 1. Understand the requirement
+
+*"I need a contact form with error handling and field validation."*
+
+### 2. Search skills for similar patterns
+
+```bash
+grep -l "form\|input\|validation" .claude/skills/srcdev-nuxt-components/components/*.md
+```
+
+### 3. Read relevant skills
+
+Open 2–3 matching skills to see:
+- What components already handle form inputs?
+- What slots and CSS tokens do they expose?
+- What validation patterns are documented?
+
+### 4. Decide: build vs. compose
+
+**Compose existing components** if the layer has:
+- Input components with validation props
+- Card/container components for layout
+- Button variants for form actions
+
+**Build custom component** if you need something specific the layer doesn't provide.
+
+---
+
+## Examples
+
+### Pricing page
+
+*Task: Build a pricing plan comparison with 3 tiers.*
+
+1. Search skills: `grep -l "price\|plan\|tier" components/*.md`
+2. Read `pricing-card.md` — describes PricingCard component, props, #cta slot, CSS tokens
+3. Use PricingCard in a grid layout, customize buttons via slot, override token colors via page-scoped CSS
+
+### FAQ section
+
+*Task: Add expandable FAQ items.*
+
+1. Search skills: `grep -l "expand\|accordion\|collaps" components/*.md`
+2. Read `expanding-panel.md` — describes single panel behavior, v-model, slots
+3. Use ExpandingPanel in a v-for loop for FAQ items (no need to build custom accordion)
+
+### License key display
+
+*Task: Show a copyable license key on success page.*
+
+1. Search skills: `grep -l "copy\|clipboard\|readonly" components/*.md`
+2. Read `input-copy.md` — describes readonly input, copy button, events, CSS tokens
+3. Use InputCopy component, listen to @copied event, show toast via consumer's toast library
+
+---
+
+## Updating skills
+
+When the layer releases a new component or updates an existing one:
+
+1. **Upgrade the package**: `npm install srcdev-nuxt-components@latest`
+2. **Refresh skills**: `npm run setup:claude`
+3. **Read the new skill** to understand the new component's API
+
+The skills always stay in sync with the layer's released version.
+
+---
+
+## Tips
+
+- **Skim the index.md** in `.claude/skills/srcdev-nuxt-components/` to get an overview of all available skills
+- **Reference skills when asking Claude** — "Here's the InputCopy skill: [paste content]. How do I customize the button color?"
+- **CSS tokens are your friend** — most components expose tokens for customization without component changes
+- **Slots > props for complexity** — if you need custom button behavior, use a #cta slot instead of adding button props to the component
+- **Check accessibility notes** — ARIA labels, keyboard support, and screen reader behavior are documented per component

package/.vscode/srcdev-component-pricing-card.code-snippets

@@ -18,7 +18,7 @@
     ]
   },
   "SRCDEV PricingCard Highlighted": {
-    "description": "PricingCard with 'Most Popular' highlight",
+    "description": "PricingCard with 'Most Popular' highlight and custom button",
     "scope": "vue,html",
     "body": [
       "<PricingCard",
@@ -33,7 +33,16 @@
       "    '$7Feature 3',",
       "  ]\"",
       "  @select=\"$8handleSelect\"",
-      "/>"
+      ">",
+      "  <template #cta=\"{ ctaText, isDisabled, onSelect }\">",
+      "    <InputButtonCore",
+      "      :button-text=\"ctaText\"",
+      "      variant=\"$9primary\"",
+      "      :readonly=\"isDisabled\"",
+      "      @click=\"onSelect\"",
+      "    />",
+      "  </template>",
+      "</PricingCard>"
     ]
   },
   "SRCDEV PricingCard Grid": {
@@ -69,6 +78,30 @@
       "</div>"
     ]
   },
+  "SRCDEV PricingCard Custom Button": {
+    "description": "PricingCard with custom button variant via #cta slot",
+    "scope": "vue,html",
+    "body": [
+      "<PricingCard",
+      "  planName=\"$1Premium\"",
+      "  :price=\"$2799\"",
+      "  billingPeriod=\"$3one-time\"",
+      "  description=\"$4All features included.\"",
+      "  :features=\"['$5Feature 1', '$6Feature 2']\"",
+      "  @select=\"$7handleSelect\"",
+      ">",
+      "  <template #cta=\"{ ctaText, isDisabled, onSelect }\">",
+      "    <InputButtonCore",
+      "      :button-text=\"ctaText\"",
+      "      variant=\"$8secondary\"",
+      "      theme=\"$9default\"",
+      "      :readonly=\"isDisabled\"",
+      "      @click=\"onSelect\"",
+      "    />",
+      "  </template>",
+      "</PricingCard>"
+    ]
+  },
   "SRCDEV PricingCard CSS Override": {
     "description": "CSS override scaffold for PricingCard tokens",
     "scope": "css",

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.2.3",
+  "version": "9.2.4",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",
   "scripts": {
+    "postinstall": "node scripts/copy-snippets.mjs",
     "clean": "rm -rf .nuxt && rm -rf .output",
     "cleanall": "rm -rf node_modules && rm -rf .nuxt && rm -rf .output && rm package-lock.json",
     "reinstall": "rm -rf node_modules && npm install",

package/scripts/copy-snippets.mjs

@@ -0,0 +1,38 @@
+import { copyFileSync, mkdirSync, readdirSync } from 'fs';
+import { join } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+const srcDir = join(__dirname, '../.vscode');
+const destDir = join(process.cwd(), '.vscode');
+
+// Only run when installed as a package (not in the layer's own repo)
+if (process.cwd() === join(__dirname, '..')) {
+  console.log('⊘ Skipping snippet copy (running in layer repo)');
+  process.exit(0);
+}
+
+mkdirSync(destDir, { recursive: true });
+
+// Find and copy all .code-snippets files
+try {
+  const files = readdirSync(srcDir).filter(file => file.endsWith('.code-snippets'));
+
+  if (files.length === 0) {
+    console.log('⊘ No snippet files found');
+    process.exit(0);
+  }
+
+  files.forEach(file => {
+    try {
+      copyFileSync(join(srcDir, file), join(destDir, file));
+      console.log(`✓ Copied VSCode snippet: ${file}`);
+    } catch (err) {
+      console.warn(`⚠ Failed to copy ${file}:`, err.message);
+    }
+  });
+
+  console.log(`✓ VSCode snippets installed to .vscode/`);
+} catch (err) {
+  console.warn('⚠ Snippet installation skipped:', err.message);
+}