What frameworks does this skill support?

It primarily supports React and Next.js (App Router), using TypeScript and Tailwind CSS as the core stack.

How does it handle project scaffolding?

It can generate full project structures with optional features like NextAuth.js, React Query, and Vitest testing integrated from the start.

Can it help improve website performance?

Yes, it includes bundle analysis tools to swap heavy libraries and provides specific guidance on Next.js Image optimization and Server Components.

Does it generate accessible code?

Absolutely. The skill follows a strict accessibility checklist ensuring semantic HTML, ARIA labels, and proper keyboard navigation for all generated components.

Senior Frontend Architect

Name: Senior Frontend Architect
Author: ComposioHQ

byComposioHQ

•

1,152

•

Design Tools

Architects high-performance React and Next.js applications using TypeScript, Tailwind CSS, and industry-standard design patterns.

Senior Frontend is a specialized Claude Code skill designed to streamline the end-to-end development of modern web applications. It provides comprehensive tools for scaffolding Next.js and React projects, generating type-safe components, and implementing complex patterns like compound components and custom hooks. The skill emphasizes performance through automated bundle analysis and Next.js optimization strategies, while ensuring production readiness with built-in accessibility checklists and semantic HTML standards. Whether you are starting a new project or refactoring existing code for better performance and maintainability, this skill acts as an expert frontend consultant within your development workflow.

Key Features

01Implementation of advanced React patterns like compound components and custom hooks.

02Automated project scaffolding for Next.js 14+ and React with Vite.

03Intelligent bundle analysis to identify and replace heavy dependencies.

04Type-safe component generation for both Client and Server components.

051,152 GitHub stars

06Built-in accessibility (A11y) auditing and semantic HTML enforcement.

Use Cases

01Ensuring WCAG compliance through automated accessibility checks and semantic structure.

02Bootstrapping a new Next.js project with pre-configured Auth, API clients, and testing suites.

03Refactoring legacy React codebases to use modern patterns and optimized bundle sizes.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add composiohq/awesome-claude-plugins senior-frontend

For use in Claude.ai and ChatGPT

Download Skill