devs:react-components

Scaffold and audit React components with strict TypeScript patterns.

4|1|Updated Jan 23, 2026

Search Tags:#typescript #react #scaffolding #tanstack-query #tailwind-v4 #container-presenter

Ready to run

npx skills add https://github.com/aaronbassett/aaronbassett-marketplace --skill devs-react-components

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: devs:react-components
Source: https://github.com/aaronbassett/aaronbassett-marketplace/tree/main/plugins/devs/skills/react-components
Command: npx skills add https://github.com/aaronbassett/aaronbassett-marketplace --skill devs-react-components

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a structured approach to creating and reviewing React components using strict TypeScript patterns, the container/presenter architecture, and composition-first design. It helps teams maintain consistency, enforce best practices, and accelerate UI development.

Core Features & Use Cases

Scaffolding: Generate boilerplate for new feature components with consistent file layouts.
Review & Quality: Audit existing components for TypeScript correctness, accessibility, and alignment with patterns described in references.
Form & Data Fetching: Integrate forms using RHF+Zod and fetch data with TanStack Query within the container/presenter pattern.
Use Case: For a new feature like UserProfile, scaffold and wire a Container and Presenter pair, a UI folder, tests, and documentation.

Quick Start

Request: Create a new feature component for UserProfile using the scaffold-component.mjs tool and structure following the project conventions.

Frequently Asked Questions about devs:react-components

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

FAQPage Schema

How do I scaffold React components using container and presenter architecture?▼

You can scaffold React components with container/presenter architecture by using the skill's automated script to generate feature boilerplate, generating container and presenter pairs, UI folders, tests, and documentation automatically.

What is the best way to enforce strict TypeScript patterns in existing React components?▼

To enforce strict TypeScript patterns in existing React components, run an automated audit using the skill to check for TS correctness, accessibility compliance, and alignment with headless component and composition-first design patterns.

How do I integrate TanStack Query with React forms using Zod and RHF?▼

You integrate TanStack Query with React forms using RHF and Zod within the container/presenter pattern, placing data fetching and schema validation logic inside the container and passing typed props to the presenter.

Can I use Tailwind v4 with headless component patterns for React feature modules?▼

Yes, you can use Tailwind v4 with headless component patterns. The skill enforces Tailwind v4 styling alongside headless UI composition to ship robust components with strict TypeScript discipline and Web3 security best practices.

Does this React scaffolding approach support Web3 security best practices?▼

Yes, this React scaffolding approach supports Web3 security. The skill enforces Web3 security best practices while scaffolding components and auditing existing modules, ensuring TypeScript correctness and robust secure architecture.