skills.rest
Fantasia1999
Fantasia1999COMMUNITY
Explore all skills by this author →
WebsiteGitHub

senior-frontend

Generate React/Next.js components and optimize TypeScript and Tailwind CSS apps with Python scripts.

Updated Mar 12, 2026
Search Tags:#typescript#frontend#react#next.js#tailwind css#bundle analysis#component generation
One-click install
npx skills add https://github.com/Fantasia1999/claude-skills-zh --skill senior-frontend-fantasia1999
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senior-frontend
Source: https://github.com/Fantasia1999/claude-skills-zh/tree/main/translations/engineering-team/senior-frontend
Command: npx skills add https://github.com/Fantasia1999/claude-skills-zh --skill senior-frontend-fantasia1999

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, next, typescript, tailwindcss, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the development of React and Next.js applications by providing tools for project scaffolding, component generation, bundle analysis, and best practice implementation.

Core Features & Use Cases

  • Project Scaffolding: Quickly set up new Next.js or React projects with TypeScript and Tailwind CSS.
  • Component Generation: Create React components, hooks, and associated tests/stories.
  • Bundle Analysis: Identify and optimize large dependencies in your project's build output.
  • Use Case: Start a new Next.js project with authentication and API features, generate a new UI component for a product card, and then analyze the project's bundle size to find optimization opportunities.

Quick Start

Create a new Next.js frontend project named 'my-app' with authentication and API features.

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?▼

Scaffolding a Next.js project with TypeScript and Tailwind CSS involves using Python scripts to initialize the project structure, enabling you to quickly start building React components and API features.

How do I generate React components with hooks, tests, and stories?▼

Generating React components with hooks, tests, and stories is handled by the Skill's component generation feature, which scaffolds the necessary files so you can build UI elements like product cards efficiently.

What's the best way to analyze and optimize bundle size in a Next.js app?▼

Analyzing and optimizing bundle size in a Next.js app uses Python scripts to identify large dependencies in the build output, helping you find optimization opportunities for frontend performance.

Can I use this to implement accessibility features in React components?▼

Implementing accessibility features in React components is supported through Markdown reference files that provide best practices and patterns, ensuring your web apps meet accessibility standards.

Does React component generation work with existing Tailwind CSS setups?▼

React component generation works with existing Tailwind CSS setups by leveraging Markdown references for best practices, allowing you to create new UI components that integrate into your current project.

Related Skills

Explore More Software Engineering Skills→
mostafasudomostafasudo
3

shadcn-ui

Automate discovery, installation, and customization of shadcn/ui components in React applications.

Community
Intermediate
DexploarerDexploarer
6

bundle-analyzer

Analyze JavaScript bundle sizes and propose code-splitting optimizations.

Community
Intermediate
thapaliyabikendrathapaliyabikendra
24

react-code-review-patterns

Apply React/TypeScript code-review checklists for components, hooks, and accessibility.

Community
Advanced
algusaemalgusaem

senior-frontend

Automate React/Next.js component generation, bundle analysis, and scaffolding with Python scripts.

Community
Basic