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.
Profile →npx skills add sickn33/agentic-awesome-skills --skill frontend-dev-guidelines --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 = (Ar
- 1. Frontend Feasibility & Complexity Index (FFCI)
- FFCI Dimensions (1–5)
- Score Formula
- Interpretation
- 2. Core Architectural Doctrine (Non-Negotiable)
- 1. Suspense Is the Default
- 2. Lazy Load Anything Heavy
- 3. Feature-Based Organization
- 4. TypeScript Is Strict
- When to Use
- 3. Quick Start Checklists
- New Component Checklist
- New Feature Checklist
- 4. Import Aliases (Required)
What does the frontend-dev-guidelines skill do?
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.
How do I install it?
Run `npx skills add sickn33/agentic-awesome-skills --skill frontend-dev-guidelines --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From sickn33/agentic-awesome-skills, a repository with 44,414 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.