Borrowing it
Nothing to install: this file belongs to AtulFalle/ng-elemental. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/AtulFalle/ng-elemental/master/.cursor/skills/ng-elemental-component/SKILL.mdgit clone --depth 1 https://github.com/AtulFalle/ng-elementalWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/atulfalle/ng-elemental/ng-elemental-component)<a href="https://agentmods.dev/skills/atulfalle/ng-elemental/ng-elemental-component"><img src="https://agentmods.dev/badge/skills/atulfalle/ng-elemental/ng-elemental-component/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/atulfalle/ng-elemental/ng-elemental-component"><img src="https://agentmods.dev/badge/skills/atulfalle/ng-elemental/ng-elemental-component.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00076 | $0.01157 |
| Opus 5 | $0.00038 | $0.00579 |
| Sonnet 5 | $0.00015 | $0.00231 |
| Haiku 4.5 | $0.00008 | $0.00116 |
Grade A, and why
ng-elemental-component scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 9d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 86 lines — stays where its author put it; the contents beside it link to each section on GitHub.
NgElemental component creation
Read this skill before adding or changing a UI component. Do not scan the whole repo first — follow the map below, then open only the files you need.
Copy-paste library: consumers get source via @ng-elemental/cli. Angular 22, signals, standalone (do not set standalone: true).
Prefer our components first
Compose existing El* components. Build a new primitive only when none of them fit.
| Need | Use |
|---|---|
| Icon, chevron, check, close | ElIcon + Font Awesome name (check, chevron-down, xmark, user) |
| Button | ElButton |
| Checkbox | ElCheckbox |
| Radio group | ElRadioGroup + ElRadio |
| Chips / tags | ElChip |
| Avatar | ElAvatar |
| Card layout | ElCard + [elCard*] slots |
| Form label | ElLabel |
| Form error message | ElFormError |
| Dropdown / combobox | ElSelect + ElSelectItem |
| Segmented choice | ElSegmentedButton + ElSegmentedButtonItem |
| Theme / tokens | provideElTheme(), tokens.scss |
Icons: Font Awesome is mandatory. Use <el-icon name="…">. Never mask-image: url(...), data-URI SVGs, inline <svg>, CSS triangles, or unicode glyphs for icons.
Imports: import { ElIcon } from '../icon/icon' (same pattern for other El* siblings). Document npx @ng-elemental/cli add icon (and any other dependency) as a prerequisite.
Where to look
| What | Path |
|---|---|
| Component source | packages/ui/src/lib/<name>/ |
| Public exports | packages/ui/src/index.ts |
| Tokens | packages/ui/src/lib/theme/tokens.scss |
| CLI manifest (source of truth) | packages/cli/src/lib/component-registry.ts |
| CLI copy assets | packages/cli/project.json (assetGlobs must match the manifest; no * wildcards) |
| CLI usage text | packages/cli/src/lib/add.ts, packages/cli/src/lib/cli.ts |
| CLI e2e | packages/cli/src/e2e/add-<name>.spec.ts |
| Docs page | src/app/docs/pages/<name>-doc.ts + .html |
| Docs nav / routes / tokens table | src/app/docs/nav.ts, src/app/app.routes.ts, src/app/docs/theme-tokens.ts |
| Home list | src/app/docs/pages/home.html |
| README | README.md, packages/cli/README.md |
| Changelog | CHANGELOG.md under [Unreleased] |
| Compound parent/child example | packages/ui/src/lib/radio/, packages/ui/src/lib/select/ |
| Icon usage example | packages/ui/src/lib/button/, packages/ui/src/lib/chip/ |
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 9d ago First seen · 86 lines · 76 tokens per session scan A 7cfc7263477d
ng-elemental-component is a skill published in the GitHub repository AtulFalle/ng-elemental (2 stars, last pushed 2d ago), licensed MIT. It adds 76 tokens to every session and 1,157 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
fast-typescript-check
Keep www-sacred's TypeScript fast to type-check and fast to run. Use when touching the ASCII/canvas animation components (the only real per-frame code here), tightening type-check wall-clock, or auditing a change for runtime or compiler regressions. Scoped to this repo — a React 19 / Next.js 16 component library plus…
port-sacred-terminal-ui-to-hostile-react-codebase
Take a sacred React component (or a sacred screen that mirrors a Simulacrum CLI surface) and graft it into a foreign React codebase that already ships its own design system, build pipeline, and CSS toolchain — without breaking the host or polluting it with sacred-specific globals.
port-sacred-terminal-ui-to-react-using-same-conventions
Take a CLI screen written for Simulacrum — the sacred CLI framework (scripts/cli/templates/.ts or scripts/python/templates/.py) — and produce a React component that lives inside components/examples/ (or components/) using only sacred's existing primitives — Window, Card, SimpleTable, ActionButton, RowSpaceBetween…
radix-ng-examples
Index of every documented @radix-ng/primitives example. Use when implementing a UI feature to find a working, copy-paste-ready Angular pattern built on the primitives. Each component has an index doc linking to per-example source shards you can copy-paste.
radix-ng
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…
ng-blatui
Use the ng-blatui Angular UI library in an app — install, import components (bui-prefixed, signal-based, zoneless, SSR-safe), theme with Tailwind v4 + oklch tokens, localize dates/numbers/labels, and discover the full catalog via the registry, api.json, llms.txt or the ng-blatui-mcp MCP server. Invoke when building…