create-stencil-components 1.0.7 → 1.0.9

package/dist/templates/base/.opencode/skills/nx-plugins/SKILL.md

@@ -0,0 +1,9 @@
+---
+name: nx-plugins
+description: Find and add Nx plugins. USE WHEN user wants to discover available plugins, install a new plugin, or add support for a specific framework or technology to the workspace.
+---
+
+## Finding and Installing new plugins
+
+- List plugins: `pnpm nx list`
+- Install plugins `pnpm nx add <plugin>`. Example: `pnpm nx add @nx/react`.

package/dist/templates/base/.opencode/skills/nx-run-tasks/SKILL.md

@@ -0,0 +1,58 @@
+---
+name: nx-run-tasks
+description: Helps with running tasks in an Nx workspace. USE WHEN the user wants to execute build, test, lint, serve, or run any other tasks defined in the workspace.
+---
+
+You can run tasks with Nx in the following way.
+
+Keep in mind that you might have to prefix things with npx/pnpx/yarn if the user doesn't have nx installed globally. Look at the package.json or lockfile to determine which package manager is in use.
+
+For more details on any command, run it with `--help` (e.g. `nx run-many --help`, `nx affected --help`).
+
+## Understand which tasks can be run
+
+You can check those via `nx show project <projectname> --json`, for example `nx show project myapp --json`. It contains a `targets` section which has information about targets that can be run. You can also just look at the `package.json` scripts or `project.json` targets, but you might miss out on inferred tasks by Nx plugins.
+
+## Run a single task
+
+```
+nx run <project>:<task>
+```
+
+where `project` is the project name defined in `package.json` or `project.json` (if present).
+
+## Run multiple tasks
+
+```
+nx run-many -t build test lint typecheck
+```
+
+You can pass a `-p` flag to filter to specific projects, otherwise it runs on all projects. You can also use `--exclude` to exclude projects, and `--parallel` to control the number of parallel processes (default is 3).
+
+Examples:
+
+- `nx run-many -t test -p proj1 proj2` — test specific projects
+- `nx run-many -t test --projects=*-app --exclude=excluded-app` — test projects matching a pattern
+- `nx run-many -t test --projects=tag:api-*` — test projects by tag
+
+## Run tasks for affected projects
+
+Use `nx affected` to only run tasks on projects that have been changed and projects that depend on changed projects. This is especially useful in CI and for large workspaces.
+
+```
+nx affected -t build test lint
+```
+
+By default it compares against the base branch. You can customize this:
+
+- `nx affected -t test --base=main --head=HEAD` — compare against a specific base and head
+- `nx affected -t test --files=libs/mylib/src/index.ts` — specify changed files directly
+
+## Useful flags
+
+These flags work with `run`, `run-many`, and `affected`:
+
+- `--skipNxCache` — rerun tasks even when results are cached
+- `--verbose` — print additional information such as stack traces
+- `--nxBail` — stop execution after the first failed task
+- `--configuration=<name>` — use a specific configuration (e.g. `production`)

package/dist/templates/base/.opencode/skills/nx-workspace/SKILL.md

@@ -0,0 +1,284 @@
+---
+name: nx-workspace
+description: "Explore and understand Nx workspaces. USE WHEN answering questions about the workspace, projects, or tasks. ALSO USE WHEN an nx command fails or you need to check available targets/configuration before running a task. EXAMPLES: 'What projects are in this workspace?', 'How is project X configured?', 'What depends on library Y?', 'What targets can I run?', 'Cannot find configuration for task', 'debug nx task failure'."
+---
+
+# Nx Workspace Exploration
+
+This skill provides read-only exploration of Nx workspaces. Use it to understand workspace structure, project configuration, available targets, and dependencies.
+
+Keep in mind that you might have to prefix commands with `npx`/`pnpx`/`yarn` if nx isn't installed globally. Check the lockfile to determine the package manager in use.
+
+## Listing Projects
+
+Use `nx show projects` to list projects in the workspace.
+
+The project filtering syntax (`-p`/`--projects`) works across many Nx commands including `nx run-many`, `nx release`, `nx show projects`, and more. Filters support explicit names, glob patterns, tag references (e.g. `tag:name`), directories, and negation (e.g. `!project-name`).
+
+```bash
+# List all projects
+nx show projects
+
+# Filter by pattern (glob)
+nx show projects --projects "apps/*"
+nx show projects --projects "shared-*"
+
+# Filter by tag
+nx show projects --projects "tag:publishable"
+nx show projects -p 'tag:publishable,!tag:internal'
+
+# Filter by target (projects that have a specific target)
+nx show projects --withTarget build
+
+# Combine filters
+nx show projects --type lib --withTarget test
+nx show projects --affected --exclude="*-e2e"
+nx show projects -p "tag:scope:client,packages/*"
+
+# Negate patterns
+nx show projects -p '!tag:private'
+nx show projects -p '!*-e2e'
+
+# Output as JSON
+nx show projects --json
+```
+
+## Project Configuration
+
+Use `nx show project <name> --json` to get the full resolved configuration for a project.
+
+**Important**: Do NOT read `project.json` directly - it only contains partial configuration. The `nx show project --json` command returns the full resolved config including inferred targets from plugins.
+
+You can read the full project schema at `node_modules/nx/schemas/project-schema.json` to understand nx project configuration options.
+
+```bash
+# Get full project configuration
+nx show project my-app --json
+
+# Extract specific parts from the JSON
+nx show project my-app --json | jq '.targets'
+nx show project my-app --json | jq '.targets.build'
+nx show project my-app --json | jq '.targets | keys'
+
+# Check project metadata
+nx show project my-app --json | jq '{name, root, sourceRoot, projectType, tags}'
+```
+
+## Target Information
+
+Targets define what tasks can be run on a project.
+
+```bash
+# List all targets for a project
+nx show project my-app --json | jq '.targets | keys'
+
+# Get full target configuration
+nx show project my-app --json | jq '.targets.build'
+
+# Check target executor/command
+nx show project my-app --json | jq '.targets.build.executor'
+nx show project my-app --json | jq '.targets.build.command'
+
+# View target options
+nx show project my-app --json | jq '.targets.build.options'
+
+# Check target inputs/outputs (for caching)
+nx show project my-app --json | jq '.targets.build.inputs'
+nx show project my-app --json | jq '.targets.build.outputs'
+
+# Find projects with a specific target
+nx show projects --withTarget serve
+nx show projects --withTarget e2e
+```
+
+## Workspace Configuration
+
+Read `nx.json` directly for workspace-level configuration.
+You can read the full project schema at `node_modules/nx/schemas/nx-schema.json` to understand nx project configuration options.
+
+```bash
+# Read the full nx.json
+cat nx.json
+
+# Or use jq for specific sections
+cat nx.json | jq '.targetDefaults'
+cat nx.json | jq '.namedInputs'
+cat nx.json | jq '.plugins'
+cat nx.json | jq '.generators'
+```
+
+Key nx.json sections:
+
+- `targetDefaults` - Default configuration applied to all targets of a given name
+- `namedInputs` - Reusable input definitions for caching
+- `plugins` - Nx plugins and their configuration
+- ...and much more, read the schema or nx.json for details
+
+## Affected Projects
+
+If the user is asking about affected projects, read the [affected projects reference](references/AFFECTED.md) for detailed commands and examples.
+
+## Common Exploration Patterns
+
+### "What's in this workspace?"
+
+```bash
+nx show projects
+nx show projects --type app
+nx show projects --type lib
+```
+
+### "How do I build/test/lint project X?"
+
+```bash
+nx show project X --json | jq '.targets | keys'
+nx show project X --json | jq '.targets.build'
+```
+
+### "What depends on library Y?"
+
+```bash
+# Use the project graph to find dependents
+nx graph --print | jq '.graph.dependencies | to_entries[] | select(.value[].target == "Y") | .key'
+```
+
+## Programmatic Answers
+
+When processing nx CLI results, use command-line tools to compute the answer programmatically rather than counting or parsing output manually. Always use `--json` flags to get structured output that can be processed with `jq`, `grep`, or other tools you have installed locally.
+
+### Listing Projects
+
+```bash
+nx show projects --json
+```
+
+Example output:
+
+```json
+["my-app", "my-app-e2e", "shared-ui", "shared-utils", "api"]
+```
+
+Common operations:
+
+```bash
+# Count projects
+nx show projects --json | jq 'length'
+
+# Filter by pattern
+nx show projects --json | jq '.[] | select(startswith("shared-"))'
+
+# Get affected projects as array
+nx show projects --affected --json | jq '.'
+```
+
+### Project Details
+
+```bash
+nx show project my-app --json
+```
+
+Example output:
+
+```json
+{
+    "root": "apps/my-app",
+    "name": "my-app",
+    "sourceRoot": "apps/my-app/src",
+    "projectType": "application",
+    "tags": ["type:app", "scope:client"],
+    "targets": {
+        "build": {
+            "executor": "@nx/vite:build",
+            "options": { "outputPath": "dist/apps/my-app" }
+        },
+        "serve": {
+            "executor": "@nx/vite:dev-server",
+            "options": { "buildTarget": "my-app:build" }
+        },
+        "test": {
+            "executor": "@nx/vite:test",
+            "options": {}
+        }
+    },
+    "implicitDependencies": []
+}
+```
+
+Common operations:
+
+```bash
+# Get target names
+nx show project my-app --json | jq '.targets | keys'
+
+# Get specific target config
+nx show project my-app --json | jq '.targets.build'
+
+# Get tags
+nx show project my-app --json | jq '.tags'
+
+# Get project root
+nx show project my-app --json | jq -r '.root'
+```
+
+### Project Graph
+
+```bash
+nx graph --print
+```
+
+Example output:
+
+```json
+{
+    "graph": {
+        "nodes": {
+            "my-app": {
+                "name": "my-app",
+                "type": "app",
+                "data": { "root": "apps/my-app", "tags": ["type:app"] }
+            },
+            "shared-ui": {
+                "name": "shared-ui",
+                "type": "lib",
+                "data": { "root": "libs/shared-ui", "tags": ["type:ui"] }
+            }
+        },
+        "dependencies": {
+            "my-app": [{ "source": "my-app", "target": "shared-ui", "type": "static" }],
+            "shared-ui": []
+        }
+    }
+}
+```
+
+Common operations:
+
+```bash
+# Get all project names from graph
+nx graph --print | jq '.graph.nodes | keys'
+
+# Find dependencies of a project
+nx graph --print | jq '.graph.dependencies["my-app"]'
+
+# Find projects that depend on a library
+nx graph --print | jq '.graph.dependencies | to_entries[] | select(.value[].target == "shared-ui") | .key'
+```
+
+## Troubleshooting
+
+### "Cannot find configuration for task X:target"
+
+```bash
+# Check what targets exist on the project
+nx show project X --json | jq '.targets | keys'
+
+# Check if any projects have that target
+nx show projects --withTarget target
+```
+
+### "The workspace is out of sync"
+
+```bash
+nx sync
+nx reset  # if sync doesn't fix stale cache
+```

package/dist/templates/base/.opencode/skills/nx-workspace/references/AFFECTED.md

@@ -0,0 +1,27 @@
+## Affected Projects
+
+Find projects affected by changes in the current branch.
+
+```bash
+# Affected since base branch (auto-detected)
+nx show projects --affected
+
+# Affected with explicit base
+nx show projects --affected --base=main
+nx show projects --affected --base=origin/main
+
+# Affected between two commits
+nx show projects --affected --base=abc123 --head=def456
+
+# Affected apps only
+nx show projects --affected --type app
+
+# Affected excluding e2e projects
+nx show projects --affected --exclude="*-e2e"
+
+# Affected by uncommitted changes
+nx show projects --affected --uncommitted
+
+# Affected by untracked files
+nx show projects --affected --untracked
+```

package/dist/templates/base/AGENTS.md

@@ -21,34 +21,34 @@ Always follow the standard Stencil component decorator pattern:
 import { Component, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';
 
 @Component({
-  tag: 'my-component',
-  styleUrl: 'my-component.scss',
-  shadow: true,
+    tag: 'my-component',
+    styleUrl: 'my-component.scss',
+    shadow: true,
 })
 export class MyComponent {
-  /** Public properties */
-  @Prop() label: string;
-
-  /** Internal state */
-  @State() isActive: boolean = false;
-
-  /** Custom events */
-  @Event() clicked: EventEmitter<void>;
-
-  private handleClick = () => {
-    this.isActive = !this.isActive;
-    this.clicked.emit();
-  };
-
-  render() {
-    return (
-      <Host>
-        <button onClick={this.handleClick}>
-          {this.label} - {this.isActive ? 'Active' : 'Inactive'}
-        </button>
-      </Host>
-    );
-  }
+    /** Public properties */
+    @Prop() label: string;
+
+    /** Internal state */
+    @State() isActive: boolean = false;
+
+    /** Custom events */
+    @Event() clicked: EventEmitter<void>;
+
+    private handleClick = () => {
+        this.isActive = !this.isActive;
+        this.clicked.emit();
+    };
+
+    render() {
+        return (
+            <Host>
+                <button onClick={this.handleClick}>
+                    {this.label} - {this.isActive ? 'Active' : 'Inactive'}
+                </button>
+            </Host>
+        );
+    }
 }
 ```
 
@@ -65,12 +65,12 @@ export class MyComponent {
 - **Functional Components:** Use simple functional components (returning JSX) for UI-only elements that don't need the Stencil lifecycle.
 - **Reactivity:** Remember that Stencil only tracks changes to `@State` and `@Prop`. Arrays and objects must be reassigned (immutable patterns) to trigger a re-render:
 
-  ```typescript
-  // Correct
-  this.items = [...this.items, newItem];
-  // Incorrect
-  this.items.push(newItem);
-  ```
+    ```typescript
+    // Correct
+    this.items = [...this.items, newItem];
+    // Incorrect
+    this.items.push(newItem);
+    ```
 
 - **Performance:** Minimize use of `@Watch` to avoid unnecessary renders. Use the `render()` method efficiently.
 
@@ -108,11 +108,21 @@ export class MyComponent {
 
 ## General Guidelines for working with Nx
 
+- For navigating/exploring the workspace, invoke the `nx-workspace` skill first - it has patterns for querying projects, targets, and dependencies
 - When running tasks (for example build, lint, test, e2e, etc.), always prefer running the task through `nx` (i.e. `nx run`, `nx run-many`, `nx affected`) instead of using the underlying tooling directly
+- Prefix nx commands with the workspace's package manager (e.g., `pnpm nx build`, `npm exec nx test`) - avoids using globally installed CLI
 - You have access to the Nx MCP server and its tools, use them to help the user
-- When answering questions about the repository, use the `nx_workspace` tool first to gain an understanding of the workspace architecture where applicable.
-- When working in individual projects, use the `nx_project_details` mcp tool to analyze and understand the specific project structure and dependencies
-- For questions around nx configuration, best practices or if you're unsure, use the `nx_docs` tool to get relevant, up-to-date docs. Always use this instead of assuming things about nx configuration
-- If the user needs help with an Nx configuration or project graph error, use the `nx_workspace` tool to get any errors
+- For Nx plugin best practices, check `node_modules/@nx/<plugin>/PLUGIN.md`. Not all plugins have this file - proceed without it if unavailable.
+- NEVER guess CLI flags - always check nx_docs or `--help` first when unsure
+
+## Scaffolding & Generators
+
+- For scaffolding tasks (creating apps, libs, project structure, setup), ALWAYS invoke the `nx-generate` skill FIRST before exploring or calling MCP tools
+
+## When to use nx_docs
+
+- USE for: advanced config options, unfamiliar flags, migration guides, plugin configuration, edge cases
+- DON'T USE for: basic generator syntax (`nx g @nx/react:app`), standard commands, things you already know
+- The `nx-generate` skill handles generator discovery internally - don't call nx_docs just to look up generator syntax
 
 <!-- nx configuration end-->

package/dist/templates/base/CLAUDE.md

@@ -6,11 +6,21 @@
 
 # General Guidelines for working with Nx
 
+- For navigating/exploring the workspace, invoke the `nx-workspace` skill first - it has patterns for querying projects, targets, and dependencies
 - When running tasks (for example build, lint, test, e2e, etc.), always prefer running the task through `nx` (i.e. `nx run`, `nx run-many`, `nx affected`) instead of using the underlying tooling directly
+- Prefix nx commands with the workspace's package manager (e.g., `pnpm nx build`, `npm exec nx test`) - avoids using globally installed CLI
 - You have access to the Nx MCP server and its tools, use them to help the user
-- When answering questions about the repository, use the `nx_workspace` tool first to gain an understanding of the workspace architecture where applicable.
-- When working in individual projects, use the `nx_project_details` mcp tool to analyze and understand the specific project structure and dependencies
-- For questions around nx configuration, best practices or if you're unsure, use the `nx_docs` tool to get relevant, up-to-date docs. Always use this instead of assuming things about nx configuration
-- If the user needs help with an Nx configuration or project graph error, use the `nx_workspace` tool to get any errors
+- For Nx plugin best practices, check `node_modules/@nx/<plugin>/PLUGIN.md`. Not all plugins have this file - proceed without it if unavailable.
+- NEVER guess CLI flags - always check nx_docs or `--help` first when unsure
 
-<!-- nx configuration end-->
+## Scaffolding & Generators
+
+- For scaffolding tasks (creating apps, libs, project structure, setup), ALWAYS invoke the `nx-generate` skill FIRST before exploring or calling MCP tools
+
+## When to use nx_docs
+
+- USE for: advanced config options, unfamiliar flags, migration guides, plugin configuration, edge cases
+- DON'T USE for: basic generator syntax (`nx g @nx/react:app`), standard commands, things you already know
+- The `nx-generate` skill handles generator discovery internally - don't call nx_docs just to look up generator syntax
+
+<!-- nx configuration end-->

package/dist/templates/base/package.json

@@ -16,13 +16,13 @@
         "@commitlint/cli": "20.5.0",
         "@commitlint/config-conventional": "20.5.0",
         "@eslint/js": "10.0.1",
-        "@nx/js": "22.6.4",
+        "@nx/js": "22.6.5",
         "eslint": "10.2.0",
         "eslint-config-prettier": "10.1.8",
         "eslint-plugin-prettier": "5.5.5",
         "eslint-plugin-sonarjs": "4.0.2",
         "husky": "9.1.7",
-        "nx": "22.6.4",
+        "nx": "22.6.5",
         "rimraf": "6.1.3",
         "stylelint": "17.6.0",
         "stylelint-config-standard": "40.0.0",
@@ -30,7 +30,7 @@
         "stylelint-use-logical": "2.1.3",
         "ts-node": "10.9.2",
         "typescript": "6.0.2",
-        "typescript-eslint": "8.58.0"
+        "typescript-eslint": "8.58.1"
     },
     "nx": {},
     "volta": {

package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-core/package.json

@@ -68,13 +68,13 @@
     "tslib": "2.8.1"
   },
   "devDependencies": {
-    "@stencil/angular-output-target": "1.3.0",
+    "@stencil/angular-output-target": "1.3.1",
     "@stencil/core": "4.43.3",
-    "@stencil/react-output-target": "1.4.2",
+    "@stencil/react-output-target": "1.5.0",
     "@stencil/sass": "3.2.3",
     "@stencil/vue-output-target": "0.13.1",
     "@types/jest": "30.0.0",
-    "@types/node": "25.5.2",
+    "@types/node": "25.6.0",
     "jest": "30.3.0",
     "jest-cli": "30.3.0",
     "puppeteer": "24.40.0",

package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-react/package.json

@@ -35,12 +35,12 @@
     "tslib": "2.8.1"
   },
   "peerDependencies": {
-    "@stencil/react-output-target": "1.2.0",
+    "@stencil/react-output-target": "1.5.0",
     "@{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-core": "*",
     "react": ">=18"
   },
   "devDependencies": {
-    "@types/node": "25.5.2",
+    "@types/node": "25.6.0",
     "@types/react": ">=18"
   },
   "license": "MIT",

package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-react/tsconfig.json

@@ -24,7 +24,11 @@
         "removeComments": false,
         "rootDir": "src",
         "sourceMap": false,
-        "target": "es2022"
+        "target": "es2022",
+        "types": [
+            "node",
+            "react"
+        ]
     },
     "include": [
         "src"

package/dist/templates/variants/angular/packages/components-{{PROJECT_NAME_KEBAB}}-core/package.json

@@ -68,11 +68,11 @@
     "tslib": "2.8.1"
   },
   "devDependencies": {
-    "@stencil/angular-output-target": "1.3.0",
+    "@stencil/angular-output-target": "1.3.1",
     "@stencil/core": "4.43.3",
     "@stencil/sass": "3.2.3",
     "@types/jest": "30.0.0",
-    "@types/node": "25.5.2",
+    "@types/node": "25.6.0",
     "jest": "30.3.0",
     "jest-cli": "30.3.0",
     "puppeteer": "24.40.0",

package/dist/templates/variants/react/packages/components-{{PROJECT_NAME_KEBAB}}-core/package.json

@@ -69,10 +69,10 @@
   },
   "devDependencies": {
     "@stencil/core": "4.43.3",
-    "@stencil/react-output-target": "1.4.2",
+    "@stencil/react-output-target": "1.5.0",
     "@stencil/sass": "3.2.3",
     "@types/jest": "30.0.0",
-    "@types/node": "25.5.2",
+    "@types/node": "25.6.0",
     "jest": "30.3.0",
     "jest-cli": "30.3.0",
     "puppeteer": "24.40.0",

package/dist/templates/variants/react/packages/components-{{PROJECT_NAME_KEBAB}}-react/package.json

@@ -35,12 +35,12 @@
     "tslib": "2.8.1"
   },
   "peerDependencies": {
-    "@stencil/react-output-target": "1.2.0",
+    "@stencil/react-output-target": "1.5.0",
     "@{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-core": "*",
     "react": ">=18"
   },
   "devDependencies": {
-    "@types/node": "25.5.2",
+    "@types/node": "25.6.0",
     "@types/react": ">=18"
   },
   "license": "MIT",

package/dist/templates/variants/react/packages/components-{{PROJECT_NAME_KEBAB}}-react/tsconfig.json

@@ -24,7 +24,11 @@
         "removeComments": false,
         "rootDir": "src",
         "sourceMap": false,
-        "target": "es2022"
+        "target": "es2022",
+        "types": [
+            "node",
+            "react"
+        ]
     },
     "include": [
         "src"

package/dist/templates/variants/vue/packages/components-{{PROJECT_NAME_KEBAB}}-core/package.json

@@ -72,7 +72,7 @@
     "@stencil/sass": "3.2.3",
     "@stencil/vue-output-target": "0.13.1",
     "@types/jest": "30.0.0",
-    "@types/node": "25.5.2",
+    "@types/node": "25.6.0",
     "jest": "30.3.0",
     "jest-cli": "30.3.0",
     "puppeteer": "24.40.0",

package/dist/templates/variants/web-components/packages/components-{{PROJECT_NAME_KEBAB}}-core/package.json

@@ -71,7 +71,7 @@
     "@stencil/core": "4.43.3",
     "@stencil/sass": "3.2.3",
     "@types/jest": "30.0.0",
-    "@types/node": "25.5.2",
+    "@types/node": "25.6.0",
     "jest": "30.3.0",
     "jest-cli": "30.3.0",
     "puppeteer": "24.40.0",