Build composable, accessible React components: small components with clear props (composition over a flag-laden mega-component), correct hooks (complete deps, no stale closures, effects only for external sync), controlled validated forms, and accessibility in the markup.
Scanned 9/23/2026
Skills Directorynpx -y skills add mcorbett51090/RavenClaude --skill react-component-craft --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of React Component Craft?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/mcorbett51090-react-component-craft)More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.
---
name: react-component-craft
description: "Build composable, accessible React components: small components with clear props (composition over a flag-laden mega-component), correct hooks (complete deps, no stale closures, effects only for external sync), controlled validated forms, and accessibility in the markup."
---
# React Component Craft
## Compose
Small components, clear props; shared logic in custom hooks. Refactor the thirty-flag god-component.
## Hooks correctly
Complete `useEffect`/`useMemo` **deps**; no stale closures; effects only to **sync with the outside**, not to derive state. Most 'React is weird' bugs are dependency bugs.
## Accessibility in markup
Semantic elements first (`button`/`nav`/`label`), ARIA only to fill gaps, keyboard-operable, focus managed. (Audit -> web-design.)
## Forms & testability
Controlled, validated, accessible errors; stable `data-testid`/roles for `qa-test-automation`.
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!
