DiscordSign up
SKILLS.SH

senior-frontend

Modern frontend development toolkit with React, Next.js, TypeScript, and automated optimization. Three core Python scripts automate component scaffolding, bundle analysis with performance metrics, and full project scaffolding with built-in best practices Includes reference guides for React patterns, Next.js optimization strategies, and frontend best practices covering code quality, performance, security, and maintainability Supports a broad tech stack spanning React, Next.js, React Native, Node.js, PostgreSQL, Docker, Kubernetes, and major cloud platforms Built-in quality checks, performance recommendations, and automated fixes integrated into the development workflow

INSTALLATION
npx skills add https://github.com/davila7/claude-code-templates --skill senior-frontend
Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

Senior Frontend

Complete toolkit for senior frontend with modern tools and best practices.

Quick Start

Main Capabilities

This skill provides three core capabilities through automated scripts:

# Script 1: Component Generator

python scripts/component_generator.py [options]

# Script 2: Bundle Analyzer

python scripts/bundle_analyzer.py [options]

Script 3: Frontend Scaffolder

python scripts/frontend_scaffolder.py [options]

## Core Capabilities

### 1. Component Generator

Automated tool for component generator tasks.

**Features:**

- Automated scaffolding

- Best practices built-in

- Configurable templates

- Quality checks

**Usage:**

python scripts/component_generator.py <project-path> [options]


### 2. Bundle Analyzer

Comprehensive analysis and optimization tool.

**Features:**

- Deep analysis

- Performance metrics

- Recommendations

- Automated fixes

**Usage:**

python scripts/bundle_analyzer.py <target-path> [--verbose]


### 3. Frontend Scaffolder

Advanced tooling for specialized tasks.

**Features:**

- Expert-level automation

- Custom configurations

- Integration ready

- Production-grade output

**Usage:**

python scripts/frontend_scaffolder.py [arguments] [options]


## Reference Documentation

### React Patterns

Comprehensive guide available in `references/react_patterns.md`:

- Detailed patterns and practices

- Code examples

- Best practices

- Anti-patterns to avoid

- Real-world scenarios

### Nextjs Optimization Guide

Complete workflow documentation in `references/nextjs_optimization_guide.md`:

- Step-by-step processes

- Optimization strategies

- Tool integrations

- Performance tuning

- Troubleshooting guide

### Frontend Best Practices

Technical reference guide in `references/frontend_best_practices.md`:

- Technology stack details

- Configuration examples

- Integration patterns

- Security considerations

- Scalability guidelines

## Tech Stack

**Languages:** TypeScript, JavaScript, Python, Go, Swift, Kotlin
**Frontend:** React, Next.js, React Native, Flutter
**Backend:** Node.js, Express, GraphQL, REST APIs
**Database:** PostgreSQL, Prisma, NeonDB, Supabase
**DevOps:** Docker, Kubernetes, Terraform, GitHub Actions, CircleCI
**Cloud:** AWS, GCP, Azure

## Development Workflow

### 1. Setup and Configuration

Install dependencies

npm install

or

pip install -r requirements.txt

Configure environment

cp .env.example .env


### 2. Run Quality Checks

Use the analyzer script

python scripts/bundle_analyzer.py .

Review recommendations

Apply fixes


### 3. Implement Best Practices

Follow the patterns and practices documented in:

- `references/react_patterns.md`

- `references/nextjs_optimization_guide.md`

- `references/frontend_best_practices.md`

## Best Practices Summary

### Code Quality

- Follow established patterns

- Write comprehensive tests

- Document decisions

- Review regularly

### Performance

- Measure before optimizing

- Use appropriate caching

- Optimize critical paths

- Monitor in production

### Security

- Validate all inputs

- Use parameterized queries

- Implement proper authentication

- Keep dependencies updated

### Maintainability

- Write clear code

- Use consistent naming

- Add helpful comments

- Keep it simple

## Common Commands

Development

npm run dev

npm run build

npm run test

npm run lint

Analysis

python scripts/bundle_analyzer.py .

python scripts/frontend_scaffolder.py --analyze

Deployment

docker build -t app:latest .

docker-compose up -d

kubectl apply -f k8s/

BrowserAct

Let your agent run on any real-world website

Bypass CAPTCHA & anti-bot for free. Start local, scale to cloud.

Explore BrowserAct Skills →

Related skills

frontend-design
3/3

Distinctive, production-grade frontend interfaces that reject generic AI aesthetics. Guides design thinking before coding: establish bold aesthetic direction (brutalist, maximalist, retro-futuristic, luxury, playful, etc.) with clear purpose, tone, and differentiation Emphasizes typography, color theming, motion, spatial composition, and textural details as core design pillars; uses CSS variables, animations, and scroll-triggered effects Generates working, functional code (HTML/CSS/JS, React, Vue) that matches implementation complexity to aesthetic vision: elaborate code for maximalist designs, restrained precision for minimalist ones Explicitly avoids generic patterns: overused fonts (Inter, Roboto), clichéd color schemes (purple gradients), predictable layouts, and cookie-cutter component design

Verified authoranthropics
SKILLS.SH
422K139K
2026-05-22
web-design-guidelines
2/3

Audit UI code against Vercel's Web Interface Guidelines for design and accessibility compliance. Fetches the latest guidelines from a remote source before each review, ensuring rules stay current Accepts file paths or patterns as arguments; prompts for files if none provided Outputs findings in a terse file:line format for quick scanning and remediation Covers design, accessibility, and UX best practices as defined in the guidelines repository

Verified authorvercel-labs
SKILLS.SH
318K26.9K
2026-05-22
vercel-composition-patterns
3/3

React composition patterns for scaling components and avoiding boolean prop proliferation. Covers four priority categories: component architecture, state management, implementation patterns, and React 19 APIs, each with specific rules and code examples Includes 10+ named patterns addressing compound components, context providers, state lifting, and explicit variants Designed for refactoring bloated components, building reusable libraries, and reviewing component architecture decisions React 19 specific guidance on removing forwardRef and using use() instead of useContext()

Verified authorvercel-labs
SKILLS.SH
172K26.9K
2026-05-22
ui-ux-pro-max
2/3

Comprehensive design intelligence for web and mobile UI/UX across 10 technology stacks. Includes 50+ design styles, 161 color palettes, 57 font pairings, and 99 UX guidelines with priority-ranked rules for accessibility, touch interaction, performance, and responsive layout Searchable database with design-system generation that recommends patterns, colors, typography, and effects based on product type and keywords; supports light/dark mode and platform-specific guidance (iOS HIG, Material Design, React Native) Covers 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, HTML/CSS) with implementation-specific best practices and performance optimization rules Provides 25 chart types, 161 product type patterns, and pre-built templates for websites, landing pages, dashboards, admin panels, e-commerce, SaaS, portfolios, blogs, and mobile apps with component libraries (buttons, modals, forms, tables, cards, charts)

nextlevelbuilder
SKILLS.SH
158K81.3K
2026-05-22

Stop writing automation&scrapers

Install the CLI. Run your first Skill in 30 seconds. Scale when you're ready.

Start free
free · no credit card