senior-frontend_skill

Overview

This skill provides senior-level frontend development guidance and automation for React, Next.js, TypeScript, and Tailwind CSS projects. It helps scaffold production-ready apps, generate components and hooks, analyze bundle size, and apply performance and accessibility best practices. Use it to accelerate implementation, enforce patterns, and reduce common frontend anti-patterns.

How this skill works

The skill inspects project metadata (package.json, file layout) and applies heuristics to recommend optimizations, scaffold code, or generate components with tests and stories. It runs analyses for bundle health and dependency bloat, suggests replacements, and outputs concrete code snippets and configuration examples for Next.js, TypeScript, and Tailwind. It can also create project skeletons and component files tailored to server/client boundaries and testing needs.

When to use it

• Starting a new React or Next.js project with TypeScript and Tailwind CSS
• Generating components, hooks, tests, and Storybook stories quickly
• Auditing bundle size and replacing heavy dependencies
• Optimizing Next.js server/client component boundaries and data fetching
• Improving accessibility and implementing testing strategies

Best practices

• Prefer Next.js Server Components by default; add 'use client' only when needed
• Replace heavy packages (moment, lodash) with lighter alternatives (date-fns, dayjs, lodash-es)
• Use semantic HTML and visible focus states to meet accessibility requirements
• Parallelize server data fetching with Promise.all and use Suspense for streaming
• Write component tests with Testing Library and include accessibility assertions

Example use cases

• Scaffold a Next.js app with App Router, Tailwind, auth, and testing support via a single command
• Generate a typed Button component, its unit test, and a Storybook story automatically
• Run a bundle analyzer to find large dependencies and get a prioritized remediation list
• Review a page to convert client code into server components where possible to improve TTFB
• Validate color contrast, ARIA attributes, and keyboard navigation for a modal component