Skip to main content Inicio Creadores beko2210 firstbrain frontend-dev-guidelines
frontend-dev-guidelines 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.
Ir a la instalación Skills Marketplace Descubre y explora habilidades de IA creadas por la comunidad.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Mostrar detalles del prompt Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/BEKO2210/Firstbrain --skill frontend-dev-guidelinesEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Descargar Zip Descargando... Ocupaciones relacionadas SOC
Basado en la clasificación ocupacional SOC
Explorador de archivos
11 archivos 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"]
Frontend Development 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:
Suspense-first data fetching
Feature-based code organization
Strict TypeScript discipline
Performance-safe defaults
This skill defines how frontend code must be written , not merely how it can be written.
1. Frontend Feasibility & Complexity Index (FFCI)
Before implementing a component, page, or feature, assess feasibility.
FFCI Dimensions (1–5)
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?
Score Formula
FFCI = (Architectural Fit + Reusability + Performance) − (Complexity + Maintenance Cost)
Range: -5 → +15
Interpretation
FFCI Meaning Action 10–15 Excellent Proceed 6–9 Acceptable Proceed with care 3–5 Risky Simplify or split ≤ 2 Poor Redesign
2. Core Architectural Doctrine (Non-Negotiable)
1. Suspense Is the Default
useSuspenseQuery is the
primary
No isLoading conditionals
No early-return spinners
2. Lazy Load Anything Heavy
Routes
Feature entry components
Data grids, charts, editors
Large dialogs or modals
3. Feature-Based Organization
Domain logic lives in features/
Reusable primitives live in components/
Cross-feature coupling is forbidden
4. TypeScript Is Strict
No any
Explicit return types
import type alwaysTypes are first-class design artifacts
When to Use Use frontend-dev-guidelines when:
Creating components or pages
Adding new features
Fetching or mutating data
Setting up routing
Styling with MUI
Addressing performance issues
Reviewing or refactoring frontend code
4. Quick Start Checklists
New Component Checklist
New Feature Checklist
5. Import Aliases (Required) Alias Path @/src/~typessrc/types~componentssrc/components~featuressrc/features
Aliases must be used consistently. Relative imports beyond one level are discouraged.
6. Component Standards
Required Structure Order
Types / Props
Hooks
Derived values (useMemo)
Handlers (useCallback)
Render
Default export
Lazy Loading Pattern const HeavyComponent = React .lazy (() => import ('./HeavyComponent' ));
Always wrapped in <SuspenseLoader>.
7. Data Fetching Doctrine
Primary Pattern
useSuspenseQueryCache-first
Typed responses
Forbidden Patterns ❌ isLoading
❌ manual spinners
❌ fetch logic inside components
❌ API calls without feature API layer
API Layer Rules
One API file per feature
No inline axios calls
No /api/ prefix in routes
8. Routing Standards (TanStack Router)
Folder-based routing only
Lazy load route components
Breadcrumb metadata via loaders
export const Route = createFileRoute ('/my-route/' )({
component : MyPage ,
loader : () => ({ crumb : 'My Route' }),
});
9. Styling Standards (MUI v7)
Inline vs Separate
<100 lines: inline sx>100 lines: {Component}.styles.ts
Grid Syntax (v7 Only) <Grid size={{ xs : 12 , md : 6 }} />
<Grid xs ={12} md ={6} /> Theme access must always be type-safe.
10. Loading & Error Handling
Absolute Rule ❌ Never return early loaders
✅ Always rely on Suspense boundaries
User Feedback
useMuiSnackbar onlyNo third-party toast libraries
11. Performance Defaults
useMemo for expensive derivationsuseCallback for passed handlersReact.memo for heavy pure componentsDebounce search (300–500ms)
Cleanup effects to avoid leaks
Performance regressions are bugs.
12. TypeScript Standards
Strict mode enabled
No implicit any
Explicit return types
JSDoc on public interfaces
Types colocated with feature
13. Canonical File Structure src/
features/
my-feature/
api/
components/
hooks/
helpers/
types/
index.ts
components/
SuspenseLoader/
CustomAppBar/
routes/
my-route/
index.tsx
14. Canonical Component Template 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 ;
15. Anti-Patterns (Immediate Rejection) ❌ 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
16. Integration With Other Skills
frontend-design → Visual systems & aestheticspage-cro → Layout hierarchy & conversion logicanalytics-tracking → Event instrumentationbackend-dev-guidelines → API contract alignmenterror-tracking → Runtime observability
17. Operator Validation Checklist
18. Skill Status Status: Stable, opinionated, and enforceable
Intended Use: Production React codebases with long-term maintenance horizons
When to Use This skill is applicable to execute the workflow or actions described in the overview.
Connections
Domain: [[Produktivitaet & Werkzeuge]]Kategorie: [[Developer Experience]]Navigation: [[Skills Uebersicht]], [[Home]] 