skills.rest
yousufaltayeb
yousufaltayebCOMMUNITY
Explore all skills by this author →
Website𝕏@yousufaltayebGitHub

senior-frontend

Scaffold React and Next.js projects and generate components with Python scripts.

Updated Aug 27, 2026
Search Tags:#typescript#performance#frontend#react#next.js#tailwind css#component generation
One-click install
npx skills add https://github.com/yousufaltayeb/cms --skill senior-frontend-yousufaltayeb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senior-frontend
Source: https://github.com/yousufaltayeb/cms/tree/main/apps/web/.agents/skills/senior-frontend
Command: npx skills add https://github.com/yousufaltayeb/cms --skill senior-frontend-yousufaltayeb

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the entire frontend development lifecycle, from project setup and component generation to performance optimization and accessibility.

Core Features & Use Cases

  • Project Scaffolding: Quickly create new Next.js or React projects with pre-configured best practices.
  • Component Generation: Generate React components, hooks, and tests with a single command.
  • Bundle Analysis: Identify and fix performance bottlenecks by analyzing bundle sizes and dependencies.
  • Use Case: You need to build a new dashboard application. Use this Skill to scaffold a Next.js project with Tailwind CSS, authentication, and API integration, then generate reusable UI components and optimize the final bundle for fast loading times.

Quick Start

Use the senior-frontend skill to create a new Next.js project named 'my-dashboard' with authentication and API features.

Frequently Asked Questions about senior-frontend

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

FAQPage Schema
How do I scaffold a new Next.js project with Tailwind CSS and authentication?▼

To scaffold a Next.js project with Tailwind CSS, use this Skill to quickly create a pre-configured application structure. It handles project setup and generates reusable UI components with best practices for authentication and API integration.

What is the best way to generate React components and hooks automatically?▼

Generating React components and hooks is handled through automated Python scripts within this Skill. It creates new components, hooks, and tests with a single command, streamlining your frontend development lifecycle.

How do I analyze bundle size and fix performance bottlenecks in a React app?▼

Analyzing bundle size in a React app identifies performance bottlenecks by examining dependencies. This Skill provides automated bundle analysis and references Markdown files for detailed optimization patterns to ensure fast loading times.

Do I need Python to automate frontend project scaffolding and component generation?▼

Yes, Python 3 is required as a dependency to automate frontend project scaffolding and component generation. The Skill utilizes Python scripts to handle the automation of tasks like creating Next.js or React applications.

Can I use this for accessibility best practices in Next.js applications?▼

Yes, you can implement accessibility best practices in Next.js applications using this Skill. It provides comprehensive frontend development capabilities, utilizing reference Markdown files for detailed guidance on accessibility patterns and performance optimization.

Related Skills

Explore More Software Engineering Skills→
PaldomPaldom
1

setting-up-streamlit-environment

Set up Python virtual environments and manage Streamlit dependencies with uv.

Community
Basic
timurgaleevtimurgaleev
5

canary

Monitor post-deploy web apps for defects and performance regressions.

Community
Advanced
AppleLampsAppleLamps

new-component

Generate React component scaffolds with server/client templates and TypeScript props interfaces.

Community
Intermediate
imrim12imrim12

vue-best-practices

Provide Vue.js development guidelines for component structure, reactivity, and performance.

Community
Advanced