skills.rest
shabaraba
shabarabaCOMMUNITY
Explore all skills by this author →
Website𝕏@shaba_devGitHub

frontend-dev

Structure React and Next.js frontend projects with TypeScript, Tailwind, and testing standards.

Updated Dec 29, 2025
Search Tags:#typescript#testing#frontend#react#nextjs#tailwind
One-click install
npx skills add https://github.com/shabaraba/shabaraba-cc-plugins --skill frontend-dev-shabaraba
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev
Source: https://github.com/shabaraba/shabaraba-cc-plugins/tree/main/packages/claude-org/skills/frontend-dev
Command: npx skills add https://github.com/shabaraba/shabaraba-cc-plugins --skill frontend-dev-shabaraba

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured, opinionated framework for building modern web frontends with React, Next.js, Tailwind CSS, and TypeScript, reducing setup time and ensuring consistency across projects.

Core Features & Use Cases

  • Standard project templates and naming conventions for components, pages, and utilities.
  • Guidance on Next.js App Router structure, Tailwind integration, and TypeScript strict mode.
  • Use Case: When starting a new frontend feature, initialize a consistent architecture, apply coding standards, and set up tests with Vitest and Playwright.

Quick Start

Create or request a minimal Next.js 14 app with App Router, TypeScript, Tailwind, and a sample page that demonstrates a reusable component.

Frequently Asked Questions about frontend-dev

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure a new Next.js App Router project with TypeScript and Tailwind CSS?▼

Structure your Next.js App Router project by applying established patterns for component, page, and utility naming conventions. This enforces a clear architecture with TypeScript strict mode and Tailwind integration, ensuring consistent and maintainable frontend code.

What is the best way to set up testing for a React and Next.js frontend?▼

The best way to set up testing for a React and Next.js frontend is configuring Vitest for unit tests and Playwright for end-to-end tests. This combination integrates directly into the development workflow to validate UI components and user flows.

Can I use this frontend development approach with an existing React project?▼

You can apply these patterns to existing React projects by adopting the documented best practices for TypeScript strict mode and Tailwind CSS styling. It provides an opinionated framework that reduces setup time and enforces consistency across your current codebase.

How do I implement a new UI feature while maintaining frontend best practices?▼

Implement new UI features by following the standard project templates and coding standards provided. This approach streamlines feature implementation across your web UI by enforcing structured documentation and reusable component architecture.

Does this frontend Skill require TypeScript strict mode?▼

Yes, this Skill enforces TypeScript strict mode across all Next.js and React workflows. Applying strict typing ensures consistent, maintainable code and reduces runtime errors when building web UIs with Tailwind CSS.

Related Skills

Explore More Software Engineering Skills→
liujiayi3703liujiayi3703

web-artifacts-builder

Initialize React projects with TypeScript, Tailwind CSS, and shadcn/ui.

Community
Intermediate
JosiahSiegelJosiahSiegel
51

nextjs-deployment

Automate Next.js deployments to Vercel, Node.js, and Docker with GitHub Actions.

Community
Advanced
jeffwweeejeffwweee

nextjs-frontend

Develop Next.js 14+ frontends with App Router, TypeScript, and React 18.

Community
Advanced
iptodaysiptodays

frontend-standards

Standardize Vue 3 frontend code quality and project structure.

Community
Advanced