Can it generate automated tests?

Yes, the component generator includes options to automatically create test files using Vitest and React Testing Library.

Does it help with performance optimization?

Absolutely. It includes a bundle analyzer that provides a health score for your project and suggests lighter alternatives for heavy libraries like Moment.js or Lodash.

Are the generated components accessible?

Yes, the skill emphasizes accessibility by using semantic HTML, ARIA labels, and keyboard navigation patterns in its component generation workflow.

Can I use this for both React and Next.js?

Yes, the skill supports both Vite-based React projects and Next.js App Router architectures with specialized templates for each.

Does it support Server Components?

Yes, it is designed for Next.js 14+ and provides specific generators for both Server and Client components.

Senior Frontend Architect

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

byzhangzhang-111-i

0•

디자인 도구

Accelerates React and Next.js development with automated scaffolding, component generation, and advanced performance optimization.

This skill transforms Claude into a senior-level frontend engineer capable of architecting modern web applications using React, Next.js, TypeScript, and Tailwind CSS. It provides specialized workflows for scaffolding production-ready projects, generating reusable UI components (client or server), and performing deep bundle analysis to identify bloat. Additionally, it offers expert guidance on advanced React design patterns, Next.js performance optimizations like streaming and image handling, and ensures all code meets high accessibility and testing standards.

주요 기능

010 GitHub stars

02Smart component generator for Client/Server components, hooks, and Storybook stories

03Implementation guides for complex React patterns like Compound Components

04Automated Next.js/React project scaffolding with best-practice configurations

05Advanced bundle analyzer with health scoring and library alternatives

06Accessibility (A11y) and automated testing integration

사용 사례

01Refactoring component logic into clean, reusable React design patterns

02Optimizing an existing application's bundle size by identifying heavy dependencies

03Starting a new enterprise-grade Next.js project with pre-configured auth and testing

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

주요 기능

010 GitHub stars

02Smart component generator for Client/Server components, hooks, and Storybook stories

03Implementation guides for complex React patterns like Compound Components

04Automated Next.js/React project scaffolding with best-practice configurations

05Advanced bundle analyzer with health scoring and library alternatives

06Accessibility (A11y) and automated testing integration

사용 사례

01Refactoring component logic into clean, reusable React design patterns

02Optimizing an existing application's bundle size by identifying heavy dependencies

03Starting a new enterprise-grade Next.js project with pre-configured auth and testing

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