Full-stack-skills pencil-ui-design-system-layui

Initialize Layui design tokens and component overview frames in a Pencil .pen file. Use when the user mentions Pencil with Layui or layui-vue, needs to set up Layui color palette and typography variables, or wants to create component library frames for Button, Table, Form, Menu, and other Layui components.

install

source · Clone the upstream repo

git clone https://github.com/partme-ai/full-stack-skills

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/partme-ai/full-stack-skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/pencil-skills/pencil-ui-design-system-layui" ~/.claude/skills/partme-ai-full-stack-skills-pencil-ui-design-system-layui && rm -rf "$T"

manifest: skills/pencil-skills/pencil-ui-design-system-layui/SKILL.md

Layui Design System Initializer

Constraint: Only use this skill when the user explicitly mentions "Pencil" and "Layui" (or "layui-vue") or when orchestrating a Pencil design system initialization task.

When to use this skill

Use this skill when:

The user wants to initialize Layui tokens (primary, warm, danger colors) in a Pencil .pen file
The user needs a component overview frame for Layui components in Pencil
The user mentions "Pencil" together with "Layui", "layui-vue", or Layui-specific components (Table, Form, Menu, Tabs)
An orchestrator skill (pencil-ui-designer) routes a Layui initialization request

How to use this skill

This skill outputs a PENCIL_PLAN. The Agent then calls Pencil MCP tools in order:

open_document

set_variables

batch_design

, optionally

get_screenshot

Step 1: Initialize Variables (set_variables)

Use

mcp__pencil__set_variables

to register Layui design tokens. Follow .pen file schema.

Primary / Theme

```
layui-primary
```
:
```
#1e9fff
```
(Layui default blue)
```
layui-normal
```
:
```
#1e9fff
```
```
layui-warm
```
:
```
#ffb800
```
```
layui-danger
```
:
```
#ff5722
```

Text & Border

```
layui-text
```
:
```
#333333
```
```
layui-border
```
:
```
#e6e6e6
```

Font & Radius

```
layui-font-md
```
:
```
14px
```
```
layui-radius
```
:
```
2px
```
(Layui default)

Fill from official Layui docs if more tokens are needed.

Step 2: Create Component Overview Structure (batch_design)

Use

mcp__pencil__batch_design

to create a "Components Overview" frame with sections based on Layui documentation:

Basic (基础)
- Button, Form, Input, Textarea, Select, Checkbox, Radio, Switch
Layout (布局)
- Container, Grid, Card
Data (数据)
- Table, Tree, Pagination, Badge, Tag
Feedback (反馈)
- Alert, Message, Modal, Drawer, Loading
Navigation (导航)
- Menu, Tabs, Breadcrumb, Dropdown
Other (其他)
- Icon, Divider, Timeline

Organize frames using Auto Layout. Keep each

batch_design

call to maximum 25 operations.

Example: Initialize Layui Variables

{
  "name": "set_variables",
  "arguments": {
    "filePath": "designs/app.pen",
    "replace": false,
    "variables": {
      "layui-primary": "#1e9fff",
      "layui-warm": "#ffb800",
      "layui-danger": "#ff5722",
      "layui-text": "#333333",
      "layui-border": "#e6e6e6",
      "layui-font-md": "14px",
      "layui-radius": "2px"
    }
  }
}

Best Practices

Verify token values against Layui official documentation.
Use
```
set_variables
```
with
```
replace: false
```
unless a full reset is requested.
Use Auto Layout for component overview frames.
Keep each
```
batch_design
```
call to maximum 25 operations; split by category if needed.

Keywords

pencil, layui, layui-vue, design system, init, variables, components

References

```
references/contract.md
```
– Design tokens and component naming.
```
references/official.md
```
– Link to official documentation.
```
references/examples.md
```
– Example PENCIL_PLAN.
```
references/components.md
```
– Component specifications.