skills.rest
silentbalanceyh
silentbalanceyhCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

r2mo-ui-pagelist

Generate Vue/React TypeScript list components from R2MO UI spec bindings.

2|1|Updated Nov 20, 2025
Search Tags:#ui#spec-driven#frontend#list#table#r2mo#vue-typescript
One-click install
npx skills add https://github.com/silentbalanceyh/r2mo-lain --skill r2mo-ui-pagelist
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: r2mo-ui-pagelist
Source: https://github.com/silentbalanceyh/r2mo-lain/tree/main/docs/skills/r2mo-ui-pagelist
Command: npx skills add https://github.com/silentbalanceyh/r2mo-lain --skill r2mo-ui-pagelist

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Convert R2MO spec-driven documents into ready-to-use frontend list and table components, reducing manual wiring and interpretation work.

Core Features & Use Cases

  • Generates list/table UIs from bind/api_refs/actions in R2MO specs.
  • Supports search, filters, pagination, and smart cell rendering consistent with the spec.
  • Use Case: A developer wants to create an admin data page from a spec, including API bindings and action buttons, without writing boilerplate.

Quick Start

Generate a Vue/React TypeScript UI from the r2mo-ui-pagelist spec.

Frequently Asked Questions about r2mo-ui-pagelist

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

FAQPage Schema
How do I generate Vue or React list components from R2MO spec documents?▼

To generate Vue or React list components from R2MO spec documents, the Skill interprets front-matter bindings like api_refs and actions to render UI layouts, filters, and pagination without manual wiring.

How does spec-driven UI mapping handle API responses for frontend tables?▼

Spec-driven UI mapping enforces strict alignment from API responses to UI columns and actions by reading R2MO spec bindings, ensuring the generated table reflects the defined data models without inventing new schemas.

Can I use this to create admin data pages with search and pagination in TypeScript?▼

Yes, you can use this to create admin data pages in TypeScript. It targets Vue and React frontends, specifically handling search, filters, pagination, and responsive rendering directly from the R2MO spec.

What is the best way to turn front-matter bindings into ready-to-use frontend actions?▼

The best way to turn front-matter bindings into frontend actions is using spec-driven generation, which reads bind and actions fields from R2MO specs to produce functional UI buttons and layouts without boilerplate code.

Does the tool generate data models when interpreting R2MO specs for tables?▼

No, the tool does not generate data models. It enforces spec-driven mapping by strictly interpreting existing R2MO front-matter bindings to produce UI columns and actions without inventing any underlying data models.

Related Skills

Explore More Design & Creative Skills→
silentbalanceyhsilentbalanceyh
2

r2mo-ui-login

Generate R2MO-specified login, SSO, and recovery flows for Vue/React projects.

Community
Advanced
agusmdevagusmdev
5

add-frontend-feature

Scaffold React/TypeScript frontend features with types, API endpoints, hooks, components, and routes.

Community
Intermediate
coreyjacoreyja
6

Frontend Components

Design reusable frontend components with TypeScript props and state management.

Community
Basic
nirukk52nirukk52
1

e2e-testing

Automate ScreenGraph end-to-end UI validation with Playwright and .env configuration.

Community
Intermediate