初始化项目版本

.agents/skills/stitch-extract-design-md/references/vue.md

@@ -0,0 +1,107 @@
+# Vue / Nuxt Extraction Patterns
+
+Vue projects have a distinctive styling architecture. Styles are often
+co-located with components inside `<style>` blocks, and Nuxt adds
+convention-based directories.
+
+## File Discovery Order
+
+1. **`nuxt.config.ts` / `nuxt.config.js`** — May contain global CSS paths,
+   font configuration, and Tailwind/UnoCSS module config.
+
+2. **`assets/css/main.css`** (or similar) — Global styles, CSS custom
+   properties, and font imports.
+
+3. **`tailwind.config.js`** (if Tailwind is used) — Same as React; extract
+   custom theme values directly.
+
+4. **`plugins/vuetify.ts`** (if Vuetify) — Theme definition with custom
+   palette and typography.
+
+5. **Component `<style>` blocks** — Co-located styles (scoped or global).
+
+## Single-File Component (SFC) Patterns
+
+Vue components bundle template, script, and style together:
+
+```vue
+<template>
+  <div class="card">
+    <h2 class="card__title">{{ title }}</h2>
+  </div>
+</template>
+
+<style scoped>
+.card {
+  background: var(--color-surface);
+  border-radius: 12px;
+  padding: 2rem;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+}
+
+.card__title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+</style>
+```
+
+**Key extraction points:**
+- `var(--*)` references → trace back to global CSS for the actual values
+- `scoped` styles → component-specific, but reveal consistent patterns
+- BEM naming (`.card__title`) → hints at component hierarchy
+
+## Vuetify Theme Extraction
+
+Vuetify projects define their design system explicitly:
+
+```ts
+// plugins/vuetify.ts
+export default createVuetify({
+  theme: {
+    defaultTheme: 'light',
+    themes: {
+      light: {
+        colors: {
+          primary: '#294056',
+          secondary: '#6B6B6B',
+          background: '#FCFAFA',
+          surface: '#F5F5F5',
+          error: '#EF4444',
+          success: '#10B981',
+        }
+      }
+    }
+  }
+})
+```
+
+This is the design system declaration. Map each key to a functional role
+and descriptive name.
+
+## Quasar / PrimeVue / Element Plus
+
+These component libraries use their own theming systems:
+
+- **Quasar**: `quasar.config.js` → `framework.config.brand` for colors
+- **PrimeVue**: CSS themes in `assets/` or theme preset configuration
+- **Element Plus**: SCSS variables in `element-variables.scss`
+
+Look for the override file — that's where the project's unique values live.
+
+## CSS Scoping Behavior
+
+Vue's `scoped` attribute adds data attributes for CSS isolation. When
+scanning for patterns, look at multiple components to find repeated values
+(same `border-radius`, similar `padding`, consistent color references).
+Repeated patterns across scoped styles = design system conventions.
+
+## Nuxt-Specific Patterns
+
+- **`app.vue`** or **`layouts/default.vue`** — Root layout, reveals
+  global background, font loading, and overall structure.
+- **`assets/`** — Global CSS, fonts, and images.
+- **`composables/`** — May contain `useTheme` or `useDesignTokens`.
+- **`nuxt.config.ts`** `css` array — Lists global stylesheets automatically
+  injected into every page.