Agent skill · software engineering · borghei
senior-frontend
Frontend development for React, Next.js, TypeScript, and Tailwind CSS. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding projects, implementing accessibility, or reviewing frontend code.
Why this skill is useful
Adds 3 executable scripts for project scaffolding, component generation, and bundle analysis that aren't in public docs.
What it needs
Requires python installed locally. About 3k tokens when loaded. Last updated 2026-07-21. 462 stars on the source repository.
What this skill does
Senior Frontend Frontend development patterns, performance optimization, and automation tools for React/Next.js applications. Scaffold projects, generate components and hooks, analyze bundle sizes, and apply React/Next.js patterns with accessibility and testing built in. Core Capabilities Project scaffolding — generate Next.js 14+ (App Router) or React+Vite projects with TypeScript, Tailwind, and optional auth/api/forms/testing/storybook features. Component generation — client/server components, custom hooks, with test and Storybook story files following established patterns. Bundle analysis — static package.json + import scanning that scores bundle health and flags heavy dependencies with lighter alternatives. React patterns — compound components, custom hooks, render props, and reusable state-sharing patterns. Next.js optimization — Server vs Client Components, image optimization, parallel/streaming data fetching with Suspense. Accessibility & testing — semantic HTML, ARIA, keyboard nav, focus, and React Testing Library component/a11y tests. When to Use Starting a new React/Next.js project that needs a best-practice baseline. Adding components, hooks, or test/story scaffolding to an existing app. Optimizing bundle size or diagnosing heavy dependencies. Implementing accessible, performant Server/Client Component architecture. Reviewing frontend code against React/TypeScript/a11y best practices. Clarify First Before scaffolding or generating, confirm these inputs. If any is unknown or vague, ASK — do not assume: [ ] Template — Next.js (App Router) vs React+Vite (--template; produces a different project structure) [ ] Features — auth / api / forms / testing / storybook (--features; decides what gets generated) [ ] Generation target — a new project vs a component/hook in an existing app (selects frontendscaffolder vs componentgenerator) Stop rule: ask only the 2-3 that most change the output. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills borghei/senior-frontend