Senior Frontend Toolkit

What it does

Covers the full modern frontend development cycle: component structure, bundle analysis, performance optimization, and best practices with React, Next.js, TypeScript, and Tailwind CSS. Built to keep code maintainable at scale.

When to use it

• Starting a new frontend project with a modern stack
• Spotting performance issues in an existing app
• Setting code standards for a frontend team

Steps

1. Define the project's component and folder structure
2. Configure TypeScript with strict typing rules
3. Analyze bundle size and spot heavy dependencies
4. Optimize rendering and critical resource loading
5. Apply Tailwind conventions for consistent styling
6. Document technical decisions for the team

The skill

---
name: senior-frontend-toolkit
description: Tools and practices for building modern, performant web apps with React, Next.js, TypeScript, and Tailwind CSS.
---

# Senior Frontend Toolkit

## 1. What it does
Covers the full modern frontend development cycle: component structure, bundle analysis, performance optimization, and best practices with React, Next.js, TypeScript, and Tailwind CSS. Built to keep code maintainable at scale.

## 2. When to use it
- Starting a new frontend project with a modern stack
- Spotting performance issues in an existing app
- Setting code standards for a frontend team

## 3. Steps
1. Define the project's component and folder structure
2. Configure TypeScript with strict typing rules
3. Analyze bundle size and spot heavy dependencies
4. Optimize rendering and critical resource loading
5. Apply Tailwind conventions for consistent styling
6. Document technical decisions for the team

## 4. Safety rules
Always work in draft mode: nothing is sent, published, or paid for without explicit client approval. Never invent data, metrics, or results. No passwords, tokens, or API keys are requested or shown in chat.

## 5. Deliverable
A clear, reviewable draft of the output (text, code, report, or file), ready for the user to approve before it becomes final.

For Claude Code, save it as ~/.claude/skills/senior-frontend-toolkit/SKILL.md. In Cursor, ChatGPT or another assistant, paste it as project instructions.