pagoda-frontend-plugin

Guide developers in building Pagoda frontend plugins with routing and validation.

29|19|Updated Jan 24, 2020
One-click install
npx skills add https://github.com/dmm-com/pagoda --skill pagoda-frontend-plugin
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pagoda-frontend-plugin
Source: https://github.com/dmm-com/pagoda/tree/main/.claude/skills/pagoda-frontend-plugin
Command: npx skills add https://github.com/dmm-com/pagoda --skill pagoda-frontend-plugin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide helps developers implement and extend the Pagoda/AirOne frontend via plugins. It covers the plugin system, where to place code, and how to integrate plugin-defined routes, entity page overrides, and validation.

Core Features & Use Cases

  • Frontend plugin system overview: location of plugin code under frontend/src/plugins and frontend/plugins, and how plugins are discovered by the host.
  • Host integration & routing: how AppBase.tsx extracts routes, builds plugin maps, and wires custom routes into AppRouter.
  • Supported extension points: entity page overrides (e.g., entry.list), plugin type definitions, and Zod-based validation patterns.
  • Development workflow: steps from creating a plugin to static analysis, tests, and build verification.
  • These details provide practical examples for standard plugin development tasks.

Quick Start

Create a minimal plugin under frontend/plugins/ that exports a Plugin object and is wired into the host.

Frequently Asked Questions about pagoda-frontend-plugin

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

FAQPage Schema
How do I build a frontend plugin for Pagoda or AirOne?

To build a Pagoda frontend plugin, create a package under frontend/plugins that exports a Plugin object. The host application then discovers this object and integrates your custom routes and entity page overrides.

How does frontend routing work when integrating a custom plugin?

Custom plugin routing works by having AppBase.tsx extract routes from your plugin object. These routes are then wired into the AppRouter to extend the base frontend navigation with your plugin's pages.

Can I override existing entity pages in a Pagoda frontend plugin?

Yes, you can override existing entity pages such as entry.list within your plugin. This is a supported extension point that allows your plugin to replace default views with custom frontend components.

Do I need Zod for validation in TypeScript plugin development?

Yes, Zod is used for validation patterns within Pagoda plugin type definitions. It ensures runtime type safety and validates data structures passed between your plugin and the host frontend system.

What is the workflow for testing a frontend plugin before build verification?

The frontend plugin workflow progresses from creating the plugin package to running static analysis and tests, culminating in build verification. This ensures your TypeScript code meets host integration requirements before deployment.