fix(cli): improve api metadata

Signed-off-by: Cory Rylan <crylan@nvidia.com>

Author: coryrylan

projects/cli/src/mcp/ui/index.ts

@@ -20,7 +20,7 @@ export const examplesRenderResource: UIResource = {
 mimeType: MCP_UI_MIME_TYPE,
 resourceUri: 'ui://elements/example-preview',
 description:
-'Use this MCP app when an Elements example or template should be shown to the user. It renders validated nve-* HTML from examples_get or examples_render so users can inspect component layout, theme, and validation messages visually instead of reading markup only.',
+'Use this MCP app when an NVIDIA Elements UI example or template should be shown to the user. It renders validated nve-* HTML from examples_get or examples_render so users can inspect component layout, theme, and validation messages visually instead of reading markup only.',
 getHtml: ()=>examplesRenderHtml
 };
 

projects/internals/tools/src/api/utils.ts

@@ -114,25 +114,44 @@ function getAPIDescriptionMarkdown(api: PartialAPIResult) {
 returnwrapText(description).trim();
 }
 
-functiongetAttributeExampleContext(attribute: Attribute){
-if(attribute.name==='nve-layout'){
-return/* html */`
+constNVE_LAYOUT_EXAMPLE=/* html */`
+<!-- import path layout styles -->
+<style>
+ @import "@nvidia-elements/styles/layout.css";
+</style>
+
+<!-- inline row layout -->
 <section nve-layout="row gap:sm">
  <div></div>
  <div></div>
  <div></div>
 </section>
+
+<!-- stacked column layout -->
 <section nve-layout="column gap:sm">
  <div></div>
  <div></div>
  <div></div>
 </section>
+
+<!-- 12 column grid layout with 6 column span -->
 <section nve-layout="grid gap:sm span-items:6">
  <div>columns 1-6</div>
  <div>columns 7-12</div>
+</section>
+
+<!-- 12 column grid layout with variable column span -->
+<section nve-layout="grid gap:sm">
+ <div nve-layout="span:4">columns 1-4</div>
+ <div nve-layout="span:8">columns 5-12</div>
 </section>`;
-}elseif(attribute.name==='nve-text'){
-return/* html */`
+
+constNVE_TEXT_EXAMPLE=/* html */`
+<!-- import path typography styles -->
+<style>
+ @import "@nvidia-elements/styles/typography.css";
+</style>
+
 <h1 nve-text="heading">heading</h1>
 <p nve-text="body">body</p>
 <p nve-text="label">label</p>
@@ -152,6 +171,12 @@ function getAttributeExampleContext(attribute: Attribute) {
 <p nve-text="start">start</p>
 <p nve-text="center">center</p>
 <p nve-text="end">end</p>`;
+
+functiongetAttributeExampleContext(attribute: Attribute){
+if(attribute.name==='nve-layout'){
+returnNVE_LAYOUT_EXAMPLE;
+}elseif(attribute.name==='nve-text'){
+returnNVE_TEXT_EXAMPLE;
 }
 returnattribute.example??'';
 }

projects/site/src/docs/skills/index.md

@@ -1,7 +1,7 @@
 ---
 {
 title: 'Skills',
-description: 'Use NVIDIA Elements skills to give AI agents persistent project context, workflow guidance, and access to Elements UI authoring practices.',
+description: 'NVIDIA skills to give AI agents persistent project context, workflow guidance, and access to NVIDIA Elements UI authoring practices.',
 layout: 'docs.11ty.js'
 }
 ---