frontend-dev-guidelines

Standardize React/TypeScript components with sx styling, SuspenseLoader, and useSuspenseQuery.

1|3|Updated Feb 28, 2026

Search Tags:#typescript #suspense #frontend #react #patterns #guidelines #sx-prop

Ready to run

npx skills add https://github.com/vobbilis/aigile --skill frontend-dev-guidelines-vobbilis

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/vobbilis/aigile/tree/main/.github/skills/frontend-dev-guidelines
Command: npx skills add https://github.com/vobbilis/aigile --skill frontend-dev-guidelines-vobbilis

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend development guidelines standardize the approach to building React/TypeScript UI, improving consistency, readability, and maintainability across projects.

Core Features & Use Cases

FORBIDDEN PATTERNS (Never Generate These): inline styles, early returns, and legacy MUI Grid usage are prohibited to prevent layout instability and outdated styling.
REQUIRED PATTERNS (Always Use These): mandates use of the sx prop for styling, Suspension boundaries via SuspenseLoader, data fetching with useSuspenseQuery, and a feature-directory structure to organize code.
CHECKLISTS & GUIDELINES: component and feature checklists, alias import conventions, and common patterns to promote reuse and standardization.

Quick Start

Review these frontend development guidelines before creating any React/TypeScript component to ensure full compliance.

Frequently Asked Questions about frontend-dev-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I standardize React and TypeScript component patterns across a project?▼

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.

What React styling approaches should I avoid to prevent layout instability?▼

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.

How do I structure data fetching in React with SuspenseLoader and useSuspenseQuery?▼

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.

Does this frontend guidelines Skill require a specific directory structure?▼

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.

Why should I use the sx prop instead of inline styles for MUI components?▼

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.