Authoring Examples

Authoring Examples (*.examples.ts)

You MUST review @projects/site/src/docs/internal/guidelines/examples.md before making any changes to example files.

When to Use This Skill

• Creating new *.examples.ts files for components
• Adding or updating example templates within existing example files
• Reviewing example naming conventions and structure
• Writing or updating @summary JSDoc comments for examples

Key Principles

1. PascalCase Naming: Use PascalCase for example names (for example, Default, StatusFlat, FormSubmit)
2. Concise Names: Keep example names to 1-3 words maximum, describing what the example shows
3. Required @summary: Every example must include a @summary JSDoc comment explaining what, why, when, and how
4. Stateless Templates: Examples should be stateless HTML templates demonstrating UI patterns

Naming Patterns

• Single words: Default, Status, Size, Color, Disabled
• Compound names: StatusFlat, StatusIcon, FormSubmit, VerticalTabs
• Special prefixes: Legacy*, Invalid*, Valid*

References

• Examples Guidelines
• Documentation Guidelines