frontend-development

Standardize frontend implementation with Next.js, React, and TanStack Query.

1|Updated Jun 15, 2025
One-click install
npx skills add https://github.com/einja-inc/einja-management-template --skill frontend-development-einja-inc
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-development
Source: https://github.com/einja-inc/einja-management-template/tree/main/.claude/skills/einja-frontend-development
Command: npx skills add https://github.com/einja-inc/einja-management-template --skill frontend-development-einja-inc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a concise, opinionated set of guidelines for frontend implementation using Next.js, React, and TanStack Query, ensuring consistency, performance, and maintainability across the project.

Core Features & Use Cases

  • Standardized Architecture: Defines recommended project structure and component patterns to promote reuse and scalability.
  • Data Layer Guidelines: Best practices for data fetching and caching with TanStack Query to optimize user experience.
  • Performance & Accessibility: Recommendations for performance optimization, accessibility, and testing workflows.
  • Use Case: When onboarding new frontend developers, follow these guidelines to align on architecture, tooling, and best practices.

Quick Start

Refer to the documentation at @docs/einja/steering/development/frontend-development.md for the complete guide and examples.

Frequently Asked Questions about frontend-development

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

FAQPage Schema
How do I structure a robust frontend architecture using Next.js and React?

A robust Next.js and React frontend architecture requires standardized project structures and component patterns to promote reuse and scalability. This skill provides opinionated guidelines to enforce structure, naming conventions, and tooling for consistency across modern web applications.

What is the best way to manage data fetching and caching with TanStack Query in Next.js?

Managing data fetching and caching with TanStack Query involves following best practices to optimize user experience. This skill provides data layer guidelines that standardize data fetching and caching patterns within your Next.js applications.

Can I use these frontend guidelines to onboard new developers to my project?

Yes, you can use these frontend guidelines to onboard new developers. The skill serves as a centralized documentation reference, helping new team members quickly align on architecture, tooling, and best practices for your Next.js and React project.

How do I ensure performance and accessibility in a modern React application?

Ensuring performance and accessibility in a React application requires specific recommendations for optimization and testing workflows. This skill outlines guidelines for performance optimization, accessibility standards, and testing to maintain robust frontend implementations.

What are the recommended naming conventions and patterns for a Next.js project?

Recommended naming conventions and patterns for a Next.js project include enforcing specific structures and tooling to ensure maintainability. This skill standardizes these conventions to provide a consistent development experience across your projects.