skills.rest
singhaganesh
singhaganeshCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

senior-frontend

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

Updated Jul 7, 2026
Search Tags:#typescript#react#tailwind css#bundle analysis#nextjs#component generator#frontend scaffolding
One-click install
npx skills add https://github.com/singhaganesh/Urban-assist --skill senior-frontend-singhaganesh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senior-frontend
Source: https://github.com/singhaganesh/Urban-assist/tree/main/.cursor/skills/senior-frontend
Command: npx skills add https://github.com/singhaganesh/Urban-assist --skill senior-frontend-singhaganesh

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Frontend developers repeatedly write boilerplate components, manually audit bundle sizes, and set up project scaffolding from scratch, which slows down feature delivery and invites inconsistent patterns. ## Core Features & Use Cases - Component Generator: Scaffolds React and TypeScript components with configurable templates and built-in quality checks via scripts/component_generator.py. - Bundle Analyzer: Inspects a target project path and reports findings with optional JSON output via scripts/bundle_analyzer.py. - Frontend Scaffolder: Automates project setup tasks through scripts/frontend_scaffolder.py. - Reference Guides: Provides React patterns, Next.js optimization, and frontend best practices documentation for code reviews and implementation decisions. - Use Case: When building a new Next.js feature, generate the component structure, consult the React patterns reference for state management guidance, then run the bundle analyzer before shipping. ## Quick Start Ask the assistant to generate a new React component in your project and then run the bundle analyzer on the app directory to review optimization recommendations.

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 with TypeScript?▼

Run the component generator script with your project path: python scripts/component_generator.py <project-path>. It scaffolds components using configurable templates with built-in quality checks and best practices.

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

Run python scripts/bundle_analyzer.py <target-path> to analyze the project. Add --verbose for detailed output or --json to export results as JSON for further processing.

Does the bundle analyzer support JSON output?▼

Yes, pass the --json flag to output results as JSON. Use --output followed by a file path to write the JSON report directly to disk instead of printing to stdout.

What React patterns are covered in the reference docs?▼

The references directory includes react_patterns.md, nextjs_optimization_guide.md, and frontend_best_practices.md. They cover implementation patterns, anti-patterns to avoid, performance considerations, and security guidelines.

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

The scripts validate that the target path exists before running. If you see a validation error, confirm the path is correct and accessible from your current working directory.

Related Skills

Explore More Software Engineering Skills→
gonzoblascogonzoblasco
1

senior-frontend

Scaffold React and Next.js projects, generate components, and analyze bundle sizes.

Community
Intermediate
auldsyababuaauldsyababua
6

cicd-pipeline-generator

Generate CI/CD pipeline configurations for GitHub Actions, GitLab CI, CircleCI, and Jenkins.

Community
Advanced
RebornQRebornQ
52

trellis-check

Run spec compliance, lint, type-check, and test suites on new changes.

Community
Advanced
microsoftmicrosoft
190.1k

project-setup-info-local

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

Official
Intermediate