create-claude-workspace 1.1.32 → 1.1.34

package/dist/template/.claude/agents/ui-engineer.md

@@ -40,7 +40,7 @@ If the file does not exist, detect the framework from `package.json` dependencie
 
 - **Frontend frameworks**: Angular, React, Vue, Svelte — apply whichever the project uses
 - **TypeScript**: Advanced typing, strict mode, no `any`
-- **Styling**: SCSS/CSS with theme systems, design tokens, responsive design
+- **Styling**: @themecraft/core for theming (SCSS engine, CLI, runtime ThemeManager), design tokens, responsive design
 - **Monorepo patterns**: Library architecture, dependency boundaries
 - **Component architecture**: Smart/dumb separation, composite pattern, content projection/slots
 - **Performance**: Lazy loading, code splitting, deferred rendering, no unnecessary re-renders
@@ -101,7 +101,7 @@ Write clean, elegant code that is easy to test and reason about:
 - If Figma MCP is available and design exists: implement from Figma with 1:1 fidelity
 - If UX.md exists: follow its design tokens, typography, colors, breakpoints
 - If neither: use `/frontend-design` skill for high-quality UI generation
-- Always use theme system — no hardcoded color/size values
+- Always use @themecraft generated SCSS variables (`colors.$token`, `sizes.$token`, `typo.level()`) — no hardcoded color/size values, no direct `color-var()`/`size-var()` calls
 
 ## Output Format
 

package/dist/template/.claude/profiles/angular.md

@@ -139,23 +139,92 @@ After generation, the architect's plan specifies what code to write IN the gener
 - `$localize` in TS, `i18n` attribute in templates
 - Keep translation keys stable
 
-## Theme System
+## Theme System — @themecraft
 
-Pattern layers:
-1. Token definitions (`variables/_colors.scss`) — raw SCSS maps
-2. Core functions (`_theming.scss`) — `define-light-theme()`, `color-var()`, `size-var()`, `size()`
-3. Theme infrastructure (`_themes.scss`) — `variables()` emits CSS custom properties, breakpoint mixins
-4. Consumer SCSS (`_colors.scss`) — `$background-body: theming.color-var(variables.$background-body)`
-5. Theme definitions (`themes/light.scss`, `dark.scss`) — call `define-light-theme()` with maps
-6. Angular service (`theme.ts`) — `provideTheme()` for no-flash, `provideThemeServer()` for SSR
+Use `@themecraft/core` (SCSS engine + CLI + runtime) and `@themecraft/angular` (Angular adapter) for all theming.
 
-SCSS package.json exports:
-{ "./themes", "./theming", "./colors", "./typography", "./sizes", "./breakpoints" }
+**Install:**
+```bash
+npm install @themecraft/core @themecraft/angular
+npx themecraft init        # generates themecraft.config.json + tokens.json
+npx themecraft generate    # generates type-safe SCSS from tokens.json
+```
+
+**Pipeline:**
+1. `tokens.json` — define token names (colors, sizes, typography, breakpoints) with JSON schema validation
+2. `npx themecraft generate` — produces type-safe SCSS variables with IDE autocomplete
+3. Theme files (`themes/light.scss`, `dark.scss`) — use `define-light-theme()` / `define-dark-theme()` with token value maps
+4. `@themecraft/core/themes` → `variables()` mixin emits CSS custom properties at `:root`
+5. `@themecraft/angular` → `provideTheme()` for runtime switching, `provideThemeServer()` for SSR (no FOUC)
+
+**Component SCSS** — import generated variables, NEVER call `color-var()`/`size-var()` directly:
+```scss
+@use 'generated/theme/colors' as colors;
+@use 'generated/theme/sizes' as sizes;
+@use 'generated/theme/typography' as typo;
+@use '@themecraft/core/theming' as theming;
+
+.card {
+  background: colors.$surface;
+  color: colors.$on-surface;
+  padding: sizes.$card-padding;
+  @include typo.body-primary();
+  @include theming.theme-transition();  // smooth theme switch
+}
+```
+
+**How it works:** `npx themecraft generate` reads `tokens.json` and produces typed SCSS files (`generated/theme/colors.scss`, `sizes.scss`, `typography.scss`) that wrap `color-var()`/`size-var()` internally. Components consume these generated variables — never the raw accessor functions.
+
+**Figma workflow:** If a Figma design exists, run `npx themecraft figma-sync` FIRST to pull design variables into `tokens.json`, then `npx themecraft generate`.
+
+**Theme definition** (`themes/light.scss`):
+```scss
+@use '@themecraft/core/theming' as theming;
+@use '@themecraft/core/themes' as themes;
+
+themes.$themes: (
+  light: theming.define-light-theme((
+    color: theming.define-color-scheme(( surface: #ffffff, on-surface: #1a1a1a, primary: #0066cc )),
+    size: theming.define-sizes(( card-padding: theming.size(12px, 16px, 24px) )),
+    typography: ( body-primary: theming.define-typography-level(16px, 1.5, 400, 'Inter, sans-serif') ),
+    breakpoint: ( medium: 768px, large: 1200px ),
+  ))
+);
+
+@include themes.variables();
+```
+
+**Angular app config** (`app.config.ts`):
+```typescript
+import { provideTheme } from '@themecraft/angular';
+
+export const appConfig = {
+  providers: [
+    provideTheme({
+      themes: ['light', 'dark'],
+      defaultTheme: 'light',
+      basePath: '/themes/',
+      storage: 'localStorage',
+      preferSystemTheme: { light: 'light', dark: 'dark' },
+      transition: { duration: '200ms' },
+    }),
+  ],
+};
+```
+
+**SSR** (`app.config.server.ts`):
+```typescript
+import { provideThemeServer } from '@themecraft/angular';
+// mergeApplicationConfig with: provideThemeServer((req) => req.cookies['theme'])
+```
+
+**Theme switching** (inject `ThemeLoader`):
+```typescript
+readonly #theme = inject(ThemeLoader);
+switchTheme(name: string) { this.#theme.load(name); }
+```
 
-Component SCSS usage:
-@use '@[PREFIX]/theme/colors';
-@use '@[PREFIX]/theme/sizes';
-@use '@[PREFIX]/theme/typography';
+**PostCSS optimization** — add `@themecraft/core/postcss` plugin to remove unused token declarations from compiled CSS.
 
 ## Atomic UI Component Library
 
@@ -227,7 +296,7 @@ When reviewing Angular code, check:
 - Subscription cleanup (DestroyRef/takeUntilDestroyed)
 - Resource disposal (ImageBitmap.close(), stream.stop(), BroadcastChannel.close())
 - No memory leaks in effects or event listeners
-- Theme compliance: color-var(), size-var(), breakpoint mixins — no hardcoded colors/sizes
+- Theme compliance: generated @themecraft SCSS variables — no hardcoded colors/sizes, no direct `color-var()`/`size-var()` calls
 - Lazy loading via loadComponent/loadChildren, no eager page imports
 - @defer for heavy below-fold components
 - Naming: PascalCase components, lib- selectors, kebab-case files

package/dist/template/.claude/profiles/react.md

@@ -149,25 +149,73 @@ src/
 - Keep translation keys stable and descriptive
 - Co-locate translations near features when possible
 
-## Theme System
+## Theme System — @themecraft
 
-Pattern layers:
-1. Token definitions (`tokens/colors.ts` or `variables/colors.css`) — design tokens as CSS custom properties
-2. Core utilities (`theme.ts`) — `createTheme()`, token accessors, media query helpers
-3. Theme infrastructure (`globals.css` or `theme-provider.tsx`) — emits CSS custom properties on `:root`
-4. Consumer styles — reference tokens via `var(--color-primary)`, `var(--size-md)`
-5. Theme definitions (`themes/light.css`, `dark.css`) — set token values per theme
-6. React provider (`ThemeProvider`) — handles theme toggle, persistence, SSR no-flash (inline script or cookie)
+Use `@themecraft/core` for all theming (SCSS engine + CLI + runtime ThemeManager).
+
+**Install:**
+```bash
+npm install @themecraft/core
+npx themecraft init        # generates themecraft.config.json + tokens.json
+npx themecraft generate    # generates type-safe SCSS from tokens.json
+```
+
+**Pipeline:**
+1. `tokens.json` — define token names (colors, sizes, typography, breakpoints) with JSON schema validation
+2. `npx themecraft generate` — produces type-safe SCSS variables with IDE autocomplete
+3. Theme files (`themes/light.scss`, `dark.scss`) — use `define-light-theme()` / `define-dark-theme()`
+4. `@themecraft/core/themes` → `variables()` mixin emits CSS custom properties at `:root`
+5. `ThemeManager` (from `@themecraft/core/runtime`) — runtime theme switching, storage persistence, FOUC prevention
+
+**Component SCSS** (`.module.scss`) — import generated variables, NEVER call `color-var()`/`size-var()` directly:
+```scss
+@use 'generated/theme/colors' as colors;
+@use 'generated/theme/sizes' as sizes;
+@use 'generated/theme/typography' as typo;
+@use '@themecraft/core/theming' as theming;
+
+.card {
+  background: colors.$surface;
+  color: colors.$on-surface;
+  padding: sizes.$card-padding;
+  @include typo.body-primary();
+  @include theming.theme-transition();
+}
+```
+
+**How it works:** `npx themecraft generate` reads `tokens.json` and produces typed SCSS files (`generated/theme/colors.scss`, `sizes.scss`, `typography.scss`) that wrap `color-var()`/`size-var()` internally. Components consume these generated variables — never the raw accessor functions.
+
+**Figma workflow:** If a Figma design exists, run `npx themecraft figma-sync` FIRST to pull design variables into `tokens.json`, then `npx themecraft generate`.
+
+**Runtime setup** (in layout or `_app.tsx`):
+```typescript
+import { ThemeManager } from '@themecraft/core/runtime';
+
+const themeManager = new ThemeManager({
+  themes: ['light', 'dark'],
+  defaultTheme: 'light',
+  basePath: '/themes/',
+  storage: 'localStorage',
+  preferSystemTheme: { light: 'light', dark: 'dark' },
+  transition: { duration: '200ms' },
+}, document);
+
+// SSR FOUC prevention — add inline script to <head>:
+// themeManager.getInlineScript()
+// SSR link tag: ThemeManager.buildSSRLinkTag(config)
+```
 
 **Styling approach** (pick one per project, set in CLAUDE.md):
-- **CSS Modules** (`.module.css`) — scoped by default, zero runtime cost, works with SSR
-- **Tailwind CSS** — utility-first, configure via `tailwind.config.ts` with design tokens
-- No CSS-in-JS with runtime overhead (styled-components, emotion) unless explicitly chosen
+- **CSS Modules** (`.module.scss`) — scoped by default, zero runtime cost, works with SSR
+- **Tailwind CSS** — utility-first, configure with design tokens from @themecraft
+- No CSS-in-JS with runtime overhead unless explicitly chosen
+
+**PostCSS optimization** — add `@themecraft/core/postcss` plugin to remove unused token declarations.
 
 Component style usage:
 ```tsx
-import styles from './user-card.module.css';
-// or with Tailwind: className="flex items-center gap-2 text-primary"
+import styles from './user-card.module.scss';
+// generated SCSS variables compile to CSS custom properties
 ```
 
 ## Atomic UI Component Library
@@ -241,7 +289,7 @@ When reviewing React code, check:
 - SSR safety: no direct `window`/`document`/`navigator` access in Server Components, correct `'use client'` boundaries
 - Server/client separation: Flag WARN if a module mixes server and browser logic without clear boundaries
 - No memory leaks in effects, event listeners, or subscriptions
-- Theme compliance: CSS custom properties for colors/sizes/spacing — no hardcoded values
+- Theme compliance: generated @themecraft SCSS variables — no hardcoded colors/sizes, no direct `color-var()`/`size-var()` calls
 - Code splitting: `React.lazy` + `Suspense` for heavy routes/components, no eager imports of page-level components
 - Dynamic imports for heavy third-party libraries
 - Naming: PascalCase components, camelCase hooks, kebab-case files

package/dist/template/.claude/profiles/svelte.md

@@ -150,30 +150,68 @@ SvelteKit file-based routing:
 - Alternative: `svelte-i18n` — runtime-based, ICU message format
 - Keep translation keys stable, co-locate message files with features when possible
 
-## Theme System
+## Theme System — @themecraft
 
-Pattern layers:
-1. Token definitions (`app.css` or `tokens/`) — CSS custom properties at `:root`
-2. Semantic tokens — map raw tokens to semantic names (`--color-surface`, `--color-on-surface`)
-3. Theme variants (`[data-theme="dark"]`) — override semantic tokens per theme
-4. Component styles — use `var(--color-surface)` in scoped `<style>` blocks
-5. Theme toggle — store preference in cookie (SSR-safe) + `$state` for reactivity
+Use `@themecraft/core` for all theming (SCSS engine + CLI + runtime ThemeManager).
 
-Svelte scoped styles + CSS custom properties:
+**Install:**
+```bash
+npm install @themecraft/core
+npx themecraft init        # generates themecraft.config.json + tokens.json
+npx themecraft generate    # generates type-safe SCSS from tokens.json
+```
+
+**Pipeline:**
+1. `tokens.json` — define token names (colors, sizes, typography, breakpoints)
+2. `npx themecraft generate` — produces type-safe SCSS variables with IDE autocomplete
+3. Theme files (`themes/light.scss`, `dark.scss`) — use `define-light-theme()` / `define-dark-theme()`
+4. `@themecraft/core/themes` → `variables()` mixin emits CSS custom properties at `:root`
+5. `ThemeManager` (from `@themecraft/core/runtime`) — runtime switching, storage, FOUC prevention
+
+**Component SCSS** — import generated variables, NEVER call `color-var()`/`size-var()` directly:
 ```svelte
-<style>
+<style lang="scss">
+  @use 'generated/theme/colors' as colors;
+  @use 'generated/theme/sizes' as sizes;
+  @use 'generated/theme/typography' as typo;
+  @use '@themecraft/core/theming' as theming;
+
   .card {
-    background: var(--color-surface);
-    color: var(--color-on-surface);
-    padding: var(--space-md);
-    border-radius: var(--radius-md);
+    background: colors.$surface;
+    color: colors.$on-surface;
+    padding: sizes.$card-padding;
+    @include typo.body-primary();
+    @include theming.theme-transition();
   }
 </style>
 ```
 
-Global styles via `:global()` selector or `app.css` — use sparingly.
+**How it works:** `npx themecraft generate` reads `tokens.json` and produces typed SCSS files (`generated/theme/colors.scss`, `sizes.scss`, `typography.scss`) that wrap `color-var()`/`size-var()` internally. Components consume these generated variables — never the raw accessor functions.
+
+**Figma workflow:** If a Figma design exists, run `npx themecraft figma-sync` FIRST to pull design variables into `tokens.json`, then `npx themecraft generate`.
+
+**Runtime setup** (in `+layout.svelte` or `hooks.server.ts`):
+```typescript
+import { ThemeManager } from '@themecraft/core/runtime';
+
+const themeManager = new ThemeManager({
+  themes: ['light', 'dark'],
+  defaultTheme: 'light',
+  basePath: '/themes/',
+  storage: 'localStorage',
+  preferSystemTheme: { light: 'light', dark: 'dark' },
+  transition: { duration: '200ms' },
+}, document);
+
+// SSR: use ThemeManager.buildSSRLinkTag(config) in hooks.server.ts
+// FOUC prevention: ThemeManager.buildInlineScript(config) in <svelte:head>
+```
+
+Global styles via `:global()` selector or `app.scss` — use sparingly.
 Component-scoped styles are the default and preferred approach.
 
+**PostCSS optimization** — add `@themecraft/core/postcss` plugin to remove unused token declarations.
+
 ## Atomic UI Component Library
 
 Atomic design: atoms -> molecules -> organisms -> templates -> pages.
@@ -255,7 +293,7 @@ When reviewing Svelte code, check:
 - Server/client separation: secrets and DB in `+page.server.ts`, not `+page.ts`
 - `$lib/` imports — no deep relative paths (`../../../`)
 - `$lib/server/` for server-only modules — enforced by SvelteKit
-- Theme compliance: CSS custom properties (`var(--*)`) — no hardcoded colors/sizes
+- Theme compliance: generated @themecraft SCSS variables — no hardcoded colors/sizes, no direct `color-var()`/`size-var()` calls
 - Lazy loading: routes auto-split, dynamic `import()` for heavy non-route components
 - Accessibility: all Svelte compiler a11y warnings resolved (not suppressed)
 - No `{@html}` without sanitization

package/dist/template/.claude/profiles/vue.md

@@ -175,35 +175,70 @@ src/
 - Keep translation keys stable and organized by feature/domain
 - Locale files: JSON format, one per language (`en.json`, `cs.json`)
 
-## Theme System
+## Theme System — @themecraft
 
-Pattern layers:
-1. Token definitions (`variables/_colors.css`) — CSS custom properties for design tokens
-2. Semantic tokens (`variables/_semantic.css`) — map raw tokens to semantic names (`--color-text-primary`, `--color-bg-surface`)
-3. Theme definitions (`themes/light.css`, `dark.css`) — assign token values per theme
-4. Utility composable (`useTheme.ts`) — toggle theme, persist preference, no-flash on load
-5. Component usage via CSS custom properties — never hardcode colors/sizes
+Use `@themecraft/core` for all theming (SCSS engine + CLI + runtime ThemeManager).
 
-**Scoped styles with `<style scoped>`:**
-- Default to `<style scoped>` — styles are automatically scoped to the component
-- Use `:deep()` pseudo-class to style child component internals (sparingly)
-- Use `:slotted()` to style slot content from parent
-- Use `:global()` for truly global overrides (rare)
+**Install:**
+```bash
+npm install @themecraft/core
+npx themecraft init        # generates themecraft.config.json + tokens.json
+npx themecraft generate    # generates type-safe SCSS from tokens.json
+```
 
-**CSS Modules:** `<style module>` for class-based scoping (`:class="$style.myClass"`). Prefer scoped styles for most cases.
+**Pipeline:**
+1. `tokens.json` — define token names (colors, sizes, typography, breakpoints)
+2. `npx themecraft generate` — produces type-safe SCSS variables with IDE autocomplete
+3. Theme files (`themes/light.scss`, `dark.scss`) — use `define-light-theme()` / `define-dark-theme()`
+4. `@themecraft/core/themes` → `variables()` mixin emits CSS custom properties at `:root`
+5. `ThemeManager` (from `@themecraft/core/runtime`) — runtime switching, storage, FOUC prevention
 
-Component style usage:
+**Component SCSS** — import generated variables, NEVER call `color-var()`/`size-var()` directly:
 ```vue
-<style scoped>
+<style scoped lang="scss">
+@use 'generated/theme/colors' as colors;
+@use 'generated/theme/sizes' as sizes;
+@use 'generated/theme/typography' as typo;
+@use '@themecraft/core/theming' as theming;
+
 .card {
-  background: var(--color-bg-surface);
-  color: var(--color-text-primary);
-  padding: var(--spacing-md);
-  border-radius: var(--radius-md);
+  background: colors.$surface;
+  color: colors.$on-surface;
+  padding: sizes.$card-padding;
+  @include typo.body-primary();
+  @include theming.theme-transition();
 }
 </style>
 ```
 
+**How it works:** `npx themecraft generate` reads `tokens.json` and produces typed SCSS files (`generated/theme/colors.scss`, `sizes.scss`, `typography.scss`) that wrap `color-var()`/`size-var()` internally. Components consume these generated variables — never the raw accessor functions.
+
+**Figma workflow:** If a Figma design exists, run `npx themecraft figma-sync` FIRST to pull design variables into `tokens.json`, then `npx themecraft generate`.
+
+**Runtime setup** (in `App.vue` or plugin):
+```typescript
+import { ThemeManager } from '@themecraft/core/runtime';
+
+const themeManager = new ThemeManager({
+  themes: ['light', 'dark'],
+  defaultTheme: 'light',
+  basePath: '/themes/',
+  storage: 'localStorage',
+  preferSystemTheme: { light: 'light', dark: 'dark' },
+  transition: { duration: '200ms' },
+}, document);
+```
+
+**Scoped styles with `<style scoped>`:**
+- Default to `<style scoped lang="scss">` — styles are automatically scoped to the component
+- Use `:deep()` pseudo-class to style child component internals (sparingly)
+- Use `:slotted()` to style slot content from parent
+- Use `:global()` for truly global overrides (rare)
+
+**CSS Modules:** `<style module lang="scss">` for class-based scoping. Prefer scoped styles for most cases.
+
+**PostCSS optimization** — add `@themecraft/core/postcss` plugin to remove unused token declarations.
+
 ## Atomic UI Component Library
 
 Atomic design: atoms -> molecules -> organisms -> templates -> pages.
@@ -284,7 +319,7 @@ When reviewing Vue code, check:
 - SSR safety: no direct `window`/`document`/`navigator` access outside `onMounted` or client guards
 - SSR/Client separation: Flag WARN if a composable mixes server and browser logic
 - `<style scoped>` on all components — no unscoped styles leaking globally
-- Theme compliance: CSS custom properties (`var(--token)`) — no hardcoded colors/sizes
+- Theme compliance: generated @themecraft SCSS variables — no hardcoded colors/sizes, no direct `color-var()`/`size-var()` calls
 - Lazy loading: `defineAsyncComponent` for heavy components, dynamic imports for routes
 - No `v-html` without sanitization (XSS risk)
 - Props defined with TypeScript types via `defineProps<{ ... }>()` — not runtime-only validation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-claude-workspace",
-  "version": "1.1.32",
+  "version": "1.1.34",
   "description": "Scaffold a project with Claude Code agents for autonomous AI-driven development",
   "type": "module",
   "bin": {