skills.rest
yezannnnn
yezannnnnCOMMUNITY
Explore all skills by this author →
GitHub

senior-frontend

Generate React/Next.js projects and components with TypeScript and Tailwind.

148|50|Updated Feb 12, 2026
Search Tags:#typescript#frontend#react#scaffolding#nextjs#tailwind
One-click install
npx skills add https://github.com/yezannnnn/agentGroup --skill senior-frontend-yezannnnn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senior-frontend
Source: https://github.com/yezannnnn/agentGroup/tree/main/ella/skills/senior-frontend
Command: npx skills add https://github.com/yezannnnn/agentGroup --skill senior-frontend-yezannnnn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle with building scalable, maintainable React/Next.js projects due to repeated boilerplate, inconsistent patterns, and performance pitfalls.

Core Features & Use Cases

  • Scaffolding: generate Next.js or React + Vite projects with TypeScript, Tailwind CSS, and best-practice configurations.
  • Component generation: create client, server, hook, test, and Storybook components with templates and optional files.
  • Bundle and performance guidance: automated best-practice recommendations for tree-shaking, code-splitting, and optimization.
  • Architecture patterns: TypeScript, utility hooks, and design-system oriented components to accelerate UI development.

Quick Start

Install the frontend scaffolder and generate a sample project with a single command, then start the dev server.

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 React project with TypeScript and Tailwind CSS?▼

To scaffold a React project with TypeScript and Tailwind CSS, this tool generates Next.js or Vite templates with best-practice configurations. It automates file creation and dependency wiring to produce a scalable frontend structure.

Can I generate reusable React components with hooks and Storybook stories automatically?▼

Yes, you can generate reusable React components automatically. The tool creates client, server, hook, test, and Storybook components using predefined templates with optional files to accelerate UI development.

What is the best way to scale a Next.js app and optimize the bundle size?▼

The best way to scale a Next.js app and optimize bundle size is applying automated best-practice recommendations for tree-shaking and code-splitting. The tool provides architecture patterns and performance guidance to reduce bundle bloat.

Do I need a Python environment to generate Next.js project structures?▼

Yes, you need a Python environment to run the provided scripts in the scripts directory, along with a Node.js environment. These execute the project structure generation, config files, and sample components validations.

Does this scaffolding tool work with Vite templates or only Next.js?▼

This scaffolding tool works with both Vite templates and Next.js. It supports generating React projects across both ecosystems using TypeScript and Tailwind CSS with best-practice configurations.

Related Skills

Explore More Software Engineering Skills→
erclxerclx
2

setup-verify

Execute package.json scripts sequentially to validate project configuration.

Community
Intermediate
baekenoughbaekenough
34

optimize-bundle

Apply automated build optimizations to reduce JavaScript bundle size.

Community
Intermediate
qazuorqazuor

react-patterns

Standardize React component design with reusable TypeScript patterns for components, hooks, and composition.

Community
Basic
LuizEduPPLuizEduPP

senior-frontend

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

Community
Advanced