// Component creation checklist and ai-client-specific patterns for React .tsx files in opentrons-ai-client/ and protocol-designer/. Use when creating new React components in these packages.
| name | react-component-creation |
| description | Component creation checklist and ai-client-specific patterns for React .tsx files in opentrons-ai-client/ and protocol-designer/. Use when creating new React components in these packages. |
General TypeScript, React, styling, testing, and import conventions are in the opentrons-typescript skill. PD-specific architecture is in the protocol-designer skill. CSS Modules details are in the css-modules skill. This file covers the component creation workflow and opentrons-ai-client specifics.
components/src/atoms/, components/src/molecules/, components/src/organisms/ (shared library)<project>/src/components/atoms/, molecules/, organisms/ (project-local)ComponentName/
├── index.tsx
├── componentname.module.css
└── __tests__/
└── ComponentName.test.tsx
The ai-client uses /ai-client/ as its path alias (mapped to opentrons-ai-client/src/):
import { AttachedFileItem } from '/ai-client/atoms/AttachedFileItem'
import type { ChatData } from '/ai-client/resources/types'
Use renderWithProviders from the ai-client testing utils:
import { renderWithProviders } from '/ai-client/__testing-utils__'
pnpm vitest opentrons-ai-client/src/path/to/file
pnpm vitest opentrons-ai-client/src/folder/
pnpm stylelint opentrons-ai-client/src/path/to/file.module.css
CSS Modules conventions, Stylelint rules, design tokens (spacing, colors, typography, border-radius), and patterns for the Opentrons monorepo. Use when working with .module.css files or styling React components in app/, components/, protocol-visualization/, protocol-designer/, or other JS packages.
Conventions for the analyses snapshot testing framework in analyses-snapshot-testing/. Use when working with protocol analysis snapshots, adding protocols, updating snapshots, or running snapshot tests.
Vite demo and Playwright + Applitools tests for packed @opentrons JS packages in js-package-testing/. Covers components, shared-data, step-generation, and protocol-visualization. Use for integration testing, package linking, or visual testing.
TypeScript conventions, React patterns, testing, styling, and import rules for the Opentrons monorepo JS/TS packages. Use when working with TypeScript or React files in app/, components/, shared-data/, step-generation/, protocol-designer/, protocol-visualization/, opentrons-ai-client/, or other JS/TS packages.
Protocol Designer (PD) application architecture, Redux slices, step/timeline system, domain concepts, and dev workflow. Use when working with files in protocol-designer/ or discussing PD features, steps, timelines, or protocol design.
Conventions for the opentrons-ai-client React/TypeScript frontend — project structure, API integration, state management (Jotai), feature flags, types, and testing. Use when working with files in opentrons-ai-client/ or discussing the AI client application.