SkillFoxx

spartan/ui skill

A skill and MCP server for the spartan/ui Angular library: the agent installs components and blocks from current docs.

  • 2,994 ★ on the repository
  • Last commit
  • MIT
Skill

Extended access

Why this level

  • The `@spartan-ng/cli` generators create and change project files, and the MCP server calls spartan.ng and writes a disk cache.
All reasons and checks

spartan-ng/spartanAuthor:spartan-ng

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/spartan-ui

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Extended accessThe tool runs code or makes network calls and only reads external data.

  • The `@spartan-ng/cli` generators create and change project files, and the MCP server calls spartan.ng and writes a disk cache.

This is third-party code. Review the repository files before installing.

What it does

The `spartan` skill teaches an agent to work with the spartan/ui Angular library: add and combine components, fix them and adjust styling. The library has two layers. Brain provides accessible unstyled components installed from npm. Helm, styled with Tailwind, is copied into the project by `@spartan-ng/cli`, so the code stays yours. The skill detects whether the project is built with Nx or the Angular CLI and runs generators through the right command. The repository also holds the `@spartan-ng/mcp` server. It pulls documentation, components and blocks from spartan.ng, caches them per version and serves them to the agent as tools, resources and prompts.

Who it is for. Angular developers bringing the shadcn/ui approach into their project and teams already working on spartan/ui.

Good fit when

  • An Angular project with `components.json` needs a button, dialog or table in the shadcn style.
  • The agent hand-writes markup although spartan/ui already ships a component with that behaviour.
  • A ready-made block, such as a sidebar or sign-in form, must be pulled in along with its dependencies.
  • A question about component accessibility: keyboard, ARIA, screen reader.

Not a fit when

  • The interface is built on Angular Material or PrimeNG and a switch to spartan/ui is not planned.
  • The project does not run on Angular, while the library and generators target that framework only.
  • The workstation has no network access, because the MCP server fetches documentation from the live site.

Example request

Add a confirmation dialog from spartan/ui to the project and show which dependencies it pulls in.

Limitations

The skill works in Nx or Angular CLI projects and calls `@spartan-ng/cli` generators that change project files. The `user-invocable: false` setting in the skill description means the agent loads it by task topic rather than by a slash command. The MCP server is installed separately and needs Node.js; it loads content from spartan.ng into an on-disk cache. The cache lives in `~/.cache/spartan-mcp` by default and entries go stale after 24 hours. The server only reads documentation and does not edit the project.

How to disable. Delete the `spartan` skill folder from the agent skills directory and the `spartan-ui` entry from the MCP configuration. Remove the `~/.cache/spartan-mcp` cache and the Helm files copied into the project by hand.

FAQ

How do I install the spartan/ui skill?

Run `npx skills add spartan-ng/spartan`. The skill lives in the `skills/spartan` folder of the repository and is loaded by the agent when it touches `components.json` or `@spartan-ng/cli` generators.

How do I connect the spartan/ui MCP server to Cursor?

Add a `spartan-ui` server to the MCP configuration with the command `npx` and arguments `-y`, `@spartan-ng/mcp`, then restart the client. Alternatively run `npm install -g @spartan-ng/mcp` and use the `spartan-mcp` command.

How do the Brain and Helm layers differ?

Brain provides behaviour, accessibility and state without styles and installs from npm as `@spartan-ng/brain`. Helm adds the styles, and the CLI copies it into the project so you edit the code yourself.

Which tools does the MCP server expose?

17 tools: listing and fetching components and blocks, dependency analysis, accessibility checks, documentation, site health checks and cache management. For example, `spartan_components_get` returns a component API.

Where does the MCP server keep its cache and how do I reset it?

In `~/.cache/spartan-mcp` by default; the `SPARTAN_MCP_CACHE_DIR` variable changes the path. The `spartan_cache_clear` tool empties the cache and `spartan_cache_rebuild` refills it from the live site.

Discussion

No questions or reviews yet.

Skills
Editors’ pick

Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules

SkillExtended access128K
Official

SAP's MCP server gives an agent a catalog of 1,000 Fundamental NGX components with API data, examples, comparisons and setup guides

MCP serverMinimal access297
Official

A skill that picks and installs beUI animated React components through the public MCP or the shadcn registry instead of hand-built widgets

SkillExtended access2K
Official

Skill and MCP server for Shaders: the agent builds backgrounds, glass, gradients and cursor effects on WebGPU for React, Vue, Svelte, Solid and JS

SkillExtended access5.9K

Official Angular team skills: code generation with current practices, signals, forms, SSR and new app setup

SkillExtended access101.5K

Shadcn UI MCP Server

Shadcn UI v4 MCP Server

An MCP server that gives the agent shadcn/ui component source, demos and blocks for React, Svelte, Vue and React Native

MCP serverExtended access3.1K

Comparison with similar tools

Cards that share the main search query, and how they differ.

ToolOfficialRepository starsMain difference
spartan/ui (this card)no2,994
Angular Skillsno101,477official Angular team skills on signals, forms and SSR; here a shadcn-style component library
shadcn/uino128,022the shadcn/ui skill and MCP server for React; spartan/ui covers Angular with Brain and Helm layers

README in short

The spartan/ui monorepo contains the Brain and Helm libraries, the `@spartan-ng/cli` plugin for Nx and the Angular CLI, an MCP server and an agent skill. The approach comes from shadcn/ui: accessible unstyled components plus styles that are copied into the project.

README badge

Original SKILL.md

---
name: spartan
description: >-
  Manages spartan/ui, the Angular UI library - adding, composing, fixing, debugging, and styling UI
  with the Brain (headless primitives) and Helm (styled) layers. Provides project context, component
  APIs, and usage examples. Applies when working with spartan/ui, @spartan-ng/brain, @spartan-ng/helm,
  the @spartan-ng/cli generators, or any Angular project with a components.json file. Also triggers
  for "spartan init", "add a spartan component", or "set up spartan/ui".
user-invocable: false
allowed-tools:
  - Bash(npx nx g @spartan-ng/cli:*)
  - Bash(pnpm nx g @spartan-ng/cli:*)
  - Bash(ng g @spartan-ng/cli:*)
---

# spartan/ui

spartan/ui is an Angular UI library on the stable **1.x** line (`@spartan-ng/brain`, `@spartan-ng/cli`, `@spartan-ng/mcp`). Do **not** assume a fixed version such as 1.0 — read the
declared dependency versions for Brain, Helm, and CLI from `npx nx g @spartan-ng/cli:info --json` (Nx) or `ng g @spartan-ng/cli:info --json` (Angular CLI) (field `versions`; these are `package.json` ranges, not lockfile-resolved installs). For the latest published MCP package version, check npm (`@spartan-ng/mcp`).

It uses a **two-layer architecture**:

- **Brain (`@spartan-ng/brain`)** - accessible, unstyled primitives (Angular directives/components),
  installed from npm. This is the behavior and accessibility layer.
- **Helm (`@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 workspace** (has `nx.json`): `npx nx g @spartan-ng/cli:<generator>` (or `pnpm nx g ...`).
- **Angular CLI workspace** (has `angular.json`, no `nx.json`): `ng g @spartan-ng/cli:<generator>`.

## Current project context

Before generating any code, gather the project context:

```bash
npx nx g @spartan-ng/cli:info --json     # Nx
ng g @spartan-ng/cli:info --json         # Angular CLI
```

This is read-only and prints JSON with:

Report a problem