skills.rest
mfang0126
mfang0126COMMUNITY
Explore all skills by this author →
WebsiteGitHub

senior-frontend

Automate React/Next.js component generation, bundle analysis, and scaffolding via Python CLI.

Updated Aug 27, 2026
Search Tags:#automation#frontend#react#scaffolding#nextjs#bundle-analysis#component-generator
One-click install
npx skills add https://github.com/mfang0126/language-arts --skill senior-frontend-mfang0126
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senior-frontend
Source: https://github.com/mfang0126/language-arts/tree/main/.opencode/skills/senior-frontend
Command: npx skills add https://github.com/mfang0126/language-arts --skill senior-frontend-mfang0126

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps frontend teams reduce manual toil by automating repetitive UI development tasks and scaffolding.

Core Features & Use Cases

  • Automated Component Generator: quickly scaffold React/Next.js components with best practices.
  • Bundle Analyzer: analyze bundles to identify optimization opportunities.
  • Frontend Scaffolder: bootstrap entire frontend features with consistent structure and patterns.
  • Use Case: When starting a new feature, generate components and scaffolding; when optimizing performance, run analysis.

Quick Start

Run the tooling to scaffold, analyze, and generate components:

  • Component Generator: python scripts/component_generator.py <project-path> [options]
  • Bundle Analyzer: python scripts/bundle_analyzer.py <target-path> [--verbose]
  • Frontend Scaffolder: python scripts/frontend_scaffolder.py <target-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 automate React component scaffolding for new features?▼

Automate React component scaffolding using a local Python CLI script that generates components with best practices. Running component_generator.py targets your project path and outputs ready-to-use files, reducing manual setup for new features.

What is the best way to analyze a Next.js bundle for optimization opportunities?▼

Analyze your Next.js bundle by running bundle_analyzer.py with a target path. This local Python script inspects build outputs to identify optimization opportunities, and supports a verbose flag for detailed reporting.

Can I use these frontend scaffolding scripts without installing Node modules?▼

Yes, you can use these scripts without Node dependencies because the tooling is built entirely on Python 3. You only need Python 3 installed locally to execute the CLI scripts for component generation and bundle analysis.

Does the frontend scaffolder support projects outside of React and Next.js?▼

The frontend scaffolder specifically targets React and Next.js projects. It uses local Python scripts to generate components and bootstrap features with consistent patterns tailored for those frameworks.

Why should I use a Python CLI for frontend bundle analysis instead of Node tools?▼

Using a Python CLI for frontend bundle analysis removes Node version conflicts and dependency bloat. The analyzer script runs directly with Python 3 to inspect bundle outputs and identify optimization opportunities locally.

Related Skills

Explore More Software Engineering Skills→
xlelibertyxleliberty

senior-fullstack

Generate fullstack project boilerplate and analyze code quality for security, complexity, and dependency health.

Community
Advanced
franroafranroa

Test Master

Plan, automate, and execute functional, performance, and security tests in CI/CD pipelines.

Community
Advanced
RyoOsakaRyoOsaka

component

Generate a scaffolded React component with CSS module and tests.

Community
Intermediate
global-osglobal-os

turbopack

Configure and optimize Turbopack within Next.js 16 projects.

Official
Advanced