senior-frontend

Generate React components with tests and stories.

1|Updated Mar 5, 2026
One-click install
npx skills add https://github.com/louai-420/PFE-Object-Detection --skill senior-frontend-louai-420
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: senior-frontend
Source: https://github.com/louai-420/PFE-Object-Detection/tree/main/skills/senior-frontend
Command: npx skills add https://github.com/louai-420/PFE-Object-Detection --skill senior-frontend-louai-420

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires PropTypes, react, typescript, next, tailwindcss, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Frontend developers need to build, optimize, and maintain high-quality, performant web applications efficiently.

Core Features & Use Cases

  • Component generation and scaffolding: Quickly create React components with tests and stories, reducing setup time.
  • Performance analysis and optimization: Use bundle analyzers and best practices to enhance load times and responsiveness.
  • UI best practices: Follow accessibility, state management, and architecture guidelines to ensure scalable, maintainable code.
  • Use Case: A developer wants to add a new reusable button component, check the bundle size, and apply accessibility improvements across a project.

Quick Start

Run scripts to generate components, analyze bundle sizes, and scaffold project architecture, then implement front-end features following the provided guidelines.

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 tests and stories automatically?

You can generate React components with tests and stories by running the provided scaffolding scripts, which quickly create the component structure and reduce manual setup time for your frontend project.

What's the best way to analyze bundle size in a Next.js application?

To analyze bundle size in a Next.js application, you can use the integrated bundle analyzers and performance best practices to identify heavy dependencies and enhance load times for your web UI.

How do I apply accessibility improvements to an existing Tailwind CSS component?

You apply accessibility improvements to a Tailwind CSS component by following the provided UI best practices guidelines, which help ensure your React components meet necessary accessibility and state management standards.

Can I use this frontend development workflow without TypeScript?

While the workflow heavily relies on TypeScript and PropTypes for component validation, you can adapt the React and Next.js scaffolding scripts to JavaScript projects, though you will lose type safety benefits.

Does the component scaffolding include state management architecture guidelines?

Yes, the component scaffolding includes state management and architecture guidelines to ensure the generated React components are scalable and maintainable across your entire frontend project.

Why does my React component bundle size exceed expected limits after scaffolding?

If your React component bundle size exceeds expected limits, you should run the performance analysis scripts to audit dependencies and apply optimization best practices to reduce the final output size.