commit 44145cbe3cee639180ffc7ec2aa940c4ec184279 Author: Zhongwei Li Date: Sun Nov 30 08:31:19 2025 +0800 Initial commit diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..107f0a0 --- /dev/null +++ b/.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" + ] +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..f1f59dc --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# react-skills + +Claude Code plugin diff --git a/plugin.lock.json b/plugin.lock.json new file mode 100644 index 0000000..bce1969 --- /dev/null +++ b/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": [] + } +} \ No newline at end of file diff --git a/skills/react/SKILL.md b/skills/react/SKILL.md new file mode 100644 index 0000000..edb8a68 --- /dev/null +++ b/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 ( + + ); +} +``` + +### 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 ( + Loading...}> + + + ); +} +``` + +## 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