{"id":"7a77d8c3-1b27-4929-8da7-333ca17ba005","shortId":"xfdtgF","kind":"skill","title":"react","tagline":"Auto-activate for .tsx, .jsx files, react imports. Expert knowledge for modern React development with TypeScript, including client components, framework-scoped server components, and upgrade-aware best practices. Use when building React components, managing state, or integrating ","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-04-24T07:03:19.586Z","embedding":null,"createdAt":"2026-04-23T13:04:01.223Z","updatedAt":"2026-04-24T07:03:19.586Z","lastSeenAt":"2026-04-24T07:03:19.586Z","tsv":"'/blog/2024/04/25/react-19-upgrade-guide':516 '/cofin/flow/blob/main/templates/styleguides/frameworks/react.md)':547 '/cofin/flow/blob/main/templates/styleguides/general.md)':543 '/cofin/flow/blob/main/templates/styleguides/languages/typescript.md)':551 '/docs/v2/installation/client-side-setup':522 '/litestar-vite/':519 '/reference/react/usecallback':513 '/reference/rsc/server-components':510 '19':168 '22':495 'abortcontrol':132 'aborterror':154 'action':254,439,457,460 'actions/checkout':483 'actions/setup-node':489 'activ':4 'add':567 'align':437 'app':183,426 'applic':172 'async':196,239 'auto':3 'auto-activ':2 'await':204,246 'awar':30 'backend':383 'baselin':525 'bash':430 'benefit':356 'best':31,336 'boundari':372 'build':35,432,464,474,504 'bundl':423 'button':220,256 'cach':496 'case':562 'catch':150 'children':292,293,315 'ci':468,500 'ci/cd':456 'cleanup':365 'click':223 'client':20,209,212 'common':398 'commonly-us':397 'compon':21,26,37,48,170,175,210,345,411,414,441 'comprehens':393 'const':74,81,109,116,121,129,202,234,244,283,295,302,319 'contactform':233 'context':266,320,324,335 'continu':450 'control':130 'controller.abort':161 'controller.signal':136 'correct':360 'coverag':394,404 'createcontext':270,285 'css':416 'custom':102 'dark':280,300,308 'data':110,164 'default':190 'deploy':420 'detail':565 'develop':16 'disabl':259 'duplic':535 'ecosystem':409 'edg':435,561 'err':151,156 'err.name':153 'error':122,125,143,166,327,371,374 'exampl':181,458 'expert':11 'export':67,213,289,316 'fals':159 'fetch':133 'fetchus':205 'file':8 'final':157 'focus':555 'form':225,253 'formact':236,255 'formdata':242,243,248 'formstat':241 'framework':23,43,178 'framework-scop':22,177 'full':408,445 'function':47,68,105,197,214,232,290,317,344,369 'general':539 'generic':530 'github':459 'github.com':542,546,550 'github.com/cofin/flow/blob/main/templates/styleguides/frameworks/react.md)':545 'github.com/cofin/flow/blob/main/templates/styleguides/general.md)':541 'github.com/cofin/flow/blob/main/templates/styleguides/languages/typescript.md)':549 'handl':226,364,375 'handler':455 'handleselect':82,99 'hook':103,347 'http':144 'identifi':363 'import':10,51,228,269 'includ':19 'index':377 'inertiajs.com':521 'inertiajs.com/docs/v2/installation/client-side-setup':520 'instruct':569 'integr':41,381,384,564 'interactivebutton':215 'interfac':57,276 'ispend':237,260,261 'item':61,62,64,65,71,78,84,85,87,89,94,100 'item.id':97 'item.name':101 'itemlist':69 'items.map':93 'job':473 'jsx':7 'keep':552 'key':96,358 'knowledg':12 'language/framework':531 'latest':480 'li':95 'librari':401,402 'light':279,299,301,307,309 'litestar':379,387 'litestar-org.github.io':518 'litestar-org.github.io/litestar-vite/':517 'litestar-vit':378,386 'load':117,165 'manag':38 'measur':355 'messag':251 'mode':342 'modern':14 'must':329 'name':466,485 'new':131,142,326 'next.js':182 'node':436,487,493 'node-vers':492 'npm':497,499,502 'null':79,80,114,115,126,127,287,288 'offer':444 'offici':505 'onclick':98,216,217,221,222 'onselect':63,72,88,90 'pattern':49,267,419 'plain':192 'plugin':389 'practic':32,337 'prefer':343 'prevstat':240 'principl':540 'profil':353 'project':195 'prop':58,73,359 'pull':471 'push':470 'quick':45 'react':1,9,15,36,42,56,167,193,231,275,400,467,544 'react.dev':507,509,512,515 'react.dev/blog/2024/04/25/react-19-upgrade-guide':514 'react.dev/reference/react/usecallback':511 'react.dev/reference/rsc/server-components':508 'reactnod':273,294 'reduc':534 'refer':46,376,506 'references/litestar_vite.md':382 'relat':390 'request':472 'res':138 'res.json':147 'res.ok':140 'res.status':145 'result':245,250 'return':91,146,160,163,207,219,249,252,310,334,368 'router':184 'router/query/table/form':406 'rule':532 'run':476,498,501,503 'runs-on':475 'runtim':422,443 'safe':451 'scope':24,179 'script':449 'select':75 'send':262,263 'server':25,169,174,433,438,447,454 'server-sid':446 'set':429 'setdata':111,149 'seterror':123,155 'setload':118,158 'setselect':76,86 'setthem':297,304 'setup':486 'shadcn':412 'shadcn/ui':410 'share':523,527 'show':354 'side':448 'signal':135 'skill':44,391,403,538,554 'skill-react' 'source-cofin' 'spa':425 'specif':559 'stabl':361 'state':39,235 'state.message':264,265 'static':421,428,463 'step':481 'strict':341 'string':60,108,201 'style':418 'styleguid':524,528 'submit':258 'submitform':247 'support':452 'tailwind':415,417 'tanstack':405,407 'theme':278,296,313 'themecontext':284,322 'themecontext.provider':311 'themecontexttyp':277,286 'themeprovid':291,333 'throw':141,325 'titl':59,70,92 'toggl':281,303,314 'tool':558 'tool-specif':557 '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':424 'true':120 'tsx':6,50,104,173,227,268 'type':257 'typescript':18,339,548 'ubuntu':479 'ubuntu-latest':478 'uniqu':362 'univers':189 'upgrad':29 'upgrade-awar':28 'url':107,134,162 'use':33,211,331,338,348,357,370,399,453,482,488,526 'useactionst':229,238 'usecallback':54,83,349 'usecontext':271,321 'useeffect':53,128,367 'usefetch':106 'usememo':350 'user':203 'user.name':208 'userid':199,200,206 'userprofil':198 'usest':52,77,112,119,124,272,298 'usethem':318,328 'v4':484,490 'valid':566,568 'valu':312 'version':494 'vite':194,380,388,431 'void':66,218,282 'within':332 'workflow':461,560 'yaml':465","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-04-24T07:03:19.586Z"}],"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-19T23:22:27Z","description":"Context-Driven Development toolkit for AI agents — spec-first planning, TDD workflow, and Beads integration.","skill_md_sha":"1e6cde0de6f4d3b810c57d4dcec51e8576cad133","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":"Auto-activate for .tsx, .jsx files, react imports. Expert knowledge for modern React development with TypeScript, including client components, framework-scoped server components, and upgrade-aware best practices. Use when building React components, managing state, or integrating with backend APIs. Not for Vue (see vue), Svelte (see svelte), or Angular (see angular)."},"skills_sh_url":"https://skills.sh/cofin/flow/react"},"updatedAt":"2026-04-24T07:03:19.586Z"}}