agentleFS
Sign inStart free
OpenxIntelligenceOpenxIntelligence/Coding-Agent-Skills/senior-frontend/SKILL.md

senior-frontend

Skill4 starsChanged 26 days agoMITView on GitHub

Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.

  • Reads credentials
  • Installs packages

29 other projects use a version of this, 3 of them edited.

Adopted by

Most recently taken up by

Used with

Projects with it also use ui-ux-pro-max and vercel-react-best-practices.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • StrayDragonSkill

    ui-ux-pro-max

    UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.

    Also in 5 projects that use this

  • VercelSkill

    vercel-react-best-practices

    React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

    Also in 3 projects that use this

The file

We split this skill into the rules it gives an agent

3 rules. 0 are common, 2 are distinctive, and 1 is very specific to this project.

  • 0

    Common

    Most of the 18 edited versions we read keep these.

  • 2

    Distinctive

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Follow the patterns and practices documented in:

    line 141
  2. Very specific:

    Check the comprehensive troubleshooting section in references/frontend_best_practices.md.

    line 195
  3. Distinctive:

    Check script output messages

    line 200

“Common” is measured: kept by at least 6 in 10 of the 18 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
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/

Troubleshooting

Common Issues

Check the comprehensive troubleshooting section in references/frontend_best_practices.md.

Getting Help

  • Review reference documentation
  • Check script output messages
  • Consult tech stack documentation
  • Review error logs

Resources

  • Pattern Reference: references/react_patterns.md
  • Workflow Guide: references/nextjs_optimization_guide.md
  • Technical Guide: references/frontend_best_practices.md
  • Tool Scripts: scripts/ directory

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free