NV Elements Catalog Starters Repo System Themes Getting Started Getting Started Installation CLI MCP Skills Lint Integrations Getting Started Angular Bundles Custom Elements Golang 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 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 Panel 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 will add the nve command to your path and provide several helpful commands for working with Elements.

MacOS / Linux Windows CMD 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

Skill Use Benefit elements General Elements UI authoring, editing, and review. Gives the agent a broad Elements workflow, tool map, authoring rules, playground guidance, and project integration guidance. authoring Creating or changing HTML templates with nve-* APIs. Forces lookup-first authoring: search examples, inspect APIs, generate imports, then validate the template. search Finding components, examples, icons, and tokens. Points the agent at the right CLI and MCP lookup tools before it guesses component names or attributes. integration Creating starters or adding Elements to an existing project. Defines the setup sequence: create or update the project, install packages, configure MCP, import CSS, register components, and validate. doctor Checking project and MCP setup. Guides the agent toward `nve project.validate` and MCP configuration checks before changing source code. migration Migrating from deprecated Elements APIs or internal package names. Combines package mapping, lint setup, deprecated API replacement, and validation into one ordered workflow. playground Creating shareable Elements playground prototypes. Uses a scratchpad-first flow so agents can iterate against validation instead of rewriting a template from memory. about Explaining Elements to developers who are new to the system. Provides concise product context, benefits, getting started guidance, and resource links.

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