skills.rest
gouravsingh311
gouravsingh311COMMUNITY
Explore all skills by this author →
GitHub

senior-frontend

Scaffold React and Next.js projects with TypeScript and Tailwind CSS.

Updated Apr 2, 2026
Search Tags:#typescript#frontend#react#scaffolding#nextjs#tailwind#component-generation
One-click install
npx skills add https://github.com/gouravsingh311/splice-app --skill senior-frontend-gouravsingh311
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senior-frontend
Source: https://github.com/gouravsingh311/splice-app/tree/main/.codex/skills/senior-frontend
Command: npx skills add https://github.com/gouravsingh311/splice-app --skill senior-frontend-gouravsingh311

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often spend excessive time wiring React/Next.js projects, duplicating setup, and chasing best practices. This Skill provides reusable patterns, scaffolds, and automation to streamline frontend work.

Core Features & Use Cases

  • Frontend development patterns, performance optimization, and automation tools for React/Next.js applications.
  • Project Scaffolding: Generate a new Next.js or React project with TypeScript, Tailwind CSS, and best practice configurations.
  • Component Generation: Create client/server components, hooks, tests, and Storybook stories through generator scripts.
  • Bundle Analysis: Analyze bundle sizes and provide optimization guidance.
  • Next.js Optimization: Guidance on server vs client components, image handling, and data fetching patterns.
  • Accessibility and Testing: Accessible design guidelines and testing strategies for React apps.

Quick Start

Use the scaffolder to create a new frontend project or generate components with the included scripts to see outputs.

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

You can scaffold React or Next.js projects using the included generator scripts to instantly create a base application with TypeScript, Tailwind CSS, and best practice configurations pre-configured for immediate development.

What is the best way to generate React components with tests and Storybook stories?▼

The best way to generate React components is using automation scripts that create client or server components alongside their associated hooks, unit tests, and Storybook stories simultaneously to ensure consistent architecture.

How do I analyze and optimize bundle size in a Next.js application?▼

Analyze Next.js bundle sizes using the included analysis tool, which evaluates your build output and provides specific optimization guidance to reduce payload and improve application performance.

When should I use server components versus client components in Next.js?▼

Server components should be used for static rendering and direct data fetching, while client components handle interactivity. The Skill provides guidance on choosing between them to optimize data fetching patterns.

Does this frontend scaffolding tool include accessibility and testing strategies?▼

Yes, the frontend scaffolding tool includes accessible design guidelines and comprehensive testing strategies for React applications, ensuring components are generated with compliance and quality validation in mind.

Related Skills

Explore More Software Engineering Skills→
maraxenmaraxen
4

senior-fullstack

Automate fullstack project scaffolding and code-quality checks across React, Next.js, Node.js, GraphQL, and PostgreSQL.

Community
Advanced
djnsty23djnsty23
2

deploy

Deploy and configure CI/CD workflows for Vercel, Supabase, and GitHub Actions.

Community
Advanced
mklozmkloz

react-19

Optimize React 19 application performance and maintainability with best practices.

Community
Advanced
Impertio-StudioImpertio-Studio

tailwind-impl-build-postcss-cli

Integrate Tailwind CSS into non-Vite build systems via PostCSS or standalone CLI.

Official
Intermediate