skills.rest
efekrbas
efekrbasCOMMUNITY
Explore all skills by this author →
Website𝕏@efekrbsGitHub

senior-frontend

Generate React and Next.js components and scaffolds with TypeScript and Tailwind CSS.

41|5|Updated Sep 30, 2025
Search Tags:#typescript#accessibility#react#tailwind css#bundle analysis#nextjs#component generation
One-click install
npx skills add https://github.com/efekrbas/discord-hypesquad-manager --skill senior-frontend-efekrbas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senior-frontend
Source: https://github.com/efekrbas/discord-hypesquad-manager/tree/main/.agents/skills/senior-frontend
Command: npx skills add https://github.com/efekrbas/discord-hypesquad-manager --skill senior-frontend-efekrbas

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

It helps you build, review, and optimize modern frontend applications without juggling scattered best practices, inconsistent component patterns, or slow manual setup.

Core Features & Use Cases

  • Project Scaffolding: Generate ready-to-use React or Next.js project structures with TypeScript, Tailwind CSS, and sensible defaults.
  • Component Generation: Create client components, server components, hooks, tests, and Storybook stories with repeatable patterns.
  • Performance and Quality Review: Analyze bundle size, improve Next.js rendering choices, and apply accessibility and testing guidance for production-grade UI work.
  • Use Case: A team starting a dashboard can use this skill to scaffold the app, generate reusable UI components, and catch accessibility or bundle-size issues before shipping.

Quick Start

Use this skill to scaffold, review, or optimize a React or Next.js frontend with TypeScript and Tailwind CSS.

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 Next.js project with TypeScript and Tailwind CSS?▼

To scaffold a Next.js project with TypeScript and Tailwind CSS, this tool generates ready-to-use project structures with sensible defaults and deterministic scaffolds. It creates the foundational component files and configuration without requiring external setup dependencies.

Can I generate React server components and client components automatically?▼

Yes, you can generate React server components and client components automatically. The tool creates component files, hooks, tests, and Storybook stories using repeatable patterns to ensure consistent UI component architecture across your project.

What is the best way to analyze bundle size in a Next.js application?▼

Analyzing bundle size in a Next.js application is handled by reviewing performance and code quality. The tool provides bundle analysis recommendations and applies production frontend pattern selection to optimize Next.js rendering choices and improve overall load performance.

Does this tool help with accessibility review for React UI components?▼

Yes, it helps with accessibility review for React UI components. The tool applies accessibility guidance and testing standards during code generation and review, ensuring your generated components meet production-grade UI requirements before shipping.

Do I need external dependencies to generate Storybook stories and component tests?▼

No, you do not need external dependencies to generate Storybook stories and component tests. The tool relies on local scripts and reference guides to produce deterministic component files, scaffolds, and best-practice recommendations independently.

Related Skills

Explore More Software Engineering Skills→
GemachDAOGemachDAO
4

gdex-ui-install-setup

Scaffold a React or Next.js project with a GDEX SDK provider.

Official
Intermediate
KrismithReddy12KrismithReddy12

land-and-deploy

Merge pull requests, trigger CI/CD pipelines, and validate production health.

Community
Advanced
mlbrightmlbright

tailwind-agent

Style Rails ERB views and ViewComponents with Tailwind CSS 4 utility classes.

Community
Intermediate
pegasystemspegasystems

launchpad-ux-custom-frontend

Build custom Launchpad frontends with the Pega React SDK and Constellation.

Official
Intermediate