senior-frontend

Generate React components, analyze bundles, and scaffold Next.js projects with Python scripts.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/LPDigital-Agent/galderma-demo-trackwise --skill senior-frontend-lpdigital-agent
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: senior-frontend
Source: https://github.com/LPDigital-Agent/galderma-demo-trackwise/tree/main/.claude/skills/senior-frontend
Command: npx skills add https://github.com/LPDigital-Agent/galderma-demo-trackwise --skill senior-frontend-lpdigital-agent

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill eliminates repetitive scaffolding, analysis, and quality-check tasks for React/Next.js projects, enabling teams to deliver features faster with consistent standards.

Core Features & Use Cases

  • Automated Component Generator: scaffolds new UI components with best practices.
  • Bundle Analyzer: analyzes bundle sizes and provides optimization recommendations.
  • Frontend Scaffolder: creates production-ready project skeletons with recommended configurations.

Quick Start

  • python scripts/component_generator.py <project-path>
  • python scripts/bundle_analyzer.py <target-path>
  • python scripts/frontend_scaffolder.py <arguments>

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 generation for my Next.js project?

Automate React component generation by running the Python-based component generator script, which scaffolds new UI components with best practices. This enforces consistent patterns and eliminates repetitive manual coding across your development workflow.

Can I scaffold a production-ready React project skeleton with recommended configurations?

Yes, you can scaffold a production-ready React project skeleton by executing the frontend scaffolder script. It creates ready-to-use project structures with recommended configurations, enabling faster setup and deployment for senior engineers.

What is the best way to analyze bundle size and get optimization recommendations for a Next.js app?

The best way to analyze bundle size is running the bundle analyzer script against your target build path. It analyzes bundle sizes and provides optimization recommendations, enabling performance tuning and UI best-practice adoption.

Do I need any external dependencies to run these frontend automation scripts?

No external dependencies are required to run these frontend automation scripts. The skill relies solely on Python-based scripts to generate code, analyze builds, and scaffold project structures without additional package installations.

How does automated frontend scaffolding enforce UI best practices during development?

Automated frontend scaffolding enforces UI best practices by generating code and project structures that adhere to predefined patterns. It targets React and Next.js projects to maintain consistent standards across development, review, and deployment workflows.

What are the limitations of using scripts for frontend project scaffolding and bundle analysis?

The primary limitation of using scripts for frontend scaffolding and bundle analysis is the restriction to React and Next.js projects. It provides optional references for guidance but cannot automatically tune performance for other frameworks.