Skip to main content
senior-frontend Senior frontend workflows for React, Next.js, TypeScript, and Tailwind — scaffolding, component/hook generation, bundle analysis, patterns, a11y, testing. USE WHEN building, optimizing, or reviewing a React/Next.js frontend.
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/Sheshiyer/skill-clusters --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... Explorador de arquivos
7 arquivos Ocupações relacionadas SOC
Baseado na classificação ocupacional SOC
name senior-frontend description Senior frontend workflows for React, Next.js, TypeScript, and Tailwind — scaffolding, component/hook generation, bundle analysis, patterns, a11y, testing. USE WHEN building, optimizing, or reviewing a React/Next.js frontend. cluster frontend-web version 1.0.0 origin antigravity-awesome-skills (MIT) source https://github.com/alirezarezvani/claude-skills
Senior Frontend
Upstream source: https://github.com/alirezarezvani/claude-skills · packaged via antigravity-awesome-skills (MIT)
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 formsAdd 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
Limitations
Use this skill only when the task clearly matches the scope described above.
Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
Mais deste repositório Arcplume runs Grok through the Grok Build CLI's own OAuth-authenticated session (grok login) for image generation, with strict preflight validation, secret-safe handling, and headless CLI-driven execution -- no separate XAI_API_KEY billing. Video falls back to the billed xAI API. USE WHEN a user wants to generate an image via a locally logged-in Grok Build CLI session, e.g. 'generate an image with grok', 'use grok build', or 'use my logged-in grok session'.
Shared reference for the Selemene cluster: the two report surfaces (deterministic Rust reports vs. narrative witness-pipeline readings), the @selemene/bridge CLI contract, the output manifest format, and non-prescriptive witnessing tone. USE WHEN deciding which Selemene surface to invoke or when routing between birth/compatibility/transit reports and solo/dyadic readings.
Route Selemene Engine tasks to the right surface: deterministic reports (birth/compatibility/transit) via selemene-core and the @selemene/bridge CLI, or narrative witness readings via selemene-report. USE WHEN the user wants anything under the Selemene/Noesis umbrella but has not named the exact surface.
