React resources

Skill jaballer/react-claude-skills/react-resources

21 composable Claude Code skills for senior React + UX engineering — component design, a11y, performance, forms, routing, marketing & docs patterns, testing, and interview craft.

Install

npx -y skills add jaballer/react-claude-skills --skill react-resources

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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".

SKILL.md

13.8 KB, as published. Nobody here has run it

react-resources

The 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.

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.

Index by problem keyword

Keyword	Look at
accessibility, a11y, WCAG	WAI-ARIA APG, MDN ARIA, WebAIM
anchor positioning	MDN CSS Anchor Positioning
ARIA pattern (any)	WAI-ARIA Authoring Practices Guide
autocomplete / combobox	WAI-ARIA APG Combobox
bundle analysis	web.dev bundle reduction
color contrast	WebAIM contrast checker
compound component	Kent C. Dodds blog
container queries	MDN Container Queries
Core Web Vitals	web.dev/articles/vitals
dialog / modal	MDN `<dialog>`, web.dev a11y dialog
docs / README	Make a README, Diátaxis
dropdown / select	WAI-ARIA APG Combobox or Listbox
dynamic / lazy	React.dev `lazy()` and `<Suspense>`
focus management	TPGi focus management, MDN focus
forms (general)	React.dev forms, Zod docs
Framer Motion	Framer docs
`:has()`	MDN `:has()`
hydration error	React.dev hydration errors
INP	web.dev INP, Chrome DevTools Performance
keyboard navigation	WAI-ARIA APG, Inclusive Components
LCP	web.dev LCP
`light-dark()`	MDN `light-dark()`
listbox	WAI-ARIA APG Listbox
memoization	React.dev `useMemo` / Compiler docs
menu	WAI-ARIA APG Menu and Menubar
metadata (Next)	Next.js Metadata API
meta tags / OG / Twitter Cards / favicon / theme-color	Social / SEO metadata section below
Next.js App Router	Next.js docs
optimistic UI	React.dev `useOptimistic`
`popover` attribute	MDN Popover API
`prefers-reduced-motion`	MDN media queries
`:user-valid` / `:user-invalid`	MDN
Radix Primitives	radix-ui.com
react-hook-form	react-hook-form.com
React Aria	react-spectrum.adobe.com/react-aria
screen reader testing	WebAIM, Deque University
Server Actions (Next)	Next.js Server Actions
Server Components	Next.js Server Components
Suspense	React.dev `<Suspense>`
Tailwind	tailwindcss.com
testing	Testing Library, Playwright
TypeScript + React	React.dev TypeScript, react-typescript-cheatsheet
`useActionState`	React.dev
`useDeferredValue`	React.dev
`useFormStatus`	React.dev
`useOptimistic`	React.dev
`useTransition`	React.dev
WCAG	w3.org/WAI/standards-guidelines/wcag/
browser support (any feature)	caniuse.com
package size	bundlephobia.com

React core

URL	What's there
https://react.dev/reference/react	Full hook reference (canonical)
https://react.dev/blog/2024/12/05/react-19	React 19 release notes
https://react.dev/reference/react/useActionState	`useActionState` reference
https://react.dev/reference/react-dom/hooks/useFormStatus	`useFormStatus` reference
https://react.dev/reference/react/useOptimistic	`useOptimistic` reference
https://react.dev/reference/react/useTransition	`useTransition` reference
https://react.dev/reference/react/useDeferredValue	`useDeferredValue` reference
https://react.dev/reference/react/use	`use()` API for promises and context
https://react.dev/reference/react/Suspense	`<Suspense>` reference
https://react.dev/learn/react-compiler	React Compiler
https://react.dev/learn/typescript	React + TypeScript guide
https://react.dev/learn/you-might-not-need-an-effect	The canonical anti-patterns article (worth re-reading)
https://react.dev/learn/synchronizing-with-effects	When useEffect is actually correct

Accessibility

URL	What's there
https://www.w3.org/WAI/ARIA/apg/patterns/	WAI-ARIA Authoring Practices — canonical patterns (combobox, listbox, menu, tabs, dialog, etc.)
https://www.w3.org/WAI/standards-guidelines/wcag/	WCAG 2.2 standard
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA	MDN ARIA reference
https://webaim.org/	WebAIM — practical a11y guides
https://webaim.org/resources/contrastchecker/	Color contrast checker
https://inclusive-components.design/	Inclusive Components (Heydon Pickering) — canonical patterns rebuilt accessibly
https://www.tpgi.com/the-difference-between-keyboard-and-screen-reader-navigation/	Keyboard vs screen reader nav distinction
https://www.deque.com/axe/	axe DevTools — automated a11y testing
https://dequeuniversity.com/screenreaders/	Screen reader keyboard shortcuts

Performance

URL	What's there
https://web.dev/articles/vitals	Core Web Vitals overview
https://web.dev/articles/lcp	LCP deep dive
https://web.dev/articles/inp	INP deep dive
https://web.dev/articles/cls	CLS deep dive
https://web.dev/articles/optimize-lcp	LCP optimization tactics
https://web.dev/articles/optimize-inp	INP optimization tactics
https://web.dev/articles/optimize-cls	CLS optimization tactics
https://developer.chrome.com/docs/devtools/performance	Chrome DevTools Performance panel
https://developer.chrome.com/docs/lighthouse	Lighthouse docs
https://web.dev/articles/font-best-practices	Font loading best practices

HTML / CSS platform

URL	What's there
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog	`<dialog>` reference
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details	`<details>` and `name` attribute
https://developer.mozilla.org/en-US/docs/Web/API/Popover_API	Popover API
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning	CSS Anchor Positioning
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert	`inert` attribute
https://developer.mozilla.org/en-US/docs/Web/CSS/:has	`:has()`
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within	`:focus-within`
https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid	`:user-valid` / `:user-invalid`
https://developer.mozilla.org/en-US/docs/Web/CSS/light-dark	`light-dark()`
https://developer.mozilla.org/en-US/docs/Web/CSS/color-mix	`color-mix()`
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries	Container queries
https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation	Native form validation
https://developer.mozilla.org/en-US/docs/Web/API/FormData	FormData API
https://caniuse.com/	Browser support lookup

Forms and validation

URL	What's there
https://zod.dev/	Zod docs (schemas + type inference)
https://react-hook-form.com/	react-hook-form docs
https://www.w3.org/WAI/ARIA/apg/practices/form-instructions/	Form a11y patterns (APG)
https://webaim.org/techniques/formvalidation/	WebAIM form validation
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations	Next Server Actions

Component patterns and headless libraries

URL	What's there
https://www.radix-ui.com/primitives	Radix Primitives (production headless components — read source for reference implementations)
https://react-spectrum.adobe.com/react-aria/	React Aria hooks (Adobe's production a11y primitives)
https://patterns.dev/	Common React patterns library
https://kentcdodds.com/blog/compound-components-with-react-hooks	Compound components essay
https://kentcdodds.com/blog/inversion-of-control	Inversion of control / headless
https://www.joshwcomeau.com/	Josh Comeau — great writing on React + CSS

Styling

URL	What's there
https://tailwindcss.com/docs	Tailwind docs (v4 current)
https://tailwindcss.com/docs/installation/using-vite	Tailwind v4 with Vite
https://tailwindcss.com/docs/upgrade-guide	Tailwind v3 → v4 migration
https://cva.style/docs	class-variance-authority
https://github.com/lukeed/clsx	clsx
https://github.com/dcastil/tailwind-merge	tailwind-merge
https://ui.shadcn.com/	shadcn/ui — component API patterns reference
https://every-layout.dev/	Every Layout — primitive layout patterns

Testing

URL	What's there
https://testing-library.com/docs/react-testing-library/intro	React Testing Library
https://testing-library.com/docs/queries/about	Queries cheat sheet
https://playwright.dev/docs/intro	Playwright docs
https://playwright.dev/docs/accessibility-testing	Playwright + axe
https://playwright.dev/docs/locators	Playwright locators (getByRole, getByLabel, etc.)
https://playwright.dev/docs/api/class-page	Playwright Page API
https://playwright.dev/docs/test-configuration	Playwright config reference
https://github.com/dequelabs/axe-core-npm/tree/develop/packages/playwright	@axe-core/playwright
https://www.deque.com/axe/core-documentation/api-documentation/	axe-core API
https://vitest.dev/	Vitest docs
https://kentcdodds.com/blog/the-testing-trophy-and-testing-classifications	Testing trophy (testing philosophy)

Social / SEO metadata

For the document head — favicons, OG/Twitter cards, theme colors, manifests, canonical links.

URL	What's there
https://ogp.me/	The Open Graph protocol — canonical spec for `og:*` meta tags
https://developer.x.com/en/docs/x-for-websites/cards/markup	Twitter Cards markup reference
https://developer.x.com/en/docs/x-for-websites/cards/overview/markup	Twitter Cards types (summary, summary_large_image, player, app)
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color	`<meta name="theme-color">` reference (incl. media-query variants)
https://developer.mozilla.org/en-US/docs/Web/Manifest	Web App Manifest reference
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link	`<link rel>` values (icon, apple-touch-icon, manifest, canonical)
https://web.dev/articles/add-manifest	web.dev: adding a manifest
https://www.opengraph.xyz/	OG preview tester (paste a URL, see how Facebook/LinkedIn/Slack will render it)
https://cards-dev.twitter.com/validator	Twitter card validator (X's renamed but URL still works)
https://realfavicongenerator.net/	Audit your favicon coverage across platforms
https://github.com/audreyfeldroy/favicon-cheat-sheet	The minimum-viable favicon set (most projects need less than they think)

Next.js (when applicable)

URL	What's there
https://nextjs.org/docs/app	App Router docs
https://nextjs.org/docs/app/building-your-application/rendering/server-components	Server Components
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations	Server Actions
https://nextjs.org/docs/app/building-your-application/optimizing/metadata	Metadata API
https://nextjs.org/docs/app/api-reference/file-conventions/page	File conventions
https://nextjs.org/docs/app/api-reference/components/image	next/image
https://nextjs.org/docs/app/api-reference/components/font	next/font
https://nextjs.org/docs/app/building-your-application/caching	Caching model

TypeScript

URL	What's there
https://www.typescriptlang.org/docs/	TypeScript handbook
https://react-typescript-cheatsheet.netlify.app/	React + TypeScript cheatsheet (community)
https://github.com/sindresorhus/type-fest	type-fest utility types

Documentation

URL	What's there
https://www.makeareadme.com/	README best practices
https://diataxis.fr/	Diátaxis documentation framework
https://adr.github.io/	Architecture Decision Records
https://www.writethedocs.org/guide/docs-as-code/	Docs as code principles
https://docs.github.com/en/get-started/writing-on-github	GitHub Markdown reference

Tools and references

URL	What's there
https://caniuse.com/	Browser support for any feature
https://bundlephobia.com/	Package size lookup
https://www.npmjs.com/	Package registry
https://github.com/	GitHub for source-of-truth library code

How Claude should use this skill

When Jabal asks about a topic not fully covered in his inline skills:

Look up the keyword in the index at the top of this file.
Identify the canonical URL for that topic.
Use WebFetch to retrieve current content.
Synthesize the answer with the source linked.

If 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.

When in doubt, fetch and cite. It's faster to verify than to be wrong in a 2-hour interview.

Authoritative references

This whole skill is the reference. See above.