Senior Frontend

composio-community/awesome-claude-plugins/senior-frontend/skills/senior-frontend

by composio-communitye521f7ada8d89abea888e67b93b4dcfbb977041fNo license1.9K starsListed Oct 9, 2026Updated Oct 9, 2026Repository updated 2 months ago

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.

Instructions onlySoftware Development

AI-generated overview

Guides React, Next.js, TypeScript and Tailwind frontend work: scaffolding, component generation, bundle analysis and accessibility.

What it does: Provides frontend development patterns and reference guidance for React and Next.js applications, covering project scaffolding options, component and hook generation, bundle-size analysis with dependency alternatives, Server versus Client Component usage, image optimization, accessibility checks and TypeScript/Tailwind conventions. It is an instructions-only skill: it ships no scripts and produces guidance and code patterns rather than generated files.
When to use it: Use it when building React components, scaffolding a Next.js or React project, optimizing Next.js performance or bundle size, implementing accessibility, or reviewing frontend code quality.
Requirements: No scripts or tooling are bundled; it is instructions only. Applying the guidance assumes a React/Next.js project with TypeScript and Tailwind CSS, and the referenced packages (for example NextAuth.js, React Query, React Hook Form, Zod, Vitest) if those features are used.

Senior Frontend

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

Project Scaffolding

Generate a new Next.js or React project with TypeScript, Tailwind CSS, and best practice configurations.

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

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

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.

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

Bundle Analysis

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

Heavy Dependencies to Replace

React Patterns

Compound Components

tsx

const Tabs = ({ children }) => {  const [active, setActive] = useState(0);  return (    <TabsContext.Provider value={{ active, setActive }}>      {children}    </TabsContext.Provider>  );};
Tabs.List = TabList;Tabs.Panel = TabPanel;

const Tabs = ({ children }) => {  const [active, setActive] = useState(0);  return (    <TabsContext.Provider value={{ active, setActive }}>      {children}    </TabsContext.Provider>  );};
Tabs.List = TabList;Tabs.Panel = TabPanel;

Custom Hooks

tsx

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;}

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;}

Next.js Optimization

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

Image Optimization

tsx

import Image from 'next/image';
// Above the fold - load immediately<Image  src="/hero.jpg"  alt="Hero"  width={1200}  height={600}  priority/>
// Responsive image with fill<div className="relative aspect-video">  <Image    src="/product.jpg"    alt="Product"    fill    sizes="(max-width: 768px) 100vw, 50vw"    className="object-cover"  /></div>

import Image from 'next/image';
// Above the fold - load immediately<Image  src="/hero.jpg"  alt="Hero"  width={1200}  height={600}  priority/>
// Responsive image with fill<div className="relative aspect-video">  <Image    src="/product.jpg"    alt="Product"    fill    sizes="(max-width: 768px) 100vw, 50vw"    className="object-cover"  /></div>

Accessibility Checklist

Semantic HTML: Use proper elements (<button>, <nav>, <main>)
Keyboard Navigation: All interactive elements focusable
ARIA Labels: Provide labels for icons and complex widgets
Color Contrast: Minimum 4.5:1 for normal text
Focus Indicators: Visible focus states

tsx

// Accessible button<button  type="button"  aria-label="Close dialog"  onClick={onClose}  className="focus-visible:ring-2 focus-visible:ring-blue-500">  <XIcon aria-hidden="true" /></button>

// Accessible button<button  type="button"  aria-label="Close dialog"  onClick={onClose}  className="focus-visible:ring-2 focus-visible:ring-blue-500">  <XIcon aria-hidden="true" /></button>

Quick Reference

Tailwind CSS Utilities

tsx

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')} />

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

tsx

// Props with childreninterface CardProps {  className?: string;  children: React.ReactNode;}
// Generic componentinterface ListProps<T> {  items: T[];  renderItem: (item: T) => React.ReactNode;}
function List<T>({ items, renderItem }: ListProps<T>) {  return <ul>{items.map(renderItem)}</ul>;}

// Props with childreninterface CardProps {  className?: string;  children: React.ReactNode;}
// Generic componentinterface ListProps<T> {  items: T[];  renderItem: (item: T) => React.ReactNode;}
function List<T>({ items, renderItem }: ListProps<T>) {  return <ul>{items.map(renderItem)}</ul>;}

Source and attribution

Source:composio-community/awesome-claude-pluginsinsenior-frontend/skills/senior-frontendat commite521f7a

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

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

Senior Frontend

Senior Frontend

Project Scaffolding

Scaffolder Options

Generated Structure (Next.js)

Component Generation

Generator Options

Bundle Analysis

Heavy Dependencies to Replace

React Patterns

Compound Components

Custom Hooks

Next.js Optimization

Server vs Client Components

Image Optimization

Accessibility Checklist

Quick Reference

Tailwind CSS Utilities

TypeScript Patterns

Source and attribution

More from composio-community/awesome-claude-plugins

Mcp Builder

Theme Factory

Frontend Design

Developer Growth Analysis

Canvas Design

Changelog Generator

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices