senior-frontend_skill

Overview

This skill is a comprehensive frontend toolkit for building modern, performant web applications using React, Next.js, TypeScript, and Tailwind CSS. It bundles automated scaffolding, bundle analysis, and production-ready front-end scaffolding to accelerate feature delivery and enforce best practices. Use it to generate components, analyze bundles, and scaffold production-quality projects.

How this skill works

The skill exposes command-line scripts to scaffold components, analyze and optimize bundles, and generate full frontend project skeletons with sensible defaults. Each script runs quality checks, applies configurable templates, and emits actionable recommendations or automated fixes. Reference guides for React patterns, Next.js optimization, and frontend best practices are included to support manual reviews and advanced tuning.

When to use it

• Scaffolding new pages, components, or feature modules with consistent patterns
• Analyzing bundle size, tree-shaking issues, and runtime performance bottlenecks
• Preparing a Next.js or React app for production with performance and security checks
• Implementing TypeScript-first components and Tailwind-based UI rapidly
• Evaluating and improving maintainability, test coverage, and architecture during reviews

Best practices

• Measure performance before making optimizations; use the bundle analyzer to find real hotspots
• Use the configurable templates to enforce consistent component structure and testing hooks
• Keep critical rendering paths small and cacheable; prefer server-side/edge rendering where appropriate
• Write explicit TypeScript types and small, focused components to improve maintainability
• Automate linting, tests, and bundle analysis in CI to catch regressions early

Example use cases

• Generate a set of accessible, tested UI components for a dashboard using the component generator
• Run bundle analysis on a Next.js app to identify large dependencies and get automated mitigation suggestions
• Scaffold a new feature module with routing, state management hooks, and Tailwind layout utilities
• Integrate the analyzer into CI to block PRs that increase bundle size or degrade key metrics
• Follow the Next.js optimization guide to migrate pages to incrementally adopt edge rendering and caching strategies