Agent skill

Packages Documentation

by reactive in reactive/data-client

Write, update, and format documentation for @data-client public APIs - API reference (Docusaurus/MDX), README files, JSDoc/TSDoc docstrings, usage examples, migration guides, deprecation notices…

Apache-2.0Auto-check passedDevelopment

Install Packages Documentation

skills CLI
$ npx skills add reactive/data-client --skill packages-documentation -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install reactive/data-client packages-documentation --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/reactive/data-client.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/packages-documentation .claude/skills/packages-documentation && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
packages-documentation
GitHub stars
2k
Token cost
~1.4k tokens
SKILL.md length
567 words
Files
1
Skills in repo
17
Repo updated
First seen
Licence
Apache-2.0

At a glance

Write, update, and format documentation for @data-client public APIs - API reference (Docusaurus/MDX), README files, JSDoc/TSDoc docstrings, usage examples, migration guides, deprecation notices…

  • Works in 6 steps: Frontmatter with metadata → Description - What the API does → Usage examples - Code examples showing… → …
  • Changing exported APIs (docs must update in the same PR)
  • SKILL.md covers Documentation Structure, React and Vue (single source), Documentation File Naming and Documentation Format, plus 4 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Packages Documentation is an agent skill from reactive/data-client. Write, update, and format documentation for @data-client public APIs - API reference (Docusaurus/MDX), README files, JSDoc/TSDoc docstrings, usage examples, migration guides, deprecation notices, changelog entries. Use when changing exported APIs (docs must update in the same PR), writing new package docs, or updating the dataclient.io site.

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development, covering Technical documentation, Markdown and Code migrations. It works with React and Vue.js. The repository describes itself as: Async State Management without the Management. REST, GraphQL, SSE, Websockets. The licence is Apache-2.0.

When your agent uses it

  • Changing exported APIs (docs must update in the same PR)
  • Writing new package docs
  • Updating the dataclient.io site

Example prompts

  • “/packages-documentation”

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. Frontmatter with metadata
  2. Description - What the API does
  3. Usage examples - Code examples showing how to use it
  4. Parameters/Options - Document all parameters, options, and return types
  5. Type information - TypeScript types and examples
  6. Related APIs - Links to related documentation

What it can do on your machine

Read from SKILL.md and the folder at commit 02c0932. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are markdown).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Packages Documentation loads about 1.4k tokens when it runs. Until then it costs about 92 tokens; SKILL.md has 567 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~92
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from reactive/data-client at commit 02c0932, republished under its Apache-2.0 licence (© reactive). 567 words, ~1,380 tokens.

Download SKILL.mdSave it as .claude/skills/packages-documentation/SKILL.md (or your agent's skills folder).
name
packages-documentation
description
Write, update, and format documentation for @data-client public APIs - API reference (Docusaurus/MDX), README files, JSDoc/TSDoc docstrings, usage examples, migration guides, deprecation notices, changelog entries. Use when changing exported APIs (docs must update in the same PR), writing new package docs, or updating the dataclient.io site.
license
Apache 2.0
metadata.internal
true

Package Documentation Writing Guidelines

This guide covers how to write and format documentation for public library interfaces.

Documentation Structure

The /docs folder is organized by package:

  • docs/core/ - Documentation for @data-client/core, @data-client/react and @data-client/vue
  • docs/rest/ - Documentation for @data-client/rest
  • docs/graphql/ - Documentation for @data-client/graphql

Each package documentation has subdirectories:

  • api/ - API reference documentation (one file per public class/function/hook)
  • guides/ - How-to guides and tutorials
  • concepts/ - Conceptual documentation
  • getting-started/ - Getting started guides

React and Vue (single source)

docs/core renders twice: React at /docs, Vue at /vue. Never copy a page to make a Vue version. Wrap framework-specific content instead, so shared prose and resources stay in one place:

  • :::react / :::vue blocks (use :::: on an outer admonition that contains them)
  • :react[...] / :vue[...] for inline words or links
  • <FrameworkPlayground> instead of <HooksPlayground>, with shared resource code blocks directly inside and component code blocks in :::react / :::vue
  • framework-imports on a code fence for framework-agnostic code (managers, middleware): write @data-client/react imports and Vue pages show @data-client/vue. Examples never import @data-client/core; apps only install the react or vue package
  • vue_title:, vue_description: (any vue_<key>:) front matter overrides
  • frameworks: [react] front matter for pages with no Vue equivalent
  • foo.vue.md replaces foo.md for Vue; only for Vue-only pages or when nothing is shareable

When changing a page, update both framework blocks in the same edit. See website/framework-docs/README.md.

Documentation File Naming

API documentation files should match the exported name:

  • useSuspense.ts → docs/core/api/useSuspense.md
  • RestEndpoint.js → docs/rest/api/RestEndpoint.md
  • Controller.ts → docs/core/api/Controller.md
  • Entity.ts → docs/rest/api/Entity.md (or docs/core/api/Entity.md)

Documentation Format

All API documentation files should include:

  1. Frontmatter with metadata:
markdown
---
title: API Name
sidebar_label: Display Name
---
  1. Description - What the API does

  2. Usage examples - Code examples showing how to use it

  3. Parameters/Options - Document all parameters, options, and return types

  4. Type information - TypeScript types and examples

  5. Related APIs - Links to related documentation

Finding the Right Documentation File

  1. Identify the package: Check which package the code belongs to (packages/core, packages/rest, etc.)
  2. Check exports: Look at the package's index.ts or main entry point to see what's exported
  3. Match the name: Find the corresponding file in docs/{package}/api/
  4. Check guides: If it's a workflow change, also check docs/{package}/guides/
Show full SKILL.md (225 more words)Show less

Examples

Example 1: Adding a new hook
  • File: packages/react/src/hooks/useNewFeature.ts
  • Action: Create docs/core/api/useNewFeature.md with usage examples and API reference
Example 2: Changing a method signature
  • File: packages/rest/src/RestEndpoint.js (changing extend() method)
  • Action: Update docs/rest/api/RestEndpoint.md with new signature, migration notes, and updated examples
Example 3: Deprecating an API
  • File: packages/core/src/SomeClass.ts (deprecating oldMethod())
  • Action:
    • Update docs/core/api/SomeClass.md with deprecation notice
    • Document the replacement API
    • Add migration guide if needed
Example 4: Adding a new option
  • File: packages/rest/src/RestEndpoint.js (adding newOption parameter)
  • Action: Update docs/rest/api/RestEndpoint.md to document the new option with examples

Checklist

Before completing changes to public APIs in /packages:

  • Identified all affected public APIs (exports from package entry points)
  • Located or created corresponding documentation files in /docs/{package}/api/
  • Updated API reference documentation with changes
  • Added/updated code examples
  • Updated related guides if workflow changed
  • Added migration notes for breaking changes
  • Updated TypeScript examples in documentation
  • Verified documentation builds correctly (if applicable)
  • Updated agent skills in .agents/skills that cover the API: references.json for added/renamed/deleted pages, and SKILL.md examples (see .cursor/rules/skills-sync.mdc)

Important Notes

  • Public APIs are anything exported from the package's main entry point (typically index.ts or src/index.ts)
  • Internal/private APIs (prefixed with _, not exported, or marked as @internal) don't require documentation updates
  • When in doubt, err on the side of documenting - it's better to have extra documentation than missing documentation
  • Documentation should be updated in the same commit or PR as the code changes

© reactive, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/packages-documentation of reactive/data-client.

Open the folder on GitHubat commit 02c0932

Compare with similar skills

Packages Documentation next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Packages Documentation compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Packages Documentation this skillreactive/data-client2k—~1.4kAutomated safety check: PassApache-2.0
Typescript Docsgiuseppe-trisciuoglio/developer-kit355—~2.1kAutomated safety check: NotesMIT
Creating Docs Code Exampleshandsontable/handsontable22k—~2.2kAutomated safety check: PassCustom licence
Code to PRDalirezarezvani/claude-skills28k1 repos~4.9kAutomated safety check: PassMIT
Handsontable Docs Page Writinghandsontable/handsontable22k—~1.1kAutomated safety check: PassCustom licence
Markstream MigrationSimon-He95/markstream-vue3k—~2kAutomated safety check: PassMIT

Similar skills

  • Typescript Docs

    giuseppe-trisciuoglio/developer-kit

    Generates comprehensive TypeScript documentation using JSDoc, TypeDoc, and multi-layered documentation patterns for different audiences.

    355 GitHub stars~2.1k tokensUpdated 27 days ago
    DevelopmentAuto-check: notes
  • Creating Docs Code Examples

    handsontable/handsontable

    Sets the rules for writing Handsontable documentation examples in JavaScript, TypeScript, React, Angular and Vue, with the imports, registration and licence key each needs.

    22k GitHub stars~2.2k tokensUpdated today
    DevelopmentAuto-check passed
  • Code to PRD

    alirezarezvani/claude-skills

    Reverse-engineers a frontend, backend or fullstack codebase into a product requirements document with per-page docs, an enum dictionary and an API inventory.

    28k GitHub starsUsed in 1 repo~4.9k tokens
    Product & Project ManagementAuto-check passed
  • Handsontable Docs Page Writing

    handsontable/handsontable

    Rules for writing Handsontable guide pages: required frontmatter, page structure, framework-specific example embedding, writing style and sidebar registration.

    22k GitHub stars~1.1k tokensUpdated today
    Writing & ContentAuto-check passed
  • Markstream Migration

    Simon-He95/markstream-vue

    Audit and migrate existing Markdown rendering to Markstream, or upgrade a markstream-vue 1.x integration to 2.x.

    3k GitHub stars~2k tokensUpdated 2 days ago
    Documents & OfficeAuto-check passed
  • Portable Text Serialization

    sanity-io/agent-toolkit

    Official

    Render and serialize Portable Text to React, Svelte, Vue, Astro, HTML, Markdown, and plain text.

    187 GitHub starsUsed in 1 repo~1.1k tokens
    Frontend & DesignAuto-check passed

More from reactive/data-client

All 17 skills in this repo
  • Data Client REST Setup

    reactive/data-client

    Set up and migrate to @data-client/rest for REST APIs. An agent skill from reactive/data-client.

    2k GitHub stars~2.9k tokensUpdated today
    Auto-check passed
  • Data Client Manager

    reactive/data-client

    Implement @data-client Managers for global/background side effects - websocket, SSE, polling, real-time updates, subscriptions, logging, analytics, metrics/timing, error reporting (Sentry), toast…

    2k GitHub stars~2.6k tokensUpdated today
    Auto-check passed
  • Data Client React

    reactive/data-client

    Use @data-client/react hooks for data fetching, mutations, and rendering - useSuspense, useFetch, useQuery, useCache, useLive, useDLE, useSubscription, useController, DataProvider, AsyncBoundary…

    2k GitHub stars~1.9k tokensUpdated today
    Auto-check passed
  • Data Client React Testing

    reactive/data-client

    Test @data-client/react with renderDataHook and mountDataClient - jest unit tests, fixtures, interceptors, MockResolver, mock responses, nock HTTP mocking, fake timers for polling/subscription…

    2k GitHub stars~1.5k tokensUpdated today
    Auto-check passed
  • Data Client REST

    reactive/data-client

    Define REST APIs with @data-client/rest - resource(), RestEndpoint, CRUD (GET/POST/PUT/PATCH/DELETE), HTTP fetch, normalize, cache, urlPrefix, path-to-regexp parameters, searchParams, pagination…

    2k GitHub stars~2k tokensUpdated today
    Auto-check passed
  • Data Client Schema

    reactive/data-client

    Model data with @data-client schemas (Entity, EntityMixin, Collection, Union, Query, Values, All, Invalidate, Lazy, Scalar) for atomic, consistent, referentially-equal async data via normalization…

    2k GitHub stars~2.3k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Packages Documentation

What does Packages Documentation do?

Write, update, and format documentation for @data-client public APIs - API reference (Docusaurus/MDX), README files, JSDoc/TSDoc docstrings, usage examples, migration guides, deprecation notices…. Packages Documentation is an agent skill from reactive/data-client. Write, update, and format documentation for @data-client public APIs - API reference (Docusaurus/MDX), README files, JSDoc/TSDoc docstrings, usage examples, migration guides, deprecation notices, changelog entries.

When should I use Packages Documentation?

Packages Documentation fits situations like: changing exported APIs (docs must update in the same PR); writing new package docs; updating the dataclient.io site.

How do I install Packages Documentation in Claude Code?

Run `npx skills add reactive/data-client --skill packages-documentation -a claude-code`. Or copy the skill folder (.agents/skills/packages-documentation in reactive/data-client) into .claude/skills/packages-documentation in your project. Claude Code loads it when a task matches its description.

How do I install Packages Documentation in Codex?

Run `npx skills add reactive/data-client --skill packages-documentation -a codex`. Or copy the skill folder (.agents/skills/packages-documentation in reactive/data-client) into .agents/skills/packages-documentation in your project. Codex loads it when a task matches its description.

Can I use Packages Documentation in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add reactive/data-client --skill packages-documentation -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/packages-documentation, .gemini/skills/packages-documentation, .github/skills/packages-documentation and .opencode/skills/packages-documentation in your project.

What does Packages Documentation need to run?

SKILL.md names no scripts, command-line tools or credentials: Packages Documentation is instructions for the agent only.

Does Packages Documentation access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Packages Documentation safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Packages Documentation use?

Packages Documentation is published under the Apache-2.0 licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Packages Documentation use?

About 1.4k tokens (SKILL.md is roughly 5.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Packages Documentation?

Skills that share tags, products or a category with Packages Documentation: Typescript Docs (giuseppe-trisciuoglio/developer-kit, 355 stars), Creating Docs Code Examples (handsontable/handsontable, 22k stars), Code to PRD (alirezarezvani/claude-skills, 28k stars) and Handsontable Docs Page Writing (handsontable/handsontable, 22k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Packages Documentation?

reactive (a GitHub organization) maintains it in reactive/data-client, which has 2,037 GitHub stars. The repository holds 17 skills in this directory. The repository was last updated on October 7, 2026.

Source: reactive/data-client on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.