Skip to main content Início Criadores 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.
Ir para a instalação Skills Marketplace Descubra e explore skills de IA criadas pela comunidade.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Mostrar detalhes do prompt Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
npx skills add https://github.com/BEKO2210/Firstbrain --skill senior-frontendO comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.
Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.
Baixar Zip Baixando... Ocupações relacionadas SOC
Baseado na classificação ocupacional SOC
Explorador de arquivos
7 arquivos 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]] 