11-frontend-react

Frontend React Rules

These rules apply when working on frontend code in sdk/.

Technology Stack

• Framework: React 18
• Desktop: Electron
• UI Library: ShadCN UI components
• Styling: Tailwind CSS
• Type Safety: TypeScript (strict mode)

Component Patterns

• Use functional components with hooks (no class components)
• Use TypeScript interfaces for all props
• Follow ShadCN UI component patterns for consistency
• Use Tailwind utility classes for styling (avoid custom CSS)

Authenticated Pages

For pages requiring authentication, see patterns_library/ui/authenticated-page.md.

Forms

For forms with validation, see patterns_library/ui/form-with-validation.md (React Hook Form + Zod).

Data Tables

For paginated data tables, see patterns_library/ui/data-table.md.

State Management

• Use React hooks for local state
• Use context for shared state within feature boundaries
• Avoid prop drilling beyond 2 levels

API Integration

• All API calls must handle loading, error, and success states
• Use proper error boundaries so analytics/API failures do not crash the app
• Handle authentication token refresh transparently

Accessibility

• All interactive elements must be keyboard-navigable
• Use semantic HTML elements
• Include ARIA labels where needed
• Follow ShadCN UI's built-in accessibility patterns

Validation Commands

# TypeScript validation
{{TYPE_CHECK_COMMAND}}

# Linting
{{LINT_COMMAND}}

# Build verification
{{BUILD_COMMAND}}

Key References

• See patterns_library/ui/ for UI component patterns
• See docs/security/SECURITY_FIRST_ARCHITECTURE.md for client-side security
• See CONTRIBUTING.md for full workflow details