create-claude-workspace 1.1.33 → 1.1.35

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

@@ -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 @themecraft theme system (`color-var()`, `size-var()`, `typography-level-var()`) — 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

@@ -157,25 +157,29 @@ npx themecraft generate    # generates type-safe SCSS from tokens.json
 4. `@themecraft/core/themes` → `variables()` mixin emits CSS custom properties at `:root`
 5. `@themecraft/angular` → `provideTheme()` for runtime switching, `provideThemeServer()` for SSR (no FOUC)
 
-**SCSS imports** (in component `.scss` files):
+**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: theming.color-var('surface');
-  color: theming.color-var('on-surface');
-  padding: theming.size-var('card-padding');
-  @include theming.typography-level-var('body-primary');
+  background: colors.$surface;
+  color: colors.$on-surface;
+  padding: sizes.$card-padding;
+  @include typo.body-primary();
   @include theming.theme-transition();  // smooth theme switch
 }
 ```
 
-**Token accessors** (always use these, NEVER hardcode colors/sizes):
-- `theming.color-var($name)` → `var(--color-#{$name})`
-- `theming.size-var($name)` → `var(--size-#{$name})`
-- `theming.breakpoints-var($name)` → `var(--breakpoint-#{$name})`
-- `@include theming.typography-level-var($level)` → all typography properties
-- `theming.size($small, $medium, $large)` → responsive size map (auto breakpoint media queries)
+**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.
+
+**Token source (pick one):**
+- **With Figma:** `npx themecraft figma-sync` pulls design variables into `tokens.json`, then `npx themecraft generate`
+- **Without Figma:** `npx themecraft init` creates `tokens.json` scaffold → manually define token names (color groups, size groups, typography levels) → `npx themecraft generate`
+
+Either way, the result is the same: typed SCSS files in `generated/theme/` ready to import.
 
 **Theme definition** (`themes/light.scss`):
 ```scss
@@ -226,8 +230,6 @@ switchTheme(name: string) { this.#theme.load(name); }
 
 **PostCSS optimization** — add `@themecraft/core/postcss` plugin to remove unused token declarations from compiled CSS.
 
-**Figma sync** (optional): `npx themecraft figma-sync` pulls design variables from Figma API into `tokens.json`.
-
 ## Atomic UI Component Library
 
 Atomic design: atoms -> molecules -> organisms -> templates -> pages.
@@ -298,7 +300,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

@@ -167,24 +167,29 @@ npx themecraft generate    # generates type-safe SCSS from tokens.json
 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
 
-**SCSS imports** (in component `.module.scss` or global styles):
+**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: theming.color-var('surface');
-  color: theming.color-var('on-surface');
-  padding: theming.size-var('card-padding');
-  @include theming.typography-level-var('body-primary');
+  background: colors.$surface;
+  color: colors.$on-surface;
+  padding: sizes.$card-padding;
+  @include typo.body-primary();
   @include theming.theme-transition();
 }
 ```
 
-**Token accessors** (always use these, NEVER hardcode colors/sizes):
-- `theming.color-var($name)` → `var(--color-#{$name})`
-- `theming.size-var($name)` → `var(--size-#{$name})`
-- `@include theming.typography-level-var($level)` → all typography properties
-- `theming.size($small, $medium, $large)` → responsive size map
+**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.
+
+**Token source (pick one):**
+- **With Figma:** `npx themecraft figma-sync` pulls design variables into `tokens.json`, then `npx themecraft generate`
+- **Without Figma:** `npx themecraft init` creates `tokens.json` scaffold → manually define token names (color groups, size groups, typography levels) → `npx themecraft generate`
+
+Either way, the result is the same: typed SCSS files in `generated/theme/` ready to import.
 
 **Runtime setup** (in layout or `_app.tsx`):
 ```typescript
@@ -211,12 +216,10 @@ const themeManager = new ThemeManager({
 
 **PostCSS optimization** — add `@themecraft/core/postcss` plugin to remove unused token declarations.
 
-**Figma sync** (optional): `npx themecraft figma-sync` pulls design variables from Figma API into `tokens.json`.
-
 Component style usage:
 ```tsx
 import styles from './user-card.module.scss';
-// tokens available via CSS custom properties in SCSS
+// generated SCSS variables compile to CSS custom properties
 ```
 
 ## Atomic UI Component Library
@@ -290,7 +293,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

@@ -168,26 +168,31 @@ npx themecraft generate    # generates type-safe SCSS from tokens.json
 4. `@themecraft/core/themes` → `variables()` mixin emits CSS custom properties at `:root`
 5. `ThemeManager` (from `@themecraft/core/runtime`) — runtime switching, storage, FOUC prevention
 
-**SCSS in scoped styles** (`<style lang="scss">`):
+**Component SCSS** — import generated variables, NEVER call `color-var()`/`size-var()` directly:
 ```svelte
 <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: theming.color-var('surface');
-    color: theming.color-var('on-surface');
-    padding: theming.size-var('card-padding');
-    @include theming.typography-level-var('body-primary');
+    background: colors.$surface;
+    color: colors.$on-surface;
+    padding: sizes.$card-padding;
+    @include typo.body-primary();
     @include theming.theme-transition();
   }
 </style>
 ```
 
-**Token accessors** (always use these, NEVER hardcode colors/sizes):
-- `theming.color-var($name)` → `var(--color-#{$name})`
-- `theming.size-var($name)` → `var(--size-#{$name})`
-- `@include theming.typography-level-var($level)` → all typography properties
-- `theming.size($small, $medium, $large)` → responsive size map
+**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.
+
+**Token source (pick one):**
+- **With Figma:** `npx themecraft figma-sync` pulls design variables into `tokens.json`, then `npx themecraft generate`
+- **Without Figma:** `npx themecraft init` creates `tokens.json` scaffold → manually define token names (color groups, size groups, typography levels) → `npx themecraft generate`
+
+Either way, the result is the same: typed SCSS files in `generated/theme/` ready to import.
 
 **Runtime setup** (in `+layout.svelte` or `hooks.server.ts`):
 ```typescript
@@ -211,8 +216,6 @@ Component-scoped styles are the default and preferred approach.
 
 **PostCSS optimization** — add `@themecraft/core/postcss` plugin to remove unused token declarations.
 
-**Figma sync** (optional): `npx themecraft figma-sync` pulls design variables from Figma API into `tokens.json`.
-
 ## Atomic UI Component Library
 
 Atomic design: atoms -> molecules -> organisms -> templates -> pages.
@@ -294,7 +297,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

@@ -193,26 +193,31 @@ npx themecraft generate    # generates type-safe SCSS from tokens.json
 4. `@themecraft/core/themes` → `variables()` mixin emits CSS custom properties at `:root`
 5. `ThemeManager` (from `@themecraft/core/runtime`) — runtime switching, storage, FOUC prevention
 
-**SCSS in scoped styles** (`<style scoped lang="scss">`):
+**Component SCSS** — import generated variables, NEVER call `color-var()`/`size-var()` directly:
 ```vue
 <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: theming.color-var('surface');
-  color: theming.color-var('on-surface');
-  padding: theming.size-var('card-padding');
-  @include theming.typography-level-var('body-primary');
+  background: colors.$surface;
+  color: colors.$on-surface;
+  padding: sizes.$card-padding;
+  @include typo.body-primary();
   @include theming.theme-transition();
 }
 </style>
 ```
 
-**Token accessors** (always use these, NEVER hardcode colors/sizes):
-- `theming.color-var($name)` → `var(--color-#{$name})`
-- `theming.size-var($name)` → `var(--size-#{$name})`
-- `@include theming.typography-level-var($level)` → all typography properties
-- `theming.size($small, $medium, $large)` → responsive size map
+**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.
+
+**Token source (pick one):**
+- **With Figma:** `npx themecraft figma-sync` pulls design variables into `tokens.json`, then `npx themecraft generate`
+- **Without Figma:** `npx themecraft init` creates `tokens.json` scaffold → manually define token names (color groups, size groups, typography levels) → `npx themecraft generate`
+
+Either way, the result is the same: typed SCSS files in `generated/theme/` ready to import.
 
 **Runtime setup** (in `App.vue` or plugin):
 ```typescript
@@ -238,8 +243,6 @@ const themeManager = new ThemeManager({
 
 **PostCSS optimization** — add `@themecraft/core/postcss` plugin to remove unused token declarations.
 
-**Figma sync** (optional): `npx themecraft figma-sync` pulls design variables from Figma API into `tokens.json`.
-
 ## Atomic UI Component Library
 
 Atomic design: atoms -> molecules -> organisms -> templates -> pages.
@@ -320,7 +323,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.33",
+  "version": "1.1.35",
   "description": "Scaffold a project with Claude Code agents for autonomous AI-driven development",
   "type": "module",
   "bin": {