Skip to main content Home Creators beko2210 firstbrain senior-frontend
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.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/BEKO2210/Firstbrain --skill senior-frontendThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository
Related occupations SOC
Based on SOC occupation classification
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 frontend projects, implementing accessibility, or reviewing frontend code quality. type skill created 2026-02-27T00:00:00.000Z domain software-development category frontend risk safe source https://github.com/alirezarezvani/claude-skills tags ["skill","software-development","frontend","senior"]
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
Generate a new Next.js or React project with TypeScript, Tailwind CSS, and best practice configurations.
Workflow: Create New Frontend Project
Run the scaffolder with your project name and template:
python scripts/frontend_scaffolder.py my-app --template nextjs
Add optional features (auth, api, forms, testing, storybook):
python scripts/frontend_scaffolder.py dashboard --template nextjs --features auth,api
Navigate to the project and install dependencies:
cd my-app && npm install
Start the development server:
npm run dev
Scaffolder Options
Option Description --template nextjsNext.js 14+ with App Router and Server Components --template reactReact + Vite with TypeScript --features authAdd NextAuth.js authentication --features apiAdd React Query + API client
--features forms
Add React Hook Form + Zod validation
--features testingAdd Vitest + Testing Library
--dry-runPreview 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
Generate a client component:
python scripts/component_generator.py Button --dir src/components/ui
Generate a server component:
python scripts/component_generator.py ProductCard --type server
Generate with test and story files:
python scripts/component_generator.py UserProfile --with-test --with-story
Generate a custom hook:
python scripts/component_generator.py FormValidation --type hook
Generator Options Option Description --type clientClient component with 'use client' (default) --type serverAsync server component --type hookCustom React hook --with-testInclude test file --with-storyInclude Storybook story --flatCreate in output dir without subdirectory --dry-runPreview 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
Run the analyzer on your project:
python scripts/bundle_analyzer.py /path/to/project
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
Apply the recommended fixes by replacing heavy dependencies.
Re-run with verbose mode to check import patterns:
python scripts/bundle_analyzer.py . --verbose
Bundle Score Interpretation Score Grade Action 90-100 A Bundle is well-optimized 80-89 B Minor optimizations available 70-79 C Replace heavy dependencies 60-69 D Multiple issues need attention 0-59 F Critical bundle size problems
Heavy Dependencies Detected The analyzer identifies these common heavy packages:
Package Size Alternative moment 290KB date-fns (12KB) or dayjs (2KB) lodash 71KB lodash-es with tree-shaking axios 14KB Native fetch or ky (3KB) jquery 87KB Native DOM APIs @mui/material Large shadcn/ui or Radix UI
React Patterns Reference: references/react_patterns.md
Compound Components Share state between related components:
const Tabs = ({ children } ) => {
const [active, setActive] = useState (0 );
return (
<TabsContext.Provider value ={{ active , setActive }}>
{children}
</TabsContext.Provider > Tabs .List = TabList ;
Tabs .Panel = TabPanel ;
<Tabs >
<Tabs.List >
<Tabs.Tab > One</Tabs.Tab >
<Tabs.Tab > Two</Tabs.Tab >
</Tabs.List >
<Tabs.Panel > Content 1</Tabs.Panel >
<Tabs.Panel > Content 2</Tabs.Panel >
</Tabs >
Custom Hooks function useDebounce<T>(value : T, delay = 500 ): T {
const [debouncedValue, setDebouncedValue] = useState (value);
useEffect (() => {
const timer = setTimeout (() => setDebouncedValue (value), delay);
return () => clearTimeout (timer);
}, [value, delay]);
return debouncedValue;
}
const debouncedSearch = useDebounce (searchTerm, 300 );
Render Props function DataFetcher ({ url, render } ) {
const [data, setData] = useState (null );
const [loading, setLoading] = useState (true );
useEffect (() => {
fetch (url)
.then ((r ) => r.json ())
.then (setData)
.finally (() => setLoading (false ));
}, [url]);
return render ({ data, loading });
}
<DataFetcher
url="/api/users"
render={({ data, loading } ) =>
loading ? <Spinner /> <UserList users ={data} />
Next.js Optimization Reference: references/nextjs_optimization_guide.md
Server vs Client Components Use Server Components by default. Add 'use client' only when you need:
Event handlers (onClick, onChange)
State (useState, useReducer)
Effects (useEffect)
Browser APIs
async function ProductPage ({ params } ) {
const product = await getProduct (params.id );
return (
<div >
<h1 > {product.name}</h1 >
<AddToCartButton productId ={product.id} /> {/* Client component */}
</div > "use client" );
function AddToCartButton ({ productId } ) {
const [adding, setAdding] = useState (false );
return <button onClick ={() => addToCart(productId)}>Add</button >
Image Optimization import Image from 'next/image' ;
<Image
src ="/hero.jpg"
alt ="Hero"
width ={1200}
height ={600}
priority
/> <div className ="relative aspect-video" >
<Image
src ="/product.jpg"
alt ="Product"
fill
sizes ="(max-width: 768px) 100vw, 50vw"
className ="object-cover"
/>
</div >
Data Fetching Patterns
async function Dashboard (const [user, stats] = await Promise .all ([getUser (), getStats ()]);
return <div > ...</div > async function ProductPage ({ params } ) {
return (
<div >
<ProductDetails id ={params.id} />
<Suspense fallback ={ <ReviewsSkeleton /> }>
<Reviews productId ={params.id} />
</Suspense >
</div >
Accessibility and Testing Reference: references/frontend_best_practices.md
Accessibility Checklist
Semantic HTML : Use proper elements (<button>, <nav>, <main>)Keyboard Navigation : All interactive elements focusableARIA Labels : Provide labels for icons and complex widgetsColor Contrast : Minimum 4.5:1 for normal textFocus Indicators : Visible focus states
<button
type ="button"
aria-label="Close dialog"
onClick={onClose}
className="focus-visible:ring-2 focus-visible:ring-blue-500"
>
<XIcon aria-hidden ="true" /> <a href ="#main-content" className ="sr-only focus:not-sr-only" >
Skip to main content
</a >
Testing Strategy
import { render, screen } from "@testing-library/react" ;
import userEvent from "@testing-library/user-event" ;
test ("button triggers action on click" , async () => {
const onClick = vi.fn ();
render (<Button onClick ={onClick} > Click me</Button > await userEvent.click (screen.getByRole ("button" ));
expect (onClick).toHaveBeenCalledTimes (1 );
});
test ("dialog is accessible" , async () => {
render (<Dialog open ={true} title ="Confirm" /> expect (screen.getByRole ("dialog" )).toBeInTheDocument ();
expect (screen.getByRole ("dialog" )).toHaveAttribute ("aria-labelledby" );
});
Quick Reference
Common Next.js Config
const nextConfig = {
images : {
remotePatterns : [{ hostname : "cdn.example.com" }],
formats : ["image/avif" , "image/webp" ],
},
experimental : {
optimizePackageImports : ["lucide-react" , "@heroicons/react" ],
},
};
Tailwind CSS Utilities
import { cn } from "@/lib/utils" ;
<button
className ={cn(
"px-4 py-2 rounded ",
variant === "primary" && "bg-blue-500 text-white ",
disabled && "opacity-50 cursor-not-allowed ",
)}
/>
TypeScript Patterns
interface CardProps {
className ?: string ;
children : React .ReactNode ;
}
interface ListProps <T> {
items : T[];
renderItem : (item : T React .ReactNode ;
}
function List <T>({ items, renderItem }: ListProps <T>) {
return <ul > {items.map(renderItem)}</ul >
Resources
React Patterns: references/react_patterns.md
Next.js Optimization: references/nextjs_optimization_guide.md
Best Practices: references/frontend_best_practices.md
Connections
Domain: [[Software Entwicklung]]Kategorie: [[Frontend Entwicklung]]Dateien:
scripts/bundle_analyzer.pyscripts/component_generator.pyscripts/frontend_scaffolder.py
Navigation: [[Skills Uebersicht]], [[Home]] 