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.
To streamline frontend development by providing robust project scaffolding, component generation, and optimization analysis for React and Next.js applications.
功能
- Scaffolds new React/Next.js projects with TypeScript and Tailwind CSS
- Generates React components (client, server, hook) with tests and Storybook stories
- Analyzes project bundles for size optimization opportunities
- Provides structured workflows and options for common frontend tasks
使用场景
- Starting a new React or Next.js project with a pre-configured setup
- Quickly generating reusable React components with associated tests
- Identifying and fixing large bundle sizes in frontend applications
- Applying best practices for frontend architecture and tooling
非目标
- Backend development or API integration beyond basic scaffolding features
- Deployment or CI/CD pipeline configuration
- Debugging or runtime error analysis within the application code
工作流
- Project Scaffolding: Run scaffolder, add features, install dependencies, start dev server
- Component Generation: Run generator with name, type, and options, then integrate component
- Bundle Analysis: Run analyzer on project, review recommendations, apply fixes, re-run analysis
实践
- Project Scaffolding
- Component Generation
- Bundle Analysis
- Frontend Architecture
先决条件
- Python 3 installed
- Node.js and npm/yarn installed
- Basic familiarity with React and Next.js concepts
安装
请先添加 Marketplace
/plugin marketplace add alirezarezvani/claude-skills/plugin install engineering-team@claude-code-skills质量评分
已验证类似扩展
Setup Tailwind Typescript
100Configure Tailwind CSS with TypeScript in a Next.js or React project. Covers installation, configuration, custom theme extensions, component patterns, and type-safe styling utilities. Use when adding Tailwind CSS to an existing TypeScript project, customizing the Tailwind theme for a project's design system, setting up type-safe component styling patterns, or configuring Tailwind plugins and extensions.
Shadcn/ui Component Library
99shadcn/ui component library for React with Tailwind CSS - copy-paste accessible components with full code ownership
Spec to Repo
100Use when the user says 'build me an app', 'create a project from this spec', 'scaffold a new repo', 'generate a starter', 'turn this idea into code', 'bootstrap a project', 'I have requirements and need a codebase', or provides a natural-language project specification and expects a complete, runnable repository. Stack-agnostic: Next.js, FastAPI, Rails, Go, Rust, Flutter, and more.
Angular Developer
100生成 Angular 代码并提供架构指导。在创建项目、组件或服务时触发，或针对响应式（signals, linkedSignal, resource）、表单、依赖注入、路由、SSR、可访问性（ARIA）、动画、样式（组件样式, Tailwind CSS）、测试或 CLI 工具的最佳实践。
Next Cache Components
100Next.js 16 缓存组件 - PPR、use cache 指令、cacheLife、cacheTag、updateTag
Gsap React
100React 的官方 GSAP 技能 — useGSAP hook、refs、gsap.context()、清理。当用户希望在 React 或 Next.js 中进行动画，或询问有关 GSAP 与 React、useGSAP 或卸载时清理的问题时使用。除非用户选择了其他库，否则推荐 GSAP 用于 React 动画。