skills.rest
jiushiwon
jiushiwonCOMMUNITY
Explore all skills by this author →
GitHub

ui-template-builder

Generate mobile and desktop UI pages from reusable templates for uniapp, React, Vue, Taro, and H5.

44|11|Updated Jun 1, 2026
Search Tags:#frontend#react#design tokens#mock data#page generation#uniapp#ui templates
One-click install
npx skills add https://github.com/jiushiwon/wg-skills --skill ui-template-builder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-template-builder
Source: https://github.com/jiushiwon/wg-skills/tree/main/ui-template-builder-skill
Command: npx skills add https://github.com/jiushiwon/wg-skills --skill ui-template-builder

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill reduces the inconsistency, rework, and setup time involved in building common mobile and desktop pages by providing reusable templates, design tokens, mock data, and configurable visual styles.

Core Features & Use Cases

  • Reusable Page Templates: Generate common pages such as profiles, product details, product lists, carts, order lists, login screens, dashboards, forms, tables, and admin interfaces.
  • Multi-Stack Support: Adapt templates for uniapp Vue 2/3, React with Vite, Vue 3 with Vite, Taro, and mobile or desktop H5.
  • Theme and Size Systems: Apply modern, vibrant, premium, nature, or dark-tech styles, generate custom color scales, and switch between small, medium, and large sizing.
  • Mock Data and Props: Produce structured mock data with normal, empty, loading, and error states while keeping page components ready for backend integration.
  • Use Case: Create a React table-list page with search, pagination, batch actions, mock data, and a selected visual theme, or generate a uniapp personal-center page from a reusable template.

Quick Start

Ask the AI to generate a page by specifying the page type, preferred technology stack, visual style, and whether mock data is required.

Frequently Asked Questions about ui-template-builder

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

FAQPage Schema
How do I generate consistent UI pages from reusable templates across different frameworks?▼

Generating consistent UI pages involves applying reusable templates with configurable design tokens for colors and sizes. This ensures visual consistency across uniapp, React, Vue, Taro, and H5 projects while producing production-ready code for common layouts like profiles and dashboards.

What is the best way to build a React table-list page with mock data and pagination?▼

The best way is to generate a React table-list page from a reusable template configured with search, pagination, and batch actions. The template provides structured mock data with normal, empty, loading, and error states while keeping components ready for backend integration.

Does this template generation approach support uniapp Vue 2 and Vue 3 projects?▼

Yes, this template generation approach supports uniapp Vue 2 and Vue 3 projects. It adapts reusable templates for mobile contexts, allowing you to generate personal-center pages, product lists, and login screens with generated design tokens and configurable visual styles.

Can I apply custom design tokens and visual themes to generated frontend pages?▼

Yes, you can apply custom design tokens and visual themes to generated frontend pages. The system supports modern, vibrant, premium, nature, and dark-tech styles, generates custom color scales, and switches between small, medium, and large sizing for consistent implementation.

How do mock data and props-based data flow work in generated UI templates?▼

Mock data and props-based data flow in generated UI templates produce structured data with normal, empty, loading, and error edge states. This keeps page components decoupled from backend services, ensuring the production-ready template code remains ready for immediate integration.

What types of common mobile and desktop pages can I generate for admin interfaces?▼

You can generate common mobile and desktop pages for admin interfaces including profiles, product details, carts, order lists, login screens, dashboards, forms, and tables. These templates include configurable themes, generated color tokens, and mock data with various edge states.

Related Skills

Explore More Design & Creative Skills→
jiushiwonjiushiwon
44

ui-component-commands-skill

Generate and persist reusable frontend UI components for H5, Vue, uni-app, React, and Taro projects.

Community
Advanced
sami-abdulsami-abdul
3

frontend-code

Generate frontend code connecting UI components to real backend APIs.

Community
Intermediate
Orpheus-KOrpheus-K
13

lucky-ui-component

Develop and debug components in the Lucky UI UniApp library with TypeScript.

Community
Advanced
Mark393295827Mark393295827
1

search-first

Identify existing tools, libraries, and patterns before writing custom code.

Community
Intermediate