senior-frontend

Generate React components, analyze bundles, and scaffold frontend projects via Python scripts.

Updated Jan 9, 2026
One-click install
npx skills add https://github.com/SKANL/saas-abogados-nextjs --skill senior-frontend-skanl
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: senior-frontend
Source: https://github.com/SKANL/saas-abogados-nextjs/tree/main/.agents/skills/senior-frontend
Command: npx skills add https://github.com/SKANL/saas-abogados-nextjs --skill senior-frontend-skanl

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill consolidates frontend development tasks into automated scripts to reduce boilerplate and accelerate delivery for React, Next.js, and TypeScript projects.

Core Features & Use Cases

  • Automated Component Generator: scaffolds reusable UI components following best practices.
  • Bundle Analyzer: analyzes and optimizes bundle size and performance.
  • Frontend Scaffolder: sets up project structure and tooling for new features.

Quick Start

Run: python scripts/component_generator.py <project-path> [options] This will generate components, run the bundle analyzer, and scaffold the frontend project structure. You can then inspect the results and adapt the generated templates to your project.

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 Next.js features?

To automate React component scaffolding, you can use a script that generates reusable UI components following TypeScript best practices. This approach accelerates frontend development by reducing boilerplate and setting up the necessary project structure automatically.

What is the best way to analyze bundle size and optimize frontend performance?

Analyzing bundle size involves running a local script that evaluates your frontend project to identify performance bottlenecks. This process helps optimize the final bundle by highlighting unnecessary imports and large dependencies within your React or Next.js application.

Can I generate TypeScript UI components without external services or API calls?

Yes, you can generate TypeScript UI components entirely offline using local Python scripts. These scripts operate directly on your target project path to scaffold components and structure without relying on any external services or network dependencies.

How do I set up a frontend project structure for a new React feature?

Setting up a frontend project structure involves running a scaffolding script that establishes the directory layout and tooling for new features. This process configures the foundational files needed for React and Next.js development to accelerate delivery.

Does the bundle analyzer work with existing Next.js projects?

Yes, the bundle analyzer works with existing projects by targeting your specified project path. It evaluates the current bundle size and performance metrics, allowing you to inspect the results and adapt the generated templates to your specific setup.

What are the limitations of using automated scripts for frontend scaffolding?

The main limitation of automated frontend scaffolding is that generated templates are generic and require manual adaptation to fit specific project designs. The scripts handle boilerplate structure, but developers must still customize the TypeScript and UI components for unique use cases.