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.
- Installs
- 345
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/borghei/claude-skills --skill senior-frontend- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads senior-frontend automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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, settle the inputs below. When one is missing or vague and would change the result, ask about it; when it wouldn't, use a sensible default and say which one you used.
- 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
frontend_scaffoldervscomponent_generator).
Ask about the two or three inputs that matter most for this request, not the whole list. If the user wants a result straight away, produce it and state your assumptions at the top.
Tools
| Tool | Purpose | Command |
|---|---|---|
frontend_scaffolder.py | Scaffold a Next.js or React project with TypeScript + Tailwind + optional features | python scripts/frontend_scaffolder.py my-app --template nextjs --features auth,api |
component_generator.py | Generate a component/hook with optional test and Storybook story | python scripts/component_generator.py ProductCard --type client --with-test --with-story |
bundle_analyzer.py | Score bundle health and flag heavy dependencies from package.json + imports | python scripts/bundle_analyzer.py /path/to/project --verbose |
References
Load the reference that matches the task — keep this file lean and pull detail on demand:
- references/tooling-guide.md — full scaffolding / component-generation / bundle-analysis workflows, option tables, generated structure, the per-script flag reference, troubleshooting table, and success criteria. Read when running a tool or wiring up CLI flags.
- references/code-patterns.md — inline React patterns (compound components, hooks, render props), Next.js optimization (Server/Client, image, data fetching), accessibility + testing snippets, and the Next.js config / Tailwind / TypeScript quick reference. Read when writing components or optimizing pages.
- references/react_patterns.md — deep React patterns library. Read when designing component/state architecture.
- references/nextjs_optimization_guide.md — deep Next.js performance and rendering guide. Read when tuning Next.js apps.
- references/frontend_best_practices.md — accessibility, testing, and general frontend best-practice guide. Read before shipping a component.
Scope & Limitations
What this skill covers:
- React and Next.js project scaffolding with TypeScript and Tailwind CSS
- Component, hook, test, and Storybook story generation following established patterns
- Static bundle analysis based on
package.jsondependency inspection and import pattern scanning - Frontend-specific best practices for Server Components, image optimization, data fetching, and accessibility
What this skill does NOT cover:
- Backend API development, database schema design, or server infrastructure -- see senior-backend and senior-fullstack
- End-to-end testing with Cypress or Playwright -- see senior-qa
- CI/CD pipeline configuration and Docker deployment -- see senior-devops
- Security vulnerability scanning and penetration testing -- see senior-secops and senior-security
Integration Points
| Skill | Integration | Data Flow |
|---|---|---|
| senior-fullstack | Scaffolded frontend projects connect to fullstack project scaffolder for API layer setup | Frontend project structure feeds into project_scaffolder.py which adds backend, Docker, and CI/CD layers |
| senior-backend | Components consuming API data follow patterns defined by backend skill's REST/GraphQL conventions | Backend API response types imported into frontend types/ directory generated by this skill |
| senior-qa | Generated test files (--with-test) use the same Testing Library conventions that the QA skill's test strategies build upon | Component test files hand off to QA skill for integration and E2E test coverage expansion |
| senior-devops | Bundle analyzer output informs build pipeline optimization decisions | Bundle health score and dependency warnings feed into CI quality gates configured by DevOps skill |
| senior-secops | Dependency analysis identifies packages that need security audit | Heavy/outdated dependency warnings from bundle_analyzer.py trigger security review workflows |
| code-reviewer | Generated components follow patterns that the code reviewer skill validates | Code reviewer checks generated components against React/TypeScript best practices defined in this skill's references |
FAQ
What does the senior-frontend skill do?
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.
How do I install senior-frontend?
Run npx skills add https://github.com/borghei/claude-skills --skill senior-frontend in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/senior-frontend/ (personal) or .claude/skills/senior-frontend/ (project).
Which AI agents can use senior-frontend?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is senior-frontend safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains senior-frontend?
It is published by borghei in borghei/claude-skills. It has 345 recorded installs.
More from borghei/claude-skills
product-designer
borghei/claude-skills
Product design across UI/UX, design systems, prototyping, and user research. Use when creating user journey maps, building wireframes, defining design tokens and component systems, planning usability tests, or establishing design principles.
business-intelligence
borghei/claude-skills
Business intelligence across dashboard design, visualization, and reporting automation. Use when designing dashboards, building KPI frameworks, automating reports, creating data stories, or optimizing BI tool performance.
brand-strategist
borghei/claude-skills
Brand strategy covering positioning, identity, brand architecture, messaging frameworks, and governance. Use when developing brand positioning, creating messaging frameworks, auditing brand health, or building brand architecture.
data-analyst
borghei/claude-skills
Data analysis across SQL, visualization, statistics, and reporting. Use when writing SQL queries, building dashboards, performing cohort or funnel analysis, running hypothesis tests, or presenting data-driven recommendations.
data-scientist
borghei/claude-skills
Data science across machine learning, statistical modeling, and experimentation. Use when selecting ML algorithms, engineering features, designing A/B tests, evaluating model performance, or building predictive pipelines.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.