- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Label
- Menubar
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner (Toast)
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toggle
- Toggle Group
- Tooltip
Skills
Give your coding agent the procedural knowledge to build spartan UI correctly.
The spartan skill is an agent skill that teaches AI coding assistants (Claude Code, Cursor, Copilot, and others) how spartan/ui works: the Brain/Helm two-layer architecture, the CLI generators, component composition rules, theming, and how to discover components before writing code. It activates automatically on any project with a components.json file.
Installation
Install the skill into your project with a single command:
npx skills add spartan-ng/spartan
This copies the skill into your agent's skills directory (for Claude Code, .claude/skills/spartan ). Add the -g flag to install it globally instead.
What it does
- Project context: runs
@spartan-ng/cli:info --jsonto read your config, versions, and installed components before generating code. - Component discovery: uses the MCP server and the docs to confirm APIs and examples instead of guessing.
- Composition rules: enforces the Brain/Helm patterns - semantic colors, field-based forms, correct overlay/group nesting, and
@ng-iconsusage. - CLI usage: knows when to run
init,ui,ui-theme, andhealthcheck, with the right Nx or Angular CLI invocation.
Project context command
The skill relies on a read-only info generator that prints your project context as JSON. You can run it yourself:
npx nx g @spartan-ng/cli:info --json
It reports the workspace type, the components.json config (components path, import alias, generate strategy), package versions, the detected icon library and styles file, and the lists of installed and available components.
On This Page