skills.rest
RhyTsui
RhyTsuiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

pmos-ui

Translate PMOS screenType requirements into governed UISchema and React mappings.

Updated May 9, 2026
Search Tags:#frontend#react#ui contract#ant design x#pmos#uischema#screen type
One-click install
npx skills add https://github.com/RhyTsui/PMOS --skill pmos-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pmos-ui
Source: https://github.com/RhyTsui/PMOS/tree/main/skills/pmos-ui
Command: npx skills add https://github.com/RhyTsui/PMOS --skill pmos-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents PMOS frontend work from drifting into free-form demos by enforcing page layout and UISchema implementation through repo-governed contracts.

Core Features & Use Cases

  • UISchema-first implementation: Define or update UISchema before building React mappings for a given screen type, ensuring consistent semantics.
  • Registry-governed PMOS blocks: Use only registry-governed blocks and propose missing component contracts before implementation.
  • Ant Design X ecosystem alignment: Prefer governed bindings for Ant Design X with an adapter boundary for Ant Design Pro.
  • Validation and linting loop: Require running ui schema check and ui lint to keep contracts renderable and compliant.
  • Use Case: Implement benchmark chat surfaces and requirement/PRD/task/approval pages with evidence, sources, decisions, and approvals represented via governed UI regions.

Quick Start

Use the pmos-ui skill to implement the UI for screen type PMChat by first defining the UISchema and then mapping React regions back to that screenType using registry-governed PMOS blocks.

Frequently Asked Questions about pmos-ui

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

FAQPage Schema
How do I enforce UISchema contracts when building React frontend pages?▼

To enforce UISchema contracts when building React frontend pages, define or update the UISchema first, then map React regions back to the screenType using registry-governed blocks. Run ui:schema:check and ui:lint to keep contracts renderable and compliant.

How does Ant Design X work with Ant Design Pro for PMOS frontend implementation?▼

Ant Design X works with Ant Design Pro by using governed bindings for Ant Design X while placing Ant Design Pro behind an adapter boundary. This ensures PMOS frontend pages remain traceable to repository truth without drifting into free-form demos.

What is the best way to implement a benchmark chat surface using UISchema?▼

The best way to implement a benchmark chat surface using UISchema is to define the UISchema for the PMChat screen type first. Then, build React mappings using registry-governed PMOS blocks to represent evidence, sources, decisions, and approvals.

Do I need to use a UISchema registry before implementing requirement and PRD pages?▼

Yes, you need to use a UISchema registry before implementing requirement and PRD pages. You must use only registry-governed blocks and propose missing component contracts before implementation to ensure UI contracts remain traceable to repository truth.

Why does my PMOS frontend page fail UI lint checks?▼

PMOS frontend pages fail UI lint checks when React mappings drift from the defined UISchema or use non-governed blocks. You must run ui:schema:check and ui:lint before completion to ensure contracts remain renderable and compliant with Ant Design X bindings.

Can I build free-form UI components for task and approval pages in PMOS?▼

No, you cannot build free-form UI components for task and approval pages in PMOS. You must implement pages by translating screenType requirements into governed UISchema and propose missing component contracts to the registry before implementation.

Related Skills

Explore More Design & Creative Skills→
borgiusborgius
5

plugin-options-schema-author

Enforce shared optionsSchema and uiSchema contracts across kanban-lite providers.

Community
Intermediate
RhyTsuiRhyTsui

pmos-fullstack-builder

Generate React and Ant Design fullstack packages from PMOS requirements.

Community
Advanced
RhyTsuiRhyTsui

ant-design-family-frontend

Enforce Ant Design family governance across frontend design and implementation outputs.

Community
Intermediate
tiantangcao1980-webtiantangcao1980-web
4

bootstrap

Create responsive interfaces with Bootstrap 5 components and Sass theming.

Community
Intermediate