How does the Bundle Analyzer improve application performance?

It provides a deep analysis of your target path to identify heavy dependencies and performance bottlenecks, offering specific recommendations and automated fixes to reduce load times.

What frameworks does the Senior Frontend skill support?

While it specializes in React, Next.js, and TypeScript, it also provides support for Tailwind CSS, React Native, and refactoring legacy HTML into dynamic PHP or JavaScript environments.

Can I use this skill to migrate old websites?

Yes, it is specifically designed to handle tasks like refactoring static HTML templates into modern, dynamic structures while maintaining high code quality and performance.

Does this skill include UI/UX design guidance?

Yes, it includes comprehensive reference documentation for React patterns and frontend best practices to ensure your interfaces are both performant and user-friendly.

Senior Frontend Architect

Name: Senior Frontend Architect
Author: piotroq

bypiotroq

0•

デザインツール

Accelerates modern web development with automated component generation, performance optimization, and expert-level scaffolding for React and Next.js.

This skill transforms Claude into a senior frontend engineer, providing a robust toolkit for building high-performance web applications using React, Next.js, TypeScript, and Tailwind CSS. It streamlines the development lifecycle by automating repetitive tasks through specialized scripts for component generation and project scaffolding, while offering deep bundle analysis to ensure production-grade performance. Whether you are refactoring legacy HTML templates into dynamic architectures or implementing complex UI/UX designs, this skill provides the architectural patterns and best practices required to maintain scalable, secure, and maintainable codebases.

主な機能

01Comprehensive best practices for security, maintainability, and UI/UX implementation

02Refactoring support for migrating static HTML templates to dynamic environments

03Expert-level reference guides for React patterns and Next.js performance tuning

040 GitHub stars

05Deep bundle analysis with performance metrics and optimization recommendations

06Automated component scaffolding with configurable templates and quality checks

ユースケース

01Refactoring legacy web assets into modern, dynamic architectures with clean code patterns

02Identifying and fixing performance bottlenecks through automated bundle analysis

03Rapidly generating a standardized component library for a new React or Next.js project

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add piotroq/adwokat-trzebnica-html-to-php-com senior-frontend

For use in Claude.ai and ChatGPT

主な機能

01Comprehensive best practices for security, maintainability, and UI/UX implementation

02Refactoring support for migrating static HTML templates to dynamic environments

03Expert-level reference guides for React patterns and Next.js performance tuning

040 GitHub stars

05Deep bundle analysis with performance metrics and optimization recommendations

06Automated component scaffolding with configurable templates and quality checks

ユースケース

01Refactoring legacy web assets into modern, dynamic architectures with clean code patterns

02Identifying and fixing performance bottlenecks through automated bundle analysis

03Rapidly generating a standardized component library for a new React or Next.js project