skills.rest
4lerman
4lermanCOMMUNITY
Explore all skills by this author →
GitHub

senior-frontend

Generate React and Next.js projects and components with Python scripts.

Updated Apr 2, 2026
Search Tags:#React#frontend#TypeScript#Next.js#Tailwind CSS
One-click install
npx skills add https://github.com/4lerman/text_evaluator --skill senior-frontend-4lerman
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senior-frontend
Source: https://github.com/4lerman/text_evaluator/tree/main/.agents/skills/engineering-skills/senior-frontend
Command: npx skills add https://github.com/4lerman/text_evaluator --skill senior-frontend-4lerman

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill unit addresses the challenges and inefficiencies in modern frontend development using React, Next.js, TypeScript, and Tailwind CSS.

Core Features & Use Cases

  • Project Scaffolding: Generate new projects with predefined configurations, including Next.js or React with TypeScript and Tailwind CSS.
  • Component Generation: Create React components with TypeScript, including client, server, and hook types, with optional tests and Storybook stories.
  • Bundle Analysis: Analyze and optimize project bundle size by identifying and replacing heavy dependencies.
  • React Patterns: Reference best practices for React development, including compound components, custom hooks, and render props.
  • Next.js Optimization: Optimize Next.js performance with guidelines on server vs. client components, image optimization, and data fetching patterns.
  • Accessibility and Testing: Follow best practices for accessibility and testing with React and Next.js, including semantic HTML, keyboard navigation, ARIA attributes, and testing strategies.

Quick Start

Run the component generator to create a new React component. For example: python scripts/component_generator.py Button --dir src/components/ui.

Frequently Asked Questions about senior-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate React components with TypeScript automatically?▼

You can generate React components with TypeScript by running Python scripts that automate component creation, supporting client, server, and hook types with optional tests and Storybook stories for your frontend project.

What's the best way to optimize Next.js bundle size?▼

Optimize Next.js bundle size by analyzing your project to identify and replace heavy dependencies, applying performance guidelines for server versus client components, image optimization, and data fetching patterns.

Can I scaffold a new Next.js project with Tailwind CSS and TypeScript?▼

Yes, project scaffolding scripts generate new projects with predefined configurations, setting up Next.js or React environments with TypeScript and Tailwind CSS out of the box.

What React patterns should I use for building scalable frontend applications?▼

For scalable React frontend applications, reference best practices for compound components, custom hooks, and render props to structure your codebase efficiently and maintainably.

Do I need external libraries to analyze my frontend bundle?▼

Yes, bundle analysis requires custom scripts and potentially external libraries to effectively identify heavy dependencies and perform component generation for your React and Next.js applications.

How do I implement accessibility and testing in a React application?▼

Implement accessibility and testing in React by following best practices for semantic HTML, keyboard navigation, ARIA attributes, and structured testing strategies for your components.

Related Skills

Explore More Software Engineering Skills→
openxjarvisopenxjarvis
67

uv

Install and manage Python packages, projects, and toolchains with uv.

Community
Intermediate
FerranGuardiaFerranGuardia

senior-frontend

Enforce React/Next.js patterns for scaffolding, bundle analysis, and optimization.

Community
Advanced
rsnormanrsnorman

quality-check

Run ESLint, Prettier, and TypeScript type checks on code.

Community
Intermediate
AngelP17AngelP17
1

senior-fullstack

Automate fullstack project scaffolding and code quality analysis via Python scripts.

Community
Advanced