skills.rest
nicanac
nicanacCOMMUNITY
Explore all skills by this author →
GitHub

senior-frontend

Scaffold React components and analyze frontend bundle sizes.

Updated Jan 21, 2026
Search Tags:#typescript#performance#frontend#react#scaffolding#nextjs
One-click install
npx skills add https://github.com/nicanac/familly-journal --skill senior-frontend-nicanac
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senior-frontend
Source: https://github.com/nicanac/familly-journal/tree/main/.cursor/skills/senior-frontend
Command: npx skills add https://github.com/nicanac/familly-journal --skill senior-frontend-nicanac

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: Quickly scaffold new UI components following best practices.
  • Bundle Analysis: Identify and optimize frontend bundle sizes for improved performance.
  • Project Scaffolding: Set up new frontend projects with pre-configured structures and tools.
  • Use Case: When starting a new feature, use the component generator to create a reusable React component, then use the bundle analyzer to ensure its impact on the application's load time is minimal.

Quick Start

Run the component generator script to create a new React component in 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 scaffold new React components using TypeScript?▼

To scaffold React components using TypeScript, use an automated component generation script. This creates new UI components following established best practices, ensuring proper typing and structure from the start.

What is the best way to analyze frontend bundle size in NextJS?▼

The best way to analyze frontend bundle size in NextJS is through dedicated bundle analysis tools. This identifies heavy dependencies and helps optimize frontend bundle sizes for improved application load times.

How do I set up a new NextJS project with pre-configured tools?▼

You can set up a new NextJS project with pre-configured tools using project scaffolding features. This initializes your frontend project with predefined structures and development tools, streamlining the initial setup process.

Does this frontend development approach work with React and NextJS?▼

Yes, this frontend development approach works directly with React and NextJS. It provides comprehensive capabilities for building modern, performant web applications using these frameworks alongside TypeScript.

How do I optimize web app performance when adding new UI components?▼

To optimize web app performance when adding new UI components, generate the component using the scaffolding tool, then run a bundle analyzer. This ensures the new component's impact on application load time remains minimal.

Related Skills

Explore More Software Engineering Skills→
GemachDAOGemachDAO
4

gdex-ui-install-setup

Scaffold a React or Next.js project with a GDEX SDK provider.

Official
Intermediate
rhbpinheirorhbpinheiro

testing-workflow

Automates web app testing workflows with Playwright, Python, and CI/CD integration.

Community
Advanced
daithang59daithang59
1

Add React Component

Scaffold React components with styling, context, API integration, and tests.

Community
Advanced
sebc-devsebc-dev

framework-to-capacitor

Configure web frameworks like Next.js and React for Capacitor mobile apps.

Community
Advanced