skills.rest
sunyonghuan
sunyonghuanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

layui

Generate runnable Layui pages with component scaffolding and initialization.

46|7|Updated Apr 9, 2026
Search Tags:#ui#frontend#dashboard#form#layer#table#layui
One-click install
npx skills add https://github.com/sunyonghuan/Netor.Madorin --skill layui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: layui
Source: https://github.com/sunyonghuan/Netor.Madorin/tree/main/skills/layui
Command: npx skills add https://github.com/sunyonghuan/Netor.Madorin --skill layui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the guesswork from building Layui 2.13.6 pages by turning component documentation into runnable UI code with the right structure, initialization, and event handling.

Core Features & Use Cases

  • Page generation: Create complete Layui pages with proper HTML scaffolding, module loading, and component setup.
  • Component integration: Wire tables, forms, dialogs, uploads, tabs, navigation, and other Layui modules with version-aware usage.
  • Real-world use cases: Build admin dashboards, searchable data tables, modal edit forms, upload workflows, and multi-tab back-office screens without manually stitching together every API detail.

Quick Start

Ask for a complete Layui page for your use case, and the skill will generate the HTML structure, initialization, and event wiring in one pass.

Frequently Asked Questions about layui

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

FAQPage Schema
How do I generate a complete Layui admin dashboard page?▼

To generate a Layui admin dashboard, request a complete page and the skill outputs valid HTML with layui.css and layui.js loaded, layui.use initialization, and properly wired components for navigation and tables.

How do I wire Layui form events with lay-filter?▼

Wiring Layui form events requires defining the lay-filter attribute on your HTML elements and then binding event listeners inside the layui.use form module block to handle the interactions correctly.

Can I dynamically re-render a Layui data table after an update?▼

Dynamically re-rendering a Layui data table is supported by utilizing the table module's built-in reload method, which refreshes the data without manually stitching together the entire API initialization again.

What's the best way to structure a multi-tab back-office screen in Layui?▼

Building a multi-tab back-office screen in Layui requires proper HTML scaffolding combined with the element module for tab navigation and the correct layui.use initialization to ensure seamless tab switching.

Does this approach handle version-aware component APIs for Layui?▼

Yes, this approach handles version-aware component APIs for Layui 2.13.6, ensuring that generated tables, dialogs, and upload workflows utilize the correct module syntax and avoid deprecated initialization patterns.

Why does my Layui component initialization fail to trigger?▼

Layui component initialization fails when the HTML structure lacks valid scaffolding or the required modules are not loaded inside the layui.use block, preventing proper event wiring and dynamic rendering.

Related Skills

Explore More Software Engineering Skills→
Alpizar28Alpizar28

auditor-estatico-plus

Audit static landing pages for security, performance, and SEO issues.

Community
Intermediate
vijethkumarmpvijethkumarmp

backend

Create typed API endpoints under src/pages/api in Astro.

Community
Intermediate
kubiyabotkubiyabot
16

http-skill

Send arbitrary HTTP requests to REST and GraphQL APIs.

Official
Advanced
drhazemibclcdrhazemibclc

react

Generate React components with props, hooks, and state management.

Community
Intermediate