frontend

Establish frontend best practices for Next.js 16, TypeScript 5+, and React 18+ projects.

1|Updated Jan 26, 2026
One-click install
npx skills add https://github.com/arakitakashi/homework-coach-robo --skill frontend-arakitakashi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/arakitakashi/homework-coach-robo/tree/main/.claude/skills/frontend
Command: npx skills add https://github.com/arakitakashi/homework-coach-robo --skill frontend-arakitakashi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide and set of best practices for developing robust and maintainable frontend applications using Next.js, TypeScript, and React.

Core Features & Use Cases

  • Project Structure: Standardized directory layout for Next.js App Router projects.
  • TypeScript Guidelines: Best practices for type definitions, exports, and utility types.
  • React Component Conventions: Guidance on function components, Server/Client components, and custom hooks.
  • Styling: Tailwind CSS utility-first approach and accessibility considerations.
  • Testing: Strategies for unit and integration testing with Vitest.
  • Validation: Form validation using Zod and React Hook Form.
  • Use Case: A new developer joins a project using this stack and needs to quickly understand the established coding standards, component patterns, and testing methodologies.

Quick Start

Follow the TypeScript guidelines to define a new interface for user session data.

Frequently Asked Questions about frontend

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

FAQPage Schema
What are the best practices for structuring a Next.js App Router project with TypeScript?

Best practices for structuring a Next.js App Router project involve using a standardized directory layout alongside strict TypeScript typing guidelines to ensure maintainable and robust frontend applications.

How do I manage Server and Client components in React 18 when using Next.js?

Managing React 18 components in Next.js requires following specific conventions for function components, distinguishing between Server and Client components, and structuring custom hooks for optimal rendering.

Does this frontend stack support form validation with Zod and React Hook Form?

Yes, the frontend stack supports form validation using Zod alongside React Hook Form to facilitate consistent and high-quality user interface implementation and data integrity.

How do I set up unit and integration testing for a Next.js application using Vitest?

Setting up testing for a Next.js application using Vitest involves applying established strategies for both unit and integration testing to maintain high-quality UI implementation standards.

What is the recommended approach for styling and accessibility in modern web UIs?

The recommended approach for styling modern web UIs utilizes a Tailwind CSS utility-first approach, integrating specific accessibility considerations to ensure robust user interface implementation.

Can I use these coding standards to onboard new developers to an existing Next.js project?

Yes, new developers joining a Next.js and TypeScript project can use these coding standards to quickly understand established component patterns, directory layouts, and testing methodologies.