create-claude-workspace 1.1.72 → 1.1.73

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

@@ -264,22 +264,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)
 
-**Component SCSS** — import generated variables, NEVER call `color-var()`/`size-var()` directly:
+**Component SCSS** — import via package name, NEVER use relative paths, 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;
+// Import via package name (configured in tsconfig/package.json paths)
+// SCSS @use automatically uses the last path segment as namespace — no `as` needed
+@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 typo.body-primary();
+  @include typography.body-primary();
   @include theming.theme-transition();  // smooth theme switch
 }
 ```
 
+**SCSS import rules:**
+- ALWAYS import via package/library name (e.g. `@use 'theme/colors'`) — configure `stylePreprocessorOptions.includePaths` or tsconfig paths so the theme library is resolvable by name
+- NEVER use relative paths (`../../theme/src/generated/...`) — they break on refactoring and are unreadable
+- NEVER use redundant `as` aliases that match the last path segment (`@use 'theme/colors' as colors` → just `@use 'theme/colors'`). Only use `as` when you need a different name.
+
 **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):**
@@ -410,6 +417,7 @@ When reviewing Angular code, check:
 - Resource disposal (ImageBitmap.close(), stream.stop(), BroadcastChannel.close())
 - No memory leaks in effects or event listeners
 - Theme compliance: generated @themecraft SCSS variables — no hardcoded colors/sizes, no direct `color-var()`/`size-var()` calls
+- SCSS imports: via package name (no relative paths), no redundant `as` aliases
 - Lazy loading via loadComponent/loadChildren, no eager page imports
 - @defer for heavy below-fold components
 - Naming: PascalCase components, lib- selectors, kebab-case files

package/package.json

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