react-development
Enforces React-specific patterns: functional components with hooks, TypeScript prop interfaces, CSS Modules co-location, React Testing Library behavioral tests. Use when creating React components, writing custom hooks, structuring component folders, applying RTL test patterns, or wiring TypeScript prop types. Trigger terms: React, .tsx, component, hook, RTL, jsx, useState, useEffect, prop interface
git clone --depth 1 https://github.com/monkilabs/opencastle /tmp/react-development && cp -r /tmp/react-development/src/orchestrator/skills/react-development ~/.claude/skills/react-developmentSKILL.md
# React Development Standards
<!-- Concrete actions moved into description and workflows; trigger terms are in frontmatter -->
## New Component Workflow
1. **Create file** — `ComponentName.tsx` in feature folder; co-locate `ComponentName.module.scss`, `ComponentName.test.tsx`
2. **Define interface** — export `ComponentNameProps` with TypeScript; destructure in function signature
3. **Implement** — functional component with hooks; use CSS Modules for styling
4. **Test** — RTL behavioral tests; cover render, interaction, edge cases, accessibility
5. **Verify** — lint + type-check + test pass; visually confirm in browser if UI
## Architecture & Components (concise)
- Functional components with hooks. Follow domain/feature folder structure; co-locate tests/styles with components.
- PascalCase names; destructure props; use TypeScript interfaces for props.
```tsx
interface UserCardProps { name: string; role: string }
export function UserCard({ name, role }: UserCardProps) {
return (
<div data-testid="user-card">
<h3>{name}</h3>
<span>{role}</span>
</div>
);
}
```
## TypeScript
- Use interfaces for props, shared types; keep strict mode enabled in `tsconfig.json`. Generic constraints: `<T extends Record<string, unknown>>`. Discriminated unions for variant props. Avoid `as` casts.
## Styling
- **CSS Modules** (`.module.scss`) co-located with components.
- Sass for advanced features; variables/mixins from shared libraries.
- CSS custom properties for theming.
<!-- Performance guidance trimmed; follow project-specific conventions and benchmark when needed. -->
## Testing
- React Testing Library (behavior, not implementation); Jest runner.
- Co-locate tests next to components; mock external deps, API calls.
- Test accessibility, keyboard navigation; verify component public surface via unit tests.
```tsx
import { render, screen } from '@testing-library/react';
import { UserCard } from './UserCard';
test('renders user info', () => {
render(<UserCard name="Alice" role="Admin" />);
expect(screen.getByText('Alice')).toBeInTheDocument();
expect(screen.getByTestId('user-card')).toBeInTheDocument();
});
```
## Verification commands + error recovery
Run these as part of your PR validation pipeline or locally:
```bash
pnpm lint # fixable issues: pnpm lint --fix
pnpm typecheck # run `pnpm tsc --noEmit` if alias not present
pnpm test # rerun failing tests with `pnpm test -- -t <name>`
pnpm build # ensure production build succeeds
```
If `lint` fails: run `pnpm lint --fix`; re-run. If `typecheck` fails: inspect reported files; add missing types. If tests fail: run with `--runInBand` to collect stack traces; reproduce locally.
## Security
- Sanitize user-supplied HTML before rendering (e.g. `dompurify`); never trust client validation alone — validate server-side. See **api-patterns** skill for server validation patterns.Creates pages/layouts, defines content collections, configures hydration directives, and wires integrations. Use when adding or modifying Astro pages, layouts, components, or content collections. Trigger terms: Astro, content collection, client:load, client:visible, astro:content
Drive real browsers via Chrome DevTools MCP: navigate pages, capture snapshots, run responsive checks, and collect console/perf traces. Use when the user mentions: 'validate UI change in Chrome', 'capture a screenshot', 'run responsive checks', or 'collect console logs'. Trigger terms: browser testing, DevTools, console logs, screenshot, responsive testing
Creates and deploys Cloudflare Workers, configures wrangler.toml bindings, sets up KV/D1/R2 storage and Durable Objects, manages Pages deployments, and implements edge function patterns. Use when building or deploying Cloudflare Workers, setting up Pages, working with KV/D1/R2 storage, configuring wrangler.toml, or deploying edge applications.
Creates Contentful content types, queries entries via GraphQL/REST, runs CLI migrations, and manages assets and locales. Use when building or modifying Contentful content models, writing queries, or migrating content.
Convex reactive database patterns, schema design, real-time queries, mutations, actions, authentication, migrations, performance optimization, and component creation. Use when designing Convex schemas, writing queries/mutations, managing the Convex backend, setting up auth, migrating data, optimizing performance, or building Convex components.
Deploys applications, databases, and services on self-hosted Coolify instances, manages environments and env vars, runs infrastructure diagnostics, and performs batch operations. Use when deploying apps to Coolify, managing Coolify servers, debugging deployment issues, setting up databases, or managing Coolify infrastructure.
Writes Cypress E2E/component tests, configures `cy.intercept()` and `cy.session()`, authors custom commands, and wires CI artifacts. Use when creating E2E specs, component tests, or CI test pipelines. Trigger terms: cypress, e2e, component test, cy.intercept, cy.session
Drizzle ORM schema definition, type-safe queries, relational queries, CRUD operations, transactions, migrations with drizzle-kit, and database setup for PostgreSQL, MySQL, and SQLite. Use when defining database schemas, writing queries or joins, managing migrations, setting up a new Drizzle project, or working with drizzle-kit.