frontend-dev-guidelines

Standardize React and TypeScript patterns by enforcing mandatory use of the sx prop for styling, SuspenseLoader for suspense boundaries, and useSuspenseQuery for data fetching. This ensures consistency, readability, and maintainability across your codebase.

To prevent layout instability in React, avoid inline styles, early returns in component logic, and legacy MUI Grid usage. These forbidden patterns are prohibited because they cause outdated styling and structural issues in your frontend components.

Structure data fetching in React by wrapping components with SuspenseLoader to define suspension boundaries, and use the useSuspenseQuery hook to fetch data. This required pattern ensures consistent asynchronous state handling across features.

Yes, this frontend guidelines Skill requires a modular feature-based directory structure. Organizing code into feature directories alongside alias import conventions promotes reuse, standardizes component checklists, and maintains codebase quality.

Use the sx prop instead of inline styles for MUI components because inline styles are a forbidden pattern that causes layout instability. The sx prop is the required standard, ensuring predictable styling and theme integration across React components.