# Senior Frontend

Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications.

- Repository: https://github.com/composio-community/awesome-claude-plugins (1978 stars)
- Category: Design
- License: see repository
- Last updated: 2026-07-26
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add composio-community/awesome-claude-plugins --skill senior-frontend -g -a claude-code -y`
Codex: `npx skills add composio-community/awesome-claude-plugins --skill senior-frontend -g -a codex -y`
Cursor: `npx skills add composio-community/awesome-claude-plugins --skill senior-frontend -g -a cursor -y`
Gemini CLI: `npx skills add composio-community/awesome-claude-plugins --skill senior-frontend -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add composio-community/awesome-claude-plugins`

## Description

Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Senior Frontend

Frontend development patterns, performance optimization, and automation tools for React/Next.js applications.

## Project Scaffolding

Generate a new Next.js or React project with TypeScript, Tailwind CSS, and best practice configurations.

### Scaffolder Options

| Option | Description |
|--------|-------------|
| `--template nextjs` | Next.js 14+ with App Router and Server Components |
| `--template react` | React + Vite with TypeScript |
| `--features auth` | Add NextAuth.js authentication |
| `--features api` | Add React Query + API client |
| `--features forms` | Add React Hook Form + Zod validation |
| `--features testing` | Add Vitest + Testing Library |

### Generated Structure (Next.js)

```
my-app/
├── app/
│   ├── layout.tsx        # Root layout with fonts
│   ├── page.tsx          # Home page
│   ├── globals.css       # Tailwind + CSS variables
│   └── api/health/route.ts
├── components/
│   ├── ui/               # Button, Input, Card
│   └── layout/           # Header, Footer, Sidebar
├── hooks/                # useDebounce, useLocalStorage
├── lib/                  # utils (cn), constants
├── types/                # TypeScript interfaces
├── tailwind.config.ts
├── next.config.js
└── package.json
```

## Component Generation

Generate React components with TypeScript, tests, and Storybook stories.

### Generator Options

| Option | Description |
|--------|-------------|
| `--type client` | Client component with 'use client' (default) |
| `--type server` | Async server component |
| `--type hook` | Custom React hook |
| `--with-test` | Include test file |
| `--with-story` | Include Storybook story |

## Bundle Analysis

Analyze package.json and project structure for bundle optimization opportunities.

### Heavy Dependencies to Replace

The rest: https://github.com/composio-community/awesome-claude-plugins/blob/HEAD/senior-frontend/skills/senior-frontend/SKILL.md