Does it support automated testing and Storybook?

Yes, the component generator can automatically create Vitest testing files and Storybook stories alongside your UI components.

How does the bundle analysis feature work?

The skill analyzes your package.json and project structure to identify heavy dependencies (like Moment.js or Lodash) and suggests lightweight, tree-shakable alternatives.

Can this skill help with Next.js performance?

Absolutely. It provides specialized patterns for Server vs. Client components, Image optimization, and data fetching strategies like streaming and parallel fetching.

What frameworks does the Senior Frontend skill support?

It is specifically optimized for React, Next.js (App Router), TypeScript, and Tailwind CSS applications.

Senior Frontend Architect

Name: Senior Frontend Architect
Author: JantonioFC

byJantonioFC

•

Design Tools

Accelerates frontend development by providing standardized scaffolding, performance optimization, and best-practice patterns for React and Next.js applications.

This skill transforms Claude into a senior frontend engineer capable of architecting and optimizing modern web applications using React, Next.js, TypeScript, and Tailwind CSS. It provides automated tools for project scaffolding and smart component generation that includes built-in testing and Storybook support. Beyond creation, the skill features a comprehensive bundle analyzer to identify heavy dependencies and performance bottlenecks, alongside deep implementation guides for advanced React patterns like compound components and Next.js App Router optimizations. Whether you are bootstrapping a new project or auditing an existing codebase for accessibility and bundle health, this skill ensures production-grade standards and high-performance user interfaces.

Key Features

01Built-in accessibility (A11y) checklist and semantic HTML implementation

02Deep bundle analysis with dependency optimization recommendations

03Smart component generator for Client/Server components with tests and stories

04Library of advanced React patterns including Compound Components and Custom Hooks

05Automated project scaffolding for Next.js 14+ and Vite-based React apps

062 GitHub stars

Use Cases

01Rapidly bootstrapping a new SaaS dashboard with built-in authentication and API layers

02Building a standardized, accessible UI component library using Tailwind CSS and TypeScript

03Auditing and reducing the bundle size of a legacy React application by replacing heavy libraries

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jantoniofc/skillsbank senior-frontend

For use in Claude.ai and ChatGPT

Key Features

01Built-in accessibility (A11y) checklist and semantic HTML implementation

02Deep bundle analysis with dependency optimization recommendations

03Smart component generator for Client/Server components with tests and stories

04Library of advanced React patterns including Compound Components and Custom Hooks

05Automated project scaffolding for Next.js 14+ and Vite-based React apps

062 GitHub stars

Use Cases

01Rapidly bootstrapping a new SaaS dashboard with built-in authentication and API layers

02Building a standardized, accessible UI component library using Tailwind CSS and TypeScript

03Auditing and reducing the bundle size of a legacy React application by replacing heavy libraries