skills.rest
underPressue
underPressueCOMMUNITY
Explore all skills by this author →
GitHub

senior-frontend

Automate ReactJS and Next.js frontend tasks with Python scaffolding and bundle analysis scripts.

Updated Jul 9, 2025
Search Tags:#typescript#performance#frontend#react#scaffolding#next.js#bundle-analysis
One-click install
npx skills add https://github.com/underPressue/dotfiles --skill senior-frontend-underpressue
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senior-frontend
Source: https://github.com/underPressue/dotfiles/tree/main/.claude/skills/senior-frontend
Command: npx skills add https://github.com/underPressue/dotfiles --skill senior-frontend-underpressue

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.

Core Features & Use Cases

  • Component scaffolding, reusable patterns, and starter templates for React/Next.js projects.
  • Performance optimization, bundle analysis, and code-quality checks to accelerate delivery.
  • UI/UX integration, state management support, and code review guidance.

Quick Start

To get started, run the following commands in your project:

  • python scripts/component_generator.py <project-path>
  • python scripts/bundle_analyzer.py <target-path> [--verbose]
  • python scripts/frontend_scaffolder.py <path> [options]

Frequently Asked Questions about senior-frontend

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

FAQPage Schema
How do I scaffold React components for a Next.js project?▼

To scaffold React components for a Next.js project, run python scripts/frontend_scaffolder.py <path> to generate starter templates. You can also use component_generator.py to create reusable UI patterns for your TypeScript application.

What is the best way to analyze a frontend bundle in a TypeScript web app?▼

Analyzing a frontend bundle in a TypeScript web app requires running the bundle_analyzer.py script on your target directory. This automates bundle analysis to identify performance optimization opportunities within your React or Next.js codebase.

Does this frontend development skill support Tailwind CSS integration?▼

Yes, this frontend development skill supports Tailwind CSS integration. It provides automated component scaffolding, UI/UX implementation guidance, and best-practice references specifically designed for React, Next.js, and Tailwind CSS web applications.

Can I use these scripts for frontend performance optimization during code reviews?▼

Yes, you can use these scripts for frontend performance optimization during code reviews. The skill provides bundle analysis scripts and reference documents that deliver best-practice guidance and code-quality checks for React and Next.js projects.

How do I generate reusable UI patterns for a ReactJS application?▼

To generate reusable UI patterns for a ReactJS application, execute the frontend_scaffolder.py or component_generator.py scripts. These tools automate the creation of component structures and starter templates to accelerate your feature development.

What are the limitations of using automated scaffolding for Next.js projects?▼

The limitations of using automated scaffolding for Next.js projects involve its basic implementation depth, meaning it provides starter templates and reusable patterns but may require manual adjustments for complex state management and custom UI/UX implementations.

Related Skills

Explore More Software Engineering Skills→
algusaemalgusaem

senior-frontend

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

Community
Basic
JaganproJaganpro
423

sf-lwc

Scaffold Lightning Web Components with PICKLES architecture and Jest tests.

Community
Advanced
patricio0312revpatricio0312rev
5

eslint-prettier-config

Configure ESLint and Prettier for TypeScript and React projects.

Community
Advanced
digimap2000digimap2000

auracle-frontend

Develop and maintain React 18 frontend components with Tauri 2 IPC wrappers.

Community
Advanced