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