How do I install the Tui Layout skill?

Run npx skillmds@latest add full-stack-skills/tui-layout in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Tui Layout skill do?

Generate pixel-precise ASCII TUI for Layout u-layout with strict output blocks TUI_RENDER COMPONENT_SPEC PENCIL_SPEC PENCIL_BATCH_DESIGN suitable for Pencil MCP drawing workflows. It is listed under AI & ML on SkillMD.

Is Tui Layout safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Tui Layout?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Tui Layout free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Tui Layout?

full-stack-skills (@full-stack-skills) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Tui Layout by full-stack-skills — Agent Skill

Name: Tui Layout
Author: full-stack-skills

Purpose

Produce an ASCII Text UI (TUI) representation of Layout.
Always output layout attributes (top/left/width/height, spacing, colors, typography, zIndex).
Always output Pencil MCP–ready specs and a batch_design plan (≤25 operations per call).

Source Documentation

This skill intentionally does not embed external documentation links. If you need a canonical reference, use your team's component documentation or design system source.

Input Model (Recommended)

{
  "widthCols": 70,
  "grid": { "cellWidthPx": 8, "cellHeightPx": 16 },
  "props": {},
  "modelValue": null,
  "state": { "focused": false, "disabled": false, "loading": false, "error": null },
  "style": {
    "fillColor": "#ffffff",
    "textColor": "#111111",
    "strokeColor": "#e5e7eb",
    "strokeThickness": 1,
    "cornerRadius": 12
  },
  "typography": { "fontFamily": "Inter", "fontSize": 14, "fontWeight": 400, "lineHeight": 20 },
  "layout": { "paddingPx": 16, "gapPx": 8 },
  "hotkeys": []
}

Output Contract (Mandatory)

OUTPUT: TUI_RENDER

...monospace-only text...

OUTPUT: COMPONENT_SPEC

{
  "id": "tui-layout_1",
  "name": "Layout",
  "type": "tui-layout",
  "bbox": { "topPx": 0, "leftPx": 0, "widthPx": 0, "heightPx": 0 },
  "zIndex": 1,
  "layout": { "paddingPx": 16, "gapPx": 8, "align": "left", "valign": "top" },
  "style": {
    "fillColor": "#ffffff",
    "textColor": "#111111",
    "strokeColor": "#e5e7eb",
    "strokeThickness": 1,
    "cornerRadius": 12,
    "opacity": 1
  },
  "typography": { "fontFamily": "Inter", "fontSize": 14, "fontWeight": 400, "lineHeight": 20 },
  "overflow": { "mode": "truncate", "ellipsis": "…", "maxLines": 1 },
  "state": { "focused": false, "disabled": false, "loading": false, "error": null },
  "hotkeys": []
}

OUTPUT: PENCIL_SPEC

{
  "canvas": { "widthPx": 390, "heightPx": 844, "backgroundColor": "#ffffff" },
  "grid": { "cellWidthPx": 8, "cellHeightPx": 16 },
  "nodes": [],
  "components": []
}

OUTPUT: PENCIL_BATCH_DESIGN

CALL 1:
root=G()
screen=I(root,{type:"frame",name:"Screen"})
U(screen,{width:390,height:844,x:0,y:0})

CALL 2:
cmpBg=I(screen,{type:"rect",name:"Layout/Background"})
U(cmpBg,{x:24,y:24,width:342,height:96,fillColor:"#ffffff",strokeColor:"#e5e7eb",strokeThickness:1,cornerRadius:12})
cmpText=I(screen,{type:"text",name:"Layout/Text",content:"Layout"})
U(cmpText,{x:40,y:56,width:310,height:20,textColor:"#111111",fontFamily:"Inter",fontSize:14,fontWeight:600})

Rendering Rules (Component-Level)

Follow the shared rules from tui-front-ui:

No TAB characters.
Do not exceed widthCols.
Provide a header row, body area, and minimal hotkeys if interactive.
disabled=true must suppress interaction hints.
loading=true must show a stable placeholder.
error!=null must be printed in a single line footer (truncated to width).

Examples (Must include all output blocks)

Example 1 — Minimal / default

OUTPUT: TUI_RENDER

┌──────────────────────────────────────────────────────────────┐
│ [Layout]                                                    │
├──────────────────────────────────────────────────────────────┤
│ (default state)                                             │
└──────────────────────────────────────────────────────────────┘

OUTPUT: COMPONENT_SPEC

{
  "id": "tui-layout_ex1",
  "name": "Layout",
  "type": "tui-layout",
  "bbox": { "topPx": 24, "leftPx": 24, "widthPx": 342, "heightPx": 96 },
  "zIndex": 1,
  "layout": { "paddingPx": 16, "gapPx": 8, "align": "left", "valign": "top" },
  "style": { "fillColor": "#ffffff", "textColor": "#111111", "strokeColor": "#e5e7eb", "strokeThickness": 1, "cornerRadius": 12, "opacity": 1 },
  "typography": { "fontFamily": "Inter", "fontSize": 14, "fontWeight": 400, "lineHeight": 20 },
  "overflow": { "mode": "truncate", "ellipsis": "…", "maxLines": 1 },
  "state": { "focused": false, "disabled": false, "loading": false, "error": null },
  "hotkeys": []
}

OUTPUT: PENCIL_SPEC

{
  "canvas": { "widthPx": 390, "heightPx": 844, "backgroundColor": "#ffffff" },
  "grid": { "cellWidthPx": 8, "cellHeightPx": 16 },
  "nodes": [],
  "components": [
    { "id": "tui-layout_ex1", "name": "Layout", "bbox": { "topPx": 24, "leftPx": 24, "widthPx": 342, "heightPx": 96 }, "zIndex": 1 }
  ]
}

OUTPUT: PENCIL_BATCH_DESIGN

CALL 1:
root=G()
screen=I(root,{type:"frame",name:"Screen"})
U(screen,{width:390,height:844,x:0,y:0})

CALL 2:
cmpBg=I(screen,{type:"rect",name:"Layout/Background"})
U(cmpBg,{x:24,y:24,width:342,height:96,fillColor:"#ffffff",strokeColor:"#e5e7eb",strokeThickness:1,cornerRadius:12})
cmpText=I(screen,{type:"text",name:"Layout/Text",content:"Layout"})
U(cmpText,{x:40,y:56,width:310,height:20,textColor:"#111111",fontFamily:"Inter",fontSize:14,fontWeight:600})

Example 2 — Styled / customized

OUTPUT: TUI_RENDER

┌──────────────────────────────────────────────────────────────┐
│ [Layout]                                                    │
├──────────────────────────────────────────────────────────────┤
│ (custom style example)                                      │
└──────────────────────────────────────────────────────────────┘

OUTPUT: COMPONENT_SPEC

{
  "id": "tui-layout_ex2",
  "name": "Layout",
  "type": "tui-layout",
  "bbox": { "topPx": 24, "leftPx": 24, "widthPx": 342, "heightPx": 104 },
  "zIndex": 1,
  "layout": { "paddingPx": 20, "gapPx": 10, "align": "left", "valign": "top" },
  "style": { "fillColor": "#ffffff", "textColor": "#111111", "strokeColor": "#111111", "strokeThickness": 2, "cornerRadius": 12, "opacity": 1 },
  "typography": { "fontFamily": "Inter", "fontSize": 14, "fontWeight": 600, "lineHeight": 20 },
  "overflow": { "mode": "truncate", "ellipsis": "…", "maxLines": 1 },
  "state": { "focused": false, "disabled": false, "loading": false, "error": null },
  "hotkeys": []
}

OUTPUT: PENCIL_SPEC

{
  "canvas": { "widthPx": 390, "heightPx": 844, "backgroundColor": "#ffffff" },
  "grid": { "cellWidthPx": 8, "cellHeightPx": 16 },
  "nodes": [],
  "components": [
    { "id": "tui-layout_ex2", "name": "Layout", "bbox": { "topPx": 24, "leftPx": 24, "widthPx": 342, "heightPx": 104 }, "zIndex": 1 }
  ]
}

OUTPUT: PENCIL_BATCH_DESIGN

CALL 1:
root=G()
screen=I(root,{type:"frame",name:"Screen"})
U(screen,{width:390,height:844,x:0,y:0})

CALL 2:
cmpBg=I(screen,{type:"rect",name:"Layout/Background"})
U(cmpBg,{x:24,y:24,width:342,height:104,fillColor:"#ffffff",strokeColor:"#111111",strokeThickness:2,cornerRadius:12})
cmpText=I(screen,{type:"text",name:"Layout/Text",content:"Layout"})
U(cmpText,{x:40,y:60,width:310,height:20,textColor:"#111111",fontFamily:"Inter",fontSize:14,fontWeight:600})

Example 3 — Disabled / error / edge-case

OUTPUT: TUI_RENDER

┌──────────────────────────────────────────────────────────────┐
│ [Layout] Disabled                                           │
├──────────────────────────────────────────────────────────────┤
│ Error: Something went wrong…                                │
└──────────────────────────────────────────────────────────────┘

OUTPUT: COMPONENT_SPEC

{
  "id": "tui-layout_ex3",
  "name": "Layout",
  "type": "tui-layout",
  "bbox": { "topPx": 24, "leftPx": 24, "widthPx": 342, "heightPx": 112 },
  "zIndex": 1,
  "layout": { "paddingPx": 16, "gapPx": 8, "align": "left", "valign": "top" },
  "style": { "fillColor": "#ffffff", "textColor": "#6b7280", "strokeColor": "#e5e7eb", "strokeThickness": 1, "cornerRadius": 12, "opacity": 1 },
  "typography": { "fontFamily": "Inter", "fontSize": 14, "fontWeight": 400, "lineHeight": 20 },
  "overflow": { "mode": "truncate", "ellipsis": "…", "maxLines": 1 },
  "state": { "focused": false, "disabled": true, "loading": false, "error": "Something went wrong" },
  "hotkeys": []
}

OUTPUT: PENCIL_SPEC

{
  "canvas": { "widthPx": 390, "heightPx": 844, "backgroundColor": "#ffffff" },
  "grid": { "cellWidthPx": 8, "cellHeightPx": 16 },
  "nodes": [],
  "components": [
    { "id": "tui-layout_ex3", "name": "Layout", "bbox": { "topPx": 24, "leftPx": 24, "widthPx": 342, "heightPx": 112 }, "zIndex": 1 }
  ]
}

OUTPUT: PENCIL_BATCH_DESIGN

CALL 1:
root=G()
screen=I(root,{type:"frame",name:"Screen"})
U(screen,{width:390,height:844,x:0,y:0})

CALL 2:
cmpBg=I(screen,{type:"rect",name:"Layout/Background"})
U(cmpBg,{x:24,y:24,width:342,height:112,fillColor:"#ffffff",strokeColor:"#e5e7eb",strokeThickness:1,cornerRadius:12,opacity:1})
cmpText=I(screen,{type:"text",name:"Layout/Error",content:"Error: Something went wrong…"})
U(cmpText,{x:40,y:60,width:310,height:20,textColor:"#6b7280",fontFamily:"Inter",fontSize:14,fontWeight:400})

Component Summary Row (for page aggregation)

| id | name | top | left | width | height | z | keyProps | state | hotkeys |
| tui-layout | Layout | 0 | 0 | 0 | 0 | 0 | keyProps=... | state=... | hotkeys=... |

国内适配

支持中文文档和中文注释
示例代码兼容国内开发环境
提供中文 FAQ 和常见问题解答

能力边界

✅ 适用场景

当你需要使用此技能对应的技术栈时
当项目需要遵循最佳实践时
当需要快速上手或深入理解核心概念时

⚠️ 需要注意

复杂业务逻辑需要结合具体场景调整
性能优化需要根据实际数据量评估

❌ 不适用场景

不相关的技术栈或框架
需要完全自定义的特殊场景

使用流程

Step 1: 环境准备

确保开发环境已安装必要的依赖和工具。

Step 2: 配置初始化

根据项目需求进行基础配置。

Step 3: 核心功能使用

按照示例代码实现核心功能。

Step 4: 测试验证

运行测试确保功能正常。

Step 5: 部署上线

完成开发后进行部署和监控。

Tui Layout

File contents

Purpose

Source Documentation

Input Model (Recommended)

Output Contract (Mandatory)

OUTPUT: TUI_RENDER

OUTPUT: COMPONENT_SPEC

OUTPUT: PENCIL_SPEC

OUTPUT: PENCIL_BATCH_DESIGN

Rendering Rules (Component-Level)

Examples (Must include all output blocks)

Example 1 — Minimal / default

OUTPUT: TUI_RENDER

OUTPUT: COMPONENT_SPEC

OUTPUT: PENCIL_SPEC

OUTPUT: PENCIL_BATCH_DESIGN

Example 2 — Styled / customized

OUTPUT: TUI_RENDER

OUTPUT: COMPONENT_SPEC

OUTPUT: PENCIL_SPEC

OUTPUT: PENCIL_BATCH_DESIGN

Example 3 — Disabled / error / edge-case

OUTPUT: TUI_RENDER

OUTPUT: COMPONENT_SPEC

OUTPUT: PENCIL_SPEC

OUTPUT: PENCIL_BATCH_DESIGN

Component Summary Row (for page aggregation)

国内适配

能力边界

✅ 适用场景

⚠️ 需要注意

❌ 不适用场景

使用流程

Step 1: 环境准备

Step 2: 配置初始化

Step 3: 核心功能使用

Step 4: 测试验证

Step 5: 部署上线

Frequently asked questions

Tui Layout

File contents

Purpose

Source Documentation

Input Model (Recommended)

Output Contract (Mandatory)

OUTPUT: TUI_RENDER

OUTPUT: COMPONENT_SPEC

OUTPUT: PENCIL_SPEC

OUTPUT: PENCIL_BATCH_DESIGN

Rendering Rules (Component-Level)

Examples (Must include all output blocks)

Example 1 — Minimal / default

OUTPUT: TUI_RENDER

OUTPUT: COMPONENT_SPEC

OUTPUT: PENCIL_SPEC

OUTPUT: PENCIL_BATCH_DESIGN

Example 2 — Styled / customized

OUTPUT: TUI_RENDER

OUTPUT: COMPONENT_SPEC

OUTPUT: PENCIL_SPEC

OUTPUT: PENCIL_BATCH_DESIGN

Example 3 — Disabled / error / edge-case

OUTPUT: TUI_RENDER

OUTPUT: COMPONENT_SPEC

OUTPUT: PENCIL_SPEC

OUTPUT: PENCIL_BATCH_DESIGN

Component Summary Row (for page aggregation)

国内适配

能力边界

✅ 适用场景

⚠️ 需要注意

❌ 不适用场景

使用流程

Step 1: 环境准备

Step 2: 配置初始化

Step 3: 核心功能使用

Step 4: 测试验证

Step 5: 部署上线

Related skills

Frequently asked questions

How do I install the Tui Layout skill?

What does the Tui Layout skill do?

Is Tui Layout safe to use?

Which AI agents work with Tui Layout?

Is Tui Layout free to use?

Who published Tui Layout?