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

r2mo-ui-pagedash

Generate Vue/React + TypeScript dashboards and widgets from R2MO specifications.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams struggle to translate design specs into consistent, data-driven dashboards and widgets across applications without repetitive setup.

Core Features & Use Cases

  • Generate Vue/React components and TypeScript artifacts (dashboard views, widgets, API bindings) driven by R2MO design specs.
  • Ensure layout, data bindings, and visual hierarchy align with the spec, enabling rapid iteration of executive dashboards.
  • Use cases include KPI overviews, trend charts, and detail feeds assembled from spec-defined widgets and API refs.

Quick Start

Convert a spec document into a ready-to-run dashboard skeleton.

Frequently Asked Questions about r2mo-ui-pagedash

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

FAQPage Schema
How do I generate data-driven dashboards from design specifications?▼

Generate data-driven dashboards by converting R2MO specifications into framework-ready Vue or React TypeScript artifacts, extracting front-matter keys like widgets, layout, and api_refs to produce responsive dashboard views with filter support.

How do I turn R2MO spec front-matter into Vue or React widgets?▼

Turn R2MO spec front-matter into Vue or React widgets by parsing front-matter keys such as widgets and api_refs, honoring the design.system palette, and outputting TypeScript components with responsive layouts and API bindings.

Can I use R2MO specs to build executive KPI dashboards with TypeScript?▼

Yes, R2MO specs can build executive KPI dashboards with TypeScript by assembling spec-defined widgets, trend charts, and detail feeds into framework-ready Vue or React artifacts with consistent visual hierarchy and API bindings.

What is the best way to create frontend analytics views from design documents?▼

The best way to create frontend analytics views from design documents is using a spec-driven approach that extracts layout and api_refs from R2MO specs to generate responsive dashboard skeletons with filter support.

Does R2MO dashboard generation support both Vue and React frameworks?▼

Yes, R2MO dashboard generation supports both Vue and React frameworks, producing framework-ready TypeScript artifacts that honor the design.system palette and implement responsive layouts with filter support.

What are the limitations of spec-driven dashboard generation from R2MO documents?▼

Spec-driven dashboard generation from R2MO documents requires front-matter keys like widgets, layout, and api_refs to be properly defined, and relies on the design.system palette for consistent visual hierarchy across Vue or React artifacts.

Related Skills

Explore More Software Engineering Skills→
silentbalanceyhsilentbalanceyh
2

r2mo-ui-pagelist

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

Community
Intermediate
silentbalanceyhsilentbalanceyh
2

r2mo-ui-login

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

Community
Advanced
yutaoshaoyutaoshao

frontend-design

Transform UI briefs into token-driven design systems with CSS variables and TypeScript types.

Community
Advanced
billh93billh93

frontend-design

Generate production-grade frontend interfaces from user requirements.

Community
Advanced