Initial commit

skills/react/SKILL.md

@@ -0,0 +1,58 @@
+---
+name: react
+description: React development best practices and patterns, including modern data fetching with React 19.
+---
+
+# React Development
+
+Modern React development patterns and best practices.
+
+## Data Fetching
+
+Use React 19's `use` hook with `Suspense` for data fetching. Don't use `useEffect` for fetching data.
+
+### Basic Data Fetching
+
+```tsx
+import { use } from "react";
+
+const fetchUsers = fetch('/api/users').then(res => {
+  if (!res.ok) {
+    throw new Error(`HTTP error! status: ${res.status}`);
+  }
+  return res.json();
+});
+
+export function Users() {
+  const users = use(fetchUsers);
+  return (
+    <ul>
+      {users.map(user => <li key={user.id}>{user.name}</li>)}
+    </ul>
+  );
+}
+```
+
+### Loading States with Suspense
+
+Wrap components with `Suspense` for loading states:
+
+```tsx
+import { Suspense } from "react";
+import { Users } from "./pages/Users";
+
+export function App() {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <Users />
+    </Suspense>
+  );
+}
+```
+
+## Guidelines
+
+- Use the `use` hook for data fetching instead of `useEffect`
+- Always wrap data-fetching components with `Suspense` boundaries
+- Handle errors properly in your fetch promises
+- Prefer declarative data fetching patterns over imperative ones