skills.rest
PeakTai
PeakTaiCOMMUNITY
Explore all skills by this author →
GitHub

wok-ui-page-layout

Implement shared page layouts with wok-ui Layout inheritance and composition.

Updated Sep 14, 2023
Search Tags:#architecture#layout#frontend#reusability#web#pages#wok-ui
One-click install
npx skills add https://github.com/PeakTai/wok-ui --skill wok-ui-page-layout
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wok-ui-page-layout
Source: https://github.com/PeakTai/wok-ui/tree/main/skills/wok-ui-page-layout
Command: npx skills add https://github.com/PeakTai/wok-ui --skill wok-ui-page-layout

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

通过可复用的布局基类和组合模式，帮助开发者在多个页面间共享一致的布局，减少重复代码与样式差异，提升开发效率与用户体验。

Core Features & Use Cases

  • 继承方式：提供 Layout 抽象基类，子类实现 buildMainContent 以共享数据和布局逻辑。
  • 组合方式：通过 Layout 的 content/sidebar 等选项实现页面分块与灵活组合，支持快速拼装新页面。
  • 路由与模块化：结合路由规则将布局实例化与不同页面模块绑定，形成可扩展的页面架构。

Quick Start

在你的项目中继承 Layout 并实现 buildMainContent 以渲染页面主内容。

Frequently Asked Questions about wok-ui-page-layout

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

FAQPage Schema
How do I unify multi-page layouts to reduce duplicate frontend code?▼

Unifying multi-page layouts involves implementing a shared Layout base class to standardize headers, content areas, and footers across web apps. This approach eliminates duplicate code and ensures structural consistency.

What is the best way to share page layout logic across multiple web pages?▼

Sharing layout logic is best achieved through Layout pattern inheritance, where subclasses implement buildMainContent. This shares common data and layout structures while allowing customized page content rendering.

How do I implement flexible content blocks when building web page layouts?▼

Implementing flexible content blocks uses the composition approach via Layout options like content and sidebar. This enables page sectioning and rapid new page assembly through flexible structural combinations.

Does this layout approach require specific frontend frameworks to manage routing?▼

The layout approach applies to projects using wok-ui and combines with routing rules to bind layout instances to page modules. It requires understanding layout patterns like inheritance and composition to form an extensible architecture.

When should I use composition instead of inheritance for web page layouts?▼

Use composition for layouts when you need to quickly assemble new pages with flexible options like content and sidebar. Use inheritance when you need to share deeper data and base layout logic across multiple subclassed pages.

Related Skills

Explore More Software Engineering Skills→
PeakTaiPeakTai

wok-ui-api-rules

Enforces official API usage and blocks non-conforming writes in codegen workflows.

Community
Advanced
hasnahasna
24

Generate Pdf

Convert markdown, HTML, or text content into PDF documents.

Official
Intermediate
PeakTaiPeakTai

wok-ui-drawer

Display edge-docked drawers with showDrawer for placement, width, and callbacks.

Community
Intermediate
toddmoytoddmoy
1

responsive layout

Build mobile-first responsive layouts with Tailwind CSS, Grid, and Flexbox.

Community
Advanced