Senior Frontend
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications.
Before & after
Same prompt, same agent — the only difference is the skill.
There are several ways to improve Next.js performance. You could try code splitting, lazy loading components, and analyzing your bundle with tools like webpack-bundle-analyzer. You might also want to consider image optimization and using dynamic imports. I'd recommend looking at tree-shaking unused code and ensuring your dependencies are lightweight. You could also look into route prefetching and using the performance profiler. These are all good practices for modern web apps. Would you like me to help you with any of these specific areas?
BUNDLE ANALYSIS Current size: 283 KB (gzipped) Top contributors: react-dom 42 KB, chart-library 37 KB, utils 18 KB Wasted: 12 KB of unused date formatters in vendor deps OPTIMIZATION PLAN 1. Remove moment.js (12 KB) → replace with date-fns tree-shaking: -12 KB 2. Lazy-load chart-library only on /analytics route: -28 KB critical path 3. Code-split route groups: dashboard, settings, reports separately 4. Enable aggressive minification in next.config.js EXPECTED RESULT: 243 KB gzipped (14% reduction), LCP improved from 2.3s to 1.8s RISK: Tree-shaking works only with ES modules; verify your imports use named exports, not require().
About this skill
name: senior-frontend description: Use when Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications.
Senior Frontend
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.
What you get
- Public GitHub repo (alirezarezvani/claude-skills)
- the senior-frontend skill folder with SKILL.md. Part of a 337-skill / 30-agent / 70-command install.
Customize your output
- Fork the repo and adapt the skill's instructions and references to your workflow.
Example output
Activates automatically when your request matches Senior Frontend; chains with the other skills, agents, and commands in the collection.
Best for
Creators, builders, and teams using Claude Code.
SKILL.md preview
---
name: senior-frontend
description: Use this skill when building React components, optimizing Next.js performance, scaffolding frontend projects, or reviewing frontend code quality.
version: 1.0.0
category: Development / Engineering
author: AgentVolt
license: proprietary
tags:
- development
- engineering
---
# Senior Frontend
Covers frontend development for React, Next.js, TypeScript, and Tailwind CSS applications: building components, optimizing performance, analyzing bundle size, scaffolding projects, and reviewing code for accessibility and quality.
## When to use
… (sign up to view the full skill)More development skills
View all Development skills →Generate
Scaffold code, tests, and boilerplate from a short spec.
Performance Profiler
Systematic performance profiling for Node.js, Python, and Go applications.
Threat Detection
Use when hunting for threats in an environment, analyzing IOCs, or detecting behavioral anomalies in telemetry.
Agent Harness
Turns a domain folder of skills into a bounded agentic loop: compile a goal into a task plan, execute with the domain's tools, verify every task, retry within a budget.