Build React 19+ web applications with Server Components and TypeScript.
npx skills add https://github.com/iButters/ClaudeCodePlugins --skill react-web
Please help me install this Agent Skill. Skill: react-web Source: https://github.com/iButters/ClaudeCodePlugins/tree/main/plugins/ui-kit-generator/skills/react-web Command: npx skills add https://github.com/iButters/ClaudeCodePlugins --skill react-web
Guides developers building modern React apps (19+) that leverage Server Components, client components, and cutting-edge hooks, with TypeScript integration and performance patterns.
Create a new React project (Vite or Next.js), structure it to demonstrate server + client components, and implement a simple interactive counter using a client component with useState and a server component for data fetch.
High-intent search queries and answers about installing and using this skill.
Server Components render on the server by default to reduce client JavaScript, while client components use the 'use client' directive for interactivity. React 19+ enables this architecture natively, letting you compose server and client boundaries within the same application for optimal performance and data handling.
Use Server Actions with useActionState to handle form submissions server-side, reducing client-side complexity. React 19 provides useFormStatus to track submission state and useOptimistic for instant UI updates, creating seamless form flows with built-in error handling and validation.
Yes. TypeScript integrates fully with React 19+ Server Components, client components, and hooks like use(), useOptimistic(), and useFormStatus. Type-safe component definitions, Server Actions, and hook signatures provide compile-time safety across server and client boundaries.
Organize your project with src/, app/, hooks/, and lib/ directories. Vite or Next.js scaffolding handles bundling and server rendering setup. Separate server and client components by directory convention or 'use client' markers, then co-locate custom hooks and utilities for clean architecture and code-splitting.
Server Components eliminate client-side rendering for static content, code-splitting bundles dynamically, and lazy loading defers non-critical components. useOptimistic provides instant feedback without server round-trips. Combine these patterns to reduce JavaScript payload and improve Core Web Vitals.
Server Components work with both Next.js and Vite-based setups. Next.js includes built-in support; Vite requires additional configuration via plugins or frameworks. Choose based on your routing and deployment needs—both enable server-first React development with TypeScript and modern hooks.
twarogowskiConfigure and use Bun as an all-in-one JavaScript runtime and toolchain.
pascallammersAutomate Vercel deployment configuration, environment variables, and domain management.
markhamsquareventuresIntegrate Link and Form components for React-based Laravel Inertia navigation and handling.
PatternsDevServer-render React components to reduce client-side JavaScript in Next.js App Router.
