Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/nvidia/elements/authoring-componentsnpx skills add NVIDIA/elements --skill authoring-componentsgit clone --depth 1 https://github.com/NVIDIA/elementsWhat 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 | $0.00109 | $0.00857 |
| Opus 5 | $0.00055 | $0.00428 |
| Sonnet 5 | $0.00022 | $0.00171 |
| Haiku 4.5 | $0.00011 | $0.00086 |
Grade A, and why
authoring-components 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 2d 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 — 58 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Authoring Components
You MUST review the component creation guideline before creating or modifying components.
When to Use This Skill
- Creating a new component from scratch
- Understanding the required file structure for components
- Setting up test boilerplate for all 5 test types
- Choosing the appropriate base class or mixin (ButtonFormControlMixin vs LitElement)
- Understanding component metadata and registration patterns
- Setting up JSDoc comments for components
Must Read File
Read the component creation guide to get critical context for component creation guidance.
Workflow
- Gather requirements: confirm the component name (kebab-case), purpose, and whether to use
LitElementdirectly or applyButtonFormControlMixinfor button-like interactive components. - Study a reference: read the closest reference component listed below to understand the pattern in practice.
- Create the 10 required files in
projects/core/src/<component-name>/:component-name.ts:component class with metadata, JSDoc, and render methodcomponent-name.css:styles using CSS custom propertiescomponent-name.examples.ts:example templates with@summaryJSDoccomponent-name.test.ts:unit testscomponent-name.test.axe.ts:accessibility testscomponent-name.test.visual.ts:visual regression testscomponent-name.test.ssr.ts:SSR testscomponent-name.test.lighthouse.ts:lighthouse testsdefine.ts:registration usingdefine()helper withHTMLElementTagNameMapindex.ts:side-effect-free export
- Update shared entry points:
- Add only
import '@nvidia-elements/core/<component-name>/define.js'toprojects/core/src/bundle.tsin alphabetical order. Keep this registration bundle import-only. Export the public API from the componentindex.tsand expose its entry point through the packageexportsmap. - Add the definition import to the
js-moduleslist inprojects/core/src/index.test.lighthouse.tsso the combined direct-import benchmark measures the component.
- Add only
- Measure payloads: run
mise exec -- pnpm run test:lighthousefromprojects/core. Increase a bundle-size limit only when the measured payload exceeds the current limit. - Verify: confirm all files follow the templates in the component creation guide, then run
mise exec -- pnpm run lintandmise exec -- pnpm run testfromprojects/core.
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.
- 2d ago First seen · 58 lines · 109 tokens per session scan A abfd6f3974b7
authoring-components is a skill published in the GitHub repository NVIDIA/elements (83 stars, last pushed 2d ago), licensed Apache-2.0. It adds 109 tokens to every session and 857 once invoked, about $0.0005 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-30.
Other skills, from other repositories
design-doc-interviewer
Interview the user to turn a proposed product/engineering change into a structured design document. Use when the user asks to be interviewed, wants help clarifying a design, or wants a design doc produced from Q&A. Emphasize numbered questions (few at a time), capture requirements/constraints/UX/data/logic/testing…
ideate
Capture and document a new idea in this repo. Use when the user says things like "help me brainstorm", "I have an idea", or "let's capture this for the future" and wants it recorded in design/ideas/ with a summary, supporting research (repo context + web if useful), and a sketch.
flow
Use when you need to run Flow type checking, or when seeing Flow type errors in React code.
beui
Pick and install beUI (@beui) animated React components from the shadcn registry. Use when building motion UI, agent/chat interfaces, toasts, docks, bottom sheets, drawers, popovers, sliders, loaders, 404 pages, or any beui.dev component. Maps user intent to exact @beui install slugs instead of inventing custom…
beui-pro
Choose, inspect, install, and compose licensed beUI Pro premium React blocks from the authenticated shadcn registry. Use when building or improving landing pages with beUI Pro, installing @beui-pro items, selecting premium heroes, features, pricing, social proof, CTAs, navigation, footers, or other page sections, or…
walkeros-understanding-sources
Use when working with walkerOS sources, understanding event capture, or learning about the push interface. Covers browser, dataLayer, and server source patterns.