Prompt file imported from xmlui-org/xmlui (.github/prompts/write-component-docs.prompt.md). Copyright stays with the author.

Write Component Documentation

Name: write-component-docs
Author: xmlui-org

Before starting

Read these reference files:
- .ai/xmlui/doc-generation.md — how the doc pipeline works (always)
- .ai/xmlui/component-architecture.md — understand the component's API structure (always)
Read the component's metadata:
- xmlui/src/components/ComponentName/ComponentName.tsx — props, events, APIs, context vars
Check existing docs:
- website/content/docs/components/ComponentName/ComponentName.md — may already exist
- website/content/docs/pages/components/ComponentName.mdx — generated output (do NOT edit this)

Implementation steps

Step 1 — Create the description file

Create or update website/content/docs/components/ComponentName/ComponentName.md:

The ComponentName component [brief description of purpose and when to use it].

## Usage

[Show the simplest possible example that demonstrates the core functionality]

<ComponentName prop="value">
  Content
</ComponentName>

## [Feature section]

[For each major feature, show a focused example with brief explanation]

## Related components

- [RelatedComponent](/docs/components/RelatedComponent) — how they work together

Step 2 — Write focused examples

Each example should:

Demonstrate one concept at a time
Use realistic but minimal markup
Show the output (describe what the user sees)
Not duplicate the auto-generated props table

Step 3 — Per-prop and per-event descriptions

If any prop or event in createMetadata() has a generic or missing description, update the metadata description string directly in ComponentName.tsx. These descriptions flow into the auto-generated tables.

Step 4 — Generate and verify

# Build metadata and generate docs
npm run generate-all-docs -w xmlui

# Check the generated output
cat website/content/docs/pages/components/ComponentName.mdx

Verify:

Description appears at the top
Props/events/APIs tables are generated correctly
Examples render (if the docs site is running)

Step 5 — Add a changeset (if metadata descriptions were changed)

If you modified description strings in createMetadata():

---
"xmlui": patch
---
Improve documentation for ComponentName

What NOT to do

Do NOT edit files in website/content/docs/pages/ — they are auto-generated
Do NOT duplicate the props table in the description file — it is auto-generated
Do NOT write implementation details — focus on usage and examples
Do NOT include screenshots — use live examples in the docs site

Commands

# Generate docs
npm run generate-all-docs -w xmlui

# Build metadata only
npm run build:xmlui-metadata -w xmlui

# Generate docs only (after metadata is built)
npm run generate-docs -w xmlui

# Write Component Documentation ## Before starting 1. Read these reference files: - `.ai/xmlui/doc-generation.md` — how the doc pipeline works (always) - `.ai/xmlui/component-architecture.md` — understand the component's API structure (always) 2. Read the component's metadata: - `xmlui/src/components/ComponentName/ComponentName.tsx` — props, events, APIs, context vars 3. Check existing docs: - `website/content/docs/components/ComponentName/ComponentName.md` — may already exist - `website/content/docs/pages/components/ComponentName.mdx` — generated output (do NOT edit this) ## Implementation steps ### Step 1 — Create the description file Create or update `website/content/docs/components/ComponentName/ComponentName.md`: ```markdown The ComponentName component [brief description of purpose and when to use it]. ## Usage [Show the simplest possible example that demonstrates the core functionality] <ComponentName prop="value"> Content </ComponentName> ## [Feature section] [For each major feature, show a focused example with brief explanation] ## Related components - [RelatedComponent](/docs/components/RelatedComponent) — how they work together ``` ### Step 2 — Write focused examples Each example should: - Demonstrate one concept at a time - Use realistic but minimal markup - Show the output (describe what the user sees) - Not duplicate the auto-generated props table ### Step 3 — Per-prop and per-event descriptions If any prop or event in `createMetadata()` has a generic or missing `description`, update the metadata description string directly in `ComponentName.tsx`. These descriptions flow into the auto-generated tables. ### Step 4 — Generate and verify ```bash # Build metadata and generate docs npm run generate-all-docs -w xmlui # Check the generated output cat website/content/docs/pages/components/ComponentName.mdx ``` Verify: - Description appears at the top - Props/events/APIs tables are generated correctly - Examples render (if the docs site is running) ### Step 5 — Add a changeset (if metadata descriptions were changed) If you modified `description` strings in `createMetadata()`: ```yaml --- "xmlui": patch --- Improve documentation for ComponentName ``` ## What NOT to do - Do NOT edit files in `website/content/docs/pages/` — they are auto-generated - Do NOT duplicate the props table in the description file — it is auto-generated - Do NOT write implementation details — focus on usage and examples - Do NOT include screenshots — use live examples in the docs site ## Commands ```bash # Generate docs npm run generate-all-docs -w xmlui # Build metadata only npm run build:xmlui-metadata -w xmlui # Generate docs only (after metadata is built) npm run generate-docs -w xmlui ```

{ "prompt": "# Write Component Documentation\n\n## Before starting\n\n1. Read these reference files:\n - `.ai/xmlui/doc-generation.md` — how the doc pipeline works (always)\n - `.ai/xmlui/component-architecture.md` — understand the component's API structure (always)\n2. Read the component's metadata:\n - `xmlui/src/components/ComponentName/ComponentName.tsx` — props, events, APIs, context vars\n3. Check existing docs:\n - `website/content/docs/components/ComponentName/ComponentName.md` — may already exist\n - `website/content/docs/pages/components/ComponentName.mdx` — generated output (do NOT edit this)\n\n## Implementation steps\n\n### Step 1 — Create the description file\n\nCreate or update `website/content/docs/components/ComponentName/ComponentName.md`:\n\n```markdown\nThe ComponentName component [brief description of purpose and when to use it].\n\n## Usage\n\n[Show the simplest possible example that demonstrates the core functionality]\n\n<ComponentName prop=\"value\">\n Content\n</ComponentName>\n\n## [Feature section]\n\n[For each major feature, show a focused example with brief explanation]\n\n## Related components\n\n- [RelatedComponent](/docs/components/RelatedComponent) — how they work together\n```\n\n### Step 2 — Write focused examples\n\nEach example should:\n- Demonstrate one concept at a time\n- Use realistic but minimal markup\n- Show the output (describe what the user sees)\n- Not duplicate the auto-generated props table\n\n### Step 3 — Per-prop and per-event descriptions\n\nIf any prop or event in `createMetadata()` has a generic or missing `description`, update the metadata description string directly in `ComponentName.tsx`. These descriptions flow into the auto-generated tables.\n\n### Step 4 — Generate and verify\n\n```bash\n# Build metadata and generate docs\nnpm run generate-all-docs -w xmlui\n\n# Check the generated output\ncat website/content/docs/pages/components/ComponentName.mdx\n```\n\nVerify:\n- Description appears at the top\n- Props/events/APIs tables are generated correctly\n- Examples render (if the docs site is running)\n\n### Step 5 — Add a changeset (if metadata descriptions were changed)\n\nIf you modified `description` strings in `createMetadata()`:\n```yaml\n---\n\"xmlui\": patch\n---\nImprove documentation for ComponentName\n```\n\n## What NOT to do\n\n- Do NOT edit files in `website/content/docs/pages/` — they are auto-generated\n- Do NOT duplicate the props table in the description file — it is auto-generated\n- Do NOT write implementation details — focus on usage and examples\n- Do NOT include screenshots — use live examples in the docs site\n\n## Commands\n\n```bash\n# Generate docs\nnpm run generate-all-docs -w xmlui\n\n# Build metadata only\nnpm run build:xmlui-metadata -w xmlui\n\n# Generate docs only (after metadata is built)\nnpm run generate-docs -w xmlui\n```", "variables": [], "notes": "Write or update hand-written component documentation for the docs website", "metadata": { "source": { "provider": "github-prompts", "repository": "https://github.com/xmlui-org/xmlui", "path": ".github/prompts/write-component-docs.prompt.md", "ref": "7e044ae0f53a5ca105d2da915861a7b51ee58358", "url": "https://github.com/xmlui-org/xmlui/blob/7e044ae0f53a5ca105d2da915861a7b51ee58358/.github/prompts/write-component-docs.prompt.md", "key": "xmlui-org/xmlui/.github/prompts/write-component-docs.prompt.md" } } }

write-component-docs

About