ngx-theme-stack 3.8.0 → 3.8.3

package/README.md

@@ -105,7 +105,7 @@ The installation command automates the following:
 | `package.json`  | Adds a `"prebuild"` script for theme synchronization                    |
 | `angular.json`  | Registers `themes.css` and optimizes build config                       |
 | `themes.css`    | Scaffolds base theme tokens if they don't exist                         |
-| `SKILL.md`      | Generates an AI Agent Skill under `.agents/skills/` (optional)         |
+| `SKILL.md`      | Generates an AI Agent Skill under `.agents/skills/` (optional)          |
 
 > [!TIP]
 > **Re-configuration support:** Run `ng add` multiple times freely. The schematic updates existing code without duplicating it.
@@ -207,9 +207,7 @@ import { ThemeCycleService } from 'ngx-theme-stack';
   selector: 'app-theme-cycle',
   template: `
     @if (theme.isHydrated()) {
-      <button (click)="theme.cycle()">
-        🔄 Cycle Theme
-      </button>
+      <button (click)="theme.cycle()">🔄 Cycle Theme</button>
     } @else {
       <div class="theme-cycle-skeleton"></div>
     }
@@ -290,7 +288,7 @@ export class MyAdvancedComponent {
 >
 > ```html
 > @if (theme.isHydrated()) {
->   <img [src]="theme.isDark() ? 'dark-logo.png' : 'light-logo.png'">
+> <img [src]="theme.isDark() ? darkLogo : lightLogo" />
 > }
 > ```
 
@@ -305,18 +303,18 @@ export class MyAdvancedComponent {
 
 :root,
 .light {
-  --bg-color: #ffffff;
-  --text-color: #333333;
+  --background: #ffffff;
+  --foreground: #333333;
 }
 
 .dark {
-  --bg-color: #121212;
-  --text-color: #ffffff;
+  --background: #121212;
+  --foreground: #ffffff;
 }
 
 .sunset {
-  --bg-color: #ff5f6d;
-  --text-color: #ffffff;
+  --background: #ff5f6d;
+  --foreground: #ffffff;
 }
 ```
 
@@ -331,15 +329,15 @@ export class MyAdvancedComponent {
 @import 'tailwindcss';
 
 @theme {
-  --color-main-bg: var(--bg-color);
-  --color-main-text: var(--text-color);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
 }
 ```
 
 ### Use in components — no `dark:` prefix needed
 
 ```html
-<div class="bg-main-bg text-main-text shadow-xl">
+<div class="bg-background text-foreground shadow-xl">
   <!-- automatically reflects the active theme -->
 </div>
 ```
@@ -364,6 +362,7 @@ Only needed if you want `dark:` utilities tied to ngx-theme-stack's toggle:
 </details>
 
 ---
+
 ## 🤖 AI Code Assistants Integration
 
 `ngx-theme-stack` includes out-of-the-box support for AI coding assistants (such as Google Antigravity, Gemini, Claude Code, and other agents that support the open `SKILL.md` standard).
@@ -404,7 +403,7 @@ Once the skill is in your workspace, your AI assistant will automatically read i
 | **Network requests**      | Zero                               | One (then cached)                          |
 | **Flash risk**            | None                               | None                                       |
 | **Works with CSR**        | ✅                                 | ✅                                         |
-| **Works with SSR/SSG**    | ✅                                 | ⚠️ May flash on SSG                       |
+| **Works with SSR/SSG**    | ✅                                 | ⚠️ May flash on SSG                        |
 | **Strict CSP compatible** | ❌ requires `unsafe-inline`        | ✅                                         |
 | **Best for**              | Most apps                          | Strict CSP, many themes                    |
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-theme-stack",
-  "version": "3.8.0",
+  "version": "3.8.3",
   "description": "A stack of themes for Angular applications.",
   "keywords": [
     "angular",

package/schematics/skill/index.js

@@ -2,314 +2,174 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateSkill = generateSkill;
 exports.skill = skill;
-// ── SKILL.md (Tier 2 — loaded on activation) ────────────────────────────────
+// ── SKILL.md (Tier 2 — loaded on activation) ─────────
 const SKILL_CONTENT = `---
 name: ngx-theme-stack
-description: >-
-  Use when installing, configuring, or building theme-switching UI with
-  ngx-theme-stack in Angular 20+. Covers provideThemeStack setup,
-  ThemeToggle/Cycle/Select services, SSR hydration guards, CSS variable
-  theming, and Tailwind CSS v4 integration. Do not use for generic Angular
-  styling, standalone dark-mode CSS, or projects not using ngx-theme-stack.
+description: Signal-based theme manager for Angular 20+. Covers setup, services, SSR guards, and Tailwind v4.
 compatibility: Angular 20+ with TypeScript. Optional Tailwind CSS v4.
 metadata:
   author: WanderleeDev
-  version: "1.0.0"
+  version: '1.1.0'
 ---
 
 # ngx-theme-stack
 
-A headless, signal-based theme manager for Angular 20+.
-Supports dark/light/system/custom themes, SSR, and zero-flash rendering.
-
-## Architecture
-
-\`\`\`
-provideThemeStack()          ← DI configuration (app.config.ts)
-       │
-  CoreThemeService           ← Foundation: state, persistence, DOM updates
-       │
-  ┌────┼────────────┐
-  │    │             │
-Toggle  Cycle     Select     ← Convenience services (pick ONE per component)
-\`\`\`
+Headless, signal-based theme manager for Angular 20+.
 
 ## Interaction Rules
 
-> [!IMPORTANT]
-> **MANDATORY INTERACTION RULE**: If the user asks to implement theme switching, configuration, or a theme-related component but does NOT explicitly specify which convenience service to use (\`ThemeToggleService\`, \`ThemeCycleService\`, or \`ThemeSelectService\`), you **MUST NOT** make assumptions or start writing code.
-> You **MUST** stop and ask the user to explicitly choose one of the three patterns before proceeding.
->
-> Present these options clearly:
-> 1. **Toggle** (\`ThemeToggleService\`) — Binary toggle between dark and light themes (best for simple buttons or icon toggles).
-> 2. **Cycle** (\`ThemeCycleService\`) — Rotates through all configured themes (best for 3+ themes with a single button).
-> 3. **Select** (\`ThemeSelectService\`) — Full dropdown/radio list of all available themes (best for settings pages or explicit pickers).
->
-> **Custom Themes Inquiry**: In addition to the service choice, you **MUST** ask the user if they want to configure or need any **custom themes** (e.g. \`sunset\`, \`ocean\`, \`sepia\`) beyond the default \`light\`, \`dark\`, and \`system\`. Prompt the user for details on what they are looking for or need (such as specific custom theme names, colors, or CSS variables) to help them scaffold these customizations.
->
-> **DO NOT** generate any component code or configurations until the user has explicitly responded to these questions.
-
-## Constraints
-
-- Always import from \`'ngx-theme-stack'\` — never deep-import internal paths.
-- Call \`provideThemeStack()\` exactly once, in the root \`app.config.ts\` providers.
-- Custom themes are **merged** with built-ins. Passing \`['sepia']\` resolves to \`['system', 'light', 'dark', 'sepia']\`.
-- **Mandatory Theme Synchronization**: After configuring, adding, or modifying themes in \`provideThemeStack()\`, you **MUST** run the synchronization schematic command: \`ng generate ngx-theme-stack:sync --project PROJECT_NAME\` (or explicitly instruct the user to run it if you cannot execute commands). Failing to synchronize themes after modification is a critical violation that breaks theme compilation.
-- \`isDark()\` and \`isLight()\` return \`false\` for custom themes — use \`resolvedTheme()\` directly.
-- **Mandatory SSR Guard**: You MUST guard all theme-dependent template elements (e.g. text, icons, images, styling classes based on theme signals) using \`@if (theme.isHydrated())\`. Using theme signals (\`isDark()\`, \`resolvedTheme()\`, etc.) directly in templates without checking \`isHydrated()\` causes content flickering and critical Angular hydration mismatch errors in SSR.
-- Never call \`setTheme()\` with a theme name not registered in the \`themes\` array — it throws \`NgxThemeStackError\`.
-- Pick ONE convenience service per component — do not mix Toggle, Cycle, and Select in the same component.
-
-## Installation
-
-\`\`\`bash
-ng add ngx-theme-stack
-\`\`\`
-
-For Bun environments (where \`ng add\` is unsupported):
-\`\`\`bash
-bun add ngx-theme-stack
-ng generate ngx-theme-stack:ng-add
-\`\`\`
-
-## Configuration
-
-Configure in \`app.config.ts\` via \`provideThemeStack()\`:
-
-\`\`\`typescript
-import { provideThemeStack } from 'ngx-theme-stack';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideThemeStack({
-      themes: ['sunset', 'ocean'] as const,
-      defaultTheme: 'system',
-      mode: 'class',
-      strategy: 'critters',
-      storageKey: 'ngx-theme-stack',
-    }),
-  ],
-};
-\`\`\`
-
-| Option         | Type       | Default                       | Description                  |
-| -------------- | ---------- | ----------------------------- | ---------------------------- |
-| \`themes\`       | \`string[]\` | \`['light', 'dark', 'system']\` | Merged with built-ins        |
-| \`defaultTheme\` | \`string\`   | \`'system'\`                    | Theme on first visit         |
-| \`mode\`         | \`NgMode\`   | \`'class'\`                     | How the theme is applied     |
-| \`strategy\`     | \`NgStrategy\`| \`'critters'\`                  | Anti-flash strategy          |
-| \`storageKey\`   | \`string\`   | \`'ngx-theme-stack'\`           | localStorage persistence key |
-
-## Services Quick Reference
-
-| Service              | Method       | Use case                          |
-| -------------------- | ------------ | --------------------------------- |
-| \`ThemeToggleService\` | \`toggle()\`   | Binary dark/light switch          |
-| \`ThemeCycleService\`  | \`cycle()\`    | Rotate through all themes         |
-| \`ThemeSelectService\` | \`select(t)\`  | Dropdown / radio / tab selection  |
-| \`CoreThemeService\`   | \`setTheme(t)\`| Advanced / low-level access       |
+- **MANDATORY RULE**: If the user asks for theme components/switching, you **MUST** ask them to choose:
+  - **Toggle** (\`ThemeToggleService\`) - Binary dark/light toggle.
+  - **Cycle** (\`ThemeCycleService\`) - Rotate through all themes.
+  - **Select** (\`ThemeSelectService\`) - Full picker dropdown/radio selection.
+- **Custom Themes Inquiry**: Ask if they want custom themes (e.g. \`sunset\`, colors, or CSS variables).
+- **DO NOT** generate code or configs until the user responds to these questions.
 
-All services expose these signals: \`selectedTheme()\`, \`resolvedTheme()\`, \`isDark()\`, \`isLight()\`, \`isSystem()\`, \`isHydrated()\`.
+## Constraints & Rules
 
-For complete component templates, copy from \`assets/\` directory in this skill folder.
-For full API details, read \`references/api-reference.md\`.
+- Call \`provideThemeStack()\` once in root \`app.config.ts\`. Custom themes merge with defaults.
+- **Theme Synchronization**: Run \`ng generate ngx-theme-stack:sync --project PROJECT_NAME\` after changing config.
+- \`isDark()\` / \`isLight()\` return false for custom themes (use \`resolvedTheme()\`).
+- Pick ONE convenience service per component. Do not write custom localStorage or direct DOM logic.
 
-## SSR Hydration Guard & Layout Stability
+## SSR Hydration & Layout Stability
 
-Guard theme-dependent template content behind \`isHydrated()\` in SSR to prevent hydration mismatches and layout flickering.
+Wrap theme-dependent elements in \`@if (theme.isHydrated())\` to prevent layout shift and SSR mismatches. Fallback placeholders in \`@else\` must match the exact hydrated dimensions.
 
 \`\`\`html
 @if (theme.isHydrated()) {
-  <img [src]="theme.isDark() ? 'dark-logo.png' : 'light-logo.png'">
+<img [src]="theme.isDark() ? darkLogo : lightLogo" />
 } @else {
-  <!-- The placeholder/skeleton MUST match the exact size and spacing of the hydrated image -->
-  <div class="logo-skeleton" style="width: 150px; height: 40px; display: inline-block;"></div>
+<div class="logo-skeleton"></div>
 }
 \`\`\`
 
-### Skeleton & Layout Stability Guidelines
+## Configuration & API
 
-When designing fallback skeleton loaders/placeholders:
-1. **Dimension & Spacing Match**: The fallback element (e.g., inside the \`@else\` block) MUST occupy the exact same space, size, margins, padding, positioning, and responsive constraints as the hydrated element. This ensures zero layout shift (preventing CLS issues) and keeps the Largest Contentful Paint (LCP) optimized.
-2. **Granular Skeletons**: NEVER wrap an entire complex component or large layout block in an \`isHydrated()\` guard if only a single word, label, icon, or sub-element changes dynamically based on the theme. Instead, place the \`isHydrated()\` guard at the most granular level possible (e.g., directly wrapping just the dynamic text or icon inside the button), leaving the surrounding button wrapper and layout static. A full-element skeleton should only be used if the entire component's structure/layout is completely dynamic.
+See [references/api-reference.md](references/api-reference.md) for APIs. Examples: [Toggle](assets/theme-toggle.ts) · [Cycle](assets/theme-cycle.ts) · [Select](assets/theme-select.ts).
 
-## CSS Theme Tokens
+\`\`\`typescript
+import { provideThemeStack } from 'ngx-theme-stack';
+export const appConfig = {
+  providers: [provideThemeStack({ themes: ['sunset'] as const, strategy: 'critters' })],
+};
+\`\`\`
 
-Define in \`src/themes.css\` (scaffolded by \`ng add\`):
+| Service              | Method      | Signals                                                                                     |
+| -------------------- | ----------- | ------------------------------------------------------------------------------------------- |
+| \`ThemeToggleService\` | \`toggle()\`  | \`selectedTheme()\`, \`resolvedTheme()\`, \`isDark()\`, \`isLight()\`, \`isSystem()\`, \`isHydrated()\` |
+| \`ThemeCycleService\`  | \`cycle()\`   |                                                                                             |
+| \`ThemeSelectService\` | \`select(t)\` |                                                                                             |
 
-\`\`\`css
-:root, .light { --bg: #fff; --text: #1a1a1a; }
-.dark          { --bg: #0a0a0a; --text: #f5f5f5; }
-.sunset        { --bg: #ff5f6d; --text: #fff; }
-\`\`\`
+## Styling: CSS Variables & Tailwind Separation
 
-## Tailwind CSS v4
+Define CSS variables in \`src/themes.css\` and map them to Tailwind in \`src/styles.css\` (use semantic classes, not \`dark:\`):
 
-Map variables in \`src/styles.css\`:
+\`\`\`css
+/* src/themes.css */
+:root,
+.light {
+  --background: #fff;
+  --foreground: #1a1a1a;
+}
+.dark {
+  --background: #0a0a0a;
+  --foreground: #f5f5f5;
+}
+.sunset {
+  --background: #ff5f6d;
+  --foreground: #fff;
+}
+\`\`\`
 
 \`\`\`css
+/* src/styles.css */
 @import 'tailwindcss';
 @theme {
-  --color-bg: var(--bg);
-  --color-text: var(--text);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
 }
 \`\`\`
 
-Use semantic classes — no \`dark:\` prefix needed: \`bg-bg text-text\`.
-
 ## Anti-patterns
 
-- Do NOT create your own localStorage logic — the library handles persistence.
-- Do NOT use multiple convenience services in the same component.
-- Do NOT access \`document.documentElement\` directly — the library handles DOM.
-- Do NOT use Tailwind's \`dark:\` prefix for multi-theme support.
-- Do NOT skip \`ngx-theme-stack:sync\` after changing \`provideThemeStack()\` config.
+- Do NOT mix Toggle, Cycle, and Select in the same component.
+- Do NOT use Tailwind's \`dark:\` utility modifier (use semantic classes mapped from themes).
+- Do NOT skip \`ngx-theme-stack:sync\` schematic after updating providers.
+- Do NOT use theme signals in templates without an \`@if (theme.isHydrated())\` guard.
 `;
-// ── references/api-reference.md (Tier 3 — loaded on demand) ─────────────────
+// ── references/api-reference.md (Tier 3 — loaded on demand) ──────────────────
 const API_REFERENCE = `# ngx-theme-stack API Reference
 
 ## provideThemeStack(config?)
 
-Provides Theme Stack configuration to Angular's DI system.
+Configures the Theme Stack in \`app.config.ts\`. Custom themes merge with built-ins (\`system\`, \`light\`, \`dark\`).
 
 \`\`\`typescript
 provideThemeStack({
   themes: ['sunset', 'ocean'] as const,
   defaultTheme: 'system',
   storageKey: 'ngx-theme-stack',
-  mode: 'class',
-  strategy: 'critters',
+  mode: 'class', // 'class' | 'attribute' | 'both'
+  strategy: 'critters', // 'critters' | 'blocking'
 })
 \`\`\`
 
-Custom themes are **merged** with built-in defaults (\`'system'\`, \`'light'\`, \`'dark'\`).
-Passing \`['sepia', 'ocean']\` resolves to \`['system', 'light', 'dark', 'sepia', 'ocean']\`.
-
-### Throws \`NgxThemeStackError\` when:
-- A theme entry is empty or whitespace-only.
-- \`defaultTheme\` is not in the resolved themes array.
-- \`storageKey\` is empty or whitespace-only.
+**Throws \`NgxThemeStackError\` when:**
+- A theme entry is empty, or \`defaultTheme\` is not in themes, or \`storageKey\` is empty.
 
 ---
 
 ## CoreThemeService
 
-Foundation service. Manages state (signals), persistence (localStorage),
-system preference detection (matchMedia), and safe DOM manipulation (SSR compatible).
-
-### Signals
+Foundation service managing state (signals), persistence, system preference, and DOM manipulation (SSR safe).
 
-| Signal             | Type                | Description                                         |
-| ------------------ | ------------------- | --------------------------------------------------- |
-| \`selectedTheme()\`  | \`Signal<string>\`    | Theme chosen by the user. May be \`'system'\`.         |
-| \`resolvedTheme()\`  | \`Signal<string>\`    | Theme applied to DOM. Never \`'system'\`.              |
-| \`isDark()\`          | \`Signal<boolean>\`   | \`true\` when resolved is \`'dark'\`. \`false\` for custom. |
-| \`isLight()\`         | \`Signal<boolean>\`   | \`true\` when resolved is \`'light'\`. \`false\` for custom.|
-| \`isSystem()\`        | \`Signal<boolean>\`   | \`true\` when user selected \`'system'\`.                |
-| \`isHydrated()\`      | \`Signal<boolean>\`   | \`true\` after first browser render. Guard SSR content.|
+### Signals, Methods & Properties
 
-### Methods
-
-| Method            | Signature              | Description                              |
-| ----------------- | ---------------------- | ---------------------------------------- |
-| \`setTheme()\`      | \`(theme: string): void\`| Validates, applies to DOM, persists.     |
-
-### Properties
-
-| Property          | Type        | Description                               |
-| ----------------- | ----------- | ----------------------------------------- |
-| \`availableThemes\` | \`string[]\`  | Resolved list including built-ins.        |
+| Name | Type | Description |
+| --- | --- | --- |
+| \`selectedTheme()\` | \`Signal<string>\` | Chosen theme (can be \`'system'\`). |
+| \`resolvedTheme()\` | \`Signal<string>\` | Active theme applied to DOM (never \`'system'\`). |
+| \`isDark()\` / \`isLight()\` | \`Signal<boolean>\` | \`true\` for dark/light (returns \`false\` for custom themes). |
+| \`isSystem()\` / \`isHydrated()\` | \`Signal<boolean>\` | System choice active / SSR hydration finished. |
+| \`availableThemes\` | \`string[]\` | All configured themes including built-ins. |
+| \`setTheme(theme)\` | \`(theme: string) => void\` | Validates, persists, and applies the theme to DOM. |
 
 ---
 
-## ThemeToggleService
+## Convenience Services
 
-Binary switch between \`'dark'\` and \`'light'\`.
+Specialized services implementing different theme selection behaviors.
 
-### Signals
-Inherits: \`selectedTheme()\`, \`resolvedTheme()\`, \`isDark()\`, \`isLight()\`, \`isSystem()\`, \`isHydrated()\`.
-
-### Methods
-
-| Method     | Description                                    |
-| ---------- | ---------------------------------------------- |
-| \`toggle()\` | If resolved is dark → light. Otherwise → dark. |
-
----
-
-## ThemeCycleService
-
-Rotates through all configured themes in order.
-
-### Signals
-Inherits all from CoreThemeService, plus:
-
-| Signal         | Type              | Description                             |
-| -------------- | ----------------- | --------------------------------------- |
-| \`cycleIndex()\` | \`Signal<number>\`  | Index of current theme in the cycle.    |
-| \`upcoming()\`   | \`Signal<string>\`  | Next theme in the cycle.                |
-| \`preceding()\`  | \`Signal<string>\`  | Previous theme in the cycle.            |
-
-### Methods
-
-| Method    | Description                  |
-| --------- | ---------------------------- |
-| \`cycle()\` | Advances to the next theme.  |
-
-### Properties
-
-| Property          | Type        | Description                        |
-| ----------------- | ----------- | ---------------------------------- |
-| \`availableThemes\` | \`string[]\`  | Full list of themes in cycle order.|
-
----
-
-## ThemeSelectService
-
-Exposes the full theme list for dropdowns, radios, or tab selection.
-
-### Signals
-Inherits: \`selectedTheme()\`, \`resolvedTheme()\`, \`isDark()\`, \`isLight()\`, \`isSystem()\`, \`isHydrated()\`.
-
-### Methods
-
-| Method            | Signature              | Description                 |
-| ----------------- | ---------------------- | --------------------------- |
-| \`select()\`        | \`(theme: string): void\`| Applies the given theme.    |
+### ThemeToggleService
+Binary switch between \`'dark'\` and \`'light'\`.
+- \`toggle()\`: Toggles the theme.
 
-### Properties
+### ThemeCycleService
+Rotates through all themes in configuration order.
+- \`cycle()\`: Moves to the next theme.
+- \`cycleIndex()\`: \`Signal<number>\` - Current theme index.
+- \`upcoming()\` / \`preceding()\`: \`Signal<string>\` - Next / previous theme in cycle.
 
-| Property          | Type        | Description                        |
-| ----------------- | ----------- | ---------------------------------- |
-| \`availableThemes\` | \`string[]\`  | Full list of configured themes.    |
+### ThemeSelectService
+Full list control for select dropdowns, radio buttons, or lists.
+- \`select(theme)\`: Sets the chosen theme.
 
 ---
 
-## Types
-
-| Type          | Definition                          | Description                       |
-| ------------- | ----------------------------------- | --------------------------------- |
-| \`NgTheme<T>\`  | \`'system' \\| 'light' \\| 'dark' \\| T\`| Theme identifier union            |
-| \`NgSystemTheme\`| \`'light' \\| 'dark'\`                 | Resolved system theme             |
-| \`NgMode\`       | \`'class' \\| 'attribute' \\| 'both'\`  | How theme is applied to DOM       |
-| \`NgStrategy\`   | \`'critters' \\| 'blocking'\`          | Anti-flash rendering strategy     |
-| \`NgConfig<T>\`  | \`interface\`                          | Full library configuration        |
+## Types & Errors
 
-## Errors
-
-| Error                | When thrown                                               |
-| -------------------- | --------------------------------------------------------- |
-| \`NgxThemeStackError\` | Invalid config, invalid theme name in \`setTheme()\`, etc.  |
+### Core Types
+- \`NgTheme<T>\`: \`'system' | 'light' | 'dark' | T\`
+- \`NgMode\`: \`'class' | 'attribute' | 'both'\`
+- \`NgStrategy\`: \`'critters' | 'blocking'\`
 
+### Errors
+- \`NgxThemeStackError\`: Thrown for invalid configurations, storage keys, or theme names.
 Catch with: \`if (e instanceof NgxThemeStackError) { ... }\`
 `;
-// ── assets/ templates (Tier 3 — copied on demand) ───────────────────────────
-const TEMPLATE_TOGGLE = `# Theme Toggle Component
-
-A simple button component to toggle between light and dark themes.
-
-\`\`\`typescript
-import { inject, Component } from '@angular/core';
+// ── assets/ component examples (Tier 3 — pure TypeScript, read on demand) ───
+const TEMPLATE_TOGGLE = `import { inject, Component } from '@angular/core';
 import { ThemeToggleService } from 'ngx-theme-stack';
 
 @Component({
@@ -327,23 +187,15 @@ import { ThemeToggleService } from 'ngx-theme-stack';
 export class ThemeToggle {
   protected readonly theme = inject(ThemeToggleService);
 }
-\`\`\`
 `;
-const TEMPLATE_CYCLE = `# Theme Cycle Component
-
-A button component to cycle through all available themes.
-
-\`\`\`typescript
-import { inject, Component } from '@angular/core';
+const TEMPLATE_CYCLE = `import { inject, Component } from '@angular/core';
 import { ThemeCycleService } from 'ngx-theme-stack';
 
 @Component({
   selector: 'app-theme-cycle',
   template: \`
     @if (theme.isHydrated()) {
-      <button (click)="theme.cycle()">
-        🔄 Cycle Theme
-      </button>
+      <button (click)="theme.cycle()">🔄 Cycle Theme</button>
     } @else {
       <div class="theme-cycle-skeleton"></div>
     }
@@ -352,14 +204,8 @@ import { ThemeCycleService } from 'ngx-theme-stack';
 export class ThemeCycle {
   protected readonly theme = inject(ThemeCycleService);
 }
-\`\`\`
 `;
-const TEMPLATE_SELECT = `# Theme Select Component
-
-A dropdown select component to choose any available theme.
-
-\`\`\`typescript
-import { inject, Component } from '@angular/core';
+const TEMPLATE_SELECT = `import { inject, Component } from '@angular/core';
 import { ThemeSelectService } from 'ngx-theme-stack';
 
 @Component({
@@ -386,16 +232,15 @@ export class ThemeSelect {
     this.theme.select(value);
   }
 }
-\`\`\`
 `;
 // ── Schematic logic ─────────────────────────────────────────────────────────
 const SKILL_ROOT = '.agents/skills/ngx-theme-stack';
 const FILES = [
     { path: `${SKILL_ROOT}/SKILL.md`, content: SKILL_CONTENT },
     { path: `${SKILL_ROOT}/references/api-reference.md`, content: API_REFERENCE },
-    { path: `${SKILL_ROOT}/assets/theme-toggle.component.md`, content: TEMPLATE_TOGGLE },
-    { path: `${SKILL_ROOT}/assets/theme-cycle.component.md`, content: TEMPLATE_CYCLE },
-    { path: `${SKILL_ROOT}/assets/theme-select.component.md`, content: TEMPLATE_SELECT },
+    { path: `${SKILL_ROOT}/assets/theme-toggle.ts`, content: TEMPLATE_TOGGLE },
+    { path: `${SKILL_ROOT}/assets/theme-cycle.ts`, content: TEMPLATE_CYCLE },
+    { path: `${SKILL_ROOT}/assets/theme-select.ts`, content: TEMPLATE_SELECT },
 ];
 function generateSkill(tree, context) {
     for (const file of FILES) {

package/schematics/skill/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../projects/ngx-theme-stack/schematics/skill/index.ts"],"names":[],"mappings":";;AAyZA,sCAUC;AAED,sBAMC;AAxaD,+EAA+E;AAE/E,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiKrB,CAAC;AAEF,+EAA+E;AAE/E,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwIrB,CAAC;AAEF,+EAA+E;AAE/E,MAAM,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;CAwBvB,CAAC;AAEF,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;CAwBtB,CAAC;AAEF,MAAM,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCvB,CAAC;AAEF,+EAA+E;AAE/E,MAAM,UAAU,GAAG,gCAAgC,CAAC;AAEpD,MAAM,KAAK,GAAwC;IACjD,EAAE,IAAI,EAAE,GAAG,UAAU,WAAW,EAAE,OAAO,EAAE,aAAa,EAAE;IAC1D,EAAE,IAAI,EAAE,GAAG,UAAU,8BAA8B,EAAE,OAAO,EAAE,aAAa,EAAE;IAC7E,EAAE,IAAI,EAAE,GAAG,UAAU,mCAAmC,EAAE,OAAO,EAAE,eAAe,EAAE;IACpF,EAAE,IAAI,EAAE,GAAG,UAAU,kCAAkC,EAAE,OAAO,EAAE,cAAc,EAAE;IAClF,EAAE,IAAI,EAAE,GAAG,UAAU,mCAAmC,EAAE,OAAO,EAAE,eAAe,EAAE;CACrF,CAAC;AAEF,SAAgB,aAAa,CAAC,IAAU,EAAE,OAAyB;IACjE,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YAC3B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;YACxC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,yBAAyB,IAAI,CAAC,IAAI,YAAY,CAAC,CAAC;QACtE,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;YACrC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,yBAAyB,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAC5D,CAAC;IACH,CAAC;AACH,CAAC;AAED,SAAgB,KAAK,CAAC,OAAe;IACnC,OAAO,CAAC,IAAU,EAAE,OAAyB,EAAE,EAAE;QAC/C,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,0CAA0C,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC;QACjF,aAAa,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAC7B,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../projects/ngx-theme-stack/schematics/skill/index.ts"],"names":[],"mappings":";;AAgQA,sCAUC;AAED,sBAMC;AA/QD,wDAAwD;AACxD,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FrB,CAAC;AAEF,gFAAgF;AAEhF,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoErB,CAAC;AAEF,+EAA+E;AAE/E,MAAM,eAAe,GACrB;;;;;;;;;;;;;;;;;;CAkBC,CAAC;AAEF,MAAM,cAAc,GACpB;;;;;;;;;;;;;;;;CAgBC,CAAC;AAEF,MAAM,eAAe,GACrB;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,CAAC;AAEF,+EAA+E;AAE/E,MAAM,UAAU,GAAG,gCAAgC,CAAC;AAEpD,MAAM,KAAK,GAAwC;IACjD,EAAE,IAAI,EAAE,GAAG,UAAU,WAAW,EAAE,OAAO,EAAE,aAAa,EAAE;IAC1D,EAAE,IAAI,EAAE,GAAG,UAAU,8BAA8B,EAAE,OAAO,EAAE,aAAa,EAAE;IAC7E,EAAE,IAAI,EAAE,GAAG,UAAU,yBAAyB,EAAE,OAAO,EAAE,eAAe,EAAE;IAC1E,EAAE,IAAI,EAAE,GAAG,UAAU,wBAAwB,EAAE,OAAO,EAAE,cAAc,EAAE;IACxE,EAAE,IAAI,EAAE,GAAG,UAAU,yBAAyB,EAAE,OAAO,EAAE,eAAe,EAAE;CAC3E,CAAC;AAEF,SAAgB,aAAa,CAAC,IAAU,EAAE,OAAyB;IACjE,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YAC3B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;YACxC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,yBAAyB,IAAI,CAAC,IAAI,YAAY,CAAC,CAAC;QACtE,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;YACrC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,yBAAyB,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAC5D,CAAC;IACH,CAAC;AACH,CAAC;AAED,SAAgB,KAAK,CAAC,OAAe;IACnC,OAAO,CAAC,IAAU,EAAE,OAAyB,EAAE,EAAE;QAC/C,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,0CAA0C,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC;QACjF,aAAa,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAC7B,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;AACJ,CAAC"}