with one click
with one click
| description | Command: docs-plugin |
| name | docs-plugin |
| metadata | {"skiller":{"source":".agents/rules/docs-plugin.mdc"}} |
Shared docs law now belongs to docs-creator.
Use docs-creator for:
This skill stays narrow. It owns plugin-page specifics only.
Writing Style:
index.mdx, installation.mdx, and especially plate-ui.mdx. When mentioning Plate UI for the first time in a document, ensure it is linked.Headless Approach:
/docs/components/component-name)./docs/(guides)/plugin.mdx if needed.Structure and Formatting:
<Steps> for procedural instructions (e.g., installation, usage steps).### for sub-headings within <Steps>.dnd.mdx as a primary example for structure and formatting.<API name="ApiName">, <APIOptions>, <APIParameters>, and <APIReturns> for documenting plugin options, API methods, and transforms. Ensure all documented options and behaviors are accurate and sourced from the code.<APIOptions> to <APIParameters> or vice versa if they already exist and are working correctly.Plugin documentation should generally follow this order:
(Optional): If a relevant visual demo exists in the project.
:
## Kit Usage (If applicable and comes first since it's the fastest approach):
Enclose steps within <Steps>.
### Installation:
...Kit, which includes pre-configured ...Plugin along with ... and their Plate UI components.<ComponentSource name="relevant-kit-name" />.SpecificElement: Renders the main element.SpecificToolbarButton: Provides a toolbar button.### Add Kit:
Show how to add the kit to plugins:
import { createPlateEditor } from 'platejs/react';
import { RelevantKit } from '@/components/editor/plugins/relevant-kit-name';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
...RelevantKit,
],
});
## Manual Usage:
Enclose steps within <Steps>.
### Installation:
npm install @platejs/package-name command for the core plugin package.### Add Plugin (or Add Plugins if documenting multiple plugins in this step):
Show the import statement for the specific plugin(s) being documented.
Provide a basic code snippet demonstrating how to add the plugin to the plugins array within createPlateEditor.
import { SpecificPlugin } from '@platejs/specific-package/react';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
SpecificPlugin, // Or SpecificPlugin.configure({}) if options are common at this stage
],
});
Note: ParagraphPlugin from platejs/react is included by default and usually doesn't need to be explicitly added unless overriding its component (e.g., ParagraphPlugin.withComponent(CustomParagraph)).
### Configure Plugin (or Configure Plugins if documenting multiple plugins in this step):
For Element Plugins (with components):
Prioritize withComponent when only assigning a component without other options:
import { SpecificPlugin } from '@platejs/specific-package/react';
import { createPlateEditor } from 'platejs/react';
import { SpecificElement } from '@/components/ui/specific-node';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
SpecificPlugin.withComponent(SpecificElement),
],
});
withComponent: Assigns SpecificElement to render the plugin's elements.Use .configure() when there are additional options beyond the component:
import { SpecificPlugin } from '@platejs/specific-package/react';
import { createPlateEditor } from 'platejs/react';
import { SpecificElement } from '@/components/ui/specific-node';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
SpecificPlugin.configure({
node: { component: SpecificElement },
shortcuts: { toggle: 'mod+alt+s' },
// ...other actual options from the plugin source
}),
],
});
node.component: Assigns SpecificElement to render the plugin's elements.shortcuts.toggle: Defines a keyboard shortcut to toggle the feature.For Style Plugins (without distinct components):
Focus on configuration options like inject.nodeProps, default values, and target elements:
import { SpecificPlugin } from '@platejs/specific-package/react';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
SpecificPlugin.configure({
inject: {
nodeProps: {
defaultNodeValue: 'defaultValue',
// ...other nodeProps options
},
targetPlugins: ['p', 'h1', 'h2'],
},
}),
],
});
inject.nodeProps.defaultNodeValue: Sets the default value for the styling property.inject.targetPlugins: Specifies which element types receive the styling.### Add to Toolbar Buttons (For Element Plugins):
Turn Into Toolbar Button:
### Turn Into Toolbar Button
You can add these items to the [Turn Into Toolbar Button](/docs/toolbar#turn-into-toolbar-button) to convert blocks into [elements]:
```tsx
{
icon: <SpecificIcon />,
keywords: ['keyword1', 'keyword2', 'symbol'],
label: 'Element Name',
value: KEYS.elementKey,
}
```
Insert Toolbar Button:
### Insert Toolbar Button
You can add these items to the [Insert Toolbar Button](/docs/toolbar#insert-toolbar-button) to insert [element] elements:
```tsx
{
icon: <SpecificIcon />,
label: 'Element Name',
value: KEYS.elementKey,
}
```
### Add Toolbar Button (If the kit includes a toolbar button):
*ToolbarButton to your Toolbar to ."registry-kits.ts to see if a *-toolbar-button is part of the kit's dependencies.## Plugins:
PluginName: Document each relevant plugin with a simple description (e.g., "Plugin for H1 heading elements").<API name="PluginName"> and <APIOptions> to detail actual, existing configurable options as found in the source code.## API (If applicable):
editor.api.pluginName.* functions as found in the source code.### api.<name> for each function.## Transforms (If applicable):
editor.tf.pluginName.* functions, describing their precise behavior as observed in the source code.### tf.<name> for each function.Prioritize linking to individual, specific documentation pages (e.g., for a sub-plugin or a related concept) to avoid content duplication. Instead of a generic "See plugin guide", try to smartly link a relevant word or phrase within a sentence to the target page.
All docs:
Get Started:
/docs: Introduction to Plate/docs/installation: Getting Started / Installation OverviewInstallation Details:
/docs/installation/plate-ui: Plate UI Installation/docs/installation/next: Next.js Setup/docs/installation/rsc: React Server Components (RSC)/docs/installation/node: Node.js Usage/docs/installation/mcp: MCP ServerGuides:
/docs/plugin: Plugin System Overview/docs/plugin-methods: Plugin Methods/docs/plugin-shortcuts: Plugin Shortcuts/docs/plugin-context: Plugin Context/docs/plugin-components: Plugin Components Guide/docs/editor: Editor Configuration/docs/editor-methods: Editor Methods/docs/controlled: Controlled Editor Value/docs/static: Static Rendering/docs/html: HTML Serialization (Guide)/docs/markdown: Markdown Serialization (Guide)/docs/form: Form Integration/docs/typescript: TypeScript Usage/docs/debugging: Debugging/docs/troubleshooting: TroubleshootingPlugins (Overview & Individual - see apps/www/src/config/docs-plugins.ts for full list):
/docs/plugins: Plugins Overview (links to specific plugin docs)Components:
/docs/components: UI Components Overview (Toolbar, Nodes, etc.)
/docs/components/blockquote-node, etc.Kits:
/docs/kits/basic-blocks-kit, etc.API Reference:
/docs/api: API Overview/docs/api/core/plate-editor, /docs/api/core/plate-plugin, /docs/api/core/plate-components, /docs/api/core/plate-store, /docs/api/core/plate-controller/docs/api/slate (and its sub-pages like /docs/api/slate/editor-api/docs/api/utils, /docs/api/cn, /docs/api/floating, /docs/api/react-utils, /docs/api/resizableBy following this guide, plugin documentation will be consistent, informative, and align with the project's overall documentation strategy.
Fallback browser automation with persistent Chrome state. Use only when Browser Use is unavailable or blocked.
Create a self-contained GPT Pro or external-review prompt with full repo context, current state, evidence, and pointed review questions because the reviewer has no local file access.
Work heavyweight framework or library tasks with planning-first research, selective deep analysis, and rigorous handoff
Work a task end-to-end with lean context gathering, implementation, and verification
Command: changeset
Create or update Plate docs with conversational voice, lane-aware structure, explicit ownership, and code-backed accuracy. North star is `docs/solutions/style.md`. Use for plugin pages, guides, install docs, serialization docs, API docs, and specs — anywhere both humans and agents need a clear, readable source of truth.