skills.rest
bhaktofmahakal
bhaktofmahakalCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

senior-frontend

Generates React components, analyzes bundles, and scaffolds Next.js frontend projects.

2|1|Updated Jan 29, 2026
Search Tags:#typescript#frontend#react#scaffolding#bundle analysis#nextjs#component generator
One-click install
npx skills add https://github.com/bhaktofmahakal/ai-counsellor-hf --skill senior-frontend-bhaktofmahakal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senior-frontend
Source: https://github.com/bhaktofmahakal/ai-counsellor-hf/tree/main/.claude/skills/senior-frontend
Command: npx skills add https://github.com/bhaktofmahakal/ai-counsellor-hf --skill senior-frontend-bhaktofmahakal

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Frontend development involves repetitive scaffolding, inconsistent component structure, and hard-to-diagnose bundle bloat. This Skill standardizes component creation, bundle analysis, and project scaffolding for React, Next.js, TypeScript, and Tailwind CSS codebases. ## Core Features & Use Cases - Component Generator: Scaffolds React components with configurable templates and built-in quality checks via scripts/component_generator.py. - Bundle Analyzer: Inspects a target project path and produces a structured report with findings, verbose logging, and optional JSON export via scripts/bundle_analyzer.py. - Frontend Scaffolder: Bootstraps frontend project structure with production-oriented conventions via scripts/frontend_scaffolder.py. - Reference Guides: Provides React patterns, Next.js optimization strategies, and frontend best practices covering performance, security, and anti-patterns. - Use Case: When starting a new Next.js feature, run the scaffolder to set up structure, generate components for each UI element, then run the bundle analyzer before deployment to catch size regressions. ## Quick Start Ask the assistant to generate a new React component and analyze the frontend bundle of your project using this skill.

Frequently Asked Questions about senior-frontend

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

FAQPage Schema
How do I generate a React component from the command line?▼

Run the component generator script with a target project path: python scripts/component_generator.py <project-path>. It validates the path, scaffolds the component structure, and prints a report. Add --verbose for detailed output or --json to export results.

How to analyze bundle size in a Next.js project?▼

Run python scripts/bundle_analyzer.py <target-path> against your project directory. The script validates the target, performs analysis, and generates a findings report. Use the --json and --output flags to save results to a file for CI pipelines.

What tools for scaffolding a frontend project quickly?▼

The frontend scaffolder script automates project setup with configurable templates and production-oriented conventions. Run python scripts/frontend_scaffolder.py <target-path> to initialize structure, then follow the reference guides for React patterns and Next.js optimization.

Does the bundle analyzer work with any project directory?▼

The analyzer accepts any existing filesystem path and validates it before running. It exits with an error if the target path does not exist. It is framework-agnostic at the path level, though the reference guides focus on React and Next.js projects.

Why does the script fail with a target path error?▼

The scripts raise a validation error when the provided target path does not exist on the filesystem. Verify the path is correct and accessible, use absolute paths when running from a different working directory, and re-run with --verbose to confirm validation steps.

Related Skills

Explore More Software Engineering Skills→
TopengDevTopengDev

project-init

Initialize Next.js, Go, and Python project repositories with dependencies.

Community
Advanced
joaoguirunasjoaoguirunas
3

sites-deployment

Deploy Next.js sites to Vercel, Netlify, and Cloudflare Pages with CI/CD pipelines.

Community
Basic
gb-designgb-design

QA/Testing Agent

Automate E2E, unit, and performance tests for the Purriosity platform.

Community
Advanced
microsoftmicrosoft
190.1k

project-setup-info-local

Scaffold complete project structures for VS Code extensions, web frameworks, and MCP servers.

Official
Intermediate