Skip to main content
affpapa.org
RU EN
skill CX Codex

senior-frontend · borghei — Claude Code skill: frontend and installation

Build React and Next.js scaffolds and components, inspect dependencies, and apply accessibility practices. Useful when starting a project or extending an existing app.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add borghei/Claude-Skills --skill senior-frontend -a claude-code
Open on GitHub

What senior-frontend does

The skill can scaffold a Next.js App Router or React+Vite project, then generate components or hooks with optional test and Storybook files. Its bundle checker scans package.json and imports to flag heavy dependencies and suggest lighter alternatives. The check is static, not a measurement of a built app.

Guidance covers React component patterns, Server and Client Components, image and data loading, semantic HTML, and accessibility tests. Before generation, choose a project template, optional features, and whether the target is a new project or an existing app. The scope is frontend work; API development and Cypress or Playwright end-to-end tests sit outside it.

What it helps with

  • scaffold a Next.js or React+Vite project with TypeScript and Tailwind
  • generate a component or hook with a test file
  • spot heavy dependencies through package.json and imports
  • review a component for accessibility and React patterns

Example prompts for the agent

  • Create a Next.js project with TypeScript, Tailwind, and auth.
  • Add a ProductCard component with a test and Storybook story.
  • Scan this project’s dependencies and imports for heavy packages.

How to install senior-frontend

1Skills CLI (Vercel)

npx skills add borghei/Claude-Skills --skill senior-frontend -a claude-code

2Manually: put the files in place

~/.claude/skills/senior-frontend/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/senior-frontend/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about senior-frontend

How do I install senior-frontend in Claude Code?

Run npx skills add borghei/Claude-Skills --skill senior-frontend -a claude-code. The skill file is at ~/.claude/skills/senior-frontend/SKILL.md.

What does senior-frontend do?

It assists with React and Next.js project scaffolding, component and hook generation, dependency analysis, and frontend accessibility and testing practices.

How does senior-frontend check bundle size?

bundle_analyzer.py scans package.json and imports to score bundle health and flag heavy dependencies. This is a static analysis.

Similar skills

Everything for Frontend and UI →

senior-frontend by other authors comes first.

senior-frontend Alireza Rezvani This skill supports React and Next.js work, from project scaffolding to bundle checks. Use it when building components, reviewing frontend code, or working on accessibility. 1,630installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set17

growth-marketer Plan experiments, inspect the AARRR funnel, and compare acquisition channels with this skill. Use it to choose a growth metric or assess a test idea. CX Codex +1 428installs hr-business-partner A skill that runs HR business partnering inside your agent: workforce plans, calibration sessions and employee relations cases. CX Codex +1 395installs solutions-architect This skill helps gather technical requirements, shape integration designs, assess security, and plan proof-of-concept work. Use it when a project needs a structured architecture document. CX Codex +1 365installs senior-pm Assess project portfolios, examine risks, and prepare executive updates with this skill. Use it to compare initiatives or plan capacity across concurrent projects. CX Codex +1 364installs talent-acquisition Structured talent acquisition skill for drafting job posts, setting compensation bands, and scoring interviews. It helps evaluate hiring funnels and standardize recruitment. CX Codex +1 343installs product-manager-toolkit A skill for product work: RICE scoring from a CSV, transcript analysis for customer interviews, PRD templates and positioning. CX Codex +1 341installs operations-manager This skill reviews operational processes, capacity needs, and vendor performance. Use it to structure a DMAIC project or plan a workflow change. CX Codex +1 322installs senior-fullstack Generates production-ready project templates for Next.js, FastAPI, MERN, or Django, and runs static quality audits on existing codebases. CX Codex +1 311installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor