skills.rest
LannieYoo
LannieYooCOMMUNITY
Explore all skills by this author →
GitHub

senior-frontend

Scaffold React components and analyze bundles for NextJS projects.

Updated Aug 23, 2026
Search Tags:#typescript#performance#frontend#react#scaffolding#nextjs
One-click install
npx skills add https://github.com/LannieYoo/gangwon-business-portal --skill senior-frontend-lannieyoo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senior-frontend
Source: https://github.com/LannieYoo/gangwon-business-portal/tree/main/.agent/skills/dev-senior_frontend
Command: npx skills add https://github.com/LannieYoo/gangwon-business-portal --skill senior-frontend-lannieyoo

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the development of modern, high-performance web applications by providing automated tools and best practices for frontend development.

Core Features & Use Cases

  • Component Generation: Automate the scaffolding of new UI components with built-in best practices.
  • Performance Optimization: Analyze and optimize application bundles for faster load times.
  • Frontend Scaffolding: Set up new frontend projects with expert-level configurations.
  • Use Case: When starting a new feature, use the Component Generator to quickly create a reusable React component, ensuring it adheres to project standards and is optimized for performance.

Quick Start

Use the senior-frontend skill to generate a new React component in the 'src/components' directory.

Frequently Asked Questions about senior-frontend

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

FAQPage Schema
How do I scaffold a new React component using TypeScript?▼

Scaffolding a React component with TypeScript is done through automated scripts that generate new UI files in the project directory, ensuring the output adheres to best practices and performance standards.

What's the best way to analyze and optimize a NextJS bundle?▼

Analyzing a NextJS bundle is best achieved using built-in performance optimization scripts that inspect application packages, identify bloat, and apply best practices for faster load times.

How do I set up a new frontend project with React and NextJS?▼

Setting up a new frontend project with React and NextJS is handled by the frontend scaffolding scripts, which configure the environment with expert-level settings for high-performance web applications.

Does this frontend scaffolding tool enforce state management and UI/UX best practices?▼

Yes, the frontend scaffolding tool enforces state management and UI/UX best practices by embedding these standards directly into the generated components and project configurations.

Why should I use an automated script for component generation instead of manually creating files?▼

Using an automated script for component generation ensures new React components adhere to project standards and are optimized for performance, eliminating manual configuration errors and inconsistencies.

Related Skills

Explore More Software Engineering Skills→
diadia0000diadia0000

types-index

Provide TypeScript type definitions and event handling for project modules.

Community
Advanced
giadaf-booshagiadaf-boosha
10

testing-patterns

Analyze application performance using established testing patterns and metrics.

Community
Advanced
htlin222htlin222
77

frontend

Develop React components with responsive layouts and state management.

Community
Intermediate
BulloRossoBulloRosso
32

public-website

Automates web/ + api/ scaffolding with CDN-based React/MUI frontend and Python API endpoints.

Community
Intermediate