skills.rest
salamientark
salamientarkCOMMUNITY
Explore all skills by this author →
GitHub

senior-frontend

Automate React and Next.js scaffolding, component generation, and bundle analysis.

Updated Dec 23, 2024
Search Tags:#typescript#frontend#react#scaffolding#codegen#nextjs#bundle-analysis
One-click install
npx skills add https://github.com/salamientark/dotfiles --skill senior-frontend-salamientark
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senior-frontend
Source: https://github.com/salamientark/dotfiles/tree/main/claude/skills/engineering-team/senior-frontend
Command: npx skills add https://github.com/salamientark/dotfiles --skill senior-frontend-salamientark

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Frontend teams often struggle to bootstrap, standardize, and optimize React/Next.js projects, leading to slow onboarding and inconsistent patterns.

Core Features & Use Cases

  • Project Scaffolding: generate Next.js and React templates with TypeScript and Tailwind CSS.
  • Component Generation: automate client/server components, hooks, tests, and Storybook/stories.
  • Bundle Analysis & Optimization: analyze dependencies, identify heavy packages, and suggest optimizations.
  • Accessibility & Testing: enforce accessible patterns and testing strategies across the frontend.

Quick Start

Create a new app scaffold with the provided frontend scaffolder, then progressively generate components and run the analyzer to optimize your bundle.

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 Next.js app with TypeScript and Tailwind CSS?▼

To scaffold a Next.js app with TypeScript and Tailwind CSS, use automated frontend scaffolding tools to generate standardized project templates. This ensures consistent project structures and faster onboarding for frontend teams.

What is the best way to automate React component generation with tests and Storybook stories?▼

Automating React component generation creates client or server components, hooks, tests, and Storybook stories simultaneously. This enforces consistent patterns and testing standards across modern frontend stacks without manual boilerplate creation.

How do I analyze and optimize a React bundle to identify heavy packages?▼

Analyzing a React bundle involves inspecting dependencies to identify heavy packages and suggest optimizations. This reduces final bundle sizes and improves application load times by targeting inefficient imports.

Can I enforce accessibility patterns and testing strategies across my React project?▼

You can enforce accessibility patterns and testing strategies across React projects using automated frontend workflows. This ensures components meet required standards consistently during generation and refactoring phases.

Does this frontend scaffolding work for both bootstrapping new apps and refactoring existing components?▼

Frontend scaffolding supports both bootstrapping new applications and refactoring existing components. It orchestrates end-to-end workflows for React and Next.js projects, standardizing patterns throughout the development lifecycle.

Why should I use automated scaffolding instead of manually configuring a TypeScript React project?▼

Automated scaffolding eliminates the manual configuration of TypeScript React projects, preventing inconsistent patterns and slow onboarding. It standardizes project architecture immediately, allowing teams to focus on feature development.

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
mouayadakelmouayadakel

bundle-analyzer

Analyze JavaScript bundle sizes and suggest optimization strategies.

Community
Intermediate
saajunaidsaajunaid

design-system-tokens

Generate and validate design tokens as CSS variables across three-layer architectures.

Community
Intermediate
Itinerant18Itinerant18

senior-frontend

Automate React and Next.js component scaffolding, bundle analysis, and project setup.

Community
Advanced