skills.rest
dmm-com
dmm-comOFFICIAL
Explore all skills by this author →
WebsiteGitHub

pagoda-frontend-core

Standardize Pagoda frontend development with React, TypeScript, and MUI patterns.

29|19|Updated Jan 24, 2020
Search Tags:#typescript#frontend#react#routing#mui#api-client
One-click install
npx skills add https://github.com/dmm-com/pagoda --skill pagoda-frontend-core
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pagoda-frontend-core
Source: https://github.com/dmm-com/pagoda/tree/main/.claude/skills/pagoda-frontend-core
Command: npx skills add https://github.com/dmm-com/pagoda --skill pagoda-frontend-core

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Development Guide standardizes Pagoda/AirOne frontend development practices, providing a single source of truth for building and modifying page components, shared components, hooks, services, routing, and API clients under frontend/src (excluding plugins/).

Core Features & Use Cases

  • Unified frontend architecture guidelines for React + TypeScript + MUI, including data fetching with SWR and form handling with React Hook Form + Zod.
  • Clear directory structure guidance for frontend/src (pages, components, hooks, services, repository, routes, i18n, and plugins) to improve maintainability and onboarding.
  • Best practices for routing, API clients, and type-safe communication with the backend, plus conventions for testing and linting.
  • Onboarding and maintenance support to reflect backend API changes, ensuring frontend stays in sync with server contracts.

Quick Start

Open the Pagoda frontend core guide and apply the defined patterns to begin implementing or modifying a component under frontend/src.

Frequently Asked Questions about pagoda-frontend-core

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

FAQPage Schema
What is the best way to structure a React and TypeScript frontend directory?▼

The best way to structure a React and TypeScript frontend directory is to separate concerns into pages, components, hooks, services, repository, routes, and i18n folders to improve maintainability and onboarding.

How do I handle data fetching and forms in a React and TypeScript application?▼

Handle data fetching and forms in a React and TypeScript application by using SWR for data requests and React Hook Form combined with Zod for form validation and type safety.

How do I maintain type-safe API client communication with the backend?▼

Maintain type-safe API client communication by following standardized API client usage conventions that articulate concrete guidelines, ensuring frontend services stay in sync with backend server contracts.

Can I use Material UI (MUI) with React and TypeScript for core frontend patterns?▼

Yes, you can use Material UI (MUI) with React and TypeScript as the unified frontend architecture guidelines define core patterns specifically for React, TypeScript, and MUI integration.

What are the limitations of applying these frontend core guidelines?▼

The limitation of these frontend core guidelines is that they apply exclusively to code under the frontend/src directory, explicitly excluding any plugins/ subdirectory from the standardized workflow.

Related Skills

Explore More Software Engineering Skills→
iludeilude
8

web-projects

Detect frameworks and package managers in JavaScript/TypeScript web projects.

Community
Intermediate
martimramosmartimramos
1

forge-lang-typescript

Standardize TypeScript projects with type checks, Jest or Vitest tests, ESLint, and Prettier.

Community
Intermediate
andershi666andershi666
1

data-fetching

Define a service–store–SWR pattern for front-end data fetching.

Community
Advanced
vadimcomanescuvadimcomanescu
24

frontend-design

Create token-driven frontend interfaces for Next.js App Router, React, and vanilla HTML/CSS/JS.

Community
Advanced