skills.rest
tranhieutt
tranhieuttCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

senior-frontend

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

70|42|Updated Mar 27, 2026
Search Tags:#typescript#accessibility#frontend#react#nextjs#tailwindcss#bundle-analysis
One-click install
npx skills add https://github.com/tranhieutt/software_development_department --skill senior-frontend-tranhieutt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senior-frontend
Source: https://github.com/tranhieutt/software_development_department/tree/main/.claude/skills/senior-frontend
Command: npx skills add https://github.com/tranhieutt/software_development_department --skill senior-frontend-tranhieutt

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Senior Frontend unifies React/Next.js tooling so that new interfaces are scaffolded with consistent conventions, performance checks, and accessibility reviews instead of piecing together ad-hoc fixes across files.

Core Features & Use Cases

  • Project scaffolding: Run the CLI scaffolder to create Next.js or React apps preconfigured with TypeScript, Tailwind, auth, APIs, and testing so every project starts with battle-tested defaults.
  • Component generation and validation: Use the generators to produce client, server, or hook components alongside tests and Storybook stories, reducing repetitive boilerplate and keeping UI patterns coherent.
  • Performance, accessibility, and pattern reviews: Leverage bundle analyzer insights and reference guides on React patterns, Next.js optimization, and frontend best practices to unblock bundle bloat, accessibility issues, and stale architecture.

Quick Start

Ask the skill to scaffold a Next.js TypeScript project with Tailwind CSS, auth, and refer to the generator for your first component to begin building.

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

You can scaffold a Next.js project with TypeScript and Tailwind CSS by running the CLI scaffolder, which preconfigures auth, APIs, and testing so every project starts with battle-tested defaults.

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

The best way to generate React components with tests and stories is using dedicated generators that produce client, server, or hook components, reducing repetitive boilerplate and keeping UI patterns coherent.

How do I analyze bundle size and fix bloat in a React or Next.js application?▼

You can analyze bundle size and fix bloat in a React or Next.js application by leveraging bundle analyzer insights and reference guides on Next.js optimization to unblock performance issues.

Can I use this frontend workflow for accessibility checks and pattern reviews?▼

Yes, this frontend workflow supports accessibility checks and pattern reviews by providing reference materials covering React patterns, Next.js optimizations, and frontend best practices.

When do I need to run a bundle analyzer for my React application?▼

You need to run a bundle analyzer for your React application when you experience bundle bloat and require performance insights to unblock stale architecture or optimize frontend delivery.

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
WalshingtonWalshington

tanstack-start

Build and deploy TanStack Start full-stack React apps on Cloudflare Workers.

Community
Advanced
dinoudondinoudon

component-library

Create reusable UI components with React and Storybook.

Community
Advanced
neozenithneozenith
2

vite-adk-stack

Integrate Google ADK with Vite, React, TypeScript, Tailwind CSS, and Shadcn UI.

Community
Advanced