NV Elements Catalog Starters Repo System Themes Getting Started Getting Started Installation CLI MCP Skills Lint Integrations Getting Started Angular Bundles CDN Custom Elements Golang HTMX + Go Hugo Import Maps Lit Lit Library MCP Apps NextJS Nuxt Preact React SolidJS Svelte TypeScript Vue About Changelog Metrics Support Accessibility Contributions Requests Migration Foundations Overview Typography Iconography Themes Design Tokens Size & Space Objects Interactions Support Status Color Animation Fonts Layers Custom Layout Horizontal Vertical Grid Popovers i18n Visualization View Transitions Elements Accordion Alert Avatar Badge Breadcrumb Button Button Group Card Chat Message Checkbox Color Combobox Copy Button Datagrid Integrations Column Action Column Alignment Column Fixed Column width Container Card Display Settings Footer Heatmap Keynav Multi Select Pagination Panel Detail Panel Grid Performance Placeholder Row Action Row Groups Row Sort Scroll Height Single Select Stripe Date Datetime Dialog Divider Dot Drawer Dropdown Dropdown Group Dropzone File Format Datetime Format Number Format Relative Time Forms Validation Actions Control Icon Icon Button Input Input Group Logo Menu Month Notification Page Page Header Page Loader Pagination Progressive Filter Chip Progress Bar Progress Ring Password Preferences Input Pulse Radio Range Resize Handle Search Select Skeleton Sort Button Sparkline Star Rating Steps Switch Tabs Tag Textarea Time Toast Toggletip Toolbar Tooltip Tree Week Patterns Authentication Browse Chat Dashboard Editor Empty States Heatmap Keyboard Shortcut Logging Media Navigation Onboarding Panel Responsive Search Subheader Trend Code Codeblock Monaco Input Diff Input Editor Diff Editor Problems Markdown Markdown CSS Utility Labs Responsive Layout Viewport Container Patterns Forms API Design Properties & Attributes Slots Registration CustomEvents Stateless Composition Styles Packaging Glossary Logs Internal Guidelines Agent Harness Agent Tooling Agent Ownership Documentation Examples TypeScript Testing Unit Testing Accessibility Testing Lighthouse Testing SSR Testing Visual Testing Troubleshooting Component Creation Internal Examples All Examples

Skills

Skills give AI agents durable Elements context for authoring, validating, and maintaining UI projects

Elements ships agent skills with the CLI and MCP server. Skills are not a replacement for deterministic tools. They provide workflow order, project policy, and authoring guidance while the CLI and MCP tools provide the current API data, examples, imports, validation, packages, and starter setup.

The Model Context Protocol standardizes tools, prompts, and resources. Elements maps that model directly: tools expose callable operations such as api_get, prompts provide user-invoked task flows, and skills provide reusable context that agents can keep loaded while working in a project.

Install CLI

Install the Elements CLI to your system. This creates a canonical executable path and adds the nve command to your path when possible.

macOS / Linux Windows PowerShell NodeJS

Add Skills To A Project

The recommended path is the project setup command. Run it from the project root:

The setup command configures Elements for common agent clients and editor tooling:

  • Adds Elements MCP configuration for Claude Code, Cursor, and Codex.
  • Writes the Elements skill to .agents/skills/elements/SKILL.md.
  • Writes the Elements skill to .claude/skills/elements/SKILL.md.
  • Adds VS Code custom data paths for nve-* tag and attribute authoring.
  • Adds or updates core Elements package dependencies.

New starter projects created with nve project.create receive the same agent setup during project creation.

Manual Skill Setup

Use the CLI when you need to inspect or install a skill by hand:

Place the selected skill content in the directory format supported by your agent. The generated Elements skill uses this file shape:

For Codex and Cursor-compatible agents, use:

For Claude Code, use:

Available Skills

The default nve skills.list command and MCP skills_list tool expose these bundled skills.

Skill Title Description about Elements Design System Introduction Instructions for providing a brief introduction for using the Elements Design System. authoring NVIDIA Elements Authoring Guidelines Best practices and workflow guidance for authoring UI with NVIDIA Elements. doctor Elements Design System Doctor / Setup Check Instructions for ensuring the Elements Design System is setup correctly. artifact NVIDIA Artifact Template Use when creating throwaway UI artifacts, prototypes, demos, Claude Artifacts, Codex, or GPT Sites pages, or other standalone HTML interfaces that should use the NVIDIA Elements CDN template. integration NVIDIA Elements Project Integration Best practices and workflow guidance for creating or setting up NVIDIA Elements projects. migration Migrate from Deprecated Elements APIs Instructions for migrating a project from deprecated Elements APIs using lint tooling and CLI health checks. search Searching and Providing Elements API Documentation Best practices for providing Elements API Documentation. elements Elements Design System (nve) Default skill for UI-related work or NVIDIA Elements (nve-*), including HTML, CSS, layout, theming, components, applications, prototypes, Claude Artifacts, Codex Sites pages, and standalone UI artifacts.

The playground skill is available when the CLI or MCP server has the Elements playground service enabled.

Use Skills With MCP

Configure the MCP server once:

Then use skills as context and MCP tools as the live data plane:

  • Use skills_get for workflow guidance.
  • Use api_get, api_list, and api_template_validate for current component contracts.
  • Use examples_list and examples_get for known UI patterns.
  • Use api_imports_get to generate explicit define.js imports.
  • Use project_setup and project_validate for project health.

Dynamic Context Lookup

Elements publishes context files for agents that can fetch URLs at runtime if MCP or CLI are not available:

Use llms.txt when an agent can fetch links during a task. It points to the CLI/MCP context, lint context, API index, examples index, skills index, icons, and design tokens. This keeps context small and lets the agent load only the specific page or API it needs.

Use llms-full.txt when you need offline context or local retrieval-augmented generation. Download it, split it into chunks, and generate embeddings for a local index. This works well for editors, internal assistants, and environments without outbound network access during inference.

Source Best For Tradeoff llms.txt Dynamic lookup, web-enabled agents, focused task context. Requires URL access during the task, but avoids loading unnecessary documentation. llms-full.txt Local RAG, offline workflows, precomputed embeddings. Larger and easier to make stale. Rebuild or re-download the index when Elements releases new docs. Local skill files Persistent repository policy and authoring behavior. Best for stable workflow guidance, not exhaustive API catalogs. Elements MCP Live API lookup, validation, examples, package versions, and project setup. Requires an MCP-capable client and local CLI installation.

For most projects, use all four layers narrowly: install the local elements skill, configure nve mcp, let web-enabled agents start from llms.txt, and reserve llms-full.txt for local search indexes.

References