frontend-development

SKILL.md

---
name: frontend-development
description: "Use when: developing frontend applications, creating React/Vue/Angular components, implementing state management, optimizing frontend performance, or building responsive layouts. Triggers: 'frontend', 'react', 'vue', 'angular', 'component', 'state management', 'responsive', 'UI', 'web development'. NOT for: backend-only projects, when no web UI needed, or when using pre-built component libraries only."
---

# Frontend Development

Comprehensive frontend development capabilities including React, Vue, Angular, and modern web development practices.

## When to Use This Skill

Use this skill when:
- Creating new frontend components
- Implementing state management (Redux, Vuex, Pinia)
- Optimizing frontend performance
- Building responsive layouts
- Analyzing existing frontend projects

Do NOT use this skill when:
- Backend-only projects
- No web UI needed
- Using pre-built component libraries only

## Capabilities

### 1. Project Analysis (10 min)

- Analyze frontend project structure
- Detect framework and tech stack
- Identify dependencies and build tools
- Check for common issues

### 2. Component Generation (5 min)

- Generate React components with TypeScript
- Generate Vue components
- Generate Angular components
- Include props and styling

### 3. Performance Optimization (15 min)

- Analyze bundle size
- Identify code splitting opportunities
- Optimize images and CSS
- Generate recommendations

### 4. State Management (15 min)

- Implement Redux store
- Implement Vuex/Pinia store
- Create slices for entities
- Generate integration instructions

### 5. Responsive Layouts (5 min)

- Create responsive grid layouts
- Create responsive flexbox layouts
- Generate breakpoint-based CSS

## Supported Technologies

- **Frameworks**: React, Vue, Angular, Svelte, Vanilla
- **Styling**: CSS, SCSS, Tailwind, Bootstrap, Styled Components
- **State**: Redux, Vuex, Pinia, NgRx, Zustand
- **Build**: Webpack, Vite, Rollup, Parcel
- **Testing**: Jest, Vitest, Cypress, Testing Library

## Usage Examples

### Analyze Project
```
Analyze a frontend project at /path/to/project
```

### Create Component
```
Create a Button component in React with props: onClick, label
```

### Implement State Management
```
Implement Redux for state management with entities: user, posts
```

### Create Responsive Layout
```
Create a responsive grid layout with mobile/tablet/desktop breakpoints
```

## Dependencies

- Python 3.10+
- Node.js (for build tools)
- Frontend framework dependencies