senior-frontend
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.
Profile →npx skills add sickn33/agentic-awesome-skills --skill senior-frontend --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Senior Frontend Frontend development patterns, performance optimization, and automation tools for React/Next.js applications. ## When to Use - Use when scaffolding a new React or Next.js project with TypeScript and Tailwind CSS. - Use when generating new components or custom hooks. - Use when analyzing and optimizing bundle sizes for frontend applications. - Use to implement or review advanced React patterns like Compound Components or Render Props. - Use to ensure accessibility compliance and implement robust testing strategies. ## Table of Contents - [Project Scaffolding](#project-scaffolding) - [Component Generation](#component-generation) - [Bundle Analysis](#bundle-analysis) - [React Patterns](#react-patterns) - [Next.js Optimization](#nextjs-optimization) - [Accessibility and Testing](#accessibility-and-testing) --- ## Project Scaffolding Generate a new Next.js or React project with TypeScript, Tailwind CSS, and best practice configurations. ### Workflow: Create New Frontend Project 1. Run the scaffolder with your project name and template: ```bash python scripts/frontend_scaffolder.py my-app --template nextjs ``` 2. Add optional features (auth, api, forms, testing, storybo
- When to Use
- Table of Contents
- Project Scaffolding
- Workflow: Create New Frontend Project
- Scaffolder Options
- Generated Structure (Next.js)
- Component Generation
- Workflow: Create a New Component
- Generator Options
- Generated Component Example
- Bundle Analysis
- Workflow: Optimize Bundle Size
- Bundle Score Interpretation
- Heavy Dependencies Detected
python scripts/frontend_scaffolder.py my-app --template nextjs python scripts/frontend_scaffolder.py dashboard --template nextjs --features auth,api cd my-app && npm install npm run dev python scripts/component_generator.py Button --dir src/components/ui python scripts/component_generator.py ProductCard --type server python scripts/component_generator.py UserProfile --with-test --with-story python scripts/component_generator.py FormValidation --type hook python scripts/bundle_analyzer.py /path/to/project python scripts/bundle_analyzer.py . --verbose
What does the senior-frontend skill do?
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.
How do I install it?
Run `npx skills add sickn33/agentic-awesome-skills --skill senior-frontend --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From sickn33/agentic-awesome-skills, a repository with 44,414 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.