Can I generate tests and Storybook files automatically?

Yes, the component generator includes optional flags to create Vitest test files and Storybook stories alongside your React components.

Does this skill support the Next.js App Router?

Yes, the scaffolder generates Next.js 14+ projects using the App Router and Server Components by default for modern performance benefits.

How does the bundle analyzer help with performance?

It scans your package.json and project structure to identify heavy dependencies like Moment.js and suggests tree-shakeable alternatives like date-fns or Day.js.

Does this skill help with web accessibility (A11y)?

Absolutely. It includes an accessibility checklist and provides patterns for semantic HTML, ARIA labels, and keyboard navigation to ensure WCAG compliance.

Senior Frontend Architect

Name: Senior Frontend Architect
Author: micsapp

bymicsapp

0•

デザインツール

Accelerates the development of high-performance React and Next.js applications through automated scaffolding, component generation, and bundle optimization.

This skill transforms Claude into a senior frontend engineer capable of architecting production-ready applications with React, Next.js, TypeScript, and Tailwind CSS. It provides specialized automation scripts for scaffolding standardized project structures, generating type-safe components with integrated tests and Storybook stories, and conducting bundle audits to identify performance bottlenecks. By incorporating modern patterns like React Server Components and accessible UI practices, this skill ensures that frontend codebases remain maintainable, scalable, and highly optimized for the end-user experience.

主な機能

01Component generator for client/server components, hooks, tests, and Storybook stories.

02Reference guides for advanced React patterns like compound components and render props.

03Intelligent bundle analyzer that identifies heavy dependencies and suggests lightweight alternatives.

040 GitHub stars

05Automated project scaffolding for Next.js 14+ (App Router) and React + Vite.

06Built-in accessibility (A11y) checklists and testing strategies using React Testing Library.

ユースケース

01Bootstrapping a new production-grade Next.js dashboard with integrated authentication and API clients.

02Performing a performance audit on a React application to reduce bundle size and improve Core Web Vitals.

03Refactoring an existing frontend codebase to implement React Server Components and optimized data fetching.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add micsapp/micstec-skills senior-frontend

For use in Claude.ai and ChatGPT

主な機能

01Component generator for client/server components, hooks, tests, and Storybook stories.

02Reference guides for advanced React patterns like compound components and render props.

03Intelligent bundle analyzer that identifies heavy dependencies and suggests lightweight alternatives.

040 GitHub stars

05Automated project scaffolding for Next.js 14+ (App Router) and React + Vite.

06Built-in accessibility (A11y) checklists and testing strategies using React Testing Library.

ユースケース

01Bootstrapping a new production-grade Next.js dashboard with integrated authentication and API clients.

02Performing a performance audit on a React application to reduce bundle size and improve Core Web Vitals.

03Refactoring an existing frontend codebase to implement React Server Components and optimized data fetching.