Senior Frontend — Development

Senior Frontend is a skill for React, Next.js, TypeScript, and Tailwind CSS development. It provides scaffolding for new projects, component generation, bundle analysis, React patterns, Next.js optimization, and accessibility/testing guidance, along with a decision engine to choose the right stack profile based on project constraints.

engineering claude-code

📂 View skill on GitHub ↗ 🚀 How to use

✨ What it does

Scaffolds Next.js or React projects with TypeScript, Tailwind, and optional features like auth, API, forms, testing, and
Generates client/server components, custom hooks, with optional test and story files.
Analyzes bundle size and provides a health score with heavy dependency alternatives.
Provides React patterns like compound components, custom hooks, and render props.
Offers Next.js optimization guidance for server/client components, images, and data fetching.
Includes a decision engine that recommends a stack profile based on device, LCP target, SEO, and auth requirements.

🎯 When to use it

When building a new React or Next.js frontend project from scratch and need a best-practice scaffold.
When generating React components, hooks, or Storybook stories with TypeScript and tests.
When analyzing a project's bundle size and looking for optimization opportunities.
When deciding between Next.js, Remix, Vite, or Astro for a new project based on performance and SEO needs.
When reviewing frontend code for accessibility, performance, and best practices.

🚀 How to use

Trigger: /cs:frontend-review

Trigger by asking to scaffold a project, generate a component, analyze a bundle, or choose a frontend stack. Provide project name, template, and features for scaffolding; component name and type for generation; project path for bundle analysis; and device, LCP, SEO, and auth details for the decision engine. Example prompts:

Create a new Next.js project called 'dashboard' with auth and API features.
Generate a client component named 'Button' in src/components/ui with tests and story.
Analyze the bundle of the project in /path/to/project.
Which stack should I use for a mobile-first SaaS app with SEO needs and a 2s LCP target?

📄 Output: The skill produces scaffolded projects, generated component files, bundle analysis reports, and stack recommendations.

📦 Add this skill to Claude Code

# 1. Get the skills repo
git clone --depth 1 https://github.com/alirezarezvani/claude-skills /tmp/claude-skills

# 2. Copy this skill into your project (or ~/.claude/skills for all projects)
mkdir -p .claude/skills
cp -r /tmp/claude-skills/engineering-team/skills/senior-frontend .claude/skills/senior-frontend

Skill source: engineering-team/skills/senior-frontend/SKILL.md

⚠️ Good to know

Requires Python to run the scripts and assumes Node.js environment for the generated projects; the skill does not cover deep accessibility audits or performance profiling, which are forked to other skills.

❓ FAQ

What are the four assumptions that must be surfaced before scaffolding or recommending?

Primary user device and network, LCP target in milliseconds, SEO-dependent vs auth-walled, and WCAG target with named a11y owner.

What does the bundle analyzer output?

It outputs a bundle health score (A-F) and lists heavy dependencies with suggested alternatives like date-fns instead of moment.

How do I add a custom profile to the decision engine?

Copy an existing profile JSON (e.g., profiles/vite-spa.json) to a new file and adjust the constraints and success_thresholds.

🤖 Overview, features, install steps and FAQ were generated from the project's SKILL.md on Sep 4, 2026. Always check the original source before running commands.