new-context

Generate React Context, Provider, and useReducer components with TypeScript unit tests.

2|1|Updated Jan 30, 2026

Search Tags:#typescript #testing #context #state management #react #reducer

Ready to run

npx skills add https://github.com/solrac97gr/marketplace-plugins --skill new-context

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: new-context
Source: https://github.com/solrac97gr/marketplace-plugins/tree/main/plugins/react-dev/skills/new-context
Command: npx skills add https://github.com/solrac97gr/marketplace-plugins --skill new-context

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the creation of React Context, Provider, and useReducer components, along with their corresponding tests, ensuring robust state management setup.

Core Features & Use Cases

Context Generation: Creates TypeScript files for Context, Provider, and a custom hook.
Reducer Implementation: Generates a reducer function with a switch statement for actions.
Test Suite Creation: Automatically generates unit tests for reducer, provider, and hook using Vitest and React Testing Library.
Use Case: Quickly set up state management for a "User" feature, defining its state, actions, and ensuring comprehensive test coverage from the start.

Quick Start

Use the new-context skill to create a 'Cart' context for the 'shared' feature, managing 'items: CartItem[]' and 'total: number', with actions 'ADD_ITEM' and 'REMOVE_ITEM'.

Frequently Asked Questions about new-context

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate React Context with useReducer and TypeScript tests?▼

React Context with useReducer and TypeScript tests is generated by simultaneously scaffolding the Context, Provider, custom hook, and a Vitest test suite. This approach ensures robust state management setup with comprehensive test coverage from the start.

What is the best way to structure a React Context reducer for feature state management?▼

Structuring React Context reducer logic is best achieved using a TypeScript switch statement for actions. This pattern cleanly separates state, actions, and provider logic, making feature state management predictable and easy to unit test.

Does this React Context generation approach include React Testing Library setup?▼

Yes, React Context generation includes React Testing Library setup. It automatically creates unit tests for the reducer, provider, and custom hook using Vitest and React Testing Library to validate context behavior and state transitions.

Can I use this to set up state management for shared application-wide data in React?▼

Yes, you can set up state management for shared application-wide data in React using this approach. It generates Context and Provider components that manage global or feature-specific state, such as a shopping cart with items and totals.

Why generate React Context tests at the same time as the Provider component?▼

Generating React Context tests alongside the Provider component ensures immediate validation of reducer logic and hook behavior. This integrated approach prevents state management bugs by enforcing comprehensive unit test coverage from the initial implementation.