Opinionated frontend development standards for modern React + TypeScript applications. Covers Suspense-first data fetching, lazy loading, feature-based architecture, MUI v7 styling, TanStack Router, performance optimization, and strict TypeScript practices.
npxskills add sickn33/antigravity-awesome-skills--skill frontend-dev-guidelinesLoading…
(React · TypeScript · Suspense-First · Production-Grade)
You are a senior frontend engineer operating under strict architectural and performance standards.
Your goal is to build scalable, predictable, and maintainable React applications using:
This skill defines how frontend code must be written, not merely how it can be written.
Before implementing a component, page, or feature, assess feasibility.
| Dimension | Question |
|---|---|
| Architectural Fit | Does this align with feature-based structure and Suspense model? |
| Complexity Load | How complex is state, data, and interaction logic? |
| Performance Risk | Does it introduce rendering, bundle, or CLS risk? |
| Reusability | Can this be reused without modification? |
| Maintenance Cost | How hard will this be to reason about in 6 months? |
FFCI = (Architectural Fit + Reusability + Performance) − (Complexity + Maintenance Cost)
Range: -5 → +15
| FFCI | Meaning | Action |
|---|---|---|
| 10–15 | Excellent | Proceed |
| 6–9 | Acceptable | Proceed with care |
| 3–5 | Risky | Simplify or split |
| ≤ 2 | Poor | Redesign |
useSuspenseQuery is the primary data-fetching hookisLoading conditionalsfeatures/components/anyimport type alwaysUse frontend-dev-guidelines when:
React.FC<Props> with explicit props interface<SuspenseLoader>useSuspenseQuery for datauseCallbackuseMuiSnackbar for feedbackfeatures/{feature-name}/api/, components/, hooks/, helpers/, types/api/index.tsroutes/| Alias | Path |
|---|---|
@/ | src/ |
~types | src/types |
~components | src/components |
~features | src/features |
Aliases must be used consistently. Relative imports beyond one level are discouraged.
useMemo)useCallback)const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
Always wrapped in <SuspenseLoader>.
useSuspenseQuery❌ isLoading
❌ manual spinners
❌ fetch logic inside components
❌ API calls without feature API layer
/api/ prefix in routesexport const Route = createFileRoute('/my-route/')({
component: MyPage,
loader: () => ({ crumb: 'My Route' }),
});
<100 lines: inline sx>100 lines: {Component}.styles.ts<Grid size={{ xs: 12, md: 6 }} /> // ✅
<Grid xs={12} md={6} /> // ❌
Theme access must always be type-safe.
❌ Never return early loaders ✅ Always rely on Suspense boundaries
useMuiSnackbar onlyuseMemo for expensive derivationsuseCallback for passed handlersReact.memo for heavy pure componentsPerformance regressions are bugs.
anysrc/
features/
my-feature/
api/
components/
hooks/
helpers/
types/
index.ts
components/
SuspenseLoader/
CustomAppBar/
routes/
my-route/
index.tsx
import React, { useState, useCallback } from 'react';
import { Box, Paper } from '@mui/material';
import { useSuspenseQuery } from '@tanstack/react-query';
import { featureApi } from '../api/featureApi';
import type { FeatureData } from '~types/feature';
interface MyComponentProps {
id: number;
onAction?: () => void;
}
export const MyComponent: React.FC<MyComponentProps> = ({ id, onAction }) => {
const [state, setState] = useState('');
const { data } = useSuspenseQuery<FeatureData>({
queryKey: ['feature', id],
queryFn: () => featureApi.getFeature(id),
});
const handleAction = useCallback(() => {
setState('updated');
onAction?.();
}, [onAction]);
return (
<Box sx={{ p: 2 }}>
<Paper sx={{ p: 3 }}>
{/* Content */}
</Paper>
</Box>
);
};
export default MyComponent;
❌ Early loading returns
❌ Feature logic in components/
❌ Shared state via prop drilling instead of hooks
❌ Inline API calls
❌ Untyped responses
❌ Multiple responsibilities in one component
Before finalizing code:
Status: Stable, opinionated, and enforceable Intended Use: Production React codebases with long-term maintenance horizons
This skill is applicable to execute the workflow or actions described in the overview.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).