Senior Frontend

Build, optimize, and review React and Next.js applications with TypeScript and Tailwind CSS. Use when scaffolding a frontend project, generating components,...

Security Scan

The skill's code, instructions, and requirements align with a frontend scaffolding/component generation/bundle-analysis tool; nothing requests unrelated credentials or external downloads.

Purpose & Capability

The name/description (React/Next.js scaffolding, components, bundle analysis) matches the included Python scripts and reference docs. The provided scripts implement scaffolding, component generation, and bundle analysis; required binaries/env are none, which is consistent because scripts run with the local Python runtime.

Instruction Scope

SKILL.md limits actions to loading local reference files and running the shipped scripts in scripts/. The scripts read project files (package.json, next.config.*, src/app/pages) and, for scaffolding/generation, write files into the target directory. Reading/writing the project filesystem is expected for this purpose, but be aware the scaffolder and generator create files on disk (there is a dry-run option in component_generator).

Install Mechanism

No install spec or external downloads are present; the skill is instruction + bundled Python scripts. This is low risk compared with skills that download or extract remote archives.

Credentials

The skill declares no environment variables or credentials. The scripts access only repository/project files (package.json, JS/TS sources, next.config.*), which is proportional to bundle analysis and scaffolding tasks. No unrelated secrets or system config paths are requested.

Persistence & Privilege

always is false and the skill does not request persistent platform privileges. It will run scripts when invoked and can create files in the workspace (normal for a scaffolder). Autonomous invocation is allowed by default but is not combined with other concerning flags.

Assessment

This skill appears coherent for building and optimizing frontends. Before running: 1) Review the bundled Python scripts yourself (they are included) and run component_generator.py with --dry-run first to see intended outputs. 2) Run scripts inside the correct project folder (they read package.json and source files) to avoid accidental modifications to other repos — the scaffolder and generator will create files. 3) Note the 'auth' and 'api' feature options add dependencies like next-auth/@tanstack/react-query and create files such as middleware.ts; enable those only if you expect frontend auth/client API scaffolding. 4) Ensure you have Python 3.8+ available. If you need higher assurance, run the scripts in an isolated environment or review the generated artifacts before committing.

React, Next.js, TypeScript, and Tailwind CSS — from scaffold to production.

Activation

Use this skill when the user asks to:

• scaffold a new Next.js or React + Vite project
• generate a React component, custom hook, or Storybook story
• analyze or reduce bundle size
• optimize Next.js (Server vs Client Components, image loading, data fetching)
• implement accessibility (WCAG, ARIA, keyboard navigation)
• review or improve frontend code quality

Workflow

1. Classify the request: scaffold | component | bundle | optimize | accessibility | review.
2. Load the relevant reference:
   • React patterns (compound components, custom hooks, render props) → {baseDir}/references/react_patterns.md
   • Next.js optimization (Server Components, Suspense, images, caching) → {baseDir}/references/nextjs_optimization_guide.md
   • accessibility, testing strategy, Tailwind conventions → {baseDir}/references/frontend_best_practices.md
3. Run the appropriate script when a project or component name is provided:

   # Scaffold a new Next.js or React project
   python {baseDir}/scripts/frontend_scaffolder.py my-app --template nextjs
   python {baseDir}/scripts/frontend_scaffolder.py my-app --template nextjs --features auth,api,forms,testing
   
   # Generate a component (client | server | hook) with optional test and story
   python {baseDir}/scripts/component_generator.py Button --dir src/components/ui
   python {baseDir}/scripts/component_generator.py UserProfile --type server --with-test --with-story
   
   # Analyze bundle for heavy dependencies and optimization opportunities
   python {baseDir}/scripts/bundle_analyzer.py ./project --verbose
   

4. Emit the artifact: component file, project structure, bundle report, or optimization recommendation.

Output Contract

• Open with the classification and the primary issue or decision.
• Emit one primary artifact per response (component, config, or report).
• For bundle analysis: grade (A–F), list heavy packages with lighter alternatives.
• Annotate non-obvious TypeScript patterns or accessibility choices.
• Close with the next recommended step (e.g., "add Storybook story", "add sizes prop to Image").

Key Rules

• Default to Server Components in Next.js. Add 'use client' only when state, effects, or browser APIs are required.
• Default to TypeScript for all generated code.
• Use cn() from @/lib/utils for conditional Tailwind classes — not string concatenation.
• Every generated component must have explicit prop types; no implicit any.
• Bundle score below 70 (grade C or worse) triggers a dependency replacement recommendation.

Proactive Triggers

Flag these without being asked:

• moment → replace with date-fns or dayjs
• lodash full import → switch to lodash-es with tree-shaking
• COPY . . before npm install in Dockerfile → reorder (defer to docker-development)
• Missing alt on <img> or <Image> → accessibility issue
• useEffect with data fetching in Next.js → suggest Server Component or use() hook
• No sizes on responsive <Image> → layout shift risk

Guardrails

• Do not generate backend API routes or database schemas — stay within frontend scope.
• Do not add 'use client' to components that only render static markup.
• Do not recommend @mui/material — prefer shadcn/ui or Radix UI primitives.
• For large-scale bundle or architecture concerns refer to senior-architect.