# Build Production React Frontends

Frontend teams often produce inconsistent architecture, loading behavior, and performance practices. This skill applies opinionated React and TypeScript standards with checklists and examples.

## Install

```bash
npx skillstore add sickn33/frontend-dev-guidelines
```

## Metadata

- Status: approved
- Slug: sickn33-frontend-dev-guidelines
- Skillstore revision: r2
- Version status: missing
- Tree hash: 835624b8a9a85235942295e98cb7e9df090cdad70d757ee8824097a0bd038366
- Author: sickn33
- GitHub username: sickn33
- License: MIT
- Repository: https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/frontend-dev-guidelines
- Ref: 88a8e9a07f4c54ab105c1c41b6267c287146b07b
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: scripts, external\_commands, filesystem, network
- Quality score: 78
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/sickn33-frontend-dev-guidelines
- Manifest: https://skillstore.pages.dev/api/skills/sickn33-frontend-dev-guidelines/manifest

## Capabilities

- Assesses proposed frontend work with a five-dimension feasibility and complexity index.
- Defines feature-based folders, import aliases, naming rules, and public export patterns.
- Guides typed React component structure, responsibilities, lazy loading, and Suspense boundaries.
- Specifies query keys, typed API layers, cache-first reads, mutations, invalidation, and error handling.
- Covers TanStack Router routes, lazy components, parameters, navigation, layouts, and breadcrumb loaders.
- Provides MUI v7 styling, strict TypeScript, memoization, debouncing, and effect cleanup guidance.

## Use Cases

- Create a React Feature: Create a React feature with consistent folders, typed APIs, Suspense boundaries, routes, and MUI styling.
- Standardize Code Reviews: Review pull requests against a shared checklist for architecture, typing, loading states, styling, and performance.
- Modernize Legacy Screens: Refactor legacy loading, data fetching, and component organization toward a Suspense-first, feature-based design.

## Prompt Templates

### Create a Typed Component

```
Create a typed React component for [purpose]. Follow the component structure, loading, styling, and feedback rules in these guidelines.
```

### Add a Feature Module

```
Add a feature named [name] using feature-based folders, a typed API layer, Suspense queries, lazy loading, and public exports.
```

### Review Frontend Code

```
Review [files] against the frontend guidelines. List architecture, TypeScript, loading, styling, and performance violations, then propose prioritized fixes.
```

### Refactor a Complex Workflow

```
Refactor [workflow] for TanStack Router, Suspense-first data fetching, cache-aware mutations, MUI v7, and strict TypeScript. Preserve behavior and identify migration risks.
```

## Limitations

- Targets React, TypeScript, TanStack Query, TanStack Router, and MUI v7 rather than every frontend stack.
- Provides guidance and examples but does not install dependencies, run builds, or execute tests.
- Uses project-specific helpers such as SuspenseLoader, apiClient, and useMuiSnackbar that require local equivalents.
- Cannot confirm accessibility, runtime performance, or integration behavior without reviewing and testing the target repository.

## Best Practices

- Share the target repository structure, framework versions, and existing helper APIs before requesting implementation.
- Ask for focused changes and require tests, type checks, and build validation in the target project.
- Treat the rules as project defaults and document any justified exceptions during review.

## Anti Patterns

- Applying MUI, TanStack, or Suspense conventions to projects that use different frameworks without adaptation.
- Requesting broad rewrites without providing current architecture, dependencies, or acceptance criteria.
- Accepting generated examples without checking accessibility, browser behavior, tests, and project-specific contracts.

## Security Audit

- Audited at: 2026-07-23T22:54:49.219\+00:00
- Summary: All 173 static findings are false positives caused by Markdown syntax and illustrative React or TypeScript code. The skill contains no executable scripts, shell commands, arbitrary file access, exfiltration endpoints, or prompt-injection instructions. No semantic security finding was identified.

## Stats

- Views: 172
- Downloads: 9
- Favorites: 0
- Popularity score: 0