react-human-made
Human Made React Standards
Component Style
- Use functional components with hooks for most cases
- Class components only when required by external libraries
- Keep components focused and single-purpose
- Extract complex logic into custom hooks
Semantic HTML
- Use semantic HTML5 elements (
<article>,<section>,<nav>, etc.) onClickhandlers only on focusable elements (buttons, links)- Ensure keyboard accessibility for interactive elements
- Use ARIA attributes when semantic HTML is insufficient
Props and State
More from humanmade/claude-code-standards
css-scss-human-made
Human Made CSS and SCSS standards. Apply when writing styles, reviewing CSS/SCSS, or working on theme styling. Covers BEM naming, CSS custom properties, theme.json integration, and Stylelint configuration.
20php-human-made
Human Made PHP coding standards for WordPress development. Apply when writing PHP, reviewing PHP code, or working on WordPress plugins and themes. Covers PHPCS HM-Minimum ruleset, namespacing conventions, bootstrap patterns, type hints, and file organization.
1run-linters
Discover and run code linters for the current project. Use when asked to lint code, check code quality, run static analysis, or after completing a feature. Detects PHPCS, PHPStan, ESLint, and Stylelint configurations and runs appropriate checks.
1javascript-human-made
Human Made JavaScript coding standards. Apply when writing JavaScript or TypeScript, reviewing JS code, or working on frontend features. Covers ES6+ conventions, modern patterns, and ESLint configuration.
1hm-coding-philosophy
Human Made engineering principles and code quality standards. Apply when writing code, reviewing code, planning implementations, or discussing architecture. Covers code quality priorities, simplicity over complexity, and avoiding over-engineering.
1