Does it support the latest Next.js features?

Yes, it is specifically configured for Next.js 14+ architectures, including App Router support, Server Components vs. Client Components optimization, and streaming with Suspense.

How does this skill improve application performance?

It includes a dedicated bundle analyzer that scans project dependencies, assigns a health score, and suggests tree-shakable alternatives for heavy packages like moment.js or lodash.

Can I use this for testing and documentation?

Absolutely. The component generator includes flags to automatically create Vitest test files and Storybook stories, ensuring every piece of UI is documented and verified.

What frontend stack is this optimized for?

While versatile, it is highly optimized for the 'modern stack' consisting of React, Next.js, TypeScript, Tailwind CSS, and Vite.

How does it handle accessibility?

The skill enforces semantic HTML, provides ARIA label checklists, and includes automated testing strategies to ensure components are keyboard navigable and screen-reader friendly.

Senior Frontend Engineer

Name: Senior Frontend Engineer
Author: oabdelmaksoud

byoabdelmaksoud

0•

Design Tools

Builds and optimizes high-performance React and Next.js applications using modern design patterns, accessibility standards, and bundle efficiency tools.

The Senior Frontend skill empowers Claude to act as an expert UI architect specializing in the React ecosystem. It provides comprehensive workflows for scaffolding Next.js projects with TypeScript and Tailwind CSS, generating production-grade components with integrated testing, and performing deep bundle analysis to eliminate performance bottlenecks. By enforcing senior-level patterns like Compound Components, Server Components, and strict accessibility checklists, this skill ensures frontend codebases remain scalable, maintainable, and highly optimized for the modern web.

Key Features

01Heuristic-based bundle analysis to identify heavy dependencies and suggest lightweight alternatives

02Smart component generation including TypeScript interfaces, Vitest tests, and Storybook stories

03Implementation of advanced React patterns like Compound Components and custom hooks

04Automated project scaffolding for Next.js and React with optional Auth and API integration

050 GitHub stars

06Built-in accessibility (A11Y) audits and semantic HTML enforcement for inclusive design

Use Cases

01Rapidly bootstrapping a production-ready dashboard with NextAuth and React Query

02Standardizing a UI library by generating documented, accessible, and tested React components

03Auditing and refactoring a legacy frontend to improve bundle size and Core Web Vitals

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add oabdelmaksoud/agention senior-frontend

For use in Claude.ai and ChatGPT

Key Features

01Heuristic-based bundle analysis to identify heavy dependencies and suggest lightweight alternatives

02Smart component generation including TypeScript interfaces, Vitest tests, and Storybook stories

03Implementation of advanced React patterns like Compound Components and custom hooks

04Automated project scaffolding for Next.js and React with optional Auth and API integration

050 GitHub stars

06Built-in accessibility (A11Y) audits and semantic HTML enforcement for inclusive design

Use Cases

01Rapidly bootstrapping a production-ready dashboard with NextAuth and React Query

02Standardizing a UI library by generating documented, accessible, and tested React components

03Auditing and refactoring a legacy frontend to improve bundle size and Core Web Vitals