authoring-patterns

Authoring Patterns

Persist a validated HTML template as a reusable pattern file in the Elements pattern library at projects/internals/patterns/src/.

When to Use This Skill

• User wants to save a playground template as a reusable pattern
• User asks to persist, save, or store a composition in the codebase
• User wants to create a new pattern file from HTML
• User says "save as pattern," "create pattern," or "add to pattern library"
• User has a validated playground prototype and wants it cataloged

Must Read Files

You MUST review these files before proceeding:

• Examples Guidelines -- authoritative rules for naming, @summary, and structure
• Scan projects/internals/patterns/src/*.examples.ts to understand existing patterns and categories

Workflow

Phase 1: Locate Template

Find the validated HTML template to persist. Look for it in the conversation context:

1. Check for a recently validated HTML template from a playground workflow
2. Check for HTML the user has pasted or referenced
3. If no template exists, ask the user to provide the HTML they want to save

Phase 2: Check Validity

Ensure the template is valid before proceeding.

1. Call api_validate with { template, lang: 'html', format: 'json' }
2. If validation returns errors, report them to the user and fix each issue
3. Re-validate until ok is true and summary.errors is 0
4. Do NOT proceed to Phase 3 until validation passes

Phase 3: Generate Imports

Use the MCP tool to derive correct ESM import statements.

1. Call api_imports_get with the template HTML
2. The tool returns the required @nvidia-elements/core/*/define.js imports
3. Always prepend import { html } from 'lit'; as the first import -- the tool does not include it

Phase 4: Determine Metadata

Analyze the template and determine where and how to file it.

Export name:

• PascalCase, 1-3 words (per examples.md guidelines)
• Describes WHAT the pattern shows, not HOW it works
• Avoid component names in the title (use LoginForm not InputPasswordLoginForm)