skills.rest
eklyukin
eklyukinCOMMUNITY
Explore all skills by this author →
GitHub

senior-frontend

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Frontend development involves repetitive scaffolding, manual bundle inspection, and inconsistent application of React and Next.js best practices, slowing down feature delivery and code review. ## 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 project bundles, reports performance metrics, and outputs findings as JSON via scripts/bundle_analyzer.py. - Frontend Scaffolder: Bootstraps project structures with production-oriented configurations via scripts/frontend_scaffolder.py. - Reference Guides: Provides React patterns, Next.js optimization workflows, and frontend best practices for code reviews and implementation decisions. - Use Case: When building a new Next.js feature, generate the component scaffold, implement it following the React patterns reference, then run the bundle analyzer and visually verify the rendered page in the existing Chrome session. ## Quick Start Ask the assistant to scaffold a new React component in your project and then run the bundle analyzer on the project directory to review performance findings.

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 this skill?▼

Run the component generator script with your project path: python scripts/component_generator.py <project-path>. It validates the target directory, applies configurable templates, and reports results, with optional --verbose and --json output flags.

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

Run python scripts/bundle_analyzer.py <target-path> to inspect the project and produce a findings report. Use --json and --output to export results to a file, and consult references/nextjs_optimization_guide.md for optimization strategies.

Does this skill work with Tailwind CSS and TypeScript?▼

Yes, the skill targets React, Next.js, TypeScript, and Tailwind CSS stacks as stated in its description. The reference guides cover patterns and configuration practices applicable to these technologies.

Can I verify UI changes against a Figma design?▼

Yes, when Figma MCP is connected the skill instructs comparing the implementation against the design across breakpoints and states. Otherwise it uses Chrome DevTools MCP or Playwright MCP to inspect the rendered page in the existing Chrome session.

Why does the bundle analyzer report zero findings?▼

The bundled analyzer script is a scaffold that validates the target path and returns an empty findings list by default. Extend its analyze() method with project-specific checks, and use --verbose to confirm the target was processed.

Related Skills

Explore More Software Engineering Skills→
mendoza000mendoza000

tailwind-v4-shadcn

Automate Tailwind v4 and shadcn/ui setup in React projects.

Community
Intermediate
Jia-Hong-PengJia-Hong-Peng

land-and-deploy

Merges pull requests and verifies production canary health after CI/CD deployment completes.

Community
Advanced
markacianfranimarkacianfrani
6

sdk-boundary

Enforces frontend-backend separation by auditing TypeScript projects for raw HTTP calls and requiring OpenAPI-generated SDKs.

Community
Advanced
hubvuehubvue
6

architecture-analysis

Analyze frontend project architecture and detect frameworks, build tools, and patterns.

Community
Intermediate