frontend-dev-guidelines by sickn33/antigravity-awesome-skills
npx skills add https://github.com/sickn33/antigravity-awesome-skills --skill frontend-dev-guidelines(React · TypeScript · Suspense优先 · 生产级)
你是一名高级前端工程师,需遵循严格的架构和性能标准。
你的目标是构建可扩展、可预测且可维护的 React 应用程序,使用:
此技能定义了前端代码必须如何编写,而不仅仅是它可以如何编写。
在实现组件、页面或功能之前,请评估可行性。
| 维度 | 问题 |
|---|---|
| 架构契合度 | 是否符合基于功能的结构和 Suspense 模型? |
| 复杂度负载 | 状态、数据和交互逻辑有多复杂? |
| 性能风险 | 是否会引入渲染、打包或 CLS 风险? |
| 可复用性 | 能否无需修改即可复用? |
| 维护成本 | 6个月后理解和维护此代码的难度如何? |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
FFCI = (Architectural Fit + Reusability + Performance) − (Complexity + Maintenance Cost)
范围: -5 → +15
| FFCI | 含义 | 行动 |
|---|---|---|
| 10–15 | 优秀 | 继续执行 |
| 6–9 | 可接受 | 谨慎执行 |
| 3–5 | 有风险 | 简化或拆分 |
| ≤ 2 | 差 | 重新设计 |
useSuspenseQuery 是主要的数据获取钩子isLoading 条件判断features/components/anyimport type在以下情况下使用 frontend-dev-guidelines:
React.FC<Props> 并定义明确的 props 接口<SuspenseLoader> 中useSuspenseQuery 获取数据useCallback 中useMuiSnackbar 提供用户反馈features/{feature-name}/api/, components/, hooks/, helpers/, types/api/ 中index.ts 进行公共导出routes/ 下定义路由| 别名 | 路径 |
|---|---|
@/ | src/ |
~types | src/types |
~components | src/components |
~features | src/features |
必须一致地使用别名。不鼓励使用超过一级的相对导入。
useMemo)useCallback)const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
始终包裹在 <SuspenseLoader> 中。
useSuspenseQuery❌ isLoading ❌ 手动加载指示器 ❌ 在组件内部编写获取逻辑 ❌ 不通过功能 API 层直接调用 API
/api/ 前缀仅使用基于文件夹的路由
懒加载路由组件
通过加载器提供面包屑元数据
export const Route = createFileRoute('/my-route/')({ component: MyPage, loader: () => ({ crumb: 'My Route' }), });
<100 行:内联 sx>100 行:{Component}.styles.ts<Grid size={{ xs: 12, md: 6 }} /> // ✅
<Grid xs={12} md={6} /> // ❌
访问主题必须始终是类型安全的。
❌ 永不提前返回加载器 ✅ 始终依赖 Suspense 边界
useMuiSnackbaruseMemo 用于昂贵的派生计算useCallback 用于传递的处理器React.memo 用于重型纯组件性能回退是缺陷。
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;
❌ 提前返回加载状态 ❌ 在 components/ 中编写功能逻辑 ❌ 通过属性传递共享状态而非使用钩子 ❌ 内联 API 调用 ❌ 未类型化的响应 ❌ 一个组件承担多个职责
在最终确定代码之前:
状态: 稳定、固执己见且可强制执行 预期用途: 具有长期维护前景的生产级 React 代码库
此技能适用于执行概述中描述的工作流程或操作。
每周安装
641
仓库
GitHub 星标
27.1K
首次出现
2026年1月19日
安全审计
安装于
opencode515
gemini-cli509
codex460
github-copilot428
cursor428
claude-code410
(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 routesFolder-based routing only
Lazy load route components
Breadcrumb metadata via loaders
export 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.
Weekly Installs
641
Repository
GitHub Stars
27.1K
First Seen
Jan 19, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode515
gemini-cli509
codex460
github-copilot428
cursor428
claude-code410
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
106,200 周安装