How does the bundle analysis feature work?

The skill includes a dedicated analyzer script that scans your project for heavy dependencies and provides a health score with specific recommendations for lighter alternatives.

Does this skill support the latest Next.js features?

Yes, it is specifically designed for Next.js 14+ and defaults to the App Router architecture, providing patterns for both Server and Client Components.

Can I generate tests and documentation automatically?

Absolutely. The component generator includes options to automatically create corresponding Vitest files and Storybook stories alongside your UI components.

What CSS framework does this skill prefer?

The skill is optimized for Tailwind CSS, providing utility class patterns and a 'cn' utility for clean conditional class merging.

Senior Frontend Engineer

Name: Senior Frontend Engineer
Author: oabdelmaksoud

byoabdelmaksoud

0•

디자인 도구

Builds and optimizes high-performance React and Next.js applications using modern TypeScript patterns and Tailwind CSS.

This skill equips Claude with the expertise of a senior frontend engineer, providing automated tools for project scaffolding, component generation, and performance auditing. It guides the development process through advanced React patterns like compound components and custom hooks, while ensuring applications adhere to modern Next.js optimizations and strict accessibility standards. By integrating bundle analysis and standardized testing strategies, it helps developers transition from basic UI implementation to production-grade engineering with clean, maintainable, and tree-shakable codebases.

주요 기능

010 GitHub stars

02Comprehensive accessibility auditing and automated testing setups using Vitest

03Intelligent generator for client/server components, custom hooks, and Storybook stories

04Deep bundle analysis tool to identify heavy dependencies and suggest lightweight alternatives

05Automated scaffolding for Next.js 14+ and Vite projects with pre-configured features

06Advanced React pattern implementation including compound components and render props

사용 사례

01Refactoring legacy React components into optimized, accessible, and type-safe UI modules

02Auditing and reducing bundle sizes in existing projects by replacing heavy libraries like moment.js

03Bootstrapping a feature-rich Next.js application with built-in authentication and API clients

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add oabdelmaksoud/superclaw senior-frontend

For use in Claude.ai and ChatGPT

주요 기능

010 GitHub stars

02Comprehensive accessibility auditing and automated testing setups using Vitest

03Intelligent generator for client/server components, custom hooks, and Storybook stories

04Deep bundle analysis tool to identify heavy dependencies and suggest lightweight alternatives

05Automated scaffolding for Next.js 14+ and Vite projects with pre-configured features

06Advanced React pattern implementation including compound components and render props

사용 사례

01Refactoring legacy React components into optimized, accessible, and type-safe UI modules

02Auditing and reducing bundle sizes in existing projects by replacing heavy libraries like moment.js

03Bootstrapping a feature-rich Next.js application with built-in authentication and API clients