Agent skill · software engineering · sickn33
senior-frontend
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.
Why this skill is useful
Adds 3 executable scripts for project scaffolding and component generation that automate frontend development tasks.
What it needs
Requires npm, python installed locally. About 6k tokens when loaded. Last updated 2026-08-07. 44,571 stars on the source repository.
What this skill does
Senior Frontend Frontend development patterns, performance optimization, and automation tools for React/Next.js applications. When to Use Use when scaffolding a new React or Next.js project with TypeScript and Tailwind CSS. Use when generating new components or custom hooks. Use when analyzing and optimizing bundle sizes for frontend applications. Use to implement or review advanced React patterns like Compound Components or Render Props. Use to ensure accessibility compliance and implement robust testing strategies. Table of Contents Project Scaffolding Component Generation Bundle Analysis React Patterns Next.js Optimization Accessibility and Testing --- Project Scaffolding Generate a new Next.js or React project with TypeScript, Tailwind CSS, and best practice configurations. Workflow: Create New Frontend Project 1. Run the scaffolder with your project name and template: 2. Add optional features (auth, api, forms, testing, storybook): 3. Navigate to the project and install dependencies: 4. Start the development server: Scaffolder Options Option Description -------------------- ------------------------------------------------- --template nextjs Next.js 14+ with App Router and Server Components --template react React + Vite with TypeScript --features auth Add NextAuth.js authentication --features api Add React Query + API client --features forms Add React Hook Form + Zod validation --features testing Add Vitest + Testing Library --dry-run Preview files without creating them Generated Structure (Next.js) --- Component Generation Generate React components with TypeScript, tests, and Storybook stories. Workflow: Create a New Component 1. Generate a client component: 2. Generate a server component: 3. Generate with test and story files: 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sickn33/senior-frontend--8bc14f