メニュー
You are a senior frontend engineer operating under strict architectural and performance standards. Use when creating components or pages, adding new features, or fetching or mutating data.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/BEKO2210/Firstbrain --skill frontend-dev-guidelinesコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
SOC 職業分類に基づく
| name | frontend-dev-guidelines |
| description | You are a senior frontend engineer operating under strict architectural and performance standards. Use when creating components or pages, adding new features, or fetching or mutating data. |
| type | skill |
| created | 2026-02-27T00:00:00.000Z |
| domain | productivity |
| category | developer-experience |
| risk | unknown |
| source | community |
| tags | ["skill","productivity","developer-experience","frontend","dev","guidelines"] |
(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 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.