spartan-ng-developer

Name: spartan-ng-developer
Author: mofirojean

27stars2forks

How to install spartan-ng-developer?

mofirojean/angular-ui-skills/spartan-ng-developer

$npx -y skills add mofirojean/angular-ui-skills --skill spartan-ng-developer

Installs into the current project.

Summary

Generates Spartan/ng UI code and guidance for Angular projects using @spartan-ng/helm (styled components copied into the repo) and @spartan-ng/brain (headless primitives). Covers installation, Tailwind theming (v3 and v4), component usage across all categories (forms, overlays, l

Files · 1

View on GitHub

SKILL.md

1	# Spartan/ng Developer Guidelines
2
3	> Pairs with `angular-developer` - that skill provides Angular fundamentals (signals, DI, routing, forms, SSR, accessibility). This skill focuses on Spartan/ng specifics. Install both for the best experience.
4
5	## Compatibility
6
7	- Tracks: `@spartan-ng/brain` v1.0.2 (released 2026-06-26). Spartan reached 1.0 stable in June 2026, the API surface is now versioned and re-validated each patch bump.
8	- 1.0.2 highlights: Calendar accepts partial i18n config, Combobox force-invalid trigger fix, `BrnFieldControl` can inject `ngControl` from a host component and set the label's `for` attribute, backdrop double-fade fix on overlays. No breaking changes vs 1.0.1.
9	- Angular: v18 or newer required. Standalone components, control flow (`@if` / `@for`), and signal-based APIs (`input()` / `output()`) are assumed. Will not generate `NgModule`-based or decorator-based code. Angular v22 stable shipped 2026-06-03 and Spartan 1.0.2 works with it (the brain primitives don't rely on v22-only APIs), but the skill's example apps still target v21 pending an explicit Spartan v22 compatibility statement.
10	- Tailwind: v3 or v4. The skill detects the major version from `package.json` and adapts.
11	- Not supported: old alphas (`v0.0.1-alpha.`) with pre-1.0 API drift, Angular v17 or below, projects using `@spartan-ng/ui-` packages (deprecated, replaced by `@spartan-ng/helm`).
12
13	If the project's installed version differs significantly from the tracked one, warn the user before generating code, the API surface may have shifted.
14
15
16	1. Always check the project's Spartan/ng version before providing guidance. Spartan is now 1.0 stable but still evolves, `package.json` is the source of truth.
17
18	2. Detect the project layout up front:
19	- If `nx.json` exists → Nx workspace. Use `npx nx g @spartan-ng/cli:ui <name>` commands.
20	- Otherwise → Angular CLI. Use `ng g @spartan-ng/cli:ui <name>` commands.
21
22	The destination path for generated Helm source is configured in `components.json` (`componentsPath`) - don't hard-code path assumptions. Find the actual location in `tsconfig.json` `paths` after `init`. See [setup.md](references/setup.md).
23
24	3. Detect the Tailwind major version in `package.json` (`tailwindcss` dependency). Spartan supports both v3 and v4 but the config syntax differs significantly. See [setup.md](references/setup.md).
25
26	4. After generating code that uses Spartan components, run `ng build` to verify there are no compilation errors. If components render unstyled, the issue is almost always Tailwind config - see the troubleshooting section in [setup.md](references/setup.md).
27
28	## Spartan architecture: Helm vs Brain (critical)
29
30	Spartan ships two packages with a unique relationship:
31
32	- `@spartan-ng/helm` - Styled components that live in the user's project, not in `node_modules`. The CLI (`ng g @spartan-ng/cli:ui button`) copies the component source into the path configured by `components.json` (`componentsPath`). The `@spartan-ng/helm/<name>` import is a tsconfig path alias to the generated source. To customize a Helm component, edit the file in the user's repo. Do not look for it in `node_modules`.
33
34	- `@spartan-ng/brain` - Headless, accessible primitives installed normally from npm. Helm components compose Brain primitives via Angular's `hostDirectives`.
35
36	Default to Helm. Reach for Brain only when: (1) Helm doesn't expose the primitive you need, (2) you're building a reusable composition that wraps multiple Helm components, or (3) you need to control accessibility attributes Helm hides.
37
38	## Installation and theming
39
40	- Setup: Install the CLI, add Spartan, configure Tailwind (v3 and v4 both supported), CLI vs Nx detection. Read [setup.md](references/setup.md)
41	- Theming: CSS variables, dark mode, custom themes. Read [theming.md](references/theming.md)
42
43	## Components
44
45	Spartan/ng provides 56 stable Helm components, grouped here by category. The shared conventions file applies to all of them; the category files cover specific component APIs and gotchas.
46
47	- Helm conventions: The `hlm*` directive pattern, signal inputs, composition via `hostDirectives`, the `cn()` helper, the `HlmXImports` barrel pattern, common pitfalls. Read [helm-conventions.md](references

People who liked this also viewed

6 picks

Type

spartan-ng-developer

27stars2forks

View on GitHub

How to install spartan-ng-developer?

mofirojean/angular-ui-skills/spartan-ng-developer

$npx -y skills add mofirojean/angular-ui-skills --skill spartan-ng-developer

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Spartan/ng Developer Guidelines
2
3	> Pairs with `angular-developer` - that skill provides Angular fundamentals (signals, DI, routing, forms, SSR, accessibility). This skill focuses on Spartan/ng specifics. Install both for the best experience.
4
5	## Compatibility
6
7	- Tracks: `@spartan-ng/brain` v1.0.2 (released 2026-06-26). Spartan reached 1.0 stable in June 2026, the API surface is now versioned and re-validated each patch bump.
8	- 1.0.2 highlights: Calendar accepts partial i18n config, Combobox force-invalid trigger fix, `BrnFieldControl` can inject `ngControl` from a host component and set the label's `for` attribute, backdrop double-fade fix on overlays. No breaking changes vs 1.0.1.
9	- Angular: v18 or newer required. Standalone components, control flow (`@if` / `@for`), and signal-based APIs (`input()` / `output()`) are assumed. Will not generate `NgModule`-based or decorator-based code. Angular v22 stable shipped 2026-06-03 and Spartan 1.0.2 works with it (the brain primitives don't rely on v22-only APIs), but the skill's example apps still target v21 pending an explicit Spartan v22 compatibility statement.
10	- Tailwind: v3 or v4. The skill detects the major version from `package.json` and adapts.
11	- Not supported: old alphas (`v0.0.1-alpha.`) with pre-1.0 API drift, Angular v17 or below, projects using `@spartan-ng/ui-` packages (deprecated, replaced by `@spartan-ng/helm`).
12
13	If the project's installed version differs significantly from the tracked one, warn the user before generating code, the API surface may have shifted.
14
15
16	1. Always check the project's Spartan/ng version before providing guidance. Spartan is now 1.0 stable but still evolves, `package.json` is the source of truth.
17
18	2. Detect the project layout up front:
19	- If `nx.json` exists → Nx workspace. Use `npx nx g @spartan-ng/cli:ui <name>` commands.
20	- Otherwise → Angular CLI. Use `ng g @spartan-ng/cli:ui <name>` commands.
21
22	The destination path for generated Helm source is configured in `components.json` (`componentsPath`) - don't hard-code path assumptions. Find the actual location in `tsconfig.json` `paths` after `init`. See [setup.md](references/setup.md).
23
24	3. Detect the Tailwind major version in `package.json` (`tailwindcss` dependency). Spartan supports both v3 and v4 but the config syntax differs significantly. See [setup.md](references/setup.md).
25
26	4. After generating code that uses Spartan components, run `ng build` to verify there are no compilation errors. If components render unstyled, the issue is almost always Tailwind config - see the troubleshooting section in [setup.md](references/setup.md).
27
28	## Spartan architecture: Helm vs Brain (critical)
29
30	Spartan ships two packages with a unique relationship:
31
32	- `@spartan-ng/helm` - Styled components that live in the user's project, not in `node_modules`. The CLI (`ng g @spartan-ng/cli:ui button`) copies the component source into the path configured by `components.json` (`componentsPath`). The `@spartan-ng/helm/<name>` import is a tsconfig path alias to the generated source. To customize a Helm component, edit the file in the user's repo. Do not look for it in `node_modules`.
33
34	- `@spartan-ng/brain` - Headless, accessible primitives installed normally from npm. Helm components compose Brain primitives via Angular's `hostDirectives`.
35
36	Default to Helm. Reach for Brain only when: (1) Helm doesn't expose the primitive you need, (2) you're building a reusable composition that wraps multiple Helm components, or (3) you need to control accessibility attributes Helm hides.
37
38	## Installation and theming
39
40	- Setup: Install the CLI, add Spartan, configure Tailwind (v3 and v4 both supported), CLI vs Nx detection. Read [setup.md](references/setup.md)
41	- Theming: CSS variables, dark mode, custom themes. Read [theming.md](references/theming.md)
42
43	## Components
44
45	Spartan/ng provides 56 stable Helm components, grouped here by category. The shared conventions file applies to all of them; the category files cover specific component APIs and gotchas.
46
47	- Helm conventions: The `hlm*` directive pattern, signal inputs, composition via `hostDirectives`, the `cn()` helper, the `HlmXImports` barrel pattern, common pitfalls. Read [helm-conventions.md](references

People who liked this also viewed

6 picks

Type