mcpField
P
pma-web

pma-web

github.com/zzciDevelopment2390 installsUpdated 3d ago
Repository

About pma-web

A frontend implementation skill for PMA-managed SPAs and internal tools, setting a baseline around React, TypeScript, Vite, and related routing, data, and UI technologies. Task-specific reference packs guide work from project structure through testing, accessibility, and security checks.

Key features

  1. 01Defines a React and TypeScript frontend baseline
  2. 02Guides file-based TanStack Router routing
  3. 03Sets query and client-state boundaries
  4. 04Loads task-specific reference packs
  5. 05Provides testing, accessibility, and security checklists

Use cases

  1. 01Starting a PMA-managed SPA
  2. 02Changing routes, layouts, or theming
  3. 03Implementing API integration and query state
  4. 04Checking tests and UI security before merging

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/zzci/skills --skill pma-web

After installing, type/pma-webin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

agents/
openai.yaml
references/
baseline.md
review.md
routing-and-ui.md
runtime-and-data.md

Details

From the project README

Web Frontend Implementation Guide

Use this skill together with /pma. /pma controls workflow, approval, and task tracking; this guide defines the implementation baseline after work is approved.

Keep this entry file lean. Load only the reference packs needed for the current task.

Scope

For PMA-managed SPA and internal-tool frontend projects using:

  • React + TypeScript + Vite
  • TanStack Router for file-based type-safe routing
  • TanStack Query for server state
  • Zustand for UI-only client state
  • shadcn/ui (base-nova) with @base-ui/react and Tailwind CSS — the only allowed UI ecosystem (references/baseline.md UI Library Policy)

All of these track their latest stable releases; this skill names no versions (see /pma references/workflow.md Dependency Freshness).

Single-app layout is the default. Reach for a Bun monorepo only when the repo really hosts multiple apps or shared packages — a single SPA bolted onto a Rust or Go service does not need workspaces.

Not for SSR-first sites, content sites, or non-PMA projects.

Loading Order

  1. Always load references/baseline.md first.
  2. Load references/routing-and-ui.md when touching route structure, providers, theming, Tailwind, or shadcn/ui.
  3. Load references/runtime-and-data.md when touching API integration, query state, i18n, Vite config, or the frontend-side dev script. For the full nsl protocol (registration patterns, --strip, NSL_PORT, fallback) load /pma references/dev-environment.md.
  4. Load references/review.md when touching release checks, tests, accessibility, or security-sensitive UI behavior.

Quick Routing

  • New app setup or repo restructuring (single-app vs monorepo) → references/baseline.md
  • Router, layouts, providers, entrypoint, shadcn, Tailwind, theme → references/routing-and-ui.md
  • runtime (HTTP client, query client, i18n, Vite config) → references/runtime-and-data.md
  • dev URL routing (nsl) → references/runtime-and-data.md (full protocol → /pma references/dev-environment.md)
  • testing → references/review.md
  • CI and delivery (lint, typecheck, build, accessibility, security review) → references/review.md

Reference Packs

  • references/baseline.md Stack defaults, quality gates, workspace layout, conventions, and baseline scripts.
  • references/routing-and-ui.md TanStack Router layout, provider composition, entry point, shadcn/ui, Tailwind, and theming.
  • references/runtime-and-data.md Query client, HTTP layer, state boundaries, i18n, Vite config, and the frontend-side nsl invocation. Full nsl protocol lives in /pma references/dev-environment.md.
  • references/review.md Verification gates and the accessibility and security review checklist for UI changes.

Acceptance Checklist

Before merge:

  • lint, typecheck, build pass
  • tests pass with coverage; target 80% or higher
  • UI lock respected: no Radix or other component ecosystems (grep gate in references/review.md)
  • new components followed the sourcing order in references/baseline.md UI Library Policy
  • routing stays file-based under src/app/routes/ with generated routeTree.gen.ts
  • theming stays dual-channel (:root / .dark variables + @theme inline mapping); no hardcoded colors in components
  • nsl dev routing works (bun run dev serves <name>.localhost; API reachable at /api)

If the project intentionally diverges from these defaults, keep the divergence explicit in the proposal and match the repository's existing patterns consistently.

Comments

Markdown supported