Senior Frontend

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

作者 composio-communitye521f7ada8d89abea888e67b93b4dcfbb977041f无许可证1.9K 个星标收录于 2026年10月9日更新于 2026年10月9日仓库2个月前更新

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.

仅含说明Software Development

AI 生成的概览

指导 React、Next.js、TypeScript 与 Tailwind 前端开发：脚手架、组件生成、打包体积分析与无障碍。

功能: 为 React 和 Next.js 应用提供前端开发模式与参考指引，涵盖项目脚手架选项、组件与 Hook 生成、打包体积分析及依赖替代方案、服务端与客户端组件的取舍、图片优化、无障碍检查以及 TypeScript/Tailwind 约定。该技能仅包含说明文档，不附带脚本，产出的是指引与代码模式，而非生成的文件。
适用场景: 适用于构建 React 组件、搭建 Next.js 或 React 项目、优化 Next.js 性能或打包体积、实现无障碍，以及评审前端代码质量等场景。
运行要求: 不附带任何脚本或工具，仅为说明文档。若要实际应用其中的指引，需要具备使用 TypeScript 与 Tailwind CSS 的 React/Next.js 项目，并在使用相应功能时引入所提及的依赖包（如 NextAuth.js、React Query、React Hook Form、Zod、Vitest）。

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

来源与署名

来源：composio-community/awesome-claude-plugins位于senior-frontend/skills/senior-frontend提交e521f7a

许可证：无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

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

来源与署名

更多来自 composio-community/awesome-claude-plugins 的技能

Mcp Builder

Theme Factory

Frontend Design

Developer Growth Analysis

Canvas Design

Changelog Generator

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices