skills.rest
LuizEduPP
LuizEduPPCOMMUNITY
Explore all skills by this author →
GitHub

senior-frontend

Scaffold React/Next.js projects and generate components with TypeScript and Tailwind.

Updated Apr 10, 2026
Search Tags:#typescript#accessibility#react#nextjs#tailwind#bundle-optimization#frontend-automation
One-click install
npx skills add https://github.com/LuizEduPP/skills --skill senior-frontend-luizedupp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senior-frontend
Source: https://github.com/LuizEduPP/skills/tree/main/senior-frontend
Command: npx skills add https://github.com/LuizEduPP/skills --skill senior-frontend-luizedupp

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Senior frontend teams waste time manually scaffolding projects, generating components, and auditing performance for modern React/Next.js apps; this Skill centralizes automation and playbooks so you can ship high-quality frontends faster.

Core Features & Use Cases

  • Project Scaffolding & Generators: Run the frontend scaffolder and component generator scripts to bootstrap Next.js or React apps with TypeScript, Tailwind, testing, and Storybook support in seconds.
  • Bundle & Performance Analysis: Use the bundle analyzer to surface heavy dependencies, import anti-patterns, and Next.js configuration suggestions for optimized shipping.
  • Reference Playbooks: Consult the curated React patterns, Next.js optimization guide, and frontend best practices references for accessibility, testing, and TypeScript discipline.
  • Use Case: Prototype a dashboard by scaffolding the project, generating shared UI components, and iterating with the bundle report before releasing.

Quick Start

Ask the senior-frontend skill to scaffold a Next.js dashboard with auth and API features and review the bundle analysis report for heavy dependencies.

Frequently Asked Questions about senior-frontend

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

FAQPage Schema
How do I automate React and Next.js project scaffolding with TypeScript and Tailwind?▼

React and Next.js project scaffolding is automated by running frontend scaffolder scripts that bootstrap apps with TypeScript, Tailwind, testing, and Storybook support in seconds without manual configuration.

What is the best way to analyze bundle size and find heavy dependencies in a Next.js app?▼

The best way to analyze bundle size is using a bundle analyzer to surface heavy dependencies, identify import anti-patterns, and provide Next.js configuration suggestions for optimized shipping.

How do I generate accessible React components quickly?▼

Accessible React components are generated quickly using component generator scripts paired with curated reference playbooks that enforce accessibility, TypeScript discipline, and frontend best practices.

Can I use this frontend automation workflow for dashboard prototyping with auth and API features?▼

Yes, you can scaffold a Next.js dashboard with auth and API features, generate shared UI components, and iterate using the bundle analysis report before releasing the application.

Do I need manual configuration for testing and Storybook when scaffolding a React app?▼

No manual configuration for testing and Storybook is needed because the scaffolder scripts automatically include testing and Storybook support alongside TypeScript and Tailwind during project bootstrapping.

Related Skills

Explore More Software Engineering Skills→
mattwoodcomattwoodco
3

create-next

Initialize a Next.js project with TypeScript, Tailwind CSS, Biome, and Turbopack.

Community
Intermediate
hathbangerhathbanger

vercel-react-best-practices

Apply React and Next.js performance best practices to reduce bundle size.

Community
Advanced
o2b3ko2b3k

tailwindcss-development

Standardize Tailwind CSS utility classes and v4 syntax in HTML components.

Community
Intermediate
tonone-aitonone-ai
69

prism-audit

Analyze frontend stacks for bundle size, dependencies, accessibility, performance, and component quality.

Official
Advanced