Does it support API integration and state management?

Yes, during the interactive prompt phase, you can specify if you need API services or local state management. The skill will then generate the appropriate service layers or Context/Reducer patterns.

What testing frameworks does this skill support?

It generates test files specifically optimized for Vitest and React Testing Library, including boilerplate for unit tests, hook tests, and accessibility checks using jest-axe.

Can I use this for mobile development with React Native?

While primarily designed for web React features (including Storybook and web accessibility tests), the architectural patterns and TDD logic can be easily adapted for React Native projects.

How does the TDD workflow function in this skill?

The skill follows a strict 'Types First, Tests Second, Implementation Third' order. It scaffolds the interfaces and failing test files before generating the component logic to ensure total coverage.

React TDD Feature Scaffolder

Name: React TDD Feature Scaffolder
Author: solrac97gr

bysolrac97gr

•

Security & Testing

Generates complete, production-ready React features using a strict Test-Driven Development workflow and feature-based architecture.

This skill streamlines React development by automating the scaffolding of modular feature directories through a discovery-led process. It enforces high-quality engineering standards by generating TypeScript types and failing Vitest/React Testing Library tests before implementation, following the Red-Green-Refactor cycle. Whether you need complex state management via Context, API service layers, or accessible UI components, this skill provides the boilerplate and testing infrastructure needed to build robust, scalable frontend modules from day one.

Key Features

01Automated TypeScript type generation for entities, props, and API responses.

02Optional scaffolding for Context API state management and API integration layers.

03Interactive discovery process to define feature scope, entities, and dependencies.

04Standardized feature-based architecture including components, hooks, and services.

05Pre-configured test suites for Vitest and React Testing Library with accessibility checks.

062 GitHub stars

Use Cases

01Scaling a React application with a consistent, modular feature-based directory structure.

02Rapidly prototyping complex UI modules that require integrated state and service layers.

03Onboarding developers to a Test-Driven Development (TDD) workflow with instant boilerplate.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add solrac97gr/marketplace-plugins new-feature

For use in Claude.ai and ChatGPT

Download Skill