# Build Modern React and Next.js Interfaces

Complex frontend work requires coordinated decisions across architecture, state, accessibility, testing, and performance. This skill provides implementation guidance for modern React and Next.js projects.

## Install

```bash
npx skillstore add sickn33/frontend-developer
```

## Metadata

- Status: approved
- Slug: sickn33-frontend-developer
- Skillstore revision: r2
- Version status: missing
- Tree hash: a2929fb334d2c7043a3bbd1fa10e5698b0d3cb73a4edad800502e446561a28e6
- Author: sickn33
- GitHub username: sickn33
- License: MIT
- Repository: https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/frontend-developer
- 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
- Quality score: 78
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/sickn33-frontend-developer
- Manifest: https://skillstore.pages.dev/api/skills/sickn33-frontend-developer/manifest

## Capabilities

- Build React 19 components with Server Components, Suspense, Actions, and advanced hooks.
- Structure Next.js 15 applications with App Router, streaming, route handlers, and rendering strategies.
- Plan client and server state using React Query, SWR, Zustand, Jotai, or Redux Toolkit.
- Create responsive interfaces with modern CSS, Tailwind CSS, design tokens, and component libraries.
- Improve accessibility, Core Web Vitals, bundle size, loading behavior, and error handling.
- Design component, end-to-end, visual regression, performance, and accessibility testing workflows.

## Use Cases

- Build a Product Interface: Create responsive React screens with typed components, loading states, accessible interactions, and maintainable styling.
- Plan a Next.js Architecture: Choose rendering, routing, data fetching, caching, and state patterns for a new application.
- Improve Web Quality: Audit an existing interface for accessibility, rendering performance, Core Web Vitals, and testing gaps.

## Prompt Templates

### Create a React Component

```
Build a React component for [feature]. Use TypeScript, responsive styling, keyboard support, loading states, and clear prop definitions.
```

### Design an App Router Page

```
Create a Next.js App Router page for [workflow]. Explain server and client boundaries, data fetching, caching, errors, and metadata.
```

### Optimize an Existing Interface

```
Review [component or page] for unnecessary rendering, bundle cost, accessibility, and Core Web Vitals. Prioritize changes and define verification steps.
```

### Plan a Frontend Platform

```
Design a frontend architecture for [product]. Cover routing, rendering, state, design systems, testing, observability, deployment constraints, and migration risks.
```

## Limitations

- The skill does not replace testing in the target browser, device, deployment environment, or assistive technology.
- Backend-only architecture, native application development, and visual design without implementation are outside its primary scope.
- Recommendations require project requirements, framework versions, browser targets, and performance goals for accurate implementation.
- Third-party integrations still require current vendor documentation, credentials, security review, and environment-specific configuration.

## Best Practices

- Provide framework versions, browser targets, target devices, data contracts, and measurable success criteria.
- Request accessibility, loading, error, empty, and responsive states as part of the initial implementation.
- Validate generated guidance with type checks, automated tests, browser profiling, and real device review.

## Anti Patterns

- Do not request isolated visual components without data behavior, interaction states, or accessibility requirements.
- Do not apply performance optimizations before measuring rendering, network, and bundle behavior.
- Do not accept framework recommendations without checking project constraints, current documentation, and deployment compatibility.

## Security Audit

- Audited at: 2026-07-23T22:58:38.83\+00:00
- Summary: Both low-severity static alerts are false positives caused by unrelated CSS layout and browser testing text. No malicious intent or semantic security issue was found.

## Stats

- Views: 100
- Downloads: 15
- Favorites: 0
- Popularity score: 0