Can I generate tests and documentation automatically?

The integrated component generator includes flags to automatically create Vitest testing files and Storybook stories alongside your React components.

Does it support the latest Next.js features?

Yes, it is specifically designed for Next.js 14+ and includes patterns for the App Router, Server Components, Streaming with Suspense, and advanced Image optimization.

Is accessibility built into the generation process?

Yes, the skill provides accessibility checklists and implementation patterns for ARIA labels, semantic HTML, and keyboard navigation to ensure WCAG compliance.

How does this skill improve frontend performance?

It includes a specialized bundle analyzer that audits your package dependencies, identifies 'heavy' libraries like Moment.js or Lodash, and recommends tree-shakable or lightweight alternatives.

Senior Frontend Engineer

Name: Senior Frontend Engineer
Author: micsapp

bymicsapp

0•

Design Tools

Architects, optimizes, and scales high-performance React and Next.js applications using industry-leading patterns and automated scaffolding.

This skill transforms Claude into a senior-level frontend specialist equipped to handle the complexities of modern web development. It provides robust automation for scaffolding Next.js and React projects, generating type-safe components, and performing deep bundle analysis to identify performance bottlenecks. By integrating advanced patterns like server components, compound components, and comprehensive accessibility checklists, this skill ensures that frontend codebases are not only performant and scalable but also accessible and maintainable for long-term production use.

Key Features

01Automated project scaffolding for Next.js 14+ and Vite-based React applications

020 GitHub stars

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

04Accessibility-first development guidance with ARIA and semantic HTML checklists

05Advanced React pattern implementation including Compound Components and Render Props

06Integrated bundle analyzer to identify and replace heavy dependencies

Use Cases

01Rapidly bootstrapping a production-ready Next.js dashboard with Auth and API clients

02Optimizing application bundle sizes by migrating from legacy libraries to modern alternatives

03Building a comprehensive, accessible UI library with integrated testing and documentation

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

Key Features

01Automated project scaffolding for Next.js 14+ and Vite-based React applications

020 GitHub stars

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

04Accessibility-first development guidance with ARIA and semantic HTML checklists

05Advanced React pattern implementation including Compound Components and Render Props

06Integrated bundle analyzer to identify and replace heavy dependencies

Use Cases

01Rapidly bootstrapping a production-ready Next.js dashboard with Auth and API clients

02Optimizing application bundle sizes by migrating from legacy libraries to modern alternatives

03Building a comprehensive, accessible UI library with integrated testing and documentation