create-claude-workspace 1.1.32 → 1.1.33

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 theme system (`color-var()`, `size-var()`, `typography-level-var()`) — no hardcoded color/size values
 
 ## Output Format
 

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

@@ -139,23 +139,94 @@ 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
-
-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
-
-SCSS package.json exports:
-{ "./themes", "./theming", "./colors", "./typography", "./sizes", "./breakpoints" }
-
-Component SCSS usage:
-@use '@[PREFIX]/theme/colors';
-@use '@[PREFIX]/theme/sizes';
-@use '@[PREFIX]/theme/typography';
+## Theme System — @themecraft
+
+Use `@themecraft/core` (SCSS engine + CLI + runtime) and `@themecraft/angular` (Angular adapter) for all theming.
+
+**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)
+
+**SCSS imports** (in component `.scss` files):
+```scss
+@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');
+  @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)
+
+**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); }
+```
+
+**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
 

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

@@ -149,25 +149,74 @@ 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
+
+**SCSS imports** (in component `.module.scss` or global styles):
+```scss
+@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');
+  @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
+
+**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.
+
+**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.css';
-// or with Tailwind: className="flex items-center gap-2 text-primary"
+import styles from './user-card.module.scss';
+// tokens available via CSS custom properties in SCSS
 ```
 
 ## Atomic UI Component Library

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

@@ -150,30 +150,69 @@ 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
+
+**SCSS in scoped styles** (`<style lang="scss">`):
 ```svelte
-<style>
+<style lang="scss">
+  @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: theming.color-var('surface');
+    color: theming.color-var('on-surface');
+    padding: theming.size-var('card-padding');
+    @include theming.typography-level-var('body-primary');
+    @include theming.theme-transition();
   }
 </style>
 ```
 
-Global styles via `:global()` selector or `app.css` — use sparingly.
+**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
+
+**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.
+
+**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.

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

@@ -175,35 +175,71 @@ 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:
+**SCSS in scoped styles** (`<style scoped lang="scss">`):
 ```vue
-<style scoped>
+<style scoped lang="scss">
+@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: theming.color-var('surface');
+  color: theming.color-var('on-surface');
+  padding: theming.size-var('card-padding');
+  @include theming.typography-level-var('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
+
+**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.
+
+**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.

package/package.json

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