Is accessibility built into the generation process?

Yes, the skill follows a strict accessibility checklist, ensuring semantic HTML, ARIA labels, and keyboard navigation are prioritized in every component.

Does this skill support the latest Next.js 14+ features?

Yes, it is specifically designed for Next.js 14+ and focuses on App Router architecture, Server Components, and streaming patterns.

Can I generate tests automatically with my components?

Absolutely. The component generator includes flags to automatically create Vitest or React Testing Library files and Storybook stories.

How does the bundle analyzer help with performance?

It audits your project for heavy libraries like Moment.js or Lodash and provides a health score with specific, lightweight alternatives to reduce your TBT and LCP.

Senior Frontend Engineer

Name: Senior Frontend Engineer
Author: zhangzhang-111-i

byzhangzhang-111-i

0•

Design Tools

Builds and optimizes production-grade React and Next.js applications using automated scaffolding, performance analysis, and architectural best practices.

The Senior Frontend skill transforms Claude into a specialized frontend architect focused on the modern TypeScript, React, and Next.js ecosystem. It provides powerful automation scripts for scaffolding entire projects, generating enterprise-ready components with tests and Storybook stories, and performing deep bundle analysis to identify performance bottlenecks. By leveraging advanced React patterns, Next.js server component optimization, and comprehensive accessibility checklists, this skill ensures that your frontend applications are not only high-performing but also maintainable and inclusive.

Key Features

010 GitHub stars

02Automated project scaffolding for Next.js 14+ with App Router and Tailwind CSS.

03Deep bundle size analysis with score grading and lightweight dependency recommendations.

04Next.js performance optimization for images, streaming data, and server/client boundaries.

05Smart component generation for client and server components with built-in test files.

06Reference implementation of advanced React patterns like Compound Components and Render Props.

Use Cases

01Standardizing component architecture and testing patterns across a distributed engineering team.

02Spinning up a production-ready dashboard with pre-configured Auth and API layers in seconds.

03Refactoring heavy React applications to improve Core Web Vitals and reduce JavaScript payload.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add zhangzhang-111-i/claude-skills111 senior-frontend

For use in Claude.ai and ChatGPT

Key Features

010 GitHub stars

02Automated project scaffolding for Next.js 14+ with App Router and Tailwind CSS.

03Deep bundle size analysis with score grading and lightweight dependency recommendations.

04Next.js performance optimization for images, streaming data, and server/client boundaries.

05Smart component generation for client and server components with built-in test files.

06Reference implementation of advanced React patterns like Compound Components and Render Props.

Use Cases

01Standardizing component architecture and testing patterns across a distributed engineering team.

02Spinning up a production-ready dashboard with pre-configured Auth and API layers in seconds.

03Refactoring heavy React applications to improve Core Web Vitals and reduce JavaScript payload.