Initial commit

.claude-plugin/plugin.json

@@ -0,0 +1,12 @@
+{
+  "name": "react-skills",
+  "description": "Claude Code plugin",
+  "version": "0.0.0-2025.11.28",
+  "author": {
+    "name": "kfly8",
+    "email": "kentafly88@gmail.com"
+  },
+  "skills": [
+    "./skills"
+  ]
+}

README.md

@@ -0,0 +1,3 @@
+# react-skills
+
+Claude Code plugin

plugin.lock.json

@@ -0,0 +1,45 @@
+{
+  "$schema": "internal://schemas/plugin.lock.v1.json",
+  "pluginId": "gh:kfly8/claude-plugins:plugins/react-skills",
+  "normalized": {
+    "repo": null,
+    "ref": "refs/tags/v20251128.0",
+    "commit": "9f8b89e1ea8a19b9aabe4e6dd63a51b987e579a7",
+    "treeHash": "b7d46e5c4c942bc0d95489217d041e65232c0ce1ac28319ae6f48d94a0ba30d0",
+    "generatedAt": "2025-11-28T10:19:28.890830Z",
+    "toolVersion": "publish_plugins.py@0.2.0"
+  },
+  "origin": {
+    "remote": "git@github.com:zhongweili/42plugin-data.git",
+    "branch": "master",
+    "commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390",
+    "repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data"
+  },
+  "manifest": {
+    "name": "react-skills",
+    "description": "Claude Code plugin",
+    "version": null
+  },
+  "content": {
+    "files": [
+      {
+        "path": "README.md",
+        "sha256": "1851aaa9f4142a97595f9b1116ecfdf806b79c7837bbdf3cf171e07b13d68286"
+      },
+      {
+        "path": ".claude-plugin/plugin.json",
+        "sha256": "c863888d5550b121b978349d5308b1f83ea848c8e48d8ad10288fecfc6f2a184"
+      },
+      {
+        "path": "skills/react/SKILL.md",
+        "sha256": "01976bd933d7aa0068b965718a78683df2b33c440196ec2ea218fae94ac2d80f"
+      }
+    ],
+    "dirSha256": "b7d46e5c4c942bc0d95489217d041e65232c0ce1ac28319ae6f48d94a0ba30d0"
+  },
+  "security": {
+    "scannedAt": null,
+    "scannerVersion": null,
+    "flags": []
+  }
+}

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