with one click
writing-docs-pages
Use when creating or editing documentation pages in docs/content/guides/ - covers YAML frontmatter, page structure, framework-specific example embedding, writing style, and sidebar registration
Menu
Use when creating or editing documentation pages in docs/content/guides/ - covers YAML frontmatter, page structure, framework-specific example embedding, writing style, and sidebar registration
| name | writing-docs-pages |
| path | docs/** |
| description | Use when creating or editing documentation pages in docs/content/guides/ - covers YAML frontmatter, page structure, framework-specific example embedding, writing style, and sidebar registration |
This skill covers how to create and edit guide pages in docs/content/guides/.
Every .md file starts with YAML frontmatter. Generate unique 8-character alphanumeric IDs for new pages (never change existing IDs). Each framework variant needs its own ID.
---
id: abc12345 # 8 random alphanumeric chars (never change existing)
title: Feature Name
metaTitle: Feature Name - JavaScript Data Grid | Handsontable
description: Short SEO description under 160 characters.
permalink: /feature-name
canonicalUrl: /feature-name
tags:
- keyword1
- keyword2
react:
id: def67890 # Different ID for React variant
metaTitle: Feature Name - React Data Grid | Handsontable
searchCategory: Guides
category: Cell features # Must match a sidebar category exactly
---
Follow this order consistently:
title frontmatter field. Do not add # Title (or any other H1) after the frontmatter, or the title appears twice on the page.---).[[toc]] - auto-generates a table of contents from headings.## and below only, ordered from basic to advanced: Enable the feature, Basic usage, Configuration options, Advanced usage, Keyboard shortcuts, Known limitations, API reference links.Wrap content that applies to only one framework:
::: only-for javascript
JavaScript-only content here.
:::
::: only-for react
React-only content here.
:::
Important: The ::: markers must be on their own lines with blank lines before and after the content block.
Embed runnable code examples using this pattern. The --js 1 --ts 2 flags set tab order.
::: only-for javascript
::: example #example1 --js 1 --ts 2
@[code](@/content/guides/category/feature/javascript/example1.js)
@[code](@/content/guides/category/feature/javascript/example1.ts)
:::
:::
::: only-for react
::: example #example1 :react --tsx 1 --jsx 2
@[code](@/content/guides/category/feature/react/example1.tsx)
@[code](@/content/guides/category/feature/react/example1.jsx)
:::
:::
::: only-for vue
::: example #example1 :vue3
@[code](@/content/guides/category/feature/vue/example1.vue)
:::
:::
Vue 3: Embed a single TypeScript SFC (vue/example1.vue with <script setup lang="ts">). Use the :vue3 preset (or :vue3-numbro, :vue3-languages, :vue3-vuex when the feature needs extra dependencies). Do not use --html / --js tabs for new Vue examples. See skill creating-docs-examples for the full Vue SFC pattern.
Angular: Use :angular with --ts 1 --html 2.
Full site voice and the words-to-avoid list are in docs/AGENTS.md §2.2 (the docs-site override of the monorepo standards in .ai/DOC-STANDARDS.md). Key points for pages:
-) or double hyphens (--) to separate clauses, not en dashes — this is the docs-site convention (unlike JSDoc/changelog, which use en dashes).comments.[text](@/path/to/file.md#anchor) syntax.Pages mentioning "Excel" must include the Microsoft/Excel trademark disclaimer at the bottom. Pages that also mention "Google Sheets" use the expanded disclaimer covering both trademarks.
After creating a new page, add it to docs/content/guides/sidebar.js. Find the correct category array and insert an entry:
{ path: 'guides/category/feature-name/feature-name' }
Use onlyFor: ['react'] or onlyFor: ['angular'] if the page is framework-specific.
For JavaScript and React examples, edit the TypeScript source first (.ts or .tsx). Then generate the JavaScript variant from the docs/ directory:
cd docs && npm run docs:code-examples:generate-js -- <path-to-ts-file>
Use a path relative to docs/ (for example content/recipes/foo/javascript/example1.ts).
For Vue examples, write TypeScript directly in the .vue file (<script setup lang="ts">). There is no separate JS file to generate.
See docs/README-EDITING.md for the complete editing rules, including all frontmatter tags, container syntax, and content formatting details.
Use for ANY work touching the `handsontable/` core package: fixing bugs, adding features, modifying TypeScript types, removing as-casts, writing or debugging plugins, editors, renderers, validators, cell types, hooks, shortcuts, selection, helpers, index translations, or i18n. Also use for how-to questions about core internals (plugin lifecycle, coordinate systems, hook registration, TypeScript conventions). Triggers on file paths under `handsontable/src/` (excluding `3rdparty/walkontable/` which has its own skill), or when the user describes a symptom in the core grid without naming a file. This is the primary entry point for all core Handsontable development — when in doubt, load it.
Use when creating code examples for documentation pages - JavaScript, TypeScript, React, Angular, and Vue variants with proper imports, registration, and license key
Use the pre-built code-review-graph knowledge graph for ANY cross-file task in this monorepo — exploring code, debugging symptom→root-cause, planning a safe refactor/rename, or reviewing a branch/PR. Reach for this BEFORE manual Grep+Read of call chains; results are 2-6x cheaper. Trigger on "who calls X", "what imports Y", "where is X used", "dependency chain", "blast radius", "trace this bug", "rename X across the codebase", "find dead code", "what would break if I change", "review this PR" — or any question that spans multiple files, even when Grep seems enough.
Use when working with row or column indexes in Handsontable - translating between physical, visual, and renderable coordinates, using IndexMapper, or debugging index-related bugs where rows or columns appear in wrong positions
Use when creating standalone examples in examples/next/docs/ for visual regression testing or documentation demos - covers the Vite-based example structure, sample data patterns, and multi-feature demonstration
Use when creating or modifying a Handsontable cell type that composes an editor, renderer, and validator into a reusable configuration object registered by name