skills.rest
Patasse97
Patasse97COMMUNITY
Explore all skills by this author →
GitHub

senior-frontend

Scaffold React/Next.js projects with TypeScript and Tailwind CSS.

Updated Apr 9, 2026
Search Tags:#testing#accessibility#frontend#react#scaffolding#next.js#bundle-analysis
One-click install
npx skills add https://github.com/Patasse97/claude-skills --skill senior-frontend-patasse97
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senior-frontend
Source: https://github.com/Patasse97/claude-skills/tree/main/engineering-team/senior-frontend
Command: npx skills add https://github.com/Patasse97/claude-skills --skill senior-frontend-patasse97

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Frontend teams need repeatable patterns, robust scaffolding, and automation to deliver scalable React/Next.js apps with consistent structure and quality.

Core Features & Use Cases

  • Project scaffolding for Next.js and React with TypeScript and Tailwind CSS.
  • Component generation, bundle analysis, accessibility guidelines, and testing patterns to boost frontend quality.
  • Real-world workflow examples such as scaffolding new apps, generating UI components, and analyzing bundles for optimization.

Quick Start

Scaffold a new frontend project by providing a name and template, for example create a Next.js app named MyApp.

Frequently Asked Questions about senior-frontend

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

FAQPage Schema
How do I scaffold a new Next.js or React project with TypeScript and Tailwind CSS?▼

To scaffold a new Next.js or React project, you provide a project name and template to generate a structured application pre-configured with TypeScript and Tailwind CSS. This creates a ready-to-use, scalable project foundation.

What's the best way to generate reusable UI components for a large React codebase?▼

Generating reusable UI components for a large React codebase is best handled through automated scaffolding patterns that enforce consistent structure and quality. This approach ensures maintainability across large frontend teams.

How does automated bundle analysis work for React and Next.js performance optimization?▼

Automated bundle analysis for React and Next.js works by evaluating your compiled output to identify optimization opportunities. It provides actionable insights to reduce file sizes and improve frontend loading performance.

How do I enforce accessibility and testing standards across a frontend component library?▼

You enforce accessibility and testing standards across a frontend component library by applying automated tooling and pattern documentation. This ensures every generated component meets required quality and compliance benchmarks.

Can I apply these senior React patterns to an existing frontend project, or is it only for new apps?▼

These senior React patterns can be applied to existing frontend projects to introduce scalable structure and tooling, though they are also designed for scaffolding new Next.js apps from scratch. They help standardize development workflows.

Related Skills

Explore More Software Engineering Skills→
jimCresswelljimCresswell

package-deps-up-to-date

Detect outdated JavaScript packages and apply safe upgrades via npm, yarn, or pnpm.

Community
Intermediate
auldsyababuaauldsyababua
6

cicd-pipeline-generator

Generate CI/CD pipeline configurations for GitHub Actions, GitLab CI, CircleCI, and Jenkins.

Community
Advanced
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

react-ui-patterns

Implement React UI patterns for loading states, error handling, and data fetching.

Community
Intermediate
fabioc-alohafabioc-aloha
1

API Documentation Skill

Scaffold technical documentation projects with templates for API endpoints and guides.

Community
Intermediate