Preline UI Components via MCP
htmlstreamofficial/preline
Adds Preline UI components and blocks to HTML files by querying the Preline MCP server, with rules for exact slugs and for clarifying vague requests.
Helps add, compose, debug and style spartan/ui components in Angular projects, using its Brain headless primitives and Helm styled layer through the @spartan-ng/cli generators.
$ npx skills add spartan-ng/spartan --skill spartan -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install spartan-ng/spartan spartan --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/spartan-ng/spartan.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/spartan .claude/skills/spartan && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "spartan" agent skill from https://github.com/spartan-ng/spartan/tree/main/skills/spartan into .claude/skills/spartan/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "spartan", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/spartan-ng/spartan/tree/main/skills/spartanType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add spartan-ng/spartan --skill spartan -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install spartan-ng/spartan spartan --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/spartan-ng/spartan.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/spartan .agents/skills/spartan && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "spartan" agent skill from https://github.com/spartan-ng/spartan/tree/main/skills/spartan into .agents/skills/spartan/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "spartan", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add spartan-ng/spartan --skill spartan -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install spartan-ng/spartan spartan --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/spartan-ng/spartan.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/spartan .cursor/skills/spartan && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "spartan" agent skill from https://github.com/spartan-ng/spartan/tree/main/skills/spartan into .cursor/skills/spartan/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "spartan", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/spartan-ng/spartan.git --path skills/spartan--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add spartan-ng/spartan --skill spartan -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install spartan-ng/spartan spartan --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/spartan-ng/spartan.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/spartan .gemini/skills/spartan && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "spartan" agent skill from https://github.com/spartan-ng/spartan/tree/main/skills/spartan into .gemini/skills/spartan/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "spartan", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install spartan-ng/spartan spartanInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add spartan-ng/spartan --skill spartan -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/spartan-ng/spartan.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/spartan .github/skills/spartan && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "spartan" agent skill from https://github.com/spartan-ng/spartan/tree/main/skills/spartan into .github/skills/spartan/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "spartan", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add spartan-ng/spartan --skill spartan -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install spartan-ng/spartan spartan --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/spartan-ng/spartan.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/spartan .opencode/skills/spartan && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "spartan" agent skill from https://github.com/spartan-ng/spartan/tree/main/skills/spartan into .opencode/skills/spartan/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "spartan", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
spartanHelps add, compose, debug and style spartan/ui components in Angular projects, using its Brain headless primitives and Helm styled layer through the @spartan-ng/cli generators.
spartan/ui is an Angular UI library with two layers: Brain, accessible unstyled primitives installed from npm, and Helm, a Tailwind and class-variance-authority styled layer that the CLI copies into your project so you own it. You compose Helm directives and components onto host elements, and Helm wires up the matching Brain primitive. The skill's rule is to prefer existing components over hand-written markup.
Before generating code, the agent detects the workspace runner (npx nx g for an Nx workspace with nx.json, ng g for an Angular CLI workspace with angular.json) and runs the read-only info generator with --json. The report lists workspace type, components path, import alias, versions, icon library, the Tailwind stylesheet, and installed and available components. If components.json is missing, the project is initialized first. Rule files cover Brain versus Helm, composition, forms, icons and styling, with notes on the CLI, registry, customization and MCP docs.
4 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit d09b75c. It shows what the files ask for, not the result of running them.
Pre-approves these tools, so the agent can use them without asking each time:
Bash(npx nx g @spartan-ng/cli:*)Bash(pnpm nx g @spartan-ng/cli:*)Bash(ng g @spartan-ng/cli:*)From allowed-tools in the SKILL.md frontmatter.
Shell commands in SKILL.md call:
npxpnpmFrom the folder's file list and the shell code blocks in SKILL.md.
Hosts in commands or code, which the agent is likely to contact:
spartan.ngFrom URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Spartan UI Angular Components loads about 2.4k tokens when it runs. Until then it costs about 119 tokens; SKILL.md has 752 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from spartan-ng/spartan at commit d09b75c, republished under its MIT licence (© spartan-ng). 752 words, ~2,368 tokens.
.claude/skills/spartan/SKILL.md (or your agent's skills folder). This skill also uses 9 other files; get the full folder from GitHub.spartan/ui is an Angular UI library. It uses a two-layer architecture:
@spartan-ng/brain) - accessible, unstyled primitives (Angular directives/components),
installed from npm. This is the behavior and accessibility layer.@spartan-ng/helm) - the styled layer (Tailwind + class-variance-authority). Helm code
is copied into the user's project by the CLI so they own and can customize it.You compose Helm directives/components onto host elements; Helm wires up the matching Brain primitive under the hood. Always prefer existing components over hand-written markup.
All CLI commands run through the workspace's runner. Detect it from the project:
nx.json): npx nx g @spartan-ng/cli:<generator> (or pnpm nx g ...).angular.json, no nx.json): ng g @spartan-ng/cli:<generator>.Before generating any code, gather the project context:
npx nx g @spartan-ng/cli:info --json # Nx
ng g @spartan-ng/cli:info --json # Angular CLIThis is read-only and prints JSON with:
workspaceType - nx | angular-cli (decides which runner to use above).config.componentsPath - where Helm components are copied (e.g. libs/ui).config.importAlias - the import prefix for Helm, default @spartan-ng/helm.config.generateAs - library | entrypoint (Nx layout choice).versions - Angular, Angular CDK, Tailwind, @spartan-ng/brain, @spartan-ng/cli.iconLibrary - @ng-icons when present.tailwindCssFile - the global stylesheet that imports the preset.installedComponents - components already present (do not re-add these).availableComponents - everything the CLI can generate.If components.json does not exist, the project is not set up yet - run @spartan-ng/cli:init
first (it installs dependencies and the theme). components.json itself is created when you add the
first component with ui (see cli.md).
installedComponents, then availableComponents. Find
docs via the MCP server (spartan_components_list / spartan_components_get) or the live docs at
https://www.spartan.ng/components/<name>. See mcp.md.variant and
size inputs - use them instead of overriding classes.bg-primary text-primary-foreground, not
bg-blue-500. See rules/styling.md.Read the rule file before doing the related work:
rules/styling.md - the hlm() util, semantic color tokens, layout-only classes,
gap-* over space-*, size-*, dark mode, no manual z-index on overlays.rules/forms.md - compose forms with hlmField (label, control, error, description) and
hlmFieldSet / hlmFieldLegend on native <fieldset>/<legend>; option sets (2-7 choices) use
hlm-toggle-group.rules/composition.md - items belong inside their group; dialogs/sheets need a title;
full Card composition; tabs triggers inside hlm-tabs-list; avatar always has a fallback;
use Alert/Empty/Skeleton/Badge/Separator/Spinner instead of custom markup.rules/icons.md - icons are <ng-icon name="lucide...">; register with provideIcons;
no manual sizing classes inside components - use the size input.rules/brain-vs-helm.md - the two-layer model (one headless library, Brain, plus the styled
Helm layer); when to reach for Brain directly vs Helm, and how composition works via directives.cli.md - every generator (init, ui, ui-theme, healthcheck, info, migrate-*),
with Nx and Angular CLI invocations.registry.md - the Brain-npm + Helm-copy-in distribution model, components.json, and the
fixed component catalog (the shipped CLI uses no remote or custom registry).customization.md - theming via the hlm-tailwind-preset.css, CSS variables, the ui-theme
generator, and extending copied Helm components.mcp.md - using the @spartan-ng/mcp tools, resources, and prompts for discovery.<!-- Buttons: use variant/size inputs, not custom classes -->
<button hlmBtn variant="destructive" size="lg">Delete</button>
<!-- Icon in a button: ng-icon -->
<button hlmBtn size="icon" variant="ghost">
<ng-icon name="lucideTrash" />
</button>
<!-- Loading state: compose a spinner, there is no isLoading input -->
<button hlmBtn [disabled]="loading()">
@if (loading()) {
<hlm-spinner />
} Save
</button>
<!-- Layout: gap, not space-* ; size-* when width == height -->
<div class="flex items-center gap-2">
<span hlmBadge variant="secondary">beta</span>
</div>| Need | Component(s) |
|---|---|
| Action / button | button (hlmBtn), button-group |
| Text/number input | input, textarea, input-otp, input-group, native-select |
| Choice input | select, combobox, autocomplete, radio-group, checkbox, switch, slider |
| Toggle 2-7 options | toggle-group |
| Form layout/validation | field, label |
| Data display | chart, table, card, badge, avatar, kbd, item |
| Navigation | sidebar, navigation-menu, breadcrumb, tabs, pagination |
| Overlays | dialog, sheet, alert-dialog, popover, hover-card, tooltip |
| Menus | dropdown-menu, context-menu, menubar, command |
| Feedback | sonner (toasts), alert, progress, skeleton, spinner |
| Layout/containers | card, separator, resizable, scroll-area, accordion, collapsible, aspect-ratio |
| Empty states | empty |
| Dates | calendar, date-picker |
| Icons | icon (@ng-icons) |
| Typography | typography |
@spartan-ng/cli:info --json. If the project is not set up, run :init,
then add components with :ui (the first :ui run creates components.json).installedComponents.https://www.spartan.ng/components/<name> for the
API and examples (mcp.md). Never guess selectors - confirm them.npx nx g @spartan-ng/cli:ui --name=<component> (Nx) or
ng g @spartan-ng/cli:ui --name=<component> (Angular CLI). This installs the Brain dependency and
copies the Helm code. Omit --name to get an interactive multiselect.*Imports const (e.g. HlmDialogImports) or the individual
classes from the import alias, add them to the standalone component's imports, and follow the
composition rules.<ng-icon> you use must be passed to provideIcons(...) (see
rules/icons.md).@spartan-ng/cli:healthcheck to catch
deprecated patterns and fix imports.# Initialize (creates components.json, wires Tailwind + preset)
npx nx g @spartan-ng/cli:init
ng g @spartan-ng/cli:init
# Project context as JSON
npx nx g @spartan-ng/cli:info --json
# Add components (interactive, or pass --name)
npx nx g @spartan-ng/cli:ui
npx nx g @spartan-ng/cli:ui --name=dialog
# Generate theme variables
npx nx g @spartan-ng/cli:ui-theme
# Scan + auto-fix deprecated APIs/imports after an upgrade
npx nx g @spartan-ng/cli:healthcheck --autoFix© spartan-ng, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 9 other files in skills/spartan of spartan-ng/spartan.
Open the folder on GitHubat commit d09b75c
Spartan UI Angular Components next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Spartan UI Angular Components this skillspartan-ng/spartan | 2.9k | — | ~2.4k | Automated safety check: Pass | MIT | |
| Preline UI Components via MCPhtmlstreamofficial/preline | 6.5k | — | ~2.9k | Automated safety check: Pass | Custom licence | |
| Frontend UI FunctionalvictorGPT/vibeusage | 130 | — | ~939 | Automated safety check: Pass | MIT | |
| Integrating shadcn/ui Componentsgoogle-labs-code/stitch-skills | 8.5k | 4 repos | ~2.3k | Automated safety check: Notes | Apache-2.0 | |
| Chakra UI v3 Refactor and Reviewchakra-ui/chakra-ui | 41k | — | ~2.8k | Automated safety check: Pass | MIT | |
| Activepieces Design Systemactivepieces/activepieces | 25k | — | ~3.6k | Automated safety check: Pass | Custom licence |
htmlstreamofficial/preline
Adds Preline UI components and blocks to HTML files by querying the Preline MCP server, with rules for exact slugs and for clarifying vague requests.
victorGPT/vibeusage
A skill your agent uses when building or refactoring functional React/Vite/Tailwind UI pages, templates, or component libraries that need consistent structure, tokenized styling, accessibility…
google-labs-code/stitch-skills
Guides finding, installing, customizing and wiring up shadcn/ui components in a project, with MCP tools for the component catalog and registries.
chakra-ui/chakra-ui
Reviews and converts UI code to Chakra UI v3, producing a critique, rewritten code or both, from plain HTML, Tailwind, CSS Modules or styled-components.
activepieces/activepieces
Design system for Activepieces (open-source AI automation platform, "open source replacement for Zapier").
Galaxy-Dawn/claude-scholar
Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.
Categories
Helps add, compose, debug and style spartan/ui components in Angular projects, using its Brain headless primitives and Helm styled layer through the @spartan-ng/cli generators. spartan/ui is an Angular UI library with two layers: Brain, accessible unstyled primitives installed from npm, and Helm, a Tailwind and class-variance-authority styled layer that the CLI copies into your project so you own it. You compose Helm directives and components onto host elements, and Helm wires up the matching Brain primitive.
Spartan UI Angular Components fits situations like: adding a spartan/ui component such as a dialog or form field to an Angular app; fixing or restyling a Helm component that was copied into the project; setting up spartan/ui in an Angular project that has no components.json; building a dashboard or form from existing Helm and Brain pieces.
Run `npx skills add spartan-ng/spartan --skill spartan -a claude-code`. Or copy the skill folder (skills/spartan in spartan-ng/spartan) into .claude/skills/spartan in your project. Claude Code loads it when a task matches its description.
Run `npx skills add spartan-ng/spartan --skill spartan -a codex`. Or copy the skill folder (skills/spartan in spartan-ng/spartan) into .agents/skills/spartan in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add spartan-ng/spartan --skill spartan -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/spartan, .gemini/skills/spartan, .github/skills/spartan and .opencode/skills/spartan in your project.
Going by SKILL.md and its folder, Spartan UI Angular Components needs the command-line tools its instructions call (npx and pnpm). Our summary lists: An Angular workspace, either Nx or Angular CLI; Tailwind CSS. Its frontmatter pre-approves these tools: Bash(npx nx g @spartan-ng/cli:*), Bash(pnpm nx g @spartan-ng/cli:*), Bash(ng g @spartan-ng/cli:*).
SKILL.md names 1 domain. In commands or code: spartan.ng; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Spartan UI Angular Components is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.4k tokens (SKILL.md is roughly 9.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Spartan UI Angular Components: Preline UI Components via MCP (htmlstreamofficial/preline, 6.5k stars), Frontend UI Functional (victorGPT/vibeusage, 130 stars), Integrating shadcn/ui Components (google-labs-code/stitch-skills, 8.5k stars) and Chakra UI v3 Refactor and Review (chakra-ui/chakra-ui, 41k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
spartan-ng (a GitHub organization) maintains it in spartan-ng/spartan, which has 2,934 GitHub stars. The repository was last updated on October 8, 2026.
Source: spartan-ng/spartan on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.