🎯

senior-frontend

🎯Skill

from hainamchung/agent-assistant

What it does

Generates, analyzes, and scaffolds modern frontend projects using ReactJS, NextJS, TypeScript, and Tailwind CSS with automated best practices.

📦

Part of

hainamchung/agent-assistant(227 items)

senior-frontend

Installation

pip installInstall dependencies

pip install -r requirements.txt

npm runRun npm script

npm run dev

npm runRun npm script

npm run build

📖 Extracted from docs: hainamchung/agent-assistant

Need more details? View full documentation on GitHub →

2Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

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.

Overview

# 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:

```bash

# Script 1: Component Generator

python3 ~/.{TOOL}/skills/senior-frontend/scripts/component_generator.py [options]

# Script 2: Bundle Analyzer

python3 ~/.{TOOL}/skills/senior-frontend/scripts/bundle_analyzer.py [options]

# Script 3: Frontend Scaffolder

python3 ~/.{TOOL}/skills/senior-frontend/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:

```bash

python3 ~/.{TOOL}/skills/senior-frontend/scripts/component_generator.py [options]

```

2. Bundle Analyzer

Comprehensive analysis and optimization tool.

Features:

Deep analysis
Performance metrics
Recommendations
Automated fixes

Usage:

```bash

python3 ~/.{TOOL}/skills/senior-frontend/scripts/bundle_analyzer.py [--verbose]

```

3. Frontend Scaffolder

Advanced tooling for specialized tasks.

Features:

Expert-level automation
Custom configurations
Integration ready
Production-grade output

Usage:

```bash

python3 ~/.{TOOL}/skills/senior-frontend/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

```bash

# Install dependencies

npm install

# or

pip install -r requirements.txt

# Configure environment

cp .env.example .env

```

2. Run Quality Checks

```bash

# Use the analyzer script

python3 ~/.{TOOL}/skills/senior-frontend/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

```bash

# Development

npm run dev

npm run build

npm run test

npm run lint

# Analysis

python3 ~/.{TOOL}/skills/senior-frontend/scripts/bundle_analyzer.py .

python3 ~/.{TOOL}/skills/senior-frontend/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

More from this repository10

🎯

cpp-pro🎯Skill

Develops high-performance C++ applications with modern C++20/23 features, template metaprogramming, and zero-overhead systems design.

🎯

senior-devops🎯Skill

Skill

🎯

senior-architect🎯Skill

Designs scalable software architectures using modern tech stacks, generating architecture diagrams, analyzing dependencies, and providing system design recommendations.

🎯

spec-miner🎯Skill

Extracts and documents specifications from legacy or undocumented codebases by systematically analyzing code structure, data flows, and system behaviors.

🎯

writing-plans🎯Skill

Generates comprehensive, step-by-step implementation plans for software features with precise file paths, test-driven development approach, and clear task granularity.

🎯

docs-seeker🎯Skill

Searches and retrieves technical documentation by executing intelligent scripts across library sources, GitHub repos, and context7.com with automated query detection.

🎯

file path traversal testing🎯Skill

Tests and identifies potential file path traversal vulnerabilities in code by analyzing file path handling and input validation mechanisms.

🎯

red-team-tactics🎯Skill

Simulates adversarial attack techniques across MITRE ATT&CK framework phases, mapping network vulnerabilities and demonstrating systematic compromise strategies.

🎯

nodejs-best-practices🎯Skill

Guides developers in making strategic Node.js architecture and framework decisions by providing context-aware selection principles and modern runtime considerations.

🎯

linux privilege escalation🎯Skill

Identifies and demonstrates potential Linux system vulnerabilities that could allow an unprivileged user to escalate their system permissions to root or administrative access.