agentleFS
Sign inStart free
jaballerjaballer/react-claude-skills/react-resources/SKILL.md

react-resources

Skill0 starsChanged 5 months agoMITView on GitHub

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

The file

We split this skill into the rules it gives an agent

3 rules. About 0 are common, 2 are distinctive, and 1 is very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈2

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    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 …

    line 10
  2. Distinctive:

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

    line 271
  3. Very specific:

    If Claude is confident in inline knowledge AND the topic isn't changing rapidly, the fetch can be skipped.

    line 278

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

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

KeywordLook at
accessibility, a11y, WCAGWAI-ARIA APG, MDN ARIA, WebAIM
anchor positioningMDN CSS Anchor Positioning
ARIA pattern (any)WAI-ARIA Authoring Practices Guide
autocomplete / comboboxWAI-ARIA APG Combobox
bundle analysisweb.dev bundle reduction
color contrastWebAIM contrast checker
compound componentKent C. Dodds blog
container queriesMDN Container Queries
Core Web Vitalsweb.dev/articles/vitals
dialog / modalMDN <dialog>, web.dev a11y dialog
docs / READMEMake a README, Diátaxis
dropdown / selectWAI-ARIA APG Combobox or Listbox
dynamic / lazyReact.dev lazy() and <Suspense>
focus managementTPGi focus management, MDN focus
forms (general)React.dev forms, Zod docs
Framer MotionFramer docs
:has()MDN :has()
hydration errorReact.dev hydration errors
INPweb.dev INP, Chrome DevTools Performance
keyboard navigationWAI-ARIA APG, Inclusive Components
LCPweb.dev LCP
light-dark()MDN light-dark()
listboxWAI-ARIA APG Listbox
memoizationReact.dev useMemo / Compiler docs
menuWAI-ARIA APG Menu and Menubar
metadata (Next)Next.js Metadata API
meta tags / OG / Twitter Cards / favicon / theme-colorSocial / SEO metadata section below
Next.js App RouterNext.js docs
optimistic UIReact.dev useOptimistic
popover attributeMDN Popover API
prefers-reduced-motionMDN media queries
:user-valid / :user-invalidMDN
Radix Primitivesradix-ui.com
react-hook-formreact-hook-form.com
React Ariareact-spectrum.adobe.com/react-aria
screen reader testingWebAIM, Deque University
Server Actions (Next)Next.js Server Actions
Server ComponentsNext.js Server Components
SuspenseReact.dev <Suspense>
Tailwindtailwindcss.com
testingTesting Library, Playwright
TypeScript + ReactReact.dev TypeScript, react-typescript-cheatsheet
useActionStateReact.dev
useDeferredValueReact.dev
useFormStatusReact.dev
useOptimisticReact.dev
useTransitionReact.dev
WCAGw3.org/WAI/standards-guidelines/wcag/
browser support (any feature)caniuse.com
package sizebundlephobia.com

React core

URLWhat's there
https://react.dev/reference/reactFull hook reference (canonical)
https://react.dev/blog/2024/12/05/react-19React 19 release notes
https://react.dev/reference/react/useActionStateuseActionState reference
https://react.dev/reference/react-dom/hooks/useFormStatususeFormStatus reference
https://react.dev/reference/react/useOptimisticuseOptimistic reference
https://react.dev/reference/react/useTransitionuseTransition reference
https://react.dev/reference/react/useDeferredValueuseDeferredValue reference
https://react.dev/reference/react/useuse() API for promises and context
https://react.dev/reference/react/Suspense<Suspense> reference
https://react.dev/learn/react-compilerReact Compiler
https://react.dev/learn/typescriptReact + TypeScript guide
https://react.dev/learn/you-might-not-need-an-effectThe canonical anti-patterns article (worth re-reading)
https://react.dev/learn/synchronizing-with-effectsWhen useEffect is actually correct

Accessibility

URLWhat'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/ARIAMDN 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

URLWhat's there
https://web.dev/articles/vitalsCore Web Vitals overview
https://web.dev/articles/lcpLCP deep dive
https://web.dev/articles/inpINP deep dive
https://web.dev/articles/clsCLS deep dive
https://web.dev/articles/optimize-lcpLCP optimization tactics
https://web.dev/articles/optimize-inpINP optimization tactics
https://web.dev/articles/optimize-clsCLS optimization tactics
https://developer.chrome.com/docs/devtools/performanceChrome DevTools Performance panel
https://developer.chrome.com/docs/lighthouseLighthouse docs
https://web.dev/articles/font-best-practicesFont loading best practices

HTML / CSS platform

URLWhat'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_APIPopover API
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioningCSS Anchor Positioning
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inertinert 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-darklight-dark()
https://developer.mozilla.org/en-US/docs/Web/CSS/color-mixcolor-mix()
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queriesContainer queries
https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validationNative form validation
https://developer.mozilla.org/en-US/docs/Web/API/FormDataFormData API
https://caniuse.com/Browser support lookup

Forms and validation

URLWhat'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-mutationsNext Server Actions

Component patterns and headless libraries

URLWhat's there
https://www.radix-ui.com/primitivesRadix 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-hooksCompound components essay
https://kentcdodds.com/blog/inversion-of-controlInversion of control / headless
https://www.joshwcomeau.com/Josh Comeau — great writing on React + CSS

Styling

URLWhat's there
https://tailwindcss.com/docsTailwind docs (v4 current)
https://tailwindcss.com/docs/installation/using-viteTailwind v4 with Vite
https://tailwindcss.com/docs/upgrade-guideTailwind v3 → v4 migration
https://cva.style/docsclass-variance-authority
https://github.com/lukeed/clsxclsx
https://github.com/dcastil/tailwind-mergetailwind-merge
https://ui.shadcn.com/shadcn/ui — component API patterns reference
https://every-layout.dev/Every Layout — primitive layout patterns

Testing

URLWhat's there
https://testing-library.com/docs/react-testing-library/introReact Testing Library
https://testing-library.com/docs/queries/aboutQueries cheat sheet
https://playwright.dev/docs/introPlaywright docs
https://playwright.dev/docs/accessibility-testingPlaywright + axe
https://playwright.dev/docs/locatorsPlaywright locators (getByRole, getByLabel, etc.)
https://playwright.dev/docs/api/class-pagePlaywright Page API
https://playwright.dev/docs/test-configurationPlaywright 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-classificationsTesting trophy (testing philosophy)

Social / SEO metadata

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

URLWhat'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/markupTwitter Cards markup reference
https://developer.x.com/en/docs/x-for-websites/cards/overview/markupTwitter 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/ManifestWeb 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-manifestweb.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/validatorTwitter card validator (X's renamed but URL still works)
https://realfavicongenerator.net/Audit your favicon coverage across platforms
https://github.com/audreyfeldroy/favicon-cheat-sheetThe minimum-viable favicon set (most projects need less than they think)

Next.js (when applicable)

URLWhat's there
https://nextjs.org/docs/appApp Router docs
https://nextjs.org/docs/app/building-your-application/rendering/server-componentsServer Components
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutationsServer Actions
https://nextjs.org/docs/app/building-your-application/optimizing/metadataMetadata API
https://nextjs.org/docs/app/api-reference/file-conventions/pageFile conventions
https://nextjs.org/docs/app/api-reference/components/imagenext/image
https://nextjs.org/docs/app/api-reference/components/fontnext/font
https://nextjs.org/docs/app/building-your-application/cachingCaching model

TypeScript

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

Documentation

URLWhat'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-githubGitHub Markdown reference

Tools and references

URLWhat'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:

  1. Look up the keyword in the index at the top of this file.
  2. Identify the canonical URL for that topic.
  3. Use WebFetch to retrieve current content.
  4. 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.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

Reviews can't be read right now.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free