New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Radix Ng

by radix-ng in radix-ng/primitives

Build correct, accessible UI with @radix-ng/primitives — the signals-first, headless Angular primitive library.

MITAuto-check passedFrontend & Design

Install Radix Ng

skills CLI
$ npx skills add radix-ng/primitives --skill radix-ng -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install radix-ng/primitives radix-ng --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/radix-ng/primitives.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/radix-ng .claude/skills/radix-ng && rm -rf skills-src

Use ~/.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/

Facts

Skill name
radix-ng
GitHub stars
274
Token cost
~2.2k tokens
SKILL.md length
964 words
Files
118 (incl. references)
Skills in repo
7
Repo updated
First seen
Licence
MIT

At a glance

Build correct, accessible UI with @radix-ng/primitives — the signals-first, headless Angular primitive library.

  • Works in 7 steps: Never invent an API. If an input,… → Headless: no styles ship with the… → Respect the compound anatomy. Compound… → …
  • Implementing Angular components
  • SKILL.md covers Source of truth (use these,…, Critical rules, Workflow and Recovering after context loss, plus 3 more sections
  • Reaches sb-primitives.radix-ng.com

What it does

Radix Ng is an agent skill from radix-ng/primitives. Build correct, accessible UI with @radix-ng/primitives — the signals-first, headless Angular primitive library. Use when implementing Angular components, forms, dialogs, menus, or any UI on top of radix-ng primitives, or when styling them with a custom design system. Use when: "build a … with radix-ng", "use @radix-ng/primitives", "headless Angular component", "style radix-ng with my design system", "Angular accordion/dialog/select/…".

Its SKILL.md is about 2.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 119 other files, including reference files (for example `references/api-contract.json`, `references/api-contract/accordion.json` and `references/api-contract/alert-dialog.json`). Compatibility notes: Requires @radix-ng/primitives and Angular 21+ (signals API). Stories use Tailwind CSS v4, but the primitives are styling-agnostic.

It sits in Frontend & Design, covering Design systems. It works with Angular and Radix UI. The repository describes itself as: Headless, signals-first UI primitives for Angular. Accessible. Customizable. The licence is MIT.

When your agent uses it

  • Implementing Angular components
  • Any UI on top of radix-ng primitives
  • Styling them with a custom design system
  • : build a … with radix-ng

Example prompts

  • “build a … with radix-ng”
  • “use @radix-ng/primitives”
  • “headless Angular component”
  • “/radix-ng”

Requirements

  • Compatibility (from SKILL.md): Requires @radix-ng/primitives and Angular 21+ (signals API). Stories use Tailwind CSS v4, but the primitives are styling-agnostic.

Workflow steps

7 steps, taken from the first numbered list in SKILL.md.

  1. Never invent an API. If an input, output, selector, or part isn't in
  2. Headless: no styles ship with the primitive. You provide all visuals. Drive them from
  3. Respect the compound anatomy. Compound primitives (Accordion, Dialog, Select, Menu, …) are
  4. Import from the secondary entry point, e.g.
  5. Preserve accessibility. The primitives implement WAI-ARIA roles, keyboard nav, and focus
  6. Signals API. Inputs/outputs are signal-based (input(), model(), output()). Two-way
  7. Distrust your training data. Knowledge of Radix UI (React), Base UI (React), or older

What it can do on your machine

Read from SKILL.md and the folder at commit eed2a31. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • sb-primitives.radix-ng.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Requires @radix-ng/primitives and Angular 21+ (signals API). Stories use Tailwind CSS v4, but the primitives are styling-agnostic.

    From compatibility in the SKILL.md frontmatter.

Context cost

Radix Ng loads about 2.2k tokens when it runs, and up to ~204k if it reads all its reference files. Until then it costs about 112 tokens; SKILL.md has 964 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~112
When it runs · the whole SKILL.md, loaded when a task matches
~2.2k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~204k

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.

Safety

Auto-check passed

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.

SKILL.md

The full file from radix-ng/primitives at commit eed2a31, republished under its MIT licence (© radix-ng). 964 words, ~2,223 tokens.

Download SKILL.mdSave it as .claude/skills/radix-ng/SKILL.md (or your agent's skills folder). This skill also uses 117 other files; get the full folder from GitHub.
name
radix-ng
description
Build correct, accessible UI with @radix-ng/primitives — the signals-first, headless Angular primitive library. Use when implementing Angular components, forms, dialogs, menus, or any UI on top of radix-ng primitives, or when styling them with a custom design system. Use when: "build a … with radix-ng", "use @radix-ng/primitives", "headless Angular component", "style radix-ng with my design system", "Angular accordion/dialog/select/…".
compatibility
Requires @radix-ng/primitives and Angular 21+ (signals API). Stories use Tailwind CSS v4, but the primitives are styling-agnostic.
license
MIT
metadata.author
radix-ng

Building UI with Radix NG Primitives

@radix-ng/primitives is a signals-first, headless Angular port of Base UI / Radix primitives. Directives carry no styles: they manage state, behavior, and accessibility, and expose state through data-* attributes that you style with any design system.

Source of truth (use these, don't guess APIs)

Everything is bundled offline — no live site required.

  • Examples — the radix-ng-examples skill: a compact index of every documented example, each with a per-example source shard (references/examples/<component>--<example>.md). The Storybook stories are authoritative.
  • API contract — references/api-contract/<slug>.json (one shard per primitive): each part's selector, exportAs, inputs (binding name, type, default, required), outputs, and two-way bindings. Use it to write and verify bindings — anything not listed there does not exist.
  • Styling contract — references/styling-contract/<slug>.json (one shard per primitive): the parts, anatomy, and every data-* attribute (with its values) you can style. This is how you theme headless primitives with a custom design system.
  • The whole-library api-contract.json / styling-contract.json monoliths still ship but are deprecated (removed next release) — always prefer the per-primitive shards.
  • Full docs in one file — radix-ng-examples/references/llms-full.txt.
  • Reference rules in this skill: references/styling.md, references/composition.md, references/forms.md.
  • Visual browsing only — Storybook at https://sb-primitives.radix-ng.com.

Critical rules

  1. Never invent an API. If an input, output, selector, or part isn't in references/api-contract/<slug>.json for that primitive, it doesn't exist — look it up, don't assume. Validate generated code against the contract: selectors, input names/types, outputs, and two-way ([(…)]) bindings are all listed per part.
  2. Headless: no styles ship with the primitive. You provide all visuals. Drive them from data-* state attributes ([data-state="open"], [data-disabled], [data-orientation], …), never by inspecting internal classes.
  3. Respect the compound anatomy. Compound primitives (Accordion, Dialog, Select, Menu, …) are assembled from nested parts (Root → Item → Trigger → Content). Children find their Root through DI context — a Trigger must live inside its Root, or it throws. Don't flatten the hierarchy.
  4. Import from the secondary entry point, e.g. import { RdxAccordionRootDirective } from '@radix-ng/primitives/accordion';.
  5. Preserve accessibility. The primitives implement WAI-ARIA roles, keyboard nav, and focus management. Keep visible labels programmatically associated with their control (for/id, htmlFor on RdxLabelDirective, or rdxFieldLabel inside rdxFieldRoot). Don't remove ARIA.
  6. Signals API. Inputs/outputs are signal-based (input(), model(), output()). Two-way bind with [(value)]; read controlled state via the model, not by mutating the DOM.
  7. Distrust your training data. Knowledge of Radix UI (React), Base UI (React), or older radix-ng versions does not transfer — read references/common-mistakes.md for the known failure modes (renamed Select parts, removed CDK dependency, React habits like asChild).

Workflow

  1. Identify intent — what interaction/pattern does the UI need (disclosure, overlay, selection, form field, navigation)?
  2. Pick the primitive — find it in the catalog below and in the radix-ng-examples index.
  3. Read a real example — open the component's .md; start from the closest example rather than writing from scratch.
  4. Assemble the anatomy — copy the part hierarchy from the example / styling contract exactly.
  5. Style from the contract — map each data-* state to the project's design tokens/classes. See references/styling.md.
  6. Validate — labels associated, keyboard works, the part hierarchy is intact.
Show full SKILL.md (470 more words)Show less

Recovering after context loss

If your context was compacted, or you're resuming and no longer trust what you remember about the API, re-ground yourself from the bundled files before writing more code. These files — never a conversation summary — are the source of truth; treat the summary as navigation only.

  1. Re-establish the primitive and version. Identify which primitive(s) the task uses, then check the consumer's installed @radix-ng/primitives version against the version field in that primitive's references/api-contract/<slug>.json. If they differ, trust the installed package's .d.ts over this bundle.
  2. Reload the contracts, not your memory. Re-read that primitive's shards — references/api-contract/<slug>.json (selectors, inputs, outputs, two-way bindings) and references/styling-contract/<slug>.json (parts + data-*). Anything you "remember" that isn't there does not exist.
  3. Reload the nearest example cheaply. Open a single shard from the radix-ng-examples skill — references/examples/<component>--<example>.md (one example each, a few KB) — instead of re-reading the whole component doc.
  4. Re-read your own work. The code, diff, and tests you already produced are ground truth for where you are — reconcile against them, not against a remembered plan.

Styling with a custom design system

These primitives are made for this. The recipe:

  1. Look up the primitive's parts and data-* attributes in references/styling-contract/<slug>.json.
  2. Put the project's own classes/tokens on each part.
  3. Express state visually through the data attributes, e.g. [&[data-state=open]]:bg-accent, [data-disabled]:opacity-50, [data-orientation=horizontal]:flex-row — or plain CSS selectors [data-state="open"] { … }.

The same primitive works with Tailwind, CSS modules, vanilla CSS, or any token system — only the class strings change, never the directives or the data-attribute hooks.

Component catalog

Compound primitives flagged (compound) have a multi-part anatomy and DI context — read an example before assembling them; they are the easiest to get wrong.

Overlays & disclosure: accordion (compound), collapsible, dialog (compound), alert-dialog (compound), drawer (compound), popover (compound), tooltip, preview-card, context-menu (compound), menu (compound), menubar (compound), navigation-menu (compound).

Form controls: field, fieldset, input, label, checkbox, radio, switch, toggle, toggle-group, slider, select (compound), number-field, date-field, time-field, calendar, editable, stepper.

Display & layout: avatar, aspect-ratio, separator, progress, meter, tabs (compound), toolbar, pagination, cropper, toast.

Headless utilities (composition building blocks): composite, focus-scope, dismissable-layer, presence, portal, popper, visually-hidden, injectId, live-announcer.

Reference files

  • references/styling.md — headless styling, data-* patterns, animation, dark mode.
  • references/composition.md — compound anatomy, DI context, hostDirectives composition.
  • references/forms.md — Field / Fieldset / Input and form integration.
  • references/common-mistakes.md — stale/hallucinated API patterns to avoid (React habits, renamed parts, removed dependencies). Read when generated code fails or looks React-flavored.
  • references/api-contract/<slug>.json — machine-readable API per part: selector, exportAs, inputs with types/defaults, outputs, two-way bindings (generated from the same compodoc metadata that powers the Storybook props tables). One shard per primitive.
  • references/styling-contract/<slug>.json — machine-readable parts + data-* per primitive (generated), one shard per primitive. Every shard carries a version field recording the @radix-ng/primitives version it was generated from — compare against the consumer's installed version when behavior doesn't match.
  • references/api-contract.json / references/styling-contract.json — the pre-shard whole-library monoliths, kept one release and deprecated; prefer the per-primitive shards above.

© radix-ng, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 117 other files (references) in skills/radix-ng of radix-ng/primitives.

  • SKILL.md
  • references/api-contract.json
  • references/api-contract/accordion.json
  • references/api-contract/alert-dialog.json
  • references/api-contract/arrow.json
  • references/api-contract/aspect-ratio.json
  • references/api-contract/autocomplete.json
  • references/api-contract/avatar.json
  • references/api-contract/button.json
  • references/api-contract/calendar.json
  • references/api-contract/checkbox.json
  • references/api-contract/collapsible.json
  • references/api-contract/combobox.json
  • references/api-contract/composite.json
  • references/api-contract/context-menu.json
  • references/api-contract/core.json
  • references/api-contract/cropper.json
  • references/api-contract/date-field.json
  • references/api-contract/dialog.json
  • … and 99 more

Open the folder on GitHubat commit eed2a31

Compare with similar skills

Radix Ng 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.

Radix Ng compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Radix Ng this skillradix-ng/primitives274—~2.2kAutomated safety check: PassMIT
UI StylingOhh-889/skyroc79513 repos~2.5kAutomated safety check: PassMIT
Ss Learnbitjaru/styleseed973—~1.3kAutomated safety check: PassMIT
Migrate Radix To BaseTheOrcDev/youtube-to-blog1802 repos~2.3kAutomated safety check: PassMIT
Use Swim UIswimlane/ngx-ui735—~2.6kAutomated safety check: PassMIT
Styleseedbitjaru/styleseed973—~1.1kAutomated safety check: PassMIT

Similar skills

  • UI Styling

    Ohh-889/skyroc

    Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.

    795 GitHub starsUsed in 13 repos~2.5k tokens
    Frontend & DesignAuto-check passed

  • Ss Learn

    bitjaru/styleseed

    Capture a human-approved UI design lesson as a privacy-minimized local StyleSeed candidate, review it, and prepare an opt-in share package without transmitting project code, prompts, screenshots, or…

    973 GitHub stars~1.3k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

  • Migrate Radix To Base

    TheOrcDev/youtube-to-blog

    Migrates React projects and components from Radix UI to Base UI.

    180 GitHub starsUsed in 2 repos~2.3k tokens
    Frontend & DesignAuto-check passed

  • Use Swim UI

    swimlane/ngx-ui

    Use Swimlane swim-ui (swim- custom elements) when building custom solutions, record widgets, or report widgets for Turbine.

    735 GitHub stars~2.6k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Styleseed

    bitjaru/styleseed

    Build, improve, or inspect UI with StyleSeed. An agent skill from bitjaru/styleseed.

    973 GitHub stars~1.1k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

  • UI Design System

    try-works/role-model

    React UI component systems with TailwindCSS + Radix + shadcn/ui.

    117 GitHub stars~5k tokensUpdated today
    Frontend & DesignAuto-check passed

More from radix-ng/primitives

  • Radix Ng Examples

    radix-ng/primitives

    Index of every documented @radix-ng/primitives example. An agent skill from radix-ng/primitives.

    274 GitHub stars~2.1k tokensUpdated 12 days ago
    Auto-check passed

  • Project Knowledge

    radix-ng/primitives

    A skill your agent uses when you need information about this project's architecture, tech stack, coding patterns, data model, deployment setup, git workflow, or UX guidelines.

    274 GitHub starsUsed in 1 repo~833 tokens
    Auto-check passed

  • Storybook Story

    radix-ng/primitives

    Write or update Storybook stories and docs MDX for a Radix NG primitive following project conventions.

    274 GitHub stars~3.7k tokensUpdated 12 days ago
    Auto-check passed

  • Testing

    radix-ng/primitives

    Test Radix NG primitives across every layer and pick the RIGHT one for a change: Vitest unit (zoneless), jest-axe a11y, Playwright browser regression (apps/visual-regression), SSR…

    274 GitHub stars~3.3k tokensUpdated 12 days ago
    Auto-check passed

  • Documentation Writing

    radix-ng/primitives

    Maintain project documentation in .claude/skills/project-knowledge/: audit, edit, check consistency, track status.

    274 GitHub stars~1.4k tokensUpdated 12 days ago
    Auto-check passed

  • Angular Developer

    radix-ng/primitives

    Angular framework reference for building this signals-first, headless directive library.

    274 GitHub stars~1.2k tokensUpdated 12 days ago
    Auto-check passed

Works with

Categories

Questions about Radix Ng

What does Radix Ng do?

Build correct, accessible UI with @radix-ng/primitives — the signals-first, headless Angular primitive library. Radix Ng is an agent skill from radix-ng/primitives. Build correct, accessible UI with @radix-ng/primitives — the signals-first, headless Angular primitive library.

When should I use Radix Ng?

Radix Ng fits situations like: implementing Angular components; any UI on top of radix-ng primitives; styling them with a custom design system; : build a … with radix-ng.

How do I install Radix Ng in Claude Code?

Run `npx skills add radix-ng/primitives --skill radix-ng -a claude-code`. Or copy the skill folder (skills/radix-ng in radix-ng/primitives) into .claude/skills/radix-ng in your project. Claude Code loads it when a task matches its description.

How do I install Radix Ng in Codex?

Run `npx skills add radix-ng/primitives --skill radix-ng -a codex`. Or copy the skill folder (skills/radix-ng in radix-ng/primitives) into .agents/skills/radix-ng in your project. Codex loads it when a task matches its description.

Can I use Radix Ng in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add radix-ng/primitives --skill radix-ng -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/radix-ng, .gemini/skills/radix-ng, .github/skills/radix-ng and .opencode/skills/radix-ng in your project.

What does Radix Ng need to run?

SKILL.md names no scripts, command-line tools or credentials: Radix Ng is instructions for the agent only. Compatibility (from SKILL.md): Requires @radix-ng/primitives and Angular 21+ (signals API). Stories use Tailwind CSS v4, but the primitives are styling-agnostic..

Does Radix Ng access the network?

SKILL.md names 1 domain. In commands or code: sb-primitives.radix-ng.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Radix Ng safe to install?

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.

What licence does Radix Ng use?

Radix Ng is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Radix Ng use?

About 2.2k tokens (SKILL.md is roughly 8.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 202k tokens, read only when the agent opens those files.

What are the alternatives to Radix Ng?

Skills that share tags, products or a category with Radix Ng: UI Styling (Ohh-889/skyroc, 795 stars), Ss Learn (bitjaru/styleseed, 973 stars), Migrate Radix To Base (TheOrcDev/youtube-to-blog, 180 stars) and Use Swim UI (swimlane/ngx-ui, 735 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Radix Ng?

radix-ng (a GitHub organization) maintains it in radix-ng/primitives, which has 274 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on September 28, 2026.

Source: radix-ng/primitives on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.