create-claude-workspace 1.1.89 → 1.1.91

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

@@ -94,7 +94,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 generated SCSS variables (`colors.$token`, `sizes.$token`, `typo.level()`) — no hardcoded color/size values, no direct `color-var()`/`size-var()` calls
+- Always use @themecraft generated SCSS variables (`colors.$token`, `sizes.$token`, `@include typography.level-name`) — no hardcoded color/size values, no direct `color-var()`/`size-var()` calls
 
 ## Output Format
 

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

@@ -317,14 +317,12 @@ npx themecraft generate    # generates type-safe SCSS from tokens.json
 @use 'theme/colors';
 @use 'theme/sizes';
 @use 'theme/typography';
-@use '@themecraft/core/theming';
 
 .card {
   background: colors.$surface;
   color: colors.$on-surface;
   padding: sizes.$card-padding;
-  @include typography.body-primary();
-  @include theming.theme-transition();  // smooth theme switch
+  @include typography.body-primary;
 }
 ```
 
@@ -354,26 +352,45 @@ Then run `<PM> install` to create the link. SCSS `@use 'theme/colors'` (or `@use
 **How it works:** `npx themecraft generate` runs inside the theme library (`libs/shared/ui/theme/`) and produces typed SCSS files (`src/colors.scss`, `sizes.scss`, `typography.scss`) that wrap `color-var()`/`size-var()` internally. Because the library is linked as a package, `@use 'theme/colors'` resolves to these generated files. Components consume the generated variables — never the raw accessor functions, never `generated/` paths.
 
 **Token source (pick one):**
-- **With Figma:** `npx themecraft figma-sync` pulls design variables into `tokens.json`, then `npx themecraft generate`
+- **With Figma:** `npx themecraft sync --figma-file-key YOUR_FILE_KEY --token YOUR_ACCESS_TOKEN` 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 inside the theme library, importable via `@use 'theme/colors'`.
 
-**Theme definition** (`themes/light.scss`):
+**Theme values** (`themes/light-values.scss`) — define a `$theme` variable with token values:
 ```scss
 @use '@themecraft/core/theming' as theming;
-@use '@themecraft/core/themes' as themes with (
-  $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();
+@use 'theme/variables/colors';
+@use 'theme/variables/sizes';
+@use 'theme/variables/typography';
+@use 'theme/variables/breakpoints';
+
+$theme: theming.define-light-theme((
+  color: theming.define-color-scheme((
+    colors.$background-body: #ffffff,
+    colors.$content-primary: #1a1a1a,
+    colors.$interactive-primary: #0066cc,
+  )),
+  size: (
+    sizes.$padding-m: theming.size(12px, 16px, 24px),
+    sizes.$corner-m: 4px,
+  ),
+  typography: (
+    typography.$body-primary: theming.define-typography-level(16px, 1.5, 400, 'Inter, sans-serif'),
+  ),
+  breakpoint: (
+    breakpoints.$medium: 768px,
+    breakpoints.$large: 1200px,
+  ),
+));
+```
+
+**Theme entry point** (`themes/light.scss`) — passes values to the engine, compiles to CSS:
+```scss
+@use './light-values' as light;
+@use '@themecraft/core/themes' with ($themes: (light: light.$theme));
+
+@include themes.variables(':root');
 ```
 
 **Angular app config** (`app.config.ts`):

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

@@ -199,7 +199,7 @@ npx themecraft generate    # generates type-safe SCSS from tokens.json
 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
+5. `ThemeManager` (from `@themecraft/core`) — runtime theme switching, storage persistence, FOUC prevention
 
 **Component SCSS** (`.module.scss`) — import via workspace package name, NEVER use relative paths or `generated/` paths, NEVER call `color-var()`/`size-var()` directly:
 ```scss
@@ -207,14 +207,12 @@ npx themecraft generate    # generates type-safe SCSS from tokens.json
 @use 'theme/colors';
 @use 'theme/sizes';
 @use 'theme/typography';
-@use '@themecraft/core/theming';
 
 .card {
   background: colors.$surface;
   color: colors.$on-surface;
   padding: sizes.$card-padding;
-  @include typography.body-primary();
-  @include theming.theme-transition();
+  @include typography.body-primary;
 }
 ```
 
@@ -244,27 +242,29 @@ Then run `<PM> install` to create the link. SCSS `@use 'theme/colors'` (or `@use
 **How it works:** `npx themecraft generate` runs inside the theme library and produces typed SCSS files (`src/colors.scss`, `sizes.scss`, `typography.scss`) that wrap `color-var()`/`size-var()` internally. Because the library is linked as a package, `@use 'theme/colors'` resolves to these generated files. Components consume the generated variables — never the raw accessor functions, never `generated/` paths.
 
 **Token source (pick one):**
-- **With Figma:** `npx themecraft figma-sync` pulls design variables into `tokens.json`, then `npx themecraft generate`
+- **With Figma:** `npx themecraft sync --figma-file-key YOUR_FILE_KEY --token YOUR_ACCESS_TOKEN` 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 inside the theme library, importable via `@use 'theme/colors'`.
 
 **Runtime setup** (in layout or `_app.tsx`):
 ```typescript
-import { ThemeManager } from '@themecraft/core/runtime';
+import { ThemeManager, defineConfig } from '@themecraft/core';
 
-const themeManager = new ThemeManager({
-  themes: ['light', 'dark'],
+const config = defineConfig({
   defaultTheme: 'light',
-  basePath: '/themes/',
+  themes: ['light', 'dark'],
   storage: 'localStorage',
+  basePath: '/themes/',
   preferSystemTheme: { light: 'light', dark: 'dark' },
   transition: { duration: '200ms' },
-}, document);
+});
+
+const themeManager = new ThemeManager(config, document);
 
 // SSR FOUC prevention — add inline script to <head>:
-// themeManager.getInlineScript()
-// SSR link tag: ThemeManager.buildSSRLinkTag(config)
+// themeManager.addInlineScript()
+// SSR link tag: themeManager.getSSRLinkTag()
 ```
 
 **Styling approach** (pick one per project, set in CLAUDE.md):

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

@@ -197,7 +197,7 @@ npx themecraft generate    # generates type-safe SCSS from tokens.json
 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
+5. `ThemeManager` (from `@themecraft/core`) — runtime switching, storage, FOUC prevention
 
 **Component SCSS** — import via workspace package name, NEVER use relative paths or `generated/` paths, NEVER call `color-var()`/`size-var()` directly:
 ```svelte
@@ -206,14 +206,12 @@ npx themecraft generate    # generates type-safe SCSS from tokens.json
   @use 'theme/colors';
   @use 'theme/sizes';
   @use 'theme/typography';
-  @use '@themecraft/core/theming';
 
   .card {
     background: colors.$surface;
     color: colors.$on-surface;
     padding: sizes.$card-padding;
-    @include typography.body-primary();
-    @include theming.theme-transition();
+    @include typography.body-primary;
   }
 </style>
 ```
@@ -244,26 +242,28 @@ Then run `<PM> install` to create the link. SCSS `@use 'theme/colors'` (or `@use
 **How it works:** `npx themecraft generate` runs inside the theme library and produces typed SCSS files (`src/colors.scss`, `sizes.scss`, `typography.scss`) that wrap `color-var()`/`size-var()` internally. Because the library is linked as a package, `@use 'theme/colors'` resolves to these generated files. Components consume the generated variables — never the raw accessor functions, never `generated/` paths.
 
 **Token source (pick one):**
-- **With Figma:** `npx themecraft figma-sync` pulls design variables into `tokens.json`, then `npx themecraft generate`
+- **With Figma:** `npx themecraft sync --figma-file-key YOUR_FILE_KEY --token YOUR_ACCESS_TOKEN` 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 inside the theme library, importable via `@use 'theme/colors'`.
 
 **Runtime setup** (in `+layout.svelte` or `hooks.server.ts`):
 ```typescript
-import { ThemeManager } from '@themecraft/core/runtime';
+import { ThemeManager, defineConfig } from '@themecraft/core';
 
-const themeManager = new ThemeManager({
-  themes: ['light', 'dark'],
+const config = defineConfig({
   defaultTheme: 'light',
-  basePath: '/themes/',
+  themes: ['light', 'dark'],
   storage: 'localStorage',
+  basePath: '/themes/',
   preferSystemTheme: { light: 'light', dark: 'dark' },
   transition: { duration: '200ms' },
-}, document);
+});
+
+const themeManager = new ThemeManager(config, document);
 
-// SSR: use ThemeManager.buildSSRLinkTag(config) in hooks.server.ts
-// FOUC prevention: ThemeManager.buildInlineScript(config) in <svelte:head>
+// SSR link tag: themeManager.getSSRLinkTag()
+// FOUC prevention: themeManager.addInlineScript()
 ```
 
 Global styles via `:global()` selector or `app.scss` — use sparingly.

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

@@ -225,7 +225,7 @@ npx themecraft generate    # generates type-safe SCSS from tokens.json
 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
+5. `ThemeManager` (from `@themecraft/core`) — runtime switching, storage, FOUC prevention
 
 **Component SCSS** — import via workspace package name, NEVER use relative paths or `generated/` paths, NEVER call `color-var()`/`size-var()` directly:
 ```vue
@@ -234,14 +234,12 @@ npx themecraft generate    # generates type-safe SCSS from tokens.json
 @use 'theme/colors';
 @use 'theme/sizes';
 @use 'theme/typography';
-@use '@themecraft/core/theming';
 
 .card {
   background: colors.$surface;
   color: colors.$on-surface;
   padding: sizes.$card-padding;
-  @include typography.body-primary();
-  @include theming.theme-transition();
+  @include typography.body-primary;
 }
 </style>
 ```
@@ -272,23 +270,25 @@ Then run `<PM> install` to create the link. SCSS `@use 'theme/colors'` (or `@use
 **How it works:** `npx themecraft generate` runs inside the theme library and produces typed SCSS files (`src/colors.scss`, `sizes.scss`, `typography.scss`) that wrap `color-var()`/`size-var()` internally. Because the library is linked as a package, `@use 'theme/colors'` resolves to these generated files. Components consume the generated variables — never the raw accessor functions, never `generated/` paths.
 
 **Token source (pick one):**
-- **With Figma:** `npx themecraft figma-sync` pulls design variables into `tokens.json`, then `npx themecraft generate`
+- **With Figma:** `npx themecraft sync --figma-file-key YOUR_FILE_KEY --token YOUR_ACCESS_TOKEN` 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 inside the theme library, importable via `@use 'theme/colors'`.
 
 **Runtime setup** (in `App.vue` or plugin):
 ```typescript
-import { ThemeManager } from '@themecraft/core/runtime';
+import { ThemeManager, defineConfig } from '@themecraft/core';
 
-const themeManager = new ThemeManager({
-  themes: ['light', 'dark'],
+const config = defineConfig({
   defaultTheme: 'light',
-  basePath: '/themes/',
+  themes: ['light', 'dark'],
   storage: 'localStorage',
+  basePath: '/themes/',
   preferSystemTheme: { light: 'light', dark: 'dark' },
   transition: { duration: '200ms' },
-}, document);
+});
+
+const themeManager = new ThemeManager(config, document);
 ```
 
 **Scoped styles with `<style scoped>`:**

package/package.json

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