skills.rest
Omar-Cc
Omar-CcCOMMUNITY
Explore all skills by this author →
GitHub

genni-monorepo

Establish frontend architecture patterns for pnpm monorepos with Next.js and Vite React.

Updated Jun 1, 2026
Search Tags:#typescript#architecture#frontend#react#pnpm#monorepo#nextjs
One-click install
npx skills add https://github.com/Omar-Cc/Integrador-II --skill genni-monorepo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: genni-monorepo
Source: https://github.com/Omar-Cc/Integrador-II/tree/main/frontend/.agents/skills/genni-monorepo
Command: npx skills add https://github.com/Omar-Cc/Integrador-II --skill genni-monorepo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves inconsistent frontend architecture decisions by providing clear rules for building and maintaining a scalable pnpm monorepo with shared components, structured features, and API-ready data flows.

Core Features & Use Cases

  • Frontend Architecture Guidance: Defines conventions for Next.js, Vite React, shared UI packages, routing, services, and state management.
  • Data Layer Standards: Establishes patterns for axios services, React Query usage, local-first mocks, and future API migration.
  • Use Case: Use this Skill when creating, modifying, or refactoring frontend features to keep apps, packages, components, and data access aligned with the monorepo architecture.

Quick Start

Use the genni-monorepo skill to implement a new frontend feature following the repository architecture rules.

Frequently Asked Questions about genni-monorepo

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

FAQPage Schema
How do I structure a scalable frontend monorepo with shared UI packages?▼

A scalable frontend monorepo uses pnpm workspaces to manage shared UI packages, defining structured conventions for routing, services, and state management across Next.js and Vite React apps to maintain architectural consistency.

How do I set up React Query and Zustand for state management in a pnpm monorepo?▼

In a pnpm monorepo, React Query handles server state and data fetching, while Zustand manages local client state, ensuring a clear separation of concerns across shared features and axios service layers.

What is the best way to structure axios service layers in a React monorepo?▼

The best way to structure axios service layers in a React monorepo is to establish standardized data access patterns that support local-first mocks and allow seamless future API migration without breaking component conventions.

Can I use this monorepo architecture pattern for both Next.js and Vite React?▼

Yes, the monorepo architecture pattern applies directly to both Next.js and Vite React applications, enforcing consistent routing, shared UI components, and unified state management conventions across the codebase.

When do I need consistent frontend architecture conventions in a pnpm monorepo?▼

You need consistent frontend architecture conventions in a pnpm monorepo when creating, modifying, or refactoring features to keep apps, packages, components, and data access aligned across the codebase.

Related Skills

Explore More Software Engineering Skills→
Buntyarora97Buntyarora97

pnpm-workspace

Manage pnpm monorepo projects with TypeScript project references and shared libraries.

Community
Advanced
spuneiarturspuneiartur
1

api-hook-wiring

Wire frontend components to backend APIs using Axios and React Query hooks.

Community
Advanced
buildworksaibuildworksai

react-best-practices

Enforce React and TypeScript frontend patterns with TanStack Query and Zustand.

Community
Intermediate
NVIDIA-NeMoNVIDIA-NeMo
58

studio-dev

Configure the NeMo Studio React and TypeScript monorepo development environment.

Official
Intermediate