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.
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 + PerformanSubscribers only
The full skill, its 11 bundled files and every download is included with every paid Complete AI plan.
Details
| Source | community |
|---|---|
| License | — |
| Risk label | critical ("critical" means the skill may run commands or touch files — read before use) |
| Files | SKILL.md, resources/common-patterns.md, resources/complete-examples.md, resources/component-patterns.md, resources/data-fetching.md, resources/file-organization.md, resources/loading-and-error-states.md, resources/performance.md, resources/routing-guide.md, resources/styling-guide.md, resources/typescript-standards.md |
| Added | 2026-02-27 |
Related skills
anti-ui-slop
Stop coding agents from shipping generic UI. Extend the product's design system, use UIZZE evidence only when useful, cover required states, and inspect the rendered result.
astro
Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.
chat-widget
Build a real-time support chat system with a floating widget for users and an admin dashboard for support staff. Use when the user wants live chat, customer support chat, real-time messaging, or in-app support.
chrome-extension-developer
Expert in building Chrome Extensions using Manifest V3. Covers background scripts, service workers, content scripts, and cross-context communication.
design-it
Routes frontend design tasks to 48 specific UI styles. Triggers for websites, app screens, or UI components requesting a specific aesthetic.
design-taste-frontend
Use when building high-agency frontend interfaces with strict design taste, calibrated color, responsive layout, and motion rules.