1---2name: react-resources3description: Curated authoritative documentation URL library for React 19, accessibility (WAI-ARIA APG, WebAIM), performance (web.dev Core Web Vitals), HTML/CSS platform (MDN), forms (Zod, react-hook-form), testing (Testing Library, Playwright), Next.js App Router, TypeScript, and tooling — indexed by problem keyword for quick lookup during interview builds. Claude can WebFetch any of these URLs for current authoritative content when inline knowledge isn't enough. Use when you need to verify a pattern, look up a spec, or pull in primary-source docs mid-build. Triggers on "where to find", "documentation for", "spec for", "look up", "research", "reference", "WAI-ARIA", "MDN", "web.dev", "React docs", "Next docs", "Tailwind docs", "what does X say about", "authoritative".4---56# react-resources78The research / documentation-pulling layer for the React skill set. Indexed by problem keyword, then organized by source. When you hit an edge case the inline skills don't cover, Claude can `WebFetch` any of these for current authoritative info.910**How Claude should use this skill**: when Jabal asks about a topic that's not fully covered in the inline skills, look up the keyword in the index, identify the canonical URL, and WebFetch it. Cite the source in the response so Jabal can verify.1112## Index by problem keyword1314| Keyword | Look at |15|---|---|16| accessibility, a11y, WCAG | WAI-ARIA APG, MDN ARIA, WebAIM |17| anchor positioning | MDN CSS Anchor Positioning |18| ARIA pattern (any) | WAI-ARIA Authoring Practices Guide |19| autocomplete / combobox | WAI-ARIA APG Combobox |20| bundle analysis | web.dev bundle reduction |21| color contrast | WebAIM contrast checker |22| compound component | Kent C. Dodds blog |23| container queries | MDN Container Queries |24| Core Web Vitals | web.dev/articles/vitals |25| dialog / modal | MDN `<dialog>`, web.dev a11y dialog |26| docs / README | Make a README, Diátaxis |27| dropdown / select | WAI-ARIA APG Combobox or Listbox |28| dynamic / lazy | React.dev `lazy()` and `<Suspense>` |29| focus management | TPGi focus management, MDN focus |30| forms (general) | React.dev forms, Zod docs |31| Framer Motion | Framer docs |32| `:has()` | MDN `:has()` |33| hydration error | React.dev hydration errors |34| INP | web.dev INP, Chrome DevTools Performance |35| keyboard navigation | WAI-ARIA APG, Inclusive Components |36| LCP | web.dev LCP |37| `light-dark()` | MDN `light-dark()` |38| listbox | WAI-ARIA APG Listbox |39| memoization | React.dev `useMemo` / Compiler docs |40| menu | WAI-ARIA APG Menu and Menubar |41| metadata (Next) | Next.js Metadata API |42| meta tags / OG / Twitter Cards / favicon / theme-color | Social / SEO metadata section below |43| Next.js App Router | Next.js docs |44| optimistic UI | React.dev `useOptimistic` |45| `popover` attribute | MDN Popover API |46| `prefers-reduced-motion` | MDN media queries |47| `:user-valid` / `:user-invalid` | MDN |48| Radix Primitives | radix-ui.com |49| react-hook-form | react-hook-form.com |50| React Aria | react-spectrum.adobe.com/react-aria |51| screen reader testing | WebAIM, Deque University |52| Server Actions (Next) | Next.js Server Actions |53| Server Components | Next.js Server Components |54| Suspense | React.dev `<Suspense>` |55| Tailwind | tailwindcss.com |56| testing | Testing Library, Playwright |57| TypeScript + React | React.dev TypeScript, react-typescript-cheatsheet |58| `useActionState` | React.dev |59| `useDeferredValue` | React.dev |60| `useFormStatus` | React.dev |61| `useOptimistic` | React.dev |62| `useTransition` | React.dev |63| WCAG | w3.org/WAI/standards-guidelines/wcag/ |64| browser support (any feature) | caniuse.com |65| package size | bundlephobia.com |6667---6869## React core7071| URL | What's there |72|---|---|73| https://react.dev/reference/react | Full hook reference (canonical) |74| https://react.dev/blog/2024/12/05/react-19 | React 19 release notes |75| https://react.dev/reference/react/useActionState | `useActionState` reference |76| https://react.dev/reference/react-dom/hooks/useFormStatus | `useFormStatus` reference |77| https://react.dev/reference/react/useOptimistic | `useOptimistic` reference |78| https://react.dev/reference/react/useTransition | `useTransition` reference |79| https://react.dev/reference/react/useDeferredValue | `useDeferredValue` reference |80| https://react.dev/reference/react/use | `use()` API for promises and context |81| https://react.dev/reference/react/Suspense | `<Suspense>` reference |82| https://react.dev/learn/react-compiler | React Compiler |83| https://react.dev/learn/typescript | React + TypeScript guide |84| https://react.dev/learn/you-might-not-need-an-effect | The canonical anti-patterns article (worth re-reading) |85| https://react.dev/learn/synchronizing-with-effects | When useEffect is actually correct |8687---8889## Accessibility9091| URL | What's there |92|---|---|93| https://www.w3.org/WAI/ARIA/apg/patterns/ | WAI-ARIA Authoring Practices — canonical patterns (combobox, listbox, menu, tabs, dialog, etc.) |94| https://www.w3.org/WAI/standards-guidelines/wcag/ | WCAG 2.2 standard |95| https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA | MDN ARIA reference |96| https://webaim.org/ | WebAIM — practical a11y guides |97| https://webaim.org/resources/contrastchecker/ | Color contrast checker |98| https://inclusive-components.design/ | Inclusive Components (Heydon Pickering) — canonical patterns rebuilt accessibly |99| https://www.tpgi.com/the-difference-between-keyboard-and-screen-reader-navigation/ | Keyboard vs screen reader nav distinction |100| https://www.deque.com/axe/ | axe DevTools — automated a11y testing |101| https://dequeuniversity.com/screenreaders/ | Screen reader keyboard shortcuts |102103---104105## Performance106107| URL | What's there |108|---|---|109| https://web.dev/articles/vitals | Core Web Vitals overview |110| https://web.dev/articles/lcp | LCP deep dive |111| https://web.dev/articles/inp | INP deep dive |112| https://web.dev/articles/cls | CLS deep dive |113| https://web.dev/articles/optimize-lcp | LCP optimization tactics |114| https://web.dev/articles/optimize-inp | INP optimization tactics |115| https://web.dev/articles/optimize-cls | CLS optimization tactics |116| https://developer.chrome.com/docs/devtools/performance | Chrome DevTools Performance panel |117| https://developer.chrome.com/docs/lighthouse | Lighthouse docs |118| https://web.dev/articles/font-best-practices | Font loading best practices |119120---121122## HTML / CSS platform123124| URL | What's there |125|---|---|126| https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog | `<dialog>` reference |127| https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details | `<details>` and `name` attribute |128| https://developer.mozilla.org/en-US/docs/Web/API/Popover_API | Popover API |129| https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning | CSS Anchor Positioning |130| https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert | `inert` attribute |131| https://developer.mozilla.org/en-US/docs/Web/CSS/:has | `:has()` |132| https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within | `:focus-within` |133| https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid | `:user-valid` / `:user-invalid` |134| https://developer.mozilla.org/en-US/docs/Web/CSS/light-dark | `light-dark()` |135| https://developer.mozilla.org/en-US/docs/Web/CSS/color-mix | `color-mix()` |136| https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries | Container queries |137| https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation | Native form validation |138| https://developer.mozilla.org/en-US/docs/Web/API/FormData | FormData API |139| https://caniuse.com/ | Browser support lookup |140141---142143## Forms and validation144145| URL | What's there |146|---|---|147| https://zod.dev/ | Zod docs (schemas + type inference) |148| https://react-hook-form.com/ | react-hook-form docs |149| https://www.w3.org/WAI/ARIA/apg/practices/form-instructions/ | Form a11y patterns (APG) |150| https://webaim.org/techniques/formvalidation/ | WebAIM form validation |151| https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations | Next Server Actions |152153---154155## Component patterns and headless libraries156157| URL | What's there |158|---|---|159| https://www.radix-ui.com/primitives | Radix Primitives (production headless components — read source for reference implementations) |160| https://react-spectrum.adobe.com/react-aria/ | React Aria hooks (Adobe's production a11y primitives) |161| https://patterns.dev/ | Common React patterns library |162| https://kentcdodds.com/blog/compound-components-with-react-hooks | Compound components essay |163| https://kentcdodds.com/blog/inversion-of-control | Inversion of control / headless |164| https://www.joshwcomeau.com/ | Josh Comeau — great writing on React + CSS |165166---167168## Styling169170| URL | What's there |171|---|---|172| https://tailwindcss.com/docs | Tailwind docs (v4 current) |173| https://tailwindcss.com/docs/installation/using-vite | Tailwind v4 with Vite |174| https://tailwindcss.com/docs/upgrade-guide | Tailwind v3 → v4 migration |175| https://cva.style/docs | class-variance-authority |176| https://github.com/lukeed/clsx | clsx |177| https://github.com/dcastil/tailwind-merge | tailwind-merge |178| https://ui.shadcn.com/ | shadcn/ui — component API patterns reference |179| https://every-layout.dev/ | Every Layout — primitive layout patterns |180181---182183## Testing184185| URL | What's there |186|---|---|187| https://testing-library.com/docs/react-testing-library/intro | React Testing Library |188| https://testing-library.com/docs/queries/about | Queries cheat sheet |189| https://playwright.dev/docs/intro | Playwright docs |190| https://playwright.dev/docs/accessibility-testing | Playwright + axe |191| https://playwright.dev/docs/locators | Playwright locators (getByRole, getByLabel, etc.) |192| https://playwright.dev/docs/api/class-page | Playwright Page API |193| https://playwright.dev/docs/test-configuration | Playwright config reference |194| https://github.com/dequelabs/axe-core-npm/tree/develop/packages/playwright | @axe-core/playwright |195| https://www.deque.com/axe/core-documentation/api-documentation/ | axe-core API |196| https://vitest.dev/ | Vitest docs |197| https://kentcdodds.com/blog/the-testing-trophy-and-testing-classifications | Testing trophy (testing philosophy) |198199---200201## Social / SEO metadata202203For the document head — favicons, OG/Twitter cards, theme colors, manifests, canonical links.204205| URL | What's there |206|---|---|207| https://ogp.me/ | The Open Graph protocol — canonical spec for `og:*` meta tags |208| https://developer.x.com/en/docs/x-for-websites/cards/markup | Twitter Cards markup reference |209| https://developer.x.com/en/docs/x-for-websites/cards/overview/markup | Twitter Cards types (summary, summary_large_image, player, app) |210| https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color | `<meta name="theme-color">` reference (incl. media-query variants) |211| https://developer.mozilla.org/en-US/docs/Web/Manifest | Web App Manifest reference |212| https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link | `<link rel>` values (icon, apple-touch-icon, manifest, canonical) |213| https://web.dev/articles/add-manifest | web.dev: adding a manifest |214| https://www.opengraph.xyz/ | OG preview tester (paste a URL, see how Facebook/LinkedIn/Slack will render it) |215| https://cards-dev.twitter.com/validator | Twitter card validator (X's renamed but URL still works) |216| https://realfavicongenerator.net/ | Audit your favicon coverage across platforms |217| https://github.com/audreyfeldroy/favicon-cheat-sheet | The minimum-viable favicon set (most projects need less than they think) |218219---220221## Next.js (when applicable)222223| URL | What's there |224|---|---|225| https://nextjs.org/docs/app | App Router docs |226| https://nextjs.org/docs/app/building-your-application/rendering/server-components | Server Components |227| https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations | Server Actions |228| https://nextjs.org/docs/app/building-your-application/optimizing/metadata | Metadata API |229| https://nextjs.org/docs/app/api-reference/file-conventions/page | File conventions |230| https://nextjs.org/docs/app/api-reference/components/image | next/image |231| https://nextjs.org/docs/app/api-reference/components/font | next/font |232| https://nextjs.org/docs/app/building-your-application/caching | Caching model |233234---235236## TypeScript237238| URL | What's there |239|---|---|240| https://www.typescriptlang.org/docs/ | TypeScript handbook |241| https://react-typescript-cheatsheet.netlify.app/ | React + TypeScript cheatsheet (community) |242| https://github.com/sindresorhus/type-fest | type-fest utility types |243244---245246## Documentation247248| URL | What's there |249|---|---|250| https://www.makeareadme.com/ | README best practices |251| https://diataxis.fr/ | Diátaxis documentation framework |252| https://adr.github.io/ | Architecture Decision Records |253| https://www.writethedocs.org/guide/docs-as-code/ | Docs as code principles |254| https://docs.github.com/en/get-started/writing-on-github | GitHub Markdown reference |255256---257258## Tools and references259260| URL | What's there |261|---|---|262| https://caniuse.com/ | Browser support for any feature |263| https://bundlephobia.com/ | Package size lookup |264| https://www.npmjs.com/ | Package registry |265| https://github.com/ | GitHub for source-of-truth library code |266267---268269## How Claude should use this skill270271When Jabal asks about a topic not fully covered in his inline skills:2722731. **Look up the keyword** in the index at the top of this file.2742. **Identify the canonical URL** for that topic.2753. **Use `WebFetch`** to retrieve current content.2764. **Synthesize the answer** with the source linked.277278If Claude is confident in inline knowledge AND the topic isn't changing rapidly, the fetch can be skipped. For anything that may have changed (React, Next.js, browser support), prefer the fetch.279280**When in doubt, fetch and cite.** It's faster to verify than to be wrong in a 2-hour interview.281282## Authoritative references283284This whole skill is the reference. See above.
jaballer