@hcu-lab.me/mcp-device 1.0.9 → 1.0.12

package/control-plane/scripts/skills/extract-design-md/references/angular.md

@@ -0,0 +1,122 @@
+# Angular Extraction Patterns
+
+Angular projects use a structured, convention-heavy approach to styling.
+Design systems often live in SCSS/CSS files with clear separation between
+global themes and component-scoped styles.
+
+## File Discovery Order
+
+1. **`angular.json`** — Lists global style files under
+   `projects.*.architect.build.options.styles`. These are the entry-point
+   CSS/SCSS files.
+
+2. **`src/styles.scss` / `src/styles.css`** — Global stylesheet. CSS custom
+   properties, font imports, and base styles live here.
+
+3. **`src/theme.scss` / `src/theme/`** — Explicit theme directory. Custom
+   Material/component palettes.
+
+4. **Tailwind Config (`tailwind.config.js` or Tailwind v4 `@theme {}`)** — For Tailwind v3, read `tailwind.config.js`. For Tailwind v4, inspect `@theme {}` blocks, `@custom-variant`, and `@plugin 'tailwindcss-primeui'` in your global CSS/SCSS (e.g. `src/styles.css` or `src/assets/tailwind.css`) for CSS custom property tokens (`--color-*`, `--font-*`, `--text-*`, `--breakpoint-*`).
+
+5. **`src/app/app.component.scss`** — Root component styles, reveals global
+   layout patterns.
+
+6. **Component `.scss` / `.css` files** — Co-located styles (ViewEncapsulation
+   scoped by default).
+
+7. **External Template `.html` files (`src/app/**/*.component.html`)** — Essential for Angular 17+ standalone components using Tailwind CSS utility classes (`bg-*`, `text-*`, `p-*`, `rounded-*`) or structural class bindings (`[ngClass]`, `[class.*]`). Always inspect `.html` templates when styling uses utility classes.
+
+## Angular Material Theme Extraction
+
+Angular Material is the most common component library. Themes are SCSS-based:
+
+```scss
+// src/theme.scss
+@use '@angular/material' as mat;
+
+$primary-palette: mat.m2-define-palette(mat.$m2-teal-palette, 800);
+$accent-palette: mat.m2-define-palette(mat.$m2-blue-grey-palette);
+$warn-palette: mat.m2-define-palette(mat.$m2-red-palette);
+
+$theme: mat.m2-define-light-theme((
+  color: (
+    primary: $primary-palette,
+    accent: $accent-palette,
+    warn: $warn-palette,
+  ),
+  typography: mat.m2-define-typography-config(
+    $font-family: 'Manrope, sans-serif',
+    $headline-1: mat.m2-define-typography-level(3.5rem, 4rem, 600),
+    $headline-5: mat.m2-define-typography-level(1.5rem, 2rem, 500),
+    $body-1: mat.m2-define-typography-level(1rem, 1.7, 400),
+  ),
+));
+
+@include mat.all-component-themes($theme);
+```
+
+**What to extract:**
+- Palette choices → map to functional color roles
+- Typography config → maps directly to the hierarchy section
+- Light vs dark theme → atmosphere
+
+For Angular Material 3 (MDC-based), look for `mat.define-theme()` using
+the new token system with `--mat-*` CSS custom properties.
+
+## SCSS Variable Patterns
+
+Many Angular projects use SCSS variables for tokens:
+
+```scss
+// _variables.scss
+$color-primary: #294056;
+$color-background: #FCFAFA;
+$color-surface: #F5F5F5;
+$color-text: #2C2C2C;
+
+$font-heading: 'Manrope', sans-serif;
+$font-body: 'Inter', sans-serif;
+
+$radius-button: 8px;
+$radius-card: 12px;
+
+$breakpoint-mobile: 768px;
+$breakpoint-desktop: 1024px;
+
+$spacing-section: 5rem;
+$spacing-component: 2rem;
+```
+
+These are explicit design tokens. Map them directly.
+
+## ViewEncapsulation and Scoped Styles
+
+Angular scopes styles by default (similar to Vue's `scoped`). When scanning
+component styles:
+
+- Look for `:host` selectors — these style the component's root element
+- `::ng-deep` (deprecated but still used) — styles that pierce encapsulation
+- Repeated values across components indicate design system conventions
+
+## PrimeNG / Nebular / NG-ZORRO
+
+If component libraries are used:
+- **PrimeNG (v17/v18/v19+)**: Look for modern theme configuration in `src/app.config.ts` (e.g., `providePrimeNG({ theme: { preset: Aura, options: { darkModeSelector: '.app-dark' } } })`). Check for Tailwind v4 integration via `@plugin 'tailwindcss-primeui'` in CSS assets. Inspect CSS custom properties defined by PrimeNG tokens (`--primary-color`, `--surface-*`).
+- **Nebular**: `nb-theme()` in `styles.scss` with custom theme object.
+- **NG-ZORRO (Ant Design for Angular)**: `ng-zorro-antd.less` variables
+  or custom theme config in `angular.json`.
+
+## Modern Angular (v17 - v19) Standalone Components & Control Flow
+
+In modern Angular repositories:
+- **Standalone Components (`@Component({ standalone: true })`)**: Components import their own dependencies directly without NgModules. Inspect `templateUrl` and `styleUrl(s)` in component metadata to locate the template and style files.
+- **Control Flow (`@if`, `@for`, `@switch`)**: Notice how conditional layouts and lists are structured in `.html` templates when analyzing component density and spacing rules.
+- **Signals & Zoneless (`signal()`, `input()`, `computed()`, `provideZonelessChangeDetection()`)**: Dynamic styling or theme toggling is often driven by signals bound to `[class.dark]` or custom CSS classes in templates. Notice `app.config.ts` for app-wide providers.
+
+## Responsive Patterns
+
+Check for:
+- `@media` queries in `styles.scss` and component styles
+- Angular CDK `BreakpointObserver` usage in components
+- Tailwind responsive prefixes if Tailwind is configured
+- Angular Flex-Layout directives (`fxLayout`, `fxFlex`) in templates

package/control-plane/scripts/skills/extract-design-md/references/plain-css.md

@@ -0,0 +1,161 @@
+# Plain CSS / SASS / Less Extraction Patterns
+
+For projects without a JavaScript framework — static sites, WordPress
+themes, vanilla HTML/CSS, or CSS preprocessor-heavy projects.
+
+## File Discovery Order
+
+1. **`index.html` / `*.html`** — Check `<link>` tags and `<style>` blocks
+   for stylesheet references, inline styles, and font loading.
+
+2. **Main stylesheet** (`style.css`, `main.css`, `app.css`) — The primary
+   CSS file. Look for custom properties, base styles, and typography.
+
+3. **`_variables.scss` / `_tokens.scss` / `variables.less`** — Preprocessor
+   variable files containing design tokens.
+
+4. **`_mixins.scss`** — Reusable style patterns reveal design conventions.
+
+5. **Component/module stylesheets** — Individual CSS files for UI components.
+
+## CSS Custom Properties (Modern CSS)
+
+Modern vanilla CSS projects often define a design system via custom properties:
+
+```css
+:root {
+  /* Colors */
+  --color-primary: #294056;
+  --color-bg: #FCFAFA;
+  --color-surface: #F5F5F5;
+  --color-text: #2C2C2C;
+  --color-text-secondary: #6B6B6B;
+  --color-border: #E0E0E0;
+  --color-success: #10B981;
+  --color-error: #EF4444;
+
+  /* Typography */
+  --font-heading: 'Manrope', sans-serif;
+  --font-body: 'Inter', sans-serif;
+  --font-size-base: 1rem;
+  --line-height-body: 1.7;
+
+  /* Spacing */
+  --spacing-xs: 0.5rem;
+  --spacing-sm: 1rem;
+  --spacing-md: 2rem;
+  --spacing-lg: 4rem;
+  --spacing-xl: 6rem;
+
+  /* Shapes */
+  --radius-button: 8px;
+  --radius-card: 12px;
+
+  /* Shadows */
+  --shadow-card: 0 2px 8px rgba(0,0,0,0.06);
+}
+```
+
+This is the cleanest source of truth. Extract directly and name each token.
+
+## SASS/SCSS Token Patterns
+
+```scss
+// _variables.scss
+$colors: (
+  'primary': #294056,
+  'background': #FCFAFA,
+  'surface': #F5F5F5,
+  'text': #2C2C2C,
+  'text-muted': #6B6B6B,
+);
+
+$font-stack-heading: 'Manrope', sans-serif;
+$font-stack-body: 'Inter', sans-serif;
+
+$breakpoints: (
+  'mobile': 768px,
+  'tablet': 1024px,
+  'desktop': 1280px,
+);
+
+$spacers: (
+  'section': 5rem,
+  'component': 2rem,
+  'element': 1rem,
+);
+```
+
+SASS maps are essentially design token dictionaries. Extract all values.
+
+## Less Variable Patterns
+
+```less
+@primary-color: #294056;
+@bg-color: #FCFAFA;
+@text-color: #2C2C2C;
+@font-heading: 'Manrope', sans-serif;
+@border-radius-base: 8px;
+```
+
+Same extraction approach — map each variable to a descriptive name and role.
+
+## Static Sites and WordPress
+
+For static sites or WordPress themes:
+
+- **WordPress**: Check `style.css` header comment for theme metadata.
+  Look for `wp-content/themes/<name>/assets/css/` for stylesheets.
+  `functions.php` may enqueue Google Fonts.
+- **Jekyll/Hugo**: Check `_sass/` or `assets/css/` directories.
+- **Static HTML**: Everything is in the CSS files and `<style>` blocks.
+
+## Inline Style Scanning
+
+For projects heavy on inline styles (legacy codebases, email templates):
+
+Search HTML files for `style="..."` attributes. Group unique values by
+property type:
+
+```
+background-color: #FCFAFA, #F5F5F5, #294056
+color: #2C2C2C, #6B6B6B, white
+border-radius: 8px, 12px
+font-family: 'Manrope', 'Inter'
+```
+
+Then deduplicate and assign roles.
+
+## Color Extraction Strategy
+
+When there's no explicit token system, you need to discover colors across
+all stylesheets. Search for:
+
+```
+background-color:
+background:
+color:
+border-color:
+border:
+outline-color:
+box-shadow:
+fill:
+stroke:
+```
+
+Collect all unique hex values, `rgb()`, `rgba()`, and `hsl()` values.
+Group by proximity (similar colors within a few shades) and assign roles
+based on context (which selectors use them).
+
+## Responsive Patterns
+
+Look for `@media` queries in all stylesheets. Common patterns:
+
+```css
+@media (max-width: 768px) { ... }   /* Mobile-first breakpoint */
+@media (min-width: 1024px) { ... }  /* Desktop enhancement */
+@media (prefers-color-scheme: dark) { ... } /* Dark mode support */
+```
+
+Document all breakpoints and the content strategy at each (column
+changes, padding adjustments, navigation transformations).

package/control-plane/scripts/skills/extract-design-md/references/react-tailwind.md

@@ -0,0 +1,157 @@
+# React / Next.js / Tailwind Extraction Patterns
+
+This reference covers the most common frontend stack: React components with
+Tailwind CSS (and optionally CSS Modules, styled-components, or Emotion).
+
+## File Discovery Order
+
+Read these files in priority order — higher-priority files give you the
+intended design system, lower-priority files show what actually shipped:
+
+1. **`tailwind.config.js` / `tailwind.config.ts`** — The single most
+   important file. Custom `theme.extend.colors`, `fontFamily`, `spacing`,
+   `borderRadius`, and `screens` are the design system definition.
+
+2. **`globals.css` / `global.css` / `index.css`** — CSS custom properties
+   (`--*`), `@layer` directives, `@font-face` declarations, and base styles.
+
+3. **`theme.ts` / `theme.js` / `tokens.ts`** — Explicit design token files.
+   May export objects consumed by Tailwind config or CSS-in-JS providers.
+
+4. **`src/app/layout.tsx` or `src/App.tsx`** — Root layout. Shows the global
+   font setup (via `next/font` or `<link>`), body background, and overall
+   structure.
+
+5. **Component files (`*.tsx` / `*.jsx`)** — Look at 5-8 representative
+   components to understand usage patterns.
+
+## Tailwind Config Extraction
+
+The Tailwind config is structured and machine-readable. Extract directly:
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        primary: '#294056',      // → "Deep Muted Teal-Navy" — Primary CTA
+        background: '#FCFAFA',   // → "Warm Barely-There Cream" — Page BG
+      },
+      fontFamily: {
+        sans: ['Manrope', 'sans-serif'],
+      },
+      borderRadius: {
+        card: '12px',
+        button: '8px',
+      },
+      spacing: {
+        section: '5rem',
+      }
+    }
+  }
+}
+```
+
+Map each custom value to a descriptive name and role.
+
+## CSS Custom Properties
+
+Look for `:root` or `html` blocks in global CSS:
+
+```css
+:root {
+  --color-primary: #294056;
+  --color-bg: #FCFAFA;
+  --font-heading: 'Manrope', sans-serif;
+  --radius-card: 12px;
+  --spacing-section: 5rem;
+}
+```
+
+These are explicitly declared tokens — use their names as clues for
+their intended role.
+
+## Next.js Font Patterns
+
+Next.js uses `next/font` for optimized font loading:
+
+```tsx
+import { Inter, Playfair_Display } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
+const playfair = Playfair_Display({ subsets: ['latin'], variable: '--font-display' })
+```
+
+The `variable` names hint at usage: `--font-display` for headlines,
+`--font-inter` for body.
+
+## Component Scanning Strategy
+
+Don't read every component. Focus on these archetypes:
+
+| Component Type | What to Extract |
+|:---|:---|
+| Layout / Shell | Max-width, padding, grid structure |
+| Button / CTA | Border radius, colors, hover states, padding |
+| Card | Shadow, border, radius, internal spacing |
+| Nav / Header | Typography treatment, active states |
+| Form / Input | Border, focus state, padding |
+| Hero / Landing section | Spacing, typography scale, alignment |
+
+For each, look at the `className` prop for Tailwind classes or the
+`styled()` / `css()` calls for CSS-in-JS values.
+
+## CSS-in-JS Patterns (styled-components / Emotion)
+
+If the project uses CSS-in-JS, look for theme providers:
+
+```tsx
+// ThemeProvider wrapping the app
+const theme = {
+  colors: {
+    primary: '#294056',
+    background: '#FCFAFA',
+  },
+  fonts: {
+    heading: 'Manrope, sans-serif',
+  },
+  radii: {
+    card: '12px',
+    button: '8px',
+  }
+}
+```
+
+This theme object *is* the design system. Extract directly.
+
+## Component Library Integration
+
+If the project uses Chakra UI, Material UI, Ant Design, or shadcn/ui:
+
+- **Chakra**: Look for `extendTheme()` calls — these override defaults.
+- **MUI**: Look for `createTheme()` — palette, typography, and spacing overrides.
+- **Ant Design**: Look for `ConfigProvider` theme prop or `theme.ts` overrides.
+- **shadcn/ui**: Colors are defined as CSS custom properties in `globals.css`.
+  Check `components.json` for the style configuration.
+
+The overrides are the design system — default values are the library's generic
+styling and should be noted but not emphasized.
+
+## Responsive Patterns
+
+Check Tailwind's `screens` config and look for responsive class prefixes
+(`sm:`, `md:`, `lg:`, `xl:`) in components:
+
+```js
+screens: {
+  sm: '640px',   // Mobile landscape
+  md: '768px',   // Tablet
+  lg: '1024px',  // Desktop
+  xl: '1280px',  // Large desktop
+  '2xl': '1536px'
+}
+```
+
+Look for `container` configuration and `max-width` patterns on layout
+components to determine content width strategy.

package/control-plane/scripts/skills/extract-design-md/references/svelte.md

@@ -0,0 +1,101 @@
+# Svelte / SvelteKit Extraction Patterns
+
+Svelte co-locates styles even more tightly than Vue. Every `.svelte` file
+has a `<style>` block that is scoped by default. Design systems in Svelte
+projects typically live in global CSS, CSS custom properties, or a shared
+theme store.
+
+## File Discovery Order
+
+1. **`src/app.css` / `src/app.postcss`** — Global styles and CSS custom
+   properties. The most important file.
+
+2. **`svelte.config.js`** — May reference CSS preprocessors, Tailwind, or
+   UnoCSS configuration.
+
+3. **`tailwind.config.js`** (if Tailwind/UnoCSS) — Same extraction as React.
+
+4. **`src/lib/theme.ts` / `src/lib/tokens.ts`** — Shared design tokens
+   exported as JS objects.
+
+5. **`src/routes/+layout.svelte`** — Root layout. Shows global font loading,
+   background, and structural patterns.
+
+6. **Component `<style>` blocks** — Scoped styles revealing component patterns.
+
+## Svelte Component Style Patterns
+
+```svelte
+<script>
+  export let variant = 'primary'
+</script>
+
+<button class="btn btn-{variant}">
+  <slot />
+</button>
+
+<style>
+  .btn {
+    border-radius: 8px;
+    padding: 0.875rem 2rem;
+    font-weight: 500;
+    transition: all 250ms ease-in-out;
+  }
+
+  .btn-primary {
+    background-color: var(--color-primary);
+    color: white;
+  }
+
+  .btn-primary:hover {
+    filter: brightness(0.9);
+  }
+</style>
+```
+
+**Extraction points:**
+- Component props (like `variant`) reveal the intended variant system
+- `var(--*)` references → trace to `app.css`
+- Transition values reveal the interaction design philosophy
+
+## SvelteKit Layout Patterns
+
+- **`+layout.svelte`** at route root — Global header, footer, font loading
+- **`+layout.ts/js`** — May load theme data or tokens
+- **`$lib/`** directory — Reusable components and shared utilities
+
+## CSS Custom Properties Strategy
+
+Svelte projects heavily use CSS custom properties for theming:
+
+```css
+/* app.css */
+:root {
+  --color-primary: #294056;
+  --color-bg: #FCFAFA;
+  --color-surface: #F5F5F5;
+  --color-text: #2C2C2C;
+  --color-text-muted: #6B6B6B;
+
+  --font-heading: 'Manrope', sans-serif;
+  --font-body: 'Inter', sans-serif;
+
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-full: 9999px;
+
+  --shadow-hover: 0 2px 8px rgba(0,0,0,0.06);
+  --spacing-section: 5rem;
+}
+```
+
+These variable names are highly intentional. Use them as the foundation
+of your design system extraction.
+
+## Skeleton UI / DaisyUI / Flowbite-Svelte
+
+If component libraries are used:
+- **Skeleton UI**: Theme defined in `tailwind.config.js` using Skeleton's
+  design token system. Look for custom theme config object.
+- **DaisyUI**: Theme in `tailwind.config.js` → `daisyui.themes` array.
+- **Flowbite-Svelte**: Standard Tailwind theming.

package/control-plane/scripts/skills/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.