Agent skill · software engineering · alirezarezvani
senior-frontend
Build and review React, Next.js, TypeScript or Tailwind frontends: components, scaffolding, performance and bundle size. Use whenever the user wants a new component or app, a page feels slow, the bundle is too big, or asks for a frontend code review.
Why this skill is useful
Adds executable scripts for project scaffolding and component generation that streamline frontend development workflows.
What it needs
Requires npm, python installed locally. About 5k tokens when loaded. Last updated 2026-08-05. 23,939 stars on the source repository.
What this skill does
Senior Frontend Frontend development patterns, performance optimization, and automation tools for React/Next.js applications. Table of Contents Project Scaffolding Component Generation Bundle Analysis React Patterns Next.js Optimization Accessibility and Testing --- Project Scaffolding Generate a new Next.js or React project with TypeScript, Tailwind CSS, and best practice configurations. Workflow: Create New Frontend Project 1. Run the scaffolder with your project name and template: 2. Add optional features (auth, api, forms, testing, storybook): 3. Navigate to the project and install dependencies: 4. Start the development server: 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 --dry-run Preview files without creating them Generated outputs The generated project structure and an example component are in references/frontendbestpractices.md (section Generated outputs). --- Component Generation Generate React components with TypeScript, tests, and Storybook stories. Workflow: Create a New Component 1. Generate a client component: 2. Generate a server component: 3. Generate with test and story files: 4. Generate a custom hook: 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 --flat Create in output dir without subdirectory --dry-run Preview without creating files --- Bundle Analysis Analyze package.json and project structure for bundle optimization opportunities. Workflow: Optimize Bundle Size 1. Run the analyzer on your project: 2. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills alirezarezvani/senior-frontend--f85038