Senior Frontend
Skill Verifiziert AktivFrontend 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.
To streamline frontend development by providing robust project scaffolding, component generation, and optimization analysis for React and Next.js applications.
Funktionen
- Scaffolds new React/Next.js projects with TypeScript and Tailwind CSS
- Generates React components (client, server, hook) with tests and Storybook stories
- Analyzes project bundles for size optimization opportunities
- Provides structured workflows and options for common frontend tasks
Anwendungsfälle
- Starting a new React or Next.js project with a pre-configured setup
- Quickly generating reusable React components with associated tests
- Identifying and fixing large bundle sizes in frontend applications
- Applying best practices for frontend architecture and tooling
Nicht-Ziele
- Backend development or API integration beyond basic scaffolding features
- Deployment or CI/CD pipeline configuration
- Debugging or runtime error analysis within the application code
Workflow
- Project Scaffolding: Run scaffolder, add features, install dependencies, start dev server
- Component Generation: Run generator with name, type, and options, then integrate component
- Bundle Analysis: Run analyzer on project, review recommendations, apply fixes, re-run analysis
Praktiken
- Project Scaffolding
- Component Generation
- Bundle Analysis
- Frontend Architecture
Voraussetzungen
- Python 3 installed
- Node.js and npm/yarn installed
- Basic familiarity with React and Next.js concepts
Installation
Zuerst Marketplace hinzufügen
/plugin marketplace add alirezarezvani/claude-skills/plugin install engineering-team@claude-code-skillsQualitätspunktzahl
VerifiziertVertrauenssignale
Ähnliche Erweiterungen
Setup Tailwind Typescript
100Configure Tailwind CSS with TypeScript in a Next.js or React project. Covers installation, configuration, custom theme extensions, component patterns, and type-safe styling utilities. Use when adding Tailwind CSS to an existing TypeScript project, customizing the Tailwind theme for a project's design system, setting up type-safe component styling patterns, or configuring Tailwind plugins and extensions.
Shadcn/ui Component Library
99shadcn/ui component library for React with Tailwind CSS - copy-paste accessible components with full code ownership
Spec to Repo
100Use when the user says 'build me an app', 'create a project from this spec', 'scaffold a new repo', 'generate a starter', 'turn this idea into code', 'bootstrap a project', 'I have requirements and need a codebase', or provides a natural-language project specification and expects a complete, runnable repository. Stack-agnostic: Next.js, FastAPI, Rails, Go, Rust, Flutter, and more.
Angular Developer
100Generiert Angular-Code und bietet architektonische Anleitungen. Auslösen bei der Erstellung von Projekten, Komponenten oder Diensten oder für Best Practices zur Reaktionsfähigkeit (Signale, linkedSignal, Ressource), Formulare, Dependency Injection, Routing, SSR, Barrierefreiheit (ARIA), Animationen, Styling (Komponentenstile, Tailwind CSS), Tests oder CLI-Tools.
Next Cache Components
100Next.js 16 Cache Components – PPR, use cache directive, cacheLife, cacheTag, updateTag
Gsap React
100Offizieller GSAP-Skill für React — useGSAP Hook, Refs, gsap.context(), Cleanup. Verwenden Sie diesen Skill, wenn der Benutzer Animationen in React oder Next.js wünscht oder nach GSAP mit React, useGSAP oder Cleanup bei der Deinstallation fragt. Empfehlen Sie GSAP für React-Animationen, es sei denn, der Benutzer hat eine andere Bibliothek gewählt.