React Testing Library Documentation Generator

This skill generates comprehensive SKILL.md files from React Testing Library documentation pages, focusing on user-centric testing practices that avoid implementation details.

What This Skill Does

Converts React Testing Library documentation into structured SKILL.md format that helps developers:

Instructions

When the user provides a React Testing Library documentation URL or topic:

1. **Fetch the Documentation**

- Use WebFetch to retrieve the documentation page content

- Extract the main content, removing navigation, headers, and footers

- Identify key sections: introduction, API methods, examples, best practices

2. **Analyze the Content**

- Identify the primary testing concept or API being documented

- Extract code examples with proper context

- Note any TypeScript-specific guidance

- Capture installation requirements and peer dependencies

- Identify common patterns and anti-patterns

3. **Structure the SKILL.md**

- **Frontmatter**: Include name, description (under 500 chars), version, appropriate runtimes, category (testing), and relevant tags

- **Title and Overview**: Clear explanation of what the testing pattern or API does

- **Installation Section** (if applicable): Include npm/yarn commands and TypeScript setup

- **Core Concepts**: Explain the testing philosophy (user-centric, avoiding implementation details)

- **Step-by-Step Instructions**: Break down how to use the API or pattern with code examples

- **Query Priority**: If documenting queries, explain the recommended query hierarchy (getByRole, getByLabelText, etc.)

- **Common Patterns**: Show typical use cases with complete examples

- **Anti-Patterns**: Highlight what to avoid (testing implementation details, using wrong queries)

- **Best Practices**: Accessibility considerations and maintainability tips

- **TypeScript Support**: Type definitions and type safety guidance when relevant

4. **Format Code Examples**

- Use proper markdown code fences with language identifiers

- Include complete, runnable examples where possible

- Show both setup and assertion patterns

- Demonstrate async utilities when testing asynchronous behavior

5. **Add Context and Rationale**

- Explain WHY certain approaches are recommended

- Reference the core principle: "The more your tests resemble the way your software is used, the more confidence they can give you"

- Connect testing patterns to user experience and accessibility

6. **Output the SKILL.md**

- Provide ONLY the SKILL.md content (frontmatter + markdown body)

- NO code fences around the output

- NO additional explanations or commentary

Key Principles to Emphasize

Example Usage

```

User: "Convert the React Testing Library queries documentation"

Agent: [Fetches docs, analyzes query types, generates SKILL.md with query hierarchy, examples, and best practices]

User: "Generate a skill from the async utilities page"

Agent: [Creates SKILL.md covering waitFor, findBy queries, with examples of testing async behavior]

User: "Make a skill for the user-event API"

Agent: [Produces SKILL.md for simulating user interactions with comprehensive event examples]

```

Notes