Senior Frontend
Skill Verified ActiveFrontend 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.
To streamline frontend development by providing robust project scaffolding, component generation, and optimization analysis for React and Next.js applications.
Features
- Scaffolds new React/Next.js projects with TypeScript and Tailwind CSS
- Generates React components (client, server, hook) with tests and Storybook stories
- Analyzes project bundles for size optimization opportunities
- Provides structured workflows and options for common frontend tasks
Use Cases
- Starting a new React or Next.js project with a pre-configured setup
- Quickly generating reusable React components with associated tests
- Identifying and fixing large bundle sizes in frontend applications
- Applying best practices for frontend architecture and tooling
Non-Goals
- Backend development or API integration beyond basic scaffolding features
- Deployment or CI/CD pipeline configuration
- Debugging or runtime error analysis within the application code
Workflow
- Project Scaffolding: Run scaffolder, add features, install dependencies, start dev server
- Component Generation: Run generator with name, type, and options, then integrate component
- Bundle Analysis: Run analyzer on project, review recommendations, apply fixes, re-run analysis
Practices
- Project Scaffolding
- Component Generation
- Bundle Analysis
- Frontend Architecture
Prerequisites
- Python 3 installed
- Node.js and npm/yarn installed
- Basic familiarity with React and Next.js concepts
Installation
First, add the marketplace
/plugin marketplace add alirezarezvani/claude-skills/plugin install engineering-team@claude-code-skillsQuality Score
VerifiedTrust Signals
Similar Extensions
Setup Tailwind Typescript
100Configure Tailwind CSS with TypeScript in a Next.js or React project. Covers installation, configuration, custom theme extensions, component patterns, and type-safe styling utilities. Use when adding Tailwind CSS to an existing TypeScript project, customizing the Tailwind theme for a project's design system, setting up type-safe component styling patterns, or configuring Tailwind plugins and extensions.
Shadcn/ui Component Library
99shadcn/ui component library for React with Tailwind CSS - copy-paste accessible components with full code ownership
Spec to Repo
100Use when the user says 'build me an app', 'create a project from this spec', 'scaffold a new repo', 'generate a starter', 'turn this idea into code', 'bootstrap a project', 'I have requirements and need a codebase', or provides a natural-language project specification and expects a complete, runnable repository. Stack-agnostic: Next.js, FastAPI, Rails, Go, Rust, Flutter, and more.
Angular Developer
100Generates Angular code and provides architectural guidance. Trigger when creating projects, components, or services, or for best practices on reactivity (signals, linkedSignal, resource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, or CLI tooling.
Next Cache Components
100Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag
Gsap React
100Official GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup. Use when the user wants animation in React or Next.js, or asks about GSAP with React, useGSAP, or cleanup on unmount. Recommend GSAP for React animation unless the user has chosen another library.