Run any Skill in Manus with one click

pma-web

Stars2

Forks0

UpdatedMay 30, 2026 at 20:43

Frontend implementation guide for PMA-managed React 19 + TypeScript + Vite 8 SPA projects. Defaults to a single-app layout (the right choice for a Rust/Go service that ships a UI); promotes to a Bun monorepo only when multiple apps or shared packages exist. UI is hard-locked to shadcn/ui (base-nova) + `@base-ui/react` — Radix and other UI ecosystems (MUI / Mantine / Chakra / Ant Design / Headless UI / Ariakit / NextUI / …) are forbidden. Covers required quality gates, file-based type-safe routing with TanStack Router, state conventions (TanStack Query + Zustand), Tailwind CSS v4 patterns, Vitest 4 testing, dual-channel theming, i18n, nsl-based dev integration with backend services, and delivery rules for frontend applications. Use when implementing, scaffolding, or reviewing a React/Vite SPA or internal-tool frontend in a PMA repo.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

zzci

zzci/skills

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

File Explorer

6 files

SKILL.md

readonly

name

pma-web

description

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 19 + TypeScript + Vite 8
TanStack Router for file-based type-safe routing
TanStack Query for server state
Zustand for UI-only client state
shadcn/ui (base-nova style) with @base-ui/react primitives and Tailwind CSS v4 — this is the only allowed UI ecosystem; Radix UI and other component libraries are forbidden (see references/baseline.md UI Library Policy)

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

Always load references/baseline.md first.
Load references/routing-and-ui.md when touching route structure, providers, theming, Tailwind, or shadcn/ui.
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.
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
HTTP client, query client, i18n, Vite config, frontend nsl invocation: references/runtime-and-data.md (full nsl protocol → /pma references/dev-environment.md)
Lint, typecheck, build, test, accessibility, UI 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 v4, 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.

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

More from this repository

same repository

pma-design

zzci/skills

Create polished design artifacts as self-contained HTML: UI mockups, interactive prototypes, wireframes, landing pages, dashboards, app screens, mobile apps, slide decks, and visual explorations. Use whenever the user asks to design, mock up, prototype, wireframe, visualize, or explore an interface, product screen, user flow, content layout, visual artifact, or pitch/deck concept, even if they do not say 'design'. Also use for setting up, importing, or authoring reusable design systems, UI kits, brand tokens, component libraries, or loadable design-system bundles. The skill guides context gathering, clarifying questions, choosing fidelity, selecting or binding design systems, creating project folders, building one or more HTML deliverables, previewing them over nsl-served URLs, and verifying they load cleanly. It runs standalone (no PMA workflow required) on Claude Code and Codex Agent; harness-specific preview, screenshot, and verification tools are resolved from references/.

2026-06-112

bkd

zzci/skills

Operate a BKD kanban board over its REST API. Use when the user wants to manage BKD projects, issue execution workflows, cron jobs, or execution capacity through a reachable BKD server.

2026-06-052

pma-rust

zzci/skills

Production-grade Rust acceptance baseline for PMA-managed Rust services and CLIs. Use with /pma when creating, reviewing, or upgrading Rust workspaces, Axum/Tokio services, CLI binaries, CI pipelines, release packaging, lint policy, dependency choices, testing, observability, security, or supply-chain controls. Defines hard locks for pure-Rust dependencies, rustls TLS, forbid unsafe code, edition 2024, workspace lint inheritance, MSRV, nextest, cargo-deny, cargo-shear, typos, and portable release builds.

2026-06-032

pma-bun

zzci/skills

Bun implementation guide for PMA-managed backend services. Defaults to a single-API-project layout; promotes to a Bun monorepo only when multiple deployable apps or shared packages exist. Covers API modules under `src/modules`, strict linting with ESLint + @antfu/eslint-config, Drizzle over SQLite-first storage, OpenAPIHono on top of `Bun.serve()`, validated env config, nsl-based dev URL routing (paired with `pma-web`), standalone binary compilation with embedded assets and migrations, and CI quality gates. Use when implementing, scaffolding, or reviewing a Bun/Hono backend or internal tool in a PMA repo.

2026-05-302

pma-go

zzci/skills

Go implementation guide for PMA-managed service and CLI projects. Covers project layout (cmd/internal), strict linting with golangci-lint v2, database access (sqlc + pgx or GORM), HTTP patterns (stdlib + Chi or Gin), layered config with koanf, structured logging with slog, OpenTelemetry observability, and CI quality gates. Use when implementing, scaffolding, or reviewing a Go service or CLI in a PMA repo.

2026-05-302

gitea

zzci/skills

Operate a Gitea instance via its REST API at /api/v1/... with curl. FORCED ROUTING — use this skill for any repository whose git remote host is not github.com: derive the candidate HTTPS base URL from the remote host, probe /api/v1/version, then call the REST endpoints directly.

2026-05-302

name

pma-web

description

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 19 + TypeScript + Vite 8
TanStack Router for file-based type-safe routing
TanStack Query for server state
Zustand for UI-only client state
shadcn/ui (base-nova style) with @base-ui/react primitives and Tailwind CSS v4 — this is the only allowed UI ecosystem; Radix UI and other component libraries are forbidden (see references/baseline.md UI Library Policy)

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

Always load references/baseline.md first.
Load references/routing-and-ui.md when touching route structure, providers, theming, Tailwind, or shadcn/ui.
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.
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
HTTP client, query client, i18n, Vite config, frontend nsl invocation: references/runtime-and-data.md (full nsl protocol → /pma references/dev-environment.md)
Lint, typecheck, build, test, accessibility, UI 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 v4, 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.

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