skills.rest
FerranGuardia
FerranGuardiaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

senior-frontend

Enforce React/Next.js patterns for scaffolding, bundle analysis, and optimization.

Updated Mar 2, 2026
Search Tags:#typescript#performance#frontend#react#patterns#nextjs#tailwind
One-click install
npx skills add https://github.com/FerranGuardia/claude-autonomous-setup --skill senior-frontend-ferranguardia
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senior-frontend
Source: https://github.com/FerranGuardia/claude-autonomous-setup/tree/main/skills/frontend/senior-frontend
Command: npx skills add https://github.com/FerranGuardia/claude-autonomous-setup --skill senior-frontend-ferranguardia

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Frontend teams often struggle with consistency, maintainability, and performance when building React/Next.js applications. This skill provides patterns, scaffolding, and optimization guidance to accelerate development and improve architectures.

Core Features & Use Cases

  • Patterns for React components, Server/Client boundaries, and data fetching strategies.
  • Scaffolding, bundle analysis, and Next.js optimization guidance to ship faster.
  • Real-world use cases include bootstrapping new apps, refactoring components, and auditing code quality.

Quick Start

Use this skill to kickstart a high-quality, scalable frontend project.

Frequently Asked Questions about senior-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are the best patterns for structuring React components and data fetching in Next.js?▼

React component patterns in Next.js benefit from clear Server/Client boundaries and structured data fetching strategies. Applying pattern-driven scaffolding ensures maintainable architectures and consistent frontend code across scalable applications.

How do I optimize bundle size and performance for a Next.js application?▼

Next.js performance optimization involves automated bundle analysis and applying best-practice guidance for component architecture. Structured workflows help identify bundle bloat and enforce pattern-driven scaffolding to ship faster frontend code.

Does this frontend skill work with TypeScript and Tailwind for scalable app setup?▼

Yes, the frontend patterns support TypeScript and Tailwind within React and Next.js applications. It applies pattern-driven scaffolding and accessibility standards to ensure high-quality, scalable project setup across these specific technologies.

How do I refactor existing React components to improve accessibility and testing standards?▼

Refactoring React components for accessibility and testing involves applying structured workflows and best-practice guidance. Auditing code quality through automated analysis ensures frontend projects meet required accessibility and testing standards.

What is the best way to bootstrap a high-quality React project?▼

Bootstrapping a high-quality React project uses pattern-driven scaffolding for component architecture and project setup. This approach enforces consistency, performance optimization, and accessibility standards from the beginning to accelerate development.

Related Skills

Explore More Software Engineering Skills→
nirukk52nirukk52
1

e2e-testing

Automate ScreenGraph end-to-end UI validation with Playwright and .env configuration.

Community
Intermediate
JansenAnalyticsJansenAnalytics
5

lighthouse-perf

Run automated Lighthouse audits and track performance budgets across pages.

Community
Advanced
GenuinehGenuineh

frontend-styling-twind

Configure Twind and Tailwind CSS design systems for reusable component styling.

Community
Intermediate
terrylicaterrylica
62

multi-agent-performance-profiling

Profile data pipeline stages to identify performance bottlenecks and prioritize optimizations.

Community
Advanced