New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Official agent skill

Docs Writer Learn

by reactjs in reactjs/ar.react.dev

A skill your agent uses when writing or editing files in src/content/learn/.

OfficialCC-BY-4.0Auto-check passed

Install Docs Writer Learn

skills CLI
$ npx skills add reactjs/ar.react.dev --skill docs-writer-learn -a claude-code

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

GitHub CLI
$ gh skill install reactjs/ar.react.dev docs-writer-learn --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/reactjs/ar.react.dev.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/docs-writer-learn .claude/skills/docs-writer-learn && 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
docs-writer-learn
GitHub stars
164
Token cost
~1.8k tokens
SKILL.md length
529 words
Files
1
Skills in repo
10
Repo updated
First seen
Licence
CC-BY-4.0

At a glance

A skill your agent uses when writing or editing files in src/content/learn/.

  • Works in 4 steps: Standard Learn Page (Most Common) → Chapter Introduction Page → Tutorial Page → …
  • Editing files in src/content/learn/
  • SKILL.md covers Persona, Voice & Style, Page Structure Variants and Heading ID Conventions, plus 7 more sections
  • Reaches developer.mozilla.org

What it does

Docs Writer Learn is an agent skill from reactjs/ar.react.dev, published by the product's own GitHub organization. Use when writing or editing files in src/content/learn/. Provides Learn page structure and tone.

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

It works with React. The repository describes itself as: React documentation website in Arabic 📘⚛️ — وثائق React باللغة العربية. The licence is CC-BY-4.0.

When your agent uses it

  • Editing files in src/content/learn/

Example prompts

  • “/docs-writer-learn”

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Standard Learn Page (Most Common)
  2. Chapter Introduction Page
  3. Tutorial Page
  4. Reference-Style Learn Page

What it can do on your machine

Read from SKILL.md and the folder at commit 2da48d6. 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 mdx and markdown).

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

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • developer.mozilla.org

    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

Docs Writer Learn loads about 1.8k tokens when it runs. Until then it costs about 29 tokens; SKILL.md has 529 words of instructions outside code blocks.

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

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 reactjs/ar.react.dev at commit 2da48d6, republished under its CC-BY-4.0 licence (© reactjs). 529 words, ~1,756 tokens.

Download SKILL.mdSave it as .claude/skills/docs-writer-learn/SKILL.md (or your agent's skills folder).
name
docs-writer-learn
description
Use when writing or editing files in src/content/learn/. Provides Learn page structure and tone.

Learn Page Writer

Persona

Voice: Patient teacher guiding a friend through concepts Tone: Conversational, warm, encouraging

Voice & Style

For tone, capitalization, jargon, and prose patterns, invoke /docs-voice.

Page Structure Variants

1. Standard Learn Page (Most Common)
mdx
---
title: Page Title
---

<Intro>
1-3 sentences introducing the concept. Use *italics* for new terms.
</Intro>

<YouWillLearn>

* Learning outcome 1
* Learning outcome 2
* Learning outcome 3-5

</YouWillLearn>

## Section Name {/*section-id*/}

Content with Sandpack examples, Pitfalls, Notes, DeepDives...

## Another Section {/*another-section*/}

More content...

<Recap>

* Summary point 1
* Summary point 2
* Summary points 3-9

</Recap>

<Challenges>

#### Challenge title {/*challenge-id*/}

Description...

<Hint>
Optional guidance (single paragraph)
</Hint>

<Sandpack>
{/* Starting code */}
</Sandpack>

<Solution>
Explanation...

<Sandpack>
{/* Fixed code */}
</Sandpack>
</Solution>

</Challenges>
2. Chapter Introduction Page

For pages that introduce a chapter (like describing-the-ui.md, managing-state.md):

mdx
<YouWillLearn isChapter={true}>

* [Sub-page title](/learn/sub-page-name) to learn...
* [Another page](/learn/another-page) to learn...

</YouWillLearn>

## Preview Section {/*section-id*/}

Preview description with mini Sandpack example

<LearnMore path="/learn/sub-page-name">

Read **[Page Title](/learn/sub-page-name)** to learn how to...

</LearnMore>

## What's next? {/*whats-next*/}

Head over to [First Page](/learn/first-page) to start reading this chapter page by page!

Important: Chapter intro pages do NOT include <Recap> or <Challenges> sections.

3. Tutorial Page

For step-by-step tutorials (like tutorial-tic-tac-toe.md):

mdx
<Intro>
Brief statement of what will be built
</Intro>

<Note>
Alternative learning path offered
</Note>

Table of contents (prose listing of major sections)

## Setup {/*setup*/}
...

## Main Content {/*main-content*/}
Progressive code building with ### subsections

No YouWillLearn, Recap, or Challenges

Ends with ordered list of "extra credit" improvements
4. Reference-Style Learn Page

For pages with heavy API documentation (like typescript.md):

mdx
<YouWillLearn>

* [Link to section](#section-anchor)
* [Link to another section](#another-section)

</YouWillLearn>

## Sections with ### subsections

## Further learning {/*further-learning*/}

No Recap or Challenges

Heading ID Conventions

All headings require IDs in {/*kebab-case*/} format:

markdown
## Section Title {/*section-title*/}
### Subsection Title {/*subsection-title*/}
#### DeepDive Title {/*deepdive-title*/}

ID Generation Rules:

  • Lowercase everything
  • Replace spaces with hyphens
  • Remove apostrophes, quotes
  • Remove or convert special chars (:, ?, !, ., parentheses)

Examples:

  • "What's React?" → {/*whats-react*/}
  • "Step 1: Create the context" → {/*step-1-create-the-context*/}
  • "Conditional (ternary) operator (? :)" → {/*conditional-ternary-operator--*/}

Teaching Patterns

Problem-First Teaching

Show broken/problematic code BEFORE the solution:

  1. Present problematic approach with // 🔴 Avoid: comment
  2. Explain WHY it's wrong (don't just say it is)
  3. Show the solution with // ✅ Good: comment
  4. Invite experimentation
Progressive Complexity

Build understanding in layers:

  1. Show simplest working version
  2. Identify limitation or repetition
  3. Introduce solution incrementally
  4. Show complete solution
  5. Invite experimentation: "Try changing..."
Numbered Step Patterns

For multi-step processes:

As section headings:

markdown
### Step 1: Action to take {/*step-1-action*/}
### Step 2: Next action {/*step-2-next-action*/}

As inline lists:

markdown
To implement this:
1. **Declare** `inputRef` with the `useRef` Hook.
2. **Pass it** as `<input ref={inputRef}>`.
3. **Read** the input DOM node from `inputRef.current`.
Interactive Invitations

After Sandpack examples, encourage experimentation:

  • "Try changing X to Y. See how...?"
  • "Try it in the sandbox above!"
  • "Click each button separately:"
  • "Have a guess!"
  • "Verify that..."
Decision Questions

Help readers build intuition:

"When you're not sure whether some code should be in an Effect or in an event handler, ask yourself why this code needs to run."

Component Placement Order

  1. <Intro> - First after frontmatter
  2. <YouWillLearn> - After Intro (standard/chapter pages)
  3. Body content with <Note>, <Pitfall>, <DeepDive> placed contextually
  4. <Recap> - Before Challenges (standard pages only)
  5. <Challenges> - End of page (standard pages only)

For component structure and syntax, invoke /docs-components.

Code Examples

For Sandpack file structure, naming conventions, code style, and pedagogical markers, invoke /docs-sandpack.

Show full SKILL.md (209 more words)Show less

Cross-Referencing

Link to /learn:

  • Explaining concepts or mental models
  • Teaching how things work together
  • Tutorials and guides
  • "Why" questions

Link to /reference:

  • API details, Hook signatures
  • Parameter lists and return values
  • Rules and restrictions
  • "What exactly" questions
markdown
[concept name](/learn/page-name)
[`useState`](/reference/react/useState)
[section link](/learn/page-name#section-id)
[MDN](https://developer.mozilla.org/...)

Section Dividers

Important: Learn pages typically do NOT use --- dividers. The heading hierarchy provides sufficient structure. Only consider dividers in exceptional cases like separating main content from meta/contribution sections.

Do's and Don'ts

Do:

  • Use "you" to address the reader
  • Show broken code before fixes
  • Explain behavior before naming concepts
  • Build concepts progressively
  • Include interactive Sandpack examples
  • Use established analogies consistently
  • Place Pitfalls AFTER explaining concepts
  • Invite experimentation with "Try..." phrases

Don't:

  • Use "simple", "easy", "just", or time estimates
  • Reference concepts not yet introduced
  • Skip required components for page type
  • Use passive voice without reason
  • Place Pitfalls before teaching the concept
  • Use --- dividers between sections
  • Create unnecessary abstraction in examples
  • Place consecutive Pitfalls or Notes without separating prose (combine or separate)

Critical Rules

  1. All headings require IDs: ## Title {/*title-id*/}
  2. Chapter intros use isChapter={true} and <LearnMore>
  3. Tutorial pages omit YouWillLearn/Recap/Challenges
  4. Problem-first teaching: Show broken → explain → fix
  5. No consecutive Pitfalls/Notes: See /docs-components Callout Spacing Rules

For component patterns, invoke /docs-components. For Sandpack patterns, invoke /docs-sandpack.

© reactjs, CC-BY-4.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 .claude/skills/docs-writer-learn of reactjs/ar.react.dev.

Open the folder on GitHubat commit 2da48d6

Used in 3 other repositories

We found 3 copies of this SKILL.md (exact, near-identical or edited) in other folders. This page covers the copy in reactjs/ar.react.dev, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Docs Writer Learn 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.

Docs Writer Learn compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Docs Writer Learn this skillreactjs/ar.react.dev164—~1.8kAutomated safety check: PassCC-BY-4.0
Web Artifacts Builderanthropics/skills180k40 repos~769Automated safety check: PassApache-2.0
React Doctormakeplane/plane60k12 repos~657Automated safety check: PassAGPL-3.0
React Composition Patternsvercel-labs/openreview1.7k58 repos~721Automated safety check: PassMIT
React Router Developmentremix-run/react-router57k1 repos~1.5kAutomated safety check: PassMIT
Electron Multi-Process ArchitectureiOfficeAI/AionUi33k1 repos~1.8kAutomated safety check: PassApache-2.0

Similar skills

  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 40 repos~769 tokens
    Frontend & DesignAuto-check passed

  • React Doctor

    makeplane/plane

    Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.

    60k GitHub starsUsed in 12 repos~657 tokens
    Frontend & DesignAuto-check passed

  • React Composition Patterns

    vercel-labs/openreview

    Official

    Rules for structuring React components with composition instead of boolean props, covering compound components, lifted state, variants and React 19 changes.

    1.7k GitHub starsUsed in 58 repos~721 tokens
    Frontend & DesignAuto-check passed

  • React Router Development

    remix-run/react-router

    Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs.

    57k GitHub starsUsed in 1 repo~1.5k tokens
    Frontend & DesignAuto-check passed

  • Electron Multi-Process Architecture

    iOfficeAI/AionUi

    Tells the agent where new code belongs in an Electron multi-process project and which APIs each process may use, with rules for new bridges, services, agents and workers.

    33k GitHub starsUsed in 1 repo~1.8k tokens
    DevelopmentAuto-check passed

  • Stitch to Remotion Walkthrough Videos

    google-labs-code/stitch-skills

    Official

    Builds walkthrough videos from Stitch design projects using Remotion, with transitions, zoom effects and text overlays on each screen.

    8.4k GitHub starsUsed in 6 repos~3.2k tokens
    Media & CreativeAuto-check: notes

More from reactjs/ar.react.dev

All 10 skills in this repo

  • React Expert

    reactjs/ar.react.dev

    Official

    A skill your agent uses when researching React APIs or concepts for documentation.

    164 GitHub starsUsed in 2 repos~2.7k tokens
    Auto-check passed

  • Docs Rsc Sandpack

    reactjs/ar.react.dev

    Official

    A skill your agent uses when adding interactive RSC (React Server Components) code examples to React docs using <SandpackRSC, or when modifying the RSC sandpack infrastructure.

    164 GitHub stars~2.1k tokensUpdated 2 days ago
    Auto-check passed

  • Docs Voice

    reactjs/ar.react.dev

    Official

    A skill your agent uses when writing any React documentation.

    164 GitHub stars~1.2k tokensUpdated 2 days ago
    Auto-check passed

  • Docs Writer Blog

    reactjs/ar.react.dev

    Official

    A skill your agent uses when writing or editing files in src/content/blog/.

    164 GitHub stars~4.2k tokensUpdated 2 days ago
    Auto-check passed

  • Write

    reactjs/ar.react.dev

    Official

    A skill your agent uses when creating new React documentation pages or updating existing ones.

    164 GitHub stars~1.6k tokensUpdated 2 days ago
    Auto-check passed

  • Docs Components

    reactjs/ar.react.dev

    Official

    Comprehensive MDX component patterns (Note, Pitfall, DeepDive, Recipes, etc.) for all documentation types.

    164 GitHub stars~3k tokensUpdated 2 days ago
    Auto-check passed

Works with

Questions about Docs Writer Learn

What does Docs Writer Learn do?

A skill your agent uses when writing or editing files in src/content/learn/. dev, published by the product's own GitHub organization. Use when writing or editing files in src/content/learn/.

When should I use Docs Writer Learn?

Docs Writer Learn fits situations like: editing files in src/content/learn/.

How do I install Docs Writer Learn in Claude Code?

Run `npx skills add reactjs/ar.react.dev --skill docs-writer-learn -a claude-code`. Or copy the skill folder (.claude/skills/docs-writer-learn in reactjs/ar.react.dev) into .claude/skills/docs-writer-learn in your project. Claude Code loads it when a task matches its description.

How do I install Docs Writer Learn in Codex?

Run `npx skills add reactjs/ar.react.dev --skill docs-writer-learn -a codex`. Or copy the skill folder (.claude/skills/docs-writer-learn in reactjs/ar.react.dev) into .agents/skills/docs-writer-learn in your project. Codex loads it when a task matches its description.

Can I use Docs Writer Learn 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 reactjs/ar.react.dev --skill docs-writer-learn -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/docs-writer-learn, .gemini/skills/docs-writer-learn, .github/skills/docs-writer-learn and .opencode/skills/docs-writer-learn in your project.

What does Docs Writer Learn need to run?

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

Does Docs Writer Learn access the network?

SKILL.md names 1 domain. In commands or code: developer.mozilla.org; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Docs Writer Learn 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 Docs Writer Learn use?

Docs Writer Learn is published under the CC-BY-4.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Docs Writer Learn use?

About 1.8k tokens (SKILL.md is roughly 7k 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 Docs Writer Learn?

Skills that share tags, products or a category with Docs Writer Learn: Web Artifacts Builder (anthropics/skills, 180k stars), React Doctor (makeplane/plane, 60k stars), React Composition Patterns (vercel-labs/openreview, 1.7k stars) and React Router Development (remix-run/react-router, 57k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Docs Writer Learn?

reactjs (a GitHub organization, an official publisher) maintains it in reactjs/ar.react.dev, which has 164 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on October 5, 2026.

Source: reactjs/ar.react.dev on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.