{"id":"7a77d8c3-1b27-4929-8da7-333ca17ba005","shortId":"xfdtgF","kind":"skill","title":"react","tagline":"Use when editing React code, .tsx or .jsx files, react imports, components, hooks, state, client components, framework-scoped server components, backend API integration, or React upgrades.","description":"# React Framework Skill\n\n<workflow>\n\n## Quick Reference\n\n### Functional Component Pattern\n\n<example>\n\n```tsx\nimport { useState, useEffect, useCallback } from 'react';\n\ninterface Props {\n  title: string;\n  items: Item[];\n  onSelect?: (item: Item) => void;\n}\n\nexport function ItemList({ title, items, onSelect }: Props) {\n  const [selected, setSelected] = useState<Item | null>(null);\n\n  const handleSelect = useCallback((item: Item) => {\n    setSelected(item);\n    onSelect?.(item);\n  }, [onSelect]);\n\n  return (\n    <div>\n      <h2>{title}</h2>\n      <ul>\n        {items.map(item => (\n          <li key={item.id} onClick={() => handleSelect(item)}>\n            {item.name}\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n```\n\n</example>\n\n### Custom Hooks\n\n<example>\n\n```tsx\nfunction useFetch<T>(url: string) {\n  const [data, setData] = useState<T | null>(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<Error | null>(null);\n\n  useEffect(() => {\n    const controller = new AbortController();\n\n    fetch(url, { signal: controller.signal })\n      .then(res => {\n        if (!res.ok) throw new Error(`HTTP ${res.status}`);\n        return res.json();\n      })\n      .then(setData)\n      .catch(err => {\n        if (err.name !== 'AbortError') setError(err);\n      })\n      .finally(() => setLoading(false));\n\n    return () => controller.abort();\n  }, [url]);\n\n  return { data, loading, error };\n}\n```\n\n</example>\n\n### React 19+ Server Components (When Applicable)\n\n<example>\n\n```tsx\n// Server Components are framework-scoped (for example Next.js App Router)\n// and are not a universal default in plain React + Vite projects.\nasync function UserProfile({ userId }: { userId: string }) {\n  const user = await fetchUser(userId);\n  return <div>{user.name}</div>;\n}\n\n// Client Component\n'use client';\nexport function InteractiveButton({ onClick }: { onClick: () => void }) {\n  return <button onClick={onClick}>Click me</button>;\n}\n```\n\n</example>\n\n### Form Handling\n\n<example>\n\n```tsx\nimport { useActionState } from 'react';\n\nfunction ContactForm() {\n  const [state, formAction, isPending] = useActionState(\n    async (prevState: FormState, formData: FormData) => {\n      const result = await submitForm(formData);\n      return result;\n    },\n    { message: '' }\n  );\n\n  return (\n    <form action={formAction}>\n      <input name=\"email\" type=\"email\" required />\n      <button type=\"submit\" disabled={isPending}>\n        {isPending ? 'Sending...' : 'Send'}\n      </button>\n      {state.message && <p>{state.message}</p>}\n    </form>\n  );\n}\n```\n\n</example>\n\n### Context Pattern\n\n<example>\n\n```tsx\nimport { createContext, useContext, useState, ReactNode } from 'react';\n\ninterface ThemeContextType {\n  theme: 'light' | 'dark';\n  toggle: () => void;\n}\n\nconst ThemeContext = createContext<ThemeContextType | null>(null);\n\nexport function ThemeProvider({ children }: { children: ReactNode }) {\n  const [theme, setTheme] = useState<'light' | 'dark'>('light');\n  const toggle = () => setTheme(t => t === 'light' ? 'dark' : 'light');\n\n  return (\n    <ThemeContext.Provider value={{ theme, toggle }}>\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n\nexport function useTheme() {\n  const context = useContext(ThemeContext);\n  if (!context) throw new Error('useTheme must be used within ThemeProvider');\n  return context;\n}\n```\n\n</example>\n\n</workflow>\n\n<guardrails>\n\n## Best Practices\n\n- Use TypeScript with strict mode\n- Prefer functional components with hooks\n- Use `useCallback`/`useMemo` only when profiling shows measurable benefit\n- Use `key` props correctly (stable, unique identifiers)\n- Handle cleanup in `useEffect` return function\n- Use Error Boundaries for error handling\n\n</guardrails>\n\n## References Index\n\n- **[Litestar-Vite Integration](references/litestar_vite.md)** — Backend integration with Litestar-Vite plugin.\n\n## Related Skills\n\nFor comprehensive coverage of these commonly-used React libraries:\n\n| Library | Skill | Coverage |\n|---------|-------|----------|\n| TanStack Router/Query/Table/Form | `tanstack` | Full ecosystem |\n| Shadcn/ui components | `shadcn` | All components |\n| Tailwind CSS | `tailwind` | Styling patterns |\n\n## Deployment\n\n### Static Runtimes\n\nBundle traditional SPA apps into static sets:\n\n```bash\nvite build\n```\n\n### Server and Edge Nodes\n\nAlign Server Actions and components to runtimes offering full Server-Side script continuity safely supporting `'use server'` handlers.\n\n---\n\n## CI/CD Actions\n\n<example>\n\nExample GitHub Actions workflow for static build:\n\n```yaml\nname: React CI\non: [push, pull_request]\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n      - name: Setup Node\n        uses: actions/setup-node@v4\n        with:\n          node-version: '22'\n          cache: 'npm'\n\n      - run: npm ci\n      - run: npm run build\n```\n\n</example>\n\n## Official References\n\n- <https://react.dev/>\n- <https://react.dev/reference/rsc/server-components>\n- <https://react.dev/reference/react/useCallback>\n- <https://react.dev/blog/2024/04/25/react-19-upgrade-guide>\n- <https://litestar-org.github.io/litestar-vite/>\n- <https://inertiajs.com/docs/v2/installation/client-side-setup>\n\n## Shared Styleguide Baseline\n\n- Use shared styleguides for generic language/framework rules to reduce duplication in this skill.\n- [General Principles](https://github.com/cofin/flow/blob/main/templates/styleguides/general.md)\n- [React](https://github.com/cofin/flow/blob/main/templates/styleguides/frameworks/react.md)\n- [TypeScript](https://github.com/cofin/flow/blob/main/templates/styleguides/languages/typescript.md)\n- Keep this skill focused on tool-specific workflows, edge cases, and integration details.\n\n<validation>\n## Validation\n\nAdd validation instructions here.\n</validation>","tags":["react","flow","cofin","agent-skills","ai-agents","beads","claude-code","codex","cursor","developer-tools","gemini-cli","opencode"],"capabilities":["skill","source-cofin","skill-react","topic-agent-skills","topic-ai-agents","topic-beads","topic-claude-code","topic-codex","topic-cursor","topic-developer-tools","topic-gemini-cli","topic-opencode","topic-plugin","topic-slash-commands","topic-spec-driven-development"],"categories":["flow"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/cofin/flow/react","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add cofin/flow","source_repo":"https://github.com/cofin/flow","install_from":"skills.sh"}},"qualityScore":"0.455","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 11 github stars · SKILL.md body (5,790 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:07:39.076Z","embedding":null,"createdAt":"2026-04-23T13:04:01.223Z","updatedAt":"2026-05-18T19:07:39.076Z","lastSeenAt":"2026-05-18T19:07:39.076Z","tsv":"'/blog/2024/04/25/react-19-upgrade-guide':503 '/cofin/flow/blob/main/templates/styleguides/frameworks/react.md)':534 '/cofin/flow/blob/main/templates/styleguides/general.md)':530 '/cofin/flow/blob/main/templates/styleguides/languages/typescript.md)':538 '/docs/v2/installation/client-side-setup':509 '/litestar-vite/':506 '/reference/react/usecallback':500 '/reference/rsc/server-components':497 '19':155 '22':482 'abortcontrol':119 'aborterror':141 'action':241,426,444,447 'actions/checkout':470 'actions/setup-node':476 'add':554 'align':424 'api':24 'app':170,413 'applic':159 'async':183,226 'await':191,233 'backend':23,370 'baselin':512 'bash':417 'benefit':343 'best':323 'boundari':359 'build':419,451,461,491 'bundl':410 'button':207,243 'cach':483 'case':549 'catch':137 'children':279,280,302 'ci':455,487 'ci/cd':443 'cleanup':352 'click':210 'client':16,196,199 'code':6 'common':385 'commonly-us':384 'compon':13,17,22,35,157,162,197,332,398,401,428 'comprehens':380 'const':61,68,96,103,108,116,189,221,231,270,282,289,306 'contactform':220 'context':253,307,311,322 'continu':437 'control':117 'controller.abort':148 'controller.signal':123 'correct':347 'coverag':381,391 'createcontext':257,272 'css':403 'custom':89 'dark':267,287,295 'data':97,151 'default':177 'deploy':407 'detail':552 'disabl':246 'duplic':522 'ecosystem':396 'edg':422,548 'edit':4 'err':138,143 'err.name':140 'error':109,112,130,153,314,358,361 'exampl':168,445 'export':54,200,276,303 'fals':146 'fetch':120 'fetchus':192 'file':10 'final':144 'focus':542 'form':212,240 'formact':223,242 'formdata':229,230,235 'formstat':228 'framework':19,30,165 'framework-scop':18,164 'full':395,432 'function':34,55,92,184,201,219,277,304,331,356 'general':526 'generic':517 'github':446 'github.com':529,533,537 'github.com/cofin/flow/blob/main/templates/styleguides/frameworks/react.md)':532 'github.com/cofin/flow/blob/main/templates/styleguides/general.md)':528 'github.com/cofin/flow/blob/main/templates/styleguides/languages/typescript.md)':536 'handl':213,351,362 'handler':442 'handleselect':69,86 'hook':14,90,334 'http':131 'identifi':350 'import':12,38,215,256 'index':364 'inertiajs.com':508 'inertiajs.com/docs/v2/installation/client-side-setup':507 'instruct':556 'integr':25,368,371,551 'interactivebutton':202 'interfac':44,263 'ispend':224,247,248 'item':48,49,51,52,58,65,71,72,74,76,81,87 'item.id':84 'item.name':88 'itemlist':56 'items.map':80 'job':460 'jsx':9 'keep':539 'key':83,345 'language/framework':518 'latest':467 'li':82 'librari':388,389 'light':266,286,288,294,296 'litestar':366,374 'litestar-org.github.io':505 'litestar-org.github.io/litestar-vite/':504 'litestar-vit':365,373 'load':104,152 'measur':342 'messag':238 'mode':329 'must':316 'name':453,472 'new':118,129,313 'next.js':169 'node':423,474,480 'node-vers':479 'npm':484,486,489 'null':66,67,101,102,113,114,274,275 'offer':431 'offici':492 'onclick':85,203,204,208,209 'onselect':50,59,75,77 'pattern':36,254,406 'plain':179 'plugin':376 'practic':324 'prefer':330 'prevstat':227 'principl':527 'profil':340 'project':182 'prop':45,60,346 'pull':458 'push':457 'quick':32 'react':1,5,11,27,29,43,154,180,218,262,387,454,531 'react.dev':494,496,499,502 'react.dev/blog/2024/04/25/react-19-upgrade-guide':501 'react.dev/reference/react/usecallback':498 'react.dev/reference/rsc/server-components':495 'reactnod':260,281 'reduc':521 'refer':33,363,493 'references/litestar_vite.md':369 'relat':377 'request':459 'res':125 'res.json':134 'res.ok':127 'res.status':132 'result':232,237 'return':78,133,147,150,194,206,236,239,297,321,355 'router':171 'router/query/table/form':393 'rule':519 'run':463,485,488,490 'runs-on':462 'runtim':409,430 'safe':438 'scope':20,166 'script':436 'select':62 'send':249,250 'server':21,156,161,420,425,434,441 'server-sid':433 'set':416 'setdata':98,136 'seterror':110,142 'setload':105,145 'setselect':63,73 'setthem':284,291 'setup':473 'shadcn':399 'shadcn/ui':397 'share':510,514 'show':341 'side':435 'signal':122 'skill':31,378,390,525,541 'skill-react' 'source-cofin' 'spa':412 'specif':546 'stabl':348 'state':15,222 'state.message':251,252 'static':408,415,450 'step':468 'strict':328 'string':47,95,188 'style':405 'styleguid':511,515 'submit':245 'submitform':234 'support':439 'tailwind':402,404 'tanstack':392,394 'theme':265,283,300 'themecontext':271,309 'themecontext.provider':298 'themecontexttyp':264,273 'themeprovid':278,320 'throw':128,312 'titl':46,57,79 'toggl':268,290,301 'tool':545 'tool-specif':544 'topic-agent-skills' 'topic-ai-agents' 'topic-beads' 'topic-claude-code' 'topic-codex' 'topic-cursor' 'topic-developer-tools' 'topic-gemini-cli' 'topic-opencode' 'topic-plugin' 'topic-slash-commands' 'topic-spec-driven-development' 'tradit':411 'true':107 'tsx':7,37,91,160,214,255 'type':244 'typescript':326,535 'ubuntu':466 'ubuntu-latest':465 'uniqu':349 'univers':176 'upgrad':28 'url':94,121,149 'use':2,198,318,325,335,344,357,386,440,469,475,513 'useactionst':216,225 'usecallback':41,70,336 'usecontext':258,308 'useeffect':40,115,354 'usefetch':93 'usememo':337 'user':190 'user.name':195 'userid':186,187,193 'userprofil':185 'usest':39,64,99,106,111,259,285 'usethem':305,315 'v4':471,477 'valid':553,555 'valu':299 'version':481 'vite':181,367,375,418 'void':53,205,269 'within':319 'workflow':448,547 'yaml':452","prices":[{"id":"77ce68cf-bb0c-4fa0-8a4a-c71a2202a599","listingId":"7a77d8c3-1b27-4929-8da7-333ca17ba005","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"cofin","category":"flow","install_from":"skills.sh"},"createdAt":"2026-04-23T13:04:01.223Z"}],"sources":[{"listingId":"7a77d8c3-1b27-4929-8da7-333ca17ba005","source":"github","sourceId":"cofin/flow/react","sourceUrl":"https://github.com/cofin/flow/tree/main/skills/react","isPrimary":false,"firstSeenAt":"2026-04-23T13:04:01.223Z","lastSeenAt":"2026-05-18T19:07:39.076Z"}],"details":{"listingId":"7a77d8c3-1b27-4929-8da7-333ca17ba005","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"cofin","slug":"react","github":{"repo":"cofin/flow","stars":11,"topics":["agent-skills","ai-agents","beads","claude-code","codex","context-driven-development","cursor","developer-tools","gemini-cli","opencode","plugin","slash-commands","spec-driven-development","subagents","tdd","workflow"],"license":"apache-2.0","html_url":"https://github.com/cofin/flow","pushed_at":"2026-04-27T19:07:26Z","description":"Context-Driven Development toolkit for AI agents — spec-first planning, TDD workflow, and Beads integration.","skill_md_sha":"b5d9af2354d53417dec87189eca0e16f4e9b17fd","skill_md_path":"skills/react/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/cofin/flow/tree/main/skills/react"},"layout":"multi","source":"github","category":"flow","frontmatter":{"name":"react","description":"Use when editing React code, .tsx or .jsx files, react imports, components, hooks, state, client components, framework-scoped server components, backend API integration, or React upgrades."},"skills_sh_url":"https://skills.sh/cofin/flow/react"},"updatedAt":"2026-05-18T19:07:39.076Z"}}