Senior Frontend
alirezarezvani/claude-skills
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications.
Frontend development for React, Next.js, TypeScript, and Tailwind CSS.
Install Senior Frontend
$ npx skills add borghei/Claude-Skills --skill senior-frontend -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install borghei/Claude-Skills senior-frontend --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/borghei/Claude-Skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/engineering/senior-frontend .claude/skills/senior-frontend && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "senior-frontend" agent skill from https://github.com/borghei/Claude-Skills/tree/main/engineering/senior-frontend into .claude/skills/senior-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "senior-frontend", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/borghei/Claude-Skills/tree/main/engineering/senior-frontendType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add borghei/Claude-Skills --skill senior-frontend -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install borghei/Claude-Skills senior-frontend --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/borghei/Claude-Skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/engineering/senior-frontend .agents/skills/senior-frontend && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "senior-frontend" agent skill from https://github.com/borghei/Claude-Skills/tree/main/engineering/senior-frontend into .agents/skills/senior-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "senior-frontend", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add borghei/Claude-Skills --skill senior-frontend -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install borghei/Claude-Skills senior-frontend --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/borghei/Claude-Skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/engineering/senior-frontend .cursor/skills/senior-frontend && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "senior-frontend" agent skill from https://github.com/borghei/Claude-Skills/tree/main/engineering/senior-frontend into .cursor/skills/senior-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "senior-frontend", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/borghei/Claude-Skills.git --path engineering/senior-frontend--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add borghei/Claude-Skills --skill senior-frontend -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install borghei/Claude-Skills senior-frontend --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/borghei/Claude-Skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/engineering/senior-frontend .gemini/skills/senior-frontend && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "senior-frontend" agent skill from https://github.com/borghei/Claude-Skills/tree/main/engineering/senior-frontend into .gemini/skills/senior-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "senior-frontend", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install borghei/Claude-Skills senior-frontendInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add borghei/Claude-Skills --skill senior-frontend -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/borghei/Claude-Skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/engineering/senior-frontend .github/skills/senior-frontend && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "senior-frontend" agent skill from https://github.com/borghei/Claude-Skills/tree/main/engineering/senior-frontend into .github/skills/senior-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "senior-frontend", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add borghei/Claude-Skills --skill senior-frontend -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install borghei/Claude-Skills senior-frontend --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/borghei/Claude-Skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/engineering/senior-frontend .opencode/skills/senior-frontend && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "senior-frontend" agent skill from https://github.com/borghei/Claude-Skills/tree/main/engineering/senior-frontend into .opencode/skills/senior-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "senior-frontend", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
senior-frontend- GitHub stars
- 886
- Token cost
- ~1.7k tokens
- SKILL.md length
- 675 words
- Files
- 9 (incl. scripts, references)
- Skills in repo
- 354
- Repo updated
- First seen
- Licence
- MIT
At a glance
Frontend development for React, Next.js, TypeScript, and Tailwind CSS.
- Building React components
- SKILL.md covers Core Capabilities, When to Use, Clarify First and Tools, plus 3 more sections
- Runs Python scripts from its folder; calls python
- Optimizing Next.js performance
What it does
Senior Frontend is an agent skill from borghei/Claude-Skills. 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.
Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 10 other files, including scripts and reference files (for example `references/code-patterns.md`, `references/frontend_best_practices.md` and `references/nextjs_optimization_guide.md`).
It sits in Frontend & Design, covering Frontend development, Web performance and Project scaffolding. It works with Next.js, React, TypeScript and Tailwind CSS. The repository describes itself as: 385 AI skills, 77 expert agents, and 900 stdlib Python tools for every team: engineering, PM, marketing, C-level, compliance, business ops, research, and a LinkedIn toolkit… The licence is MIT.
When your agent uses it
- Building React components
- Optimizing Next.js performance
- Analyzing bundle sizes
- Scaffolding projects
Example prompts
- “/senior-frontend”
Requirements
- Python 3
- Docker
What it can do on your machine
Read from SKILL.md and the folder at commit 4a698e8. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 3 files in scripts/ (Python), which the agent can run.
Shell commands in SKILL.md call:
python
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Senior Frontend loads about 1.7k tokens when it runs, and up to ~19k if it reads all its reference files. Until then it costs about 64 tokens; SKILL.md has 675 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
The full file from borghei/Claude-Skills at commit 4a698e8, republished under its MIT licence (© borghei). 675 words, ~1,679 tokens.
Download SKILL.mdSave it as
.claude/skills/senior-frontend/SKILL.md (or your agent's skills folder). This skill also uses 8 other files; get the full folder from GitHub.- name
- senior-frontend
- description
- 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.
- license
- MIT + Commons Clause
- metadata.version
- 1.1.0
- metadata.author
- borghei
- metadata.category
- engineering
- metadata.domain
- frontend
- metadata.updated
- 2026-06-17
- metadata.tags
- react, typescript, accessibility, performance, state-management
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
frontend_scaffoldervscomponent_generator)
Stop rule: ask only the 2-3 that most change the output. If the user says "just draft it," proceed and list your assumptions at the top of the artifact.
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.
Show full SKILL.md (254 more words)Show less
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 |
© borghei, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 8 other files (scripts, references) in engineering/senior-frontend of borghei/Claude-Skills.
- SKILL.md
- references/code-patterns.md
- references/frontend_best_practices.md
- references/nextjs_optimization_guide.md
- references/react_patterns.md
- references/tooling-guide.md
- scripts/bundle_analyzer.py
- scripts/component_generator.py
- scripts/frontend_scaffolder.py
Open the folder on GitHubat commit 4a698e8
Compare with similar skills
Senior Frontend next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Senior Frontend this skillborghei/Claude-Skills | 886 | — | ~1.7k | Automated safety check: Pass | MIT | |
| Senior Frontendalirezarezvani/claude-skills | 28k | 5 repos | ~3.9k | Automated safety check: Pass | MIT | |
| Senior FrontendOhh-889/skyroc | 795 | 2 repos | ~1.1k | Automated safety check: Notes | MIT | |
| React ExpertJeffallan/claude-skills | 12k | — | ~1.4k | Automated safety check: Pass | MIT | |
| Frontend Engineer Workflownanocoai/nanoclaw | 31k | — | ~1.5k | Automated safety check: Pass | MIT | |
| Frontend Code ReviewProgrammerAnthony/Anything-Extract | 139 | — | ~957 | Automated safety check: Pass | MIT |
Similar skills
Senior Frontend
Ohh-889/skyroc
Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS.
React Expert
Jeffallan/claude-skills
Builds React 19 components in TypeScript with Server Components, useActionState forms, custom hooks and state libraries, checked with tsc and React Testing Library.
Frontend Engineer Workflow
nanocoai/nanoclaw
Sets a build, test and verify routine for web projects: write typed, accessible code and never call work done until it is checked in a real browser with screenshots.
Frontend Code Review
ProgrammerAnthony/Anything-Extract
指导在项目中对前端代码（Next.js/React/TypeScript/Tailwind 等）进行结构、可维护性、性能与一致性审查，基于既定规则清单。适用于用户请求审查 .tsx/.ts/.js/.jsx 等前端文件或前端目录下的页面与组件。不用于后端代码（如 .py）。
Design Code for Any Framework
plugin87/ux-ui-agent-skills
Generates complete, accessible, token-driven UI component code for a chosen framework such as React with Tailwind, SwiftUI, Vue, Flutter or Jetpack Compose.
More from borghei/Claude-Skills
All 354 skills in this repoAgent Harness
borghei/Claude-Skills
Test and evaluation harness for AI agents — scenario suites, deterministic replay, regression diffing, cost and latency budgets.
Agents In The Team
borghei/Claude-Skills
Run delivery when AI coding and ops agents take tickets. An agent skill from borghei/Claude-Skills.
AI Content Disclosure
borghei/Claude-Skills
Check AI-generated marketing content and reviews for required disclosures under the EU AI Act, FTC rules and platform AI-label policies.
AI Prototyping
borghei/Claude-Skills
Idea to AI-generated prototype to customer validation to engineering handoff.
Analytics Engineer
borghei/Claude-Skills
Analytics engineering across data modeling, dbt, transformation, and semantic layers.
Ansoff Matrix
borghei/Claude-Skills
Ansoff Matrix — 4-quadrant framework for growth options: market penetration, market/product development, and diversification.
Related
Categories
Questions about Senior Frontend
What does Senior Frontend do?
Frontend development for React, Next.js, TypeScript, and Tailwind CSS. Senior Frontend is an agent skill from borghei/Claude-Skills.js, TypeScript, and Tailwind CSS.
When should I use Senior Frontend?
Senior Frontend fits situations like: building React components; optimizing Next.js performance; analyzing bundle sizes; scaffolding projects.
How do I install Senior Frontend in Claude Code?
Run `npx skills add borghei/Claude-Skills --skill senior-frontend -a claude-code`. Or copy the skill folder (engineering/senior-frontend in borghei/Claude-Skills) into .claude/skills/senior-frontend in your project. Claude Code loads it when a task matches its description.
How do I install Senior Frontend in Codex?
Run `npx skills add borghei/Claude-Skills --skill senior-frontend -a codex`. Or copy the skill folder (engineering/senior-frontend in borghei/Claude-Skills) into .agents/skills/senior-frontend in your project. Codex loads it when a task matches its description.
Can I use Senior Frontend in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add borghei/Claude-Skills --skill senior-frontend -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/senior-frontend, .gemini/skills/senior-frontend, .github/skills/senior-frontend and .opencode/skills/senior-frontend in your project.
What does Senior Frontend need to run?
Going by SKILL.md and its folder, Senior Frontend needs Python for the scripts in its folder and the command-line tools its instructions call (python). Our summary lists: Python 3; Docker.
Does Senior Frontend access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Senior Frontend safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Senior Frontend use?
Senior Frontend is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Senior Frontend use?
About 1.7k tokens (SKILL.md is roughly 6.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 18k tokens, read only when the agent opens those files.
What are the alternatives to Senior Frontend?
Skills that share tags, products or a category with Senior Frontend: Senior Frontend (alirezarezvani/claude-skills, 28k stars), Senior Frontend (Ohh-889/skyroc, 795 stars), React Expert (Jeffallan/claude-skills, 12k stars) and Frontend Engineer Workflow (nanocoai/nanoclaw, 31k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Senior Frontend?
borghei (a GitHub user) maintains it in borghei/Claude-Skills, which has 886 GitHub stars. The repository holds 354 skills in this directory. The repository was last updated on October 7, 2026.
Source: borghei/Claude-Skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.