skills.rest
MaiconGambini
MaiconGambiniCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-dev-guidelines

Enforces opinionated React and TypeScript standards for Suspense-first, feature-based frontend development.

Updated Jul 29, 2026
Search Tags:#typescript#suspense#frontend architecture#react#code standards#mui#tanstack query
One-click install
npx skills add https://github.com/MaiconGambini/opencode-harness-guide --skill frontend-dev-guidelines-maicongambini
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/MaiconGambini/opencode-harness-guide/tree/main/skills/frontend-dev-guidelines
Command: npx skills add https://github.com/MaiconGambini/opencode-harness-guide --skill frontend-dev-guidelines-maicongambini

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Frontend codebases often drift into inconsistent patterns: scattered API calls, loading spinners everywhere, prop drilling, and untyped data. This Skill enforces a single, strict architectural doctrine for React + TypeScript applications so every component, feature, and route follows the same production-grade conventions. ## Core Features & Use Cases - Suspense-First Data Fetching: Mandates useSuspenseQuery with TanStack Query, forbidding isLoading conditionals and early-return spinners to prevent layout shift. - Feature-Based Architecture: Defines a canonical features/{name}/ structure with api/, components/, hooks/, helpers/, and types/ subdirectories, plus import aliases (@/, ~types, ~components, ~features). - FFCI Feasibility Scoring: Provides a Frontend Feasibility & Complexity Index to evaluate whether a component or feature should be built, split, or redesigned before implementation. - Use Case: When asked to build a new user profile page, the Skill produces a lazy-loaded route, a feature folder with an isolated API layer, a React.FC component using useSuspenseQuery, MUI v7 styling, and snackbar-based error feedback. ## Quick Start Ask the agent to create a new React feature or component following the frontend-dev-guidelines standards, for example a lazy-loaded user list page with Suspense data fetching.

Frequently Asked Questions about frontend-dev-guidelines

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

FAQPage Schema
How do I fetch data in React without isLoading checks?▼

Use useSuspenseQuery from TanStack Query inside a component wrapped in a Suspense boundary. The data is always defined after the hook resolves, so no isLoading conditional or early-return spinner is needed.

How should I organize a React feature folder structure?▼

Create a features/{name}/ directory with api/, components/, hooks/, helpers/, and types/ subdirectories, plus an index.ts for public exports. Keep domain logic in features/ and only truly reusable primitives in components/.

What is the difference between useSuspenseQuery and useQuery?▼

useSuspenseQuery integrates with React Suspense boundaries so loading is handled declaratively and data is always defined. useQuery returns possibly undefined data and requires manual isLoading checks, which this standard reserves for legacy code only.

Does MUI v7 Grid still use the xs and md props?▼

No. MUI v7 requires the size prop syntax, such as <Grid size={{ xs: 12, md: 6 }} />. The older <Grid xs={12} md={6} /> pattern is rejected under these guidelines.

When should I lazy load a React component?▼

Lazy load route components, feature entry points, and heavy UI like data grids, charts, editors, and large dialogs using React.lazy. Always wrap lazy components in a SuspenseLoader boundary to prevent layout shift.

Why avoid early returns for loading states in React?▼

Early-return spinners cause cumulative layout shift, jarring UX, and lost scroll position when content loads. Suspense boundaries or overlay loaders reserve the layout so the page structure stays stable.

Related Skills

Explore More Software Engineering Skills→
mrgooniemrgoonie
2.2k

frontend-dev-guidelines

Implements React and TypeScript frontend patterns with Suspense, TanStack Query, and MUI v7.

Community
Intermediate
allenlin90allenlin90
1

solid-principles

Apply SOLID design principles to React and NestJS code during generation, review, and refactoring.

Community
Advanced
stars-endstars-end

context-api-contracts

Analyze frontend-backend API contracts, routes, and type definitions.

Official
Basic
SufficientDaikonSufficientDaikon
8

server-component-patterns

Guide React Server Component architecture design in Next.js App Router applications.

Community
Advanced