senior-frontend

name	senior-frontend
description	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 fronte
category	Document Processing
source	antigravity
tags	["python","typescript","react","node","nextjs","api","claude","ai","automation","workflow"]
url	https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/senior-frontend

Senior Frontend

Frontend development patterns, performance optimization, and automation tools for React/Next.js applications.

When to Use

• Use when scaffolding a new React or Next.js project with TypeScript and Tailwind CSS.
• Use when generating new components or custom hooks.
• Use when analyzing and optimizing bundle sizes for frontend applications.
• Use to implement or review advanced React patterns like Compound Components or Render Props.
• Use to ensure accessibility compliance and implement robust testing strategies.

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:

   python scripts/frontend_scaffolder.py my-app --template nextjs
   

2. Add optional features (auth, api, forms, testing, storybook):

   python scripts/frontend_scaffolder.py dashboard --template nextjs --features auth,api
   

3. Navigate to the project and install dependencies:

   cd my-app && npm install
   

4. Start the development server:

   npm run dev
   

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 Structure (Next.js)

my-app/
├── app/
│   ├── layout.tsx        # Root layout with fonts
│   ├── page.tsx          # Home page
│   ├── globals.css       # Tailwind + CSS variables
│   └── api/health/route.ts
├── components/
│   ├── ui/               # Button, Input, Card
│   └── layout/           # Header, Footer, Sidebar
├── hooks/                # useDebounce, useLocalStorage
├── lib/                  # utils (cn), constants
├── types/                # TypeScript interfaces
├── tailwind.config.ts
├── next.config.js
└── package.json

---

Component Generation

Generate React components with TypeScript, tests, and Storybook stories.

Workflow: Create a New Component

1. Generate a client component:

   python scripts/component_generator.py Button --dir src/components/ui
   

2. Generate a server component:

   python scripts/component_generator.py ProductCard --type server
   

3. Generate with test and story files:

   python scripts/component_generator.py UserProfile --with-test --with-story
   

4. Generate a custom hook:

   python scripts/component_generator.py FormValidation --type 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

Generated Component Example

"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

interface ButtonProps {
  className?: string;
  children?: React.ReactNode;
}

export function Button({ className, children }: ButtonProps) {
  return <div className={cn("", className)}>{children}</div>;
}

---

Bundle Analysis

Analyze package.json and project structure for bundle optimization opportunities.

Workflow: Optimize Bundle Size

1. Run the analyzer on your project:

   python scripts/bundle_analyzer.py /path/to/project
   

2. Review the health score and issues:

   Bundle Health Score: 75/100 (C)
   
   HEAVY DEPENDENCIES:
     moment (290KB)
       Alternative: date-fns (12KB) or dayjs (2KB)
   
     lodash (71KB)
       Alternative: lodash-es with tree-shaking
   

3. Apply the recommended fixes by replacing heavy dependencies.

4. Re-run with verbose mode to check import