skills.rest
sobhanashine
sobhanashineCOMMUNITY
Explore all skills by this author →
GitHub

senior-frontend

Automates React/Next.js scaffolding, component generation, and bundle analysis using Python scripts.

1|Updated May 12, 2026
Search Tags:#React#TypeScript#Next.js#Tailwind CSS#frontend development
One-click install
npx skills add https://github.com/sobhanashine/nazarato --skill senior-frontend-sobhanashine
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senior-frontend
Source: https://github.com/sobhanashine/nazarato/tree/main/.agents/skills/senior-frontend
Command: npx skills add https://github.com/sobhanashine/nazarato --skill senior-frontend-sobhanashine

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires python, numpy, pandas, pyyaml, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill simplifies and accelerates the process of building and maintaining complex frontend applications using React, Next.js, TypeScript, and Tailwind CSS, by providing tools for project scaffolding, component generation, bundle optimization, and more.

Core Features & Use Cases

  • Project Scaffolding: Generate a new Next.js or React project with customizable templates and features.
  • Component Generation: Automatically create React components, including TypeScript, tests, and Storybook stories.
  • Bundle Analysis: Analyze package.json and project structure for optimization opportunities and heavy dependencies.
  • Next.js Optimization: Utilize best practices for Next.js development, including server vs. client components and image optimization.
  • Accessibility and Testing: Provide guidelines and tools for creating accessible and testable frontend components.

Quick Start

Generate a new Next.js project with TypeScript and Tailwind CSS:

python scripts/frontend_scaffolder.py my-app --template nextjs

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

To scaffold a new Next.js project with TypeScript and Tailwind CSS, run the Python scaffolder script with your app name and the Next.js template flag. This generates a complete, customizable project structure.

Can I automatically generate React components with TypeScript tests and Storybook stories?▼

Yes, you can automatically generate React components with TypeScript, tests, and Storybook stories. The Skill provides dedicated scripts that create these component files and associated tests automatically.

What is the best way to analyze a React project's package.json for bundle optimization opportunities?▼

The best way to analyze a React project's package.json for bundle optimization is to use the Skill's built-in bundle analysis script. It identifies heavy dependencies and optimization opportunities in your project structure.

Do I need Python to use this React and Next.js project generator?▼

Yes, you need Python installed along with Node.js and required dependencies like numpy, pandas, and pyyaml. The Skill uses Python scripts to automate project scaffolding and frontend component generation.

Does this Skill provide guidelines for creating accessible and testable frontend components?▼

Yes, this Skill provides guidelines and tools for creating accessible and testable frontend components. It also incorporates Next.js optimization best practices for server versus client components and image optimization.

Related Skills

Explore More Software Engineering Skills→
andikarachmanandikarachman
14

setup

Audit Python version and installed DS/ML libraries for environment readiness.

Community
Intermediate
oteroweboteroweb

vercel-react-best-practices

Identify and apply React/Next.js performance best practices across eight categories.

Community
Advanced
hakushunhakushun

frontend-component

Create React components with TypeScript, Storybook stories, and tests.

Community
Basic
Nuwanda04Nuwanda04

senior-frontend

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

Community
Advanced