react-development

Generate React application scaffolds with shadcn/ui and optimal hooks.

10|2|Updated Mar 12, 2026

Search Tags:#typescript #react #hooks #shadcn #component-architecture #bulletproof-audit

Ready to run

npx skills add https://github.com/viktorbezdek/skillstack --skill react-development-viktorbezdek

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-development
Source: https://github.com/viktorbezdek/skillstack/tree/main/react-development/skills/react-development
Command: npx skills add https://github.com/viktorbezdek/skillstack --skill react-development-viktorbezdek

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

React developers often struggle with inconsistent patterns, anti‑patterns in hook usage, suboptimal component architecture, and lack of comprehensive testing and auditing guidance.

Core Features & Use Cases

Hooks Best Practices: Guidance on avoiding derived state, proper dependency arrays, and effective memoization.
Component Architecture: 5‑layer structure, shadcn/ui integration, and Bulletproof React audit criteria.
State Management Advice: Selecting appropriate tools (React Query, Zustand, etc.) and separating server, global, and local state.
Testing Strategies: Recommended testing frameworks, patterns, and accessibility checks.
Integration Support: Combining shadcn/ui, fpkit components, and Next.js modules into cohesive projects.

Quick Start

Ask the react-development skill to create a starter React project with shadcn/ui components and optimal hook patterns.

Frequently Asked Questions about react-development

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

FAQPage Schema

How do I structure a modern React app with hooks and shadcn/ui?▼

Structure modern React apps using a 5-layer component architecture, optimal hooks integration, and shadcn/ui. This approach enforces consistent patterns, separates server and local state, and adheres to WCAG AA accessibility standards without external packages.

What is the best way to avoid anti-patterns in React hooks?▼

Avoid React hooks anti-patterns by preventing derived state, applying proper dependency arrays, and using effective memoization. The skill provides bulletproof audit criteria to evaluate hook usage and optimize component rendering in enterprise web applications.

Can I use shadcn/ui components with Next.js and TypeScript?▼

Yes, you can integrate shadcn/ui, fpkit components, and Next.js modules into cohesive TypeScript projects. This combination uses standard React and Tailwind utilities to build accessible component libraries without requiring external packages.

How do I separate server, global, and local state in React applications?▼

Separate React state by selecting appropriate management tools like React Query for server state and Zustand for global state. This architecture isolates local component state, preventing suboptimal data flow and inconsistent application patterns.

How do I perform a Bulletproof React audit for component architecture?▼

Perform a Bulletproof React audit by evaluating your 5-layer component structure, hook dependency arrays, and memoization strategies. This process identifies suboptimal component architecture and ensures your web application follows enterprise testing frameworks.

Does this React scaffolding approach require external packages?▼

No, this React scaffolding approach requires no external packages. It operates using only standard React, TypeScript, and Tailwind utilities to generate modern application structures while maintaining WCAG AA accessibility compliance.