react-patterns
React 19 patterns including Server Components, Actions, Suspense, hooks, and component composition
Content Preview
---
name: react-patterns
description: React 19 patterns including Server Components, Actions, Suspense, hooks, and component composition
---
# React Patterns
## use() Hook (React 19)
`use()` reads values from Promises and Context directly in render. Unlike other hooks, it can be called inside conditionals and loops.
```tsx
import { use } from 'react';
function UserProfile({ userPromise }: { userPromise: Promise<User> }) {
const user = use(userPromise);
return <h1>{user.name}</h1>;
}
fuHow to Use
Recommended: Install to project (local)
mkdir -p .claude/skills
curl -o .claude/skills/react-patterns.md \
https://raw.githubusercontent.com/rohitg00/awesome-claude-code-toolkit/main/skills/react-patterns/SKILL.mdSkill is scoped to this project only. Add .claude/skills/ to your .gitignoreif you don't want to commit it.
Alternative: Clone full repo
git clone https://github.com/rohitg00/awesome-claude-code-toolkitThen reference at skills/react-patterns/SKILL.md
Related Skills
react-patterns
Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.
developmentreact
by sickn33 (Antigravity) · antigravity-awesome-skills
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
frontend-designfrontenddesignreact
by Anthropic · anthropic-official-skills
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
web-artifacts-builderwebartifactsbuilder
by Anthropic · anthropic-official-skills
coding-standards
Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.
coding-standardscodingstandardstypescript
by affaan-m · everything-claude-code