skills.rest
KouemouSah
KouemouSahCOMMUNITY
Explore all skills by this author →
GitHub

TaxasGE Frontend Dev

Provide Next.js/React architecture patterns, templates, and best practices for frontend tasks.

Updated Jul 22, 2025
Search Tags:#code quality#best practices#React#frontend#Next.js#UI development#web design
One-click install
npx skills add https://github.com/KouemouSah/taxasge --skill taxasge-frontend-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: TaxasGE Frontend Dev
Source: https://github.com/KouemouSah/taxasge/tree/main/.claude/skills/taxasge-frontend-dev
Command: npx skills add https://github.com/KouemouSah/taxasge --skill taxasge-frontend-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent coding styles, repetitive setup, and overlooked best practices can slow down frontend development and introduce technical debt. This Skill acts as your expert guide, providing standardized Next.js/React patterns and a comprehensive checklist to ensure every UI component is built efficiently, consistently, and to the highest quality, letting you deliver exceptional user experiences with ease.

Core Features & Use Cases

  • Standardized Next.js/React Patterns: Provides ready-to-use templates and architectural guidelines for pages, client components, forms (React Hook Form + Zod), and API clients, accelerating development.
  • Integrated UI/UX Best Practices: Guides the use of shadcn/ui and Tailwind CSS for a cohesive and responsive design system, ensuring visual consistency across your application.
  • Automated Quality Assurance Checklist: Includes a detailed checklist covering ESLint, TypeScript, testing (Jest, Playwright), and Lighthouse performance scores, guaranteeing robust and high-performing frontend applications.
  • Use Case: When tasked with building a new user dashboard, simply ask Claude to "use the Frontend Dev Skill to create a new dashboard page." The Skill will then guide the DEV_AGENT through the entire process, from scaffolding the page with the correct Next.js structure to ensuring all UI components adhere to shadcn/ui standards and passing all quality checks, all while you oversee the high-level vision.

Quick Start

DEV_AGENT, use the Frontend Dev Skill to create a new declarations page. DEV_AGENT, apply the form pattern for user registration.

Frequently Asked Questions about TaxasGE Frontend Dev

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

FAQPage Schema
How do I set up a new React component with Next.js best practices?▼

Set up React components by following Next.js patterns for client and server components, using shadcn/ui for UI consistency, and Tailwind CSS for styling. This Skill provides ready-to-use templates that enforce these conventions, reducing setup time and ensuring architectural consistency across your project.

What's the best way to build forms in Next.js with validation?▼

Build forms using React Hook Form paired with Zod for schema validation in Next.js. This Skill includes form pattern templates that integrate both libraries, handling client-side validation, error states, and server-side type safety to streamline form development.

How can I ensure code quality in my React frontend project?▼

Enforce code quality through ESLint, TypeScript, automated testing with Jest and Playwright, and Lighthouse performance audits. This Skill provides a comprehensive QA checklist covering all these tools, helping you catch issues early and maintain high-performing, robust frontend applications.

Can I use shadcn/ui components with my Next.js project?▼

Yes, shadcn/ui integrates seamlessly with Next.js and Tailwind CSS. This Skill guides you through applying shadcn/ui components to maintain visual consistency and responsive design across your application while following Next.js architectural patterns.

How do I structure API clients in a Next.js application?▼

Structure API clients by creating reusable, type-safe modules within your Next.js project. This Skill provides API client templates that establish consistent patterns for data fetching, error handling, and integration with your frontend components.

What patterns should I follow when building a dashboard page in Next.js?▼

Build dashboard pages using Next.js page structure templates, shadcn/ui components, and established architectural guidelines. This Skill guides scaffolding, component organization, and QA validation to ensure your dashboard meets performance and consistency standards.

Related Skills

Explore More Software Engineering Skills→
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
mahamaneharouna9-cpumahamaneharouna9-cpu

monitoring-expert

Configure Pino logging, Sentry error tracking, health checks, and Prometheus metrics for Node.js applications.

Community
Advanced
hffmnnjhffmnnj
39

testing

Automate unit, integration, and E2E tests in JavaScript/TypeScript projects.

Community
Intermediate
hopeoverturehopeoverture
6

form-generator-rhf-zod

Generate React forms with React Hook Form, Zod validation, and shadcn/ui controls.

Community
Advanced