Add shadcn-vue skill

skills/shadcn-vue/README.md

@@ -0,0 +1,27 @@
+# shadcn-vue Skill for Stitch
+
+This skill provides expert guidance and automation for integrating `shadcn-vue` into your Vue.js projects.
+
+## Features
+
+- **Automated Setup**: Step-by-step instructions for Vite and Nuxt using `yarn`.
+- **Validation Script**: A dedicated bash script to verify your project setup and dependencies.
+- **Component Discovery**: Help finding and installing components from the shadcn-vue registry.
+- **Theming & Customization**: Guidance on using CSS variables and Tailwind CSS to customize your UI.
+- **Best Practices**: Follows official `shadcn-vue` recommendations for project structure and component usage.
+
+## Usage
+
+To use this skill, ensure it is enabled in your Stitch project. You can then ask questions about:
+
+- "How do I install shadcn-vue in a new Vite project?"
+- "How can I add a Button component using yarn?"
+- "How do I customize the primary color in shadcn-vue?"
+- "What is the best way to handle hydration errors in Nuxt with shadcn-vue?"
+
+## Project Structure
+
+- `SKILL.md`: Core skill definitions and instructions.
+- `resources/`: Detailed setup guides for different frameworks.
+- `scripts/`: Verification and automation scripts.
+- `examples/`: Code examples of shadcn-vue components.

skills/shadcn-vue/SKILL.md

@@ -0,0 +1,94 @@
+---
+name: shadcn-vue
+description: Expert guidance for integrating and building applications with shadcn-vue components, including component discovery, installation, customization, and best practices for Vite and Nuxt.
+allowed-tools:
+  - "shadcn*:*"
+  - "mcp_shadcn*"
+  - "Read"
+  - "Write"
+  - "Bash"
+  - "web_fetch"
+---
+
+# shadcn-vue Component Integration
+
+You are a frontend engineer specialized in building applications with shadcn-vue—a collection of beautifully designed, accessible, and customizable components for Vue.js. You help developers discover, integrate, and customize components following best practices.
+
+## Core Principles
+
+shadcn-vue is **not a component library**—it's a collection of reusable components that you copy into your project. This gives you:
+
+- **Full ownership**: Components live in your codebase, not node_modules.
+- **Complete customization**: Modify styling, behavior, and structure freely.
+- **Tailwind CSS Integration**: Built with Tailwind CSS for rapid styling.
+- **Zero runtime overhead**: No library bundle, just the code you need.
+
+## Project Setup
+
+### Initial Configuration
+
+For **new projects**, you can use the Vite or Nuxt templates.
+
+#### Vite Setup (Using Yarn)
+
+1. **Create project**: `yarn create vite@latest my-vue-app --template vue-ts`
+2. **Add Tailwind CSS**: `yarn add tailwindcss @tailwindcss/vite`
+3. **Configure Tailwind CSS**: Use `@import "tailwindcss";` in `src/style.css`.
+4. **Run Initialization**: `yarn dlx shadcn-vue@latest init`
+
+#### Nuxt Setup (Using Yarn)
+
+1. **Create project**: `yarn create nuxt@latest`
+2. **Add Tailwind CSS**: `yarn add tailwindcss @tailwindcss/vite -D`
+3. **Add Nuxt Module**: `yarn dlx nuxi@latest module add shadcn-nuxt`
+4. **Run Initialization**: `yarn dlx shadcn-vue@latest init`
+
+## Component Discovery and Installation
+
+### 1. Component Installation
+
+Use the shadcn-vue CLI to add components:
+
+```bash
+yarn dlx shadcn-vue@latest add [component-name]
+```
+
+This command:
+
+- Downloads the component source code.
+- Installs required dependencies.
+- Places files in `components/ui/` (by default).
+- Updates your configuration.
+
+## Customization Best Practices
+
+### 1. Theme Customization
+
+Edit your Tailwind configuration and CSS variables to match your brand. shadcn-vue uses CSS variables for theming, allowing for easy updates and dark mode support.
+
+### 2. The `cn()` Utility
+
+shadcn-vue components often include a `cn()` helper (usually in `lib/utils.ts`) for class merging:
+
+```typescript
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+```
+
+## Resources
+
+Refer to the following resource files for detailed guidance:
+
+- `resources/setup-vite.md` - Step-by-step project initialization for Vite
+- `resources/setup-nuxt.md` - Step-by-step project initialization for Nuxt
+- `scripts/verify-setup.sh` - Validation script for project configuration
+
+## Examples
+
+See the `examples/` directory for:
+
+- `simple-button.vue` - Basic button implementation

skills/shadcn-vue/examples/simple-button.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { Button } from "@/components/ui/button";
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center p-8 gap-4">
+    <h1 class="text-2xl font-bold">Hello from shadcn-vue!</h1>
+    <Button>Click Me</Button>
+    <Button variant="outline">Outline Button</Button>
+    <Button variant="ghost">Ghost Button</Button>
+  </div>
+</template>

skills/shadcn-vue/resources/setup-nuxt.md

@@ -0,0 +1,76 @@
+# Nuxt Setup with shadcn-vue (Yarn)
+
+Follow these steps to set up `shadcn-vue` in a Nuxt project using `yarn`.
+
+## 1. Create Project
+
+```bash
+yarn create nuxt@latest my-nuxt-app
+cd my-nuxt-app
+```
+
+## 2. Add Tailwind CSS
+
+```bash
+yarn add tailwindcss @tailwindcss/vite -D
+```
+
+## 3. Configure Tailwind CSS in Nuxt
+
+#### Create `assets/css/tailwind.css`
+Add the following line:
+
+```css
+@import "tailwindcss";
+```
+
+#### Update `nuxt.config.ts`
+
+```typescript
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineNuxtConfig({
+  css: ['~/assets/css/tailwind.css'],
+  vite: {
+    plugins: [
+      tailwindcss(),
+    ],
+  },
+})
+```
+
+## 4. Add Nuxt Module
+
+```bash
+yarn dlx nuxi@latest module add shadcn-nuxt
+```
+
+## 5. Add SSR Width Plugin (Optional)
+
+To avoid hydration errors on mobile, create `app/plugins/ssr-width.ts`:
+
+```typescript
+import { provideSSRWidth } from '@vueuse/core'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  provideSSRWidth(1024, nuxtApp.vueApp)
+})
+```
+
+## 6. Run Nuxt Prepare
+
+```bash
+yarn dlx nuxi prepare
+```
+
+## 7. Run the CLI Initialization
+
+```bash
+yarn dlx shadcn-vue@latest init
+```
+
+## 8. Add Components
+
+```bash
+yarn dlx shadcn-vue@latest add [component-name]
+```

skills/shadcn-vue/resources/setup-vite.md

@@ -0,0 +1,73 @@
+# Vite Setup with shadcn-vue (Yarn)
+
+Follow these steps to set up `shadcn-vue` in a Vite project using `yarn`.
+
+## 1. Create Project
+
+```bash
+yarn create vite@latest my-vue-app --template vue-ts
+cd my-vue-app
+```
+
+## 2. Add Tailwind CSS
+
+```bash
+yarn add tailwindcss @tailwindcss/vite
+```
+
+## 3. Configure Tailwind CSS
+
+In `src/style.css`, replace the content with:
+
+```css
+@import "tailwindcss";
+```
+
+## 4. Configure Framework Aliases
+
+#### Edit `tsconfig.json` and `tsconfig.app.json`
+Add the following paths to your compiler options:
+
+```json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
+```
+
+#### Update `vite.config.ts`
+
+```typescript
+import path from 'node:path'
+import { defineConfig } from 'vite'
+import tailwindcss from '@tailwindcss/vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    tailwindcss(),
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+})
+```
+
+## 5. Run the CLI Initialization
+
+```bash
+yarn dlx shadcn-vue@latest init
+```
+
+## 6. Add Components
+
+```bash
+yarn dlx shadcn-vue@latest add [component-name]
+```