skills.rest
devCharuzu
devCharuzuCOMMUNITY
Explore all skills by this author →
GitHub

senior-frontend

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

Updated Apr 16, 2026
Search Tags:#automation#typescript#frontend#react#scaffolding#nextjs#tailwind
One-click install
npx skills add https://github.com/devCharuzu/philfida-taskmanage --skill senior-frontend-devcharuzu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senior-frontend
Source: https://github.com/devCharuzu/philfida-taskmanage/tree/main/.windsurf/skills/senior-frontend
Command: npx skills add https://github.com/devCharuzu/philfida-taskmanage --skill senior-frontend-devcharuzu

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Frontend project development for React/Next.js apps can be slow and error-prone without standardized patterns and tooling.

Core Features & Use Cases

  • Project Scaffolding: bootstrap Next.js/React with TypeScript and Tailwind CSS and best-practice configurations.
  • Component Generation: create client, server components, hooks, tests, and Storybook stories.
  • Bundle Analysis: identify heavy dependencies, optimization opportunities, and performance improvements.
  • Accessibility and Testing: guidance and examples for accessible components and robust tests.
  • Next.js Optimization: server/client patterns, image optimization, and data fetching strategies.

Quick Start

Run the frontend scaffolder to bootstrap a new Next.js project with TypeScript and Tailwind, then add optional features as needed.

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?▼

You can scaffold a Next.js project with TypeScript and Tailwind CSS by running the frontend scaffolder, which bootstraps the application with best-practice configurations and optional feature integrations.

What's the best way to generate React server and client components with tests?▼

Generating React server and client components with tests is best handled by using component generation tools that create hooks, tests, and Storybook stories alongside the component files.

How do I analyze my Next.js bundle size to identify heavy dependencies?▼

You can analyze your Next.js bundle size to identify heavy dependencies by running bundle analysis, which highlights optimization opportunities and performance improvements.

Does this frontend scaffolding approach enforce Next.js optimization patterns?▼

Yes, this frontend scaffolding approach enforces Next.js optimization patterns by guiding server and client component structures, image optimization, and data fetching strategies.

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
salamientarksalamientark

senior-frontend

Automate React and Next.js scaffolding, component generation, and bundle analysis.

Community
Advanced
strongeronstrongeron
18

sb-wrappers

Scaffold typed React wrapper components into .storybook/wrappers for audit data visualization.

Community
Intermediate
Ayub-KhanAyub-Khan

typescript-frontend

Scaffold TypeScript frontend applications for React, Next.js, and Vue.

Community
Intermediate