Senior Frontend
This is a practical frontend toolkit built around React, Next.js, TypeScript, and Tailwind. It includes Python scripts that scaffold new projects with sensible defaults, generate components with tests and stories, and analyze your bundle for bloat like moment.js or full lodash imports. The docs cover server vs client component patterns, compound components, and image optimization strategies. It's opinionated about modern Next.js (App Router, Server Components) but stays flexible with feature flags for auth, forms, and testing setups. The bundle analyzer assigns letter grades and suggests lighter alternatives, which is more useful than just listing dependencies. Good for teams that want consistency without bikeshedding every setup decision.
- skills.sh installs
- 351
- GitHub stars
- 1.1K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add borghei/claude-skills --skill senior-frontend --agent claude-codeInstalls into .claude/skills of the current project.
Files
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 16 (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
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/borghei/claude-skills
- Categories
- Frontend Development, Debugging, Design & UI/UX
- First seen
- Jun 3, 2026
More from borghei/claude-skills
All 82- Talent Acquisition345
- Product Manager Toolkit344
- Operations Manager322
- Senior Fullstack318
- Senior Mobile313
- Marketing Analyst310
- Senior Backend294
- Product Strategist284
- Sales Operations284
- Agile Coach267
- Cmo Advisor260
- Design System Lead259
- Program Manager257
- Seo Specialist242
- Self Improving Agent241
- Senior Architect239
- Senior Prompt Engineer237
- Senior Qa230
- Financial Analyst228
- Ui Design System209
- Senior Devops208
- People Analytics203
- Analytics Engineer202
- Senior Security202
Recommended
More Frontend Development
frontend-designerjamesrochabrun/skillsBuild accessible, responsive, and performant frontend components with design system best practices, modern CSS, and framework-agnostic patterns.340skills.sh installs
accelint-react-best-practicesgohypergiant/agent-skillsReact performance optimization and best practices. ALWAYS use this skill when working with any React code - writing components, hooks, JSX; refactoring; optimiz335skills.sh installs
reactdalestudy/skillsReact 성능 최적화 및 베스트 프랙티스 스킬. Vercel Engineering 가이드 기반, 프레임워크 비종속. 다음 상황에서 사용: (1) React 컴포넌트(.tsx, .jsx) 작성 또는 수정 시, (2) 상태 관리, hooks, 리렌더링 최적화 작업 시, (3) 비동기 데이334skills.sh installs
nuxt-best-practicesvinayakkulkarni/vue-nuxt-best-practicesNuxt 4 performance optimization and architecture guidelines (current through Nuxt 4.5) for building fast, maintainable full-stack applications. This skill shoul325skills.sh installs
nextjs-client-cookie-patternwsimmonds/claude-nextjs-skillsPattern for client components calling server actions to set cookies in Next.js. Covers the two-file pattern of a client component with user interaction (onClick325skills.sh installs
syncfusion-angular-image-editorsyncfusion/angular-ui-components-skillsImplement feature-rich image editing in Angular applications using Syncfusion Image Editor. Use this skill whenever user mentions editing images, adding annotat322skills.sh installs