How does the bundle analysis feature work?

It scans your package.json and project structure to identify heavy dependencies and provides a Health Score along with specific, lightweight replacements to improve load times.

Can I generate tests and documentation with my components?

Absolutely. The component generator includes flags for automatically creating Vitest unit tests and Storybook stories for every component created.

Does this skill support the Next.js App Router?

Yes, it is specifically configured for Next.js 14+ with App Router, Server Components, and optimized data fetching patterns.

Does it follow accessibility best practices?

Yes, the skill includes a detailed accessibility checklist and generates semantic HTML with proper ARIA labels and focus management to ensure WCAG compliance.

Senior Frontend Engineer

Name: Senior Frontend Engineer
Author: borghei

byborghei

•

101

•

Design Tools

Architects, optimizes, and scales production-ready React and Next.js applications using industry-leading patterns and automation tools.

This skill empowers developers to build high-performance web applications by providing automated project scaffolding, intelligent component generation, and deep bundle analysis. It specializes in modern frontend stacks—including React, Next.js, TypeScript, and Tailwind CSS—while enforcing strict accessibility standards and performance optimizations. Whether you are bootstrapping a new enterprise dashboard, refactoring heavy legacy dependencies, or implementing complex React patterns like compound components, this skill provides the scaffolding, testing strategies, and expert guidance needed to deliver elite user interfaces.

Key Features

01101 GitHub stars

02Advanced React pattern implementation for custom hooks, compound components, and render props.

03Intelligent component generation including Server/Client components, Vitest tests, and Storybook stories.

04Comprehensive bundle analysis that identifies heavy dependencies and suggests modern, lightweight alternatives.

05Next.js performance optimization for Server Components, streaming, and specialized image handling.

06Automated Next.js and React project scaffolding with built-in Auth, API, and Testing features.

Use Cases

01Enforcing accessibility (a11y) standards and semantic HTML across a shared UI component library.

02Auditing and reducing application bundle sizes by replacing libraries like Moment.js or Lodash with tree-shakable alternatives.

03Rapidly bootstrapping a new Next.js 14+ application with TypeScript, Tailwind CSS, and full-stack features.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add borghei/claude-skills senior-frontend

For use in Claude.ai and ChatGPT

Key Features

01101 GitHub stars

02Advanced React pattern implementation for custom hooks, compound components, and render props.

03Intelligent component generation including Server/Client components, Vitest tests, and Storybook stories.

04Comprehensive bundle analysis that identifies heavy dependencies and suggests modern, lightweight alternatives.

05Next.js performance optimization for Server Components, streaming, and specialized image handling.

06Automated Next.js and React project scaffolding with built-in Auth, API, and Testing features.

Use Cases

01Enforcing accessibility (a11y) standards and semantic HTML across a shared UI component library.

02Auditing and reducing application bundle sizes by replacing libraries like Moment.js or Lodash with tree-shakable alternatives.

03Rapidly bootstrapping a new Next.js 14+ application with TypeScript, Tailwind CSS, and full-stack features.