react-component-creation
OfficialGuides consistent React component creation.
AuthorOpentrons
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This checklist guides engineers to create robust React components in opentrons-ai-client and protocol-designer, ensuring consistent structure, naming, testing, and styling across projects.
Core Features & Use Cases
- Establishes a standard component file structure (index.tsx, componentname.module.css, tests/ComponentName.test.tsx) for new React components.
- Enforces opentrons-ai-client specific path aliases and testing utilities, enabling predictable imports and test execution.
- Provides guidance for CSS Modules and project-local component organization, reducing integration friction and code duplication.
Quick Start
Create a new component named ComponentName following the specified structure and conventions, then wire it into the project for immediate use.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: react-component-creation Download link: https://github.com/Opentrons/opentrons/archive/main.zip#react-component-creation Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.