# Build and Improve Frontend Applications

Frontend projects require coordinated setup, components, data flow, testing, and optimization. This skill provides practical workflows and templates for completing that work.

## Install

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

## Metadata

- Status: approved
- Slug: zl2023github-frontend-developer
- Skillstore revision: r2
- Version status: missing
- Tree hash: a65d2b2d918b932171e9432599144b5ab1eea951d750e0acbeb3543fc286051d
- Author: zl2023github
- GitHub username: zl2023github
- License: MIT
- Repository: https://github.com/zl2023github/software-engineer-skills/tree/main/software-engineering/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
- Risk factors: external\_commands, network, filesystem
- Quality score: 69
- Public page: https://skillstore.pages.dev/skills/zl2023github-frontend-developer
- Manifest: https://skillstore.pages.dev/api/skills/zl2023github-frontend-developer/manifest

## Capabilities

- Initializes Vite, Next.js, Nuxt, or CRA projects and configures TypeScript, linting, formatting, and package management.
- Designs responsive React or Vue components with typed interfaces and loading, empty, and error states.
- Builds REST or GraphQL service layers with Axios or Fetch, interceptors, caching, and optimistic updates.
- Adds state management using tools such as Zustand, Pinia, or Redux.
- Creates unit, component, and end-to-end tests with Vitest, Jest, Testing Library, Playwright, or Cypress.
- Diagnoses bugs and performance issues using browser tools, Lighthouse results, bundle analysis, and rendering measurements.

## Use Cases

- Launch a Product Interface: Create a typed frontend foundation, responsive pages, state management, API integration, and tests from an approved product specification.
- Expand a Component Library: Implement reusable components with documented properties, interaction states, responsive behavior, accessibility support, and focused tests.
- Complete Full-Stack Features: Connect existing backend endpoints to frontend views with typed models, loading states, error handling, caching, and validation.

## Prompt Templates

### Create a Responsive Component

```
Create a responsive [component] in [framework]. Define typed properties and include loading, empty, error, disabled, and mobile states.
```

### Integrate an API

```
Connect [page or component] to [API endpoint]. Add typed request models, caching, loading feedback, error handling, and focused tests.
```

### Diagnose a Frontend Defect

```
Investigate [bug and reproduction steps] in this repository. Identify the root cause, implement a focused fix, and add regression coverage.
```

### Deliver a Production Feature

```
Implement [feature] using the existing architecture. Verify responsiveness, accessibility, security, performance, type safety, tests, linting, and the production build.
```

## Limitations

- Provides general patterns and templates, not project-specific guarantees.
- Requires repository access and suitable command permissions to modify or verify code.
- Package versions and framework APIs may change after the skill content was published.
- The authentication example stores tokens in browser storage and needs a project-specific security review.

## Best Practices

- Provide the repository structure, framework versions, design constraints, and acceptance criteria before implementation.
- Review proposed dependencies and commands before execution, especially packages fetched from external registries.
- Require tests, linting, type checks, and a production build before accepting changes.

## Anti Patterns

- Do not request broad rewrites when a focused component or configuration change solves the problem.
- Do not expose credentials in frontend variables, browser storage, source code, or generated examples.
- Do not accept visual implementation without responsive, accessibility, loading, empty, and error-state checks.

## Security Audit

- Audited at: 2026-07-23T23:37:27.608\+00:00
- Summary: Most static alerts mistake Markdown fences, inline identifiers, and TypeScript template literals for shell execution. The network, path, and environment examples are normal frontend patterns. One semantic issue remains: the authentication examples persist bearer tokens in browser storage, where injected scripts could read them.

## Stats

- Views: 0
- Downloads: 3
- Favorites: 0
- Popularity score: 0