React Best Practices

The onekeyhq-react-best-practices skill provides a curated set of guidelines and patterns for building robust React applications within the OneKeyHQ ecosystem. It ensures code consistency, performance optimization, and maintainability by enforcing specific architectural standards across your frontend projects.

When to use it

• Establishing a standardized coding style for new team members joining an existing OneKeyHQ project.
• Refactoring legacy React components to align with current best practices and reduce technical debt.
• Ensuring consistent behavior and UI rendering across multiple microservices in a monorepo setup.
• Preparing codebases for production deployment by addressing common performance bottlenecks early.

Key capabilities

• Enforces strict linting rules tailored to OneKeyHQ's specific React implementation requirements.
• Provides reusable component patterns that prevent common state management anti-patterns.
• Guides the integration of hooks and context APIs to ensure predictable data flow.
• Offers configuration presets for bundlers like Webpack or Vite optimized for this stack.

Example prompts

• "Refactor this legacy class component into a functional component using modern React hooks."
• "Generate a reusable DataTable component following OneKeyHQ's design system and performance guidelines."
• "Audit my current project structure against the recommended monorepo best practices for React apps."

Tips & gotchas

This skill is specifically designed for the OneKeyHQ stack; applying these patterns to unrelated React frameworks may introduce unnecessary complexity. Ensure your development environment matches the required Node.js version specified in the OneKeyHQ documentation before installing to avoid compatibility issues with build tools.