How do I install the Tui Form skill?

Run npx skillmds@latest add full-stack-skills/tui-form 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 Form skill do?

Generate pixel-precise ASCII TUI for Form u-form 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 Form 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 Form?

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 Form free to use?

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

Who published Tui Form?

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

Tui Form by full-stack-skills — Agent Skill

Name: Tui Form
Author: full-stack-skills

Purpose

Produce an ASCII Text UI (TUI) representation of Form.
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-form_1",
  "name": "Form",
  "type": "tui-form",
  "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:"Form/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:"Form/Text",content:"Form"})
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).

Component Mapping (Actionable)

Represent a form as an ordered list of fields inside props:

fields: Array<{ id: string, label: string, value: string, required?: boolean, placeholder?: string, error?: string, type?: "text" | "number" | "password" }>
submitLabel?: string (optional action hint)
readonly?: boolean (disables editing; still allows navigation)

Rendering rules:

One row per field, aligned as Label: [ value ].
Required fields show * after the label.
A field error renders on the next line as Error: ... (truncate to width).

Interaction:

<up>/<down> change active field
<enter> edit/commit
<esc> back

Examples (Must include all output blocks)

Example 1 — Minimal / default

OUTPUT: TUI_RENDER

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

OUTPUT: COMPONENT_SPEC

{
  "id": "tui-form_ex1",
  "name": "Form",
  "type": "tui-form",
  "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-form_ex1", "name": "Form", "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:"Form/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:"Form/Text",content:"Form"})
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

┌──────────────────────────────────────────────────────────────┐
│ [Form]                                                    │
├──────────────────────────────────────────────────────────────┤
│ (custom style: strong border, increased padding)             │
└──────────────────────────────────────────────────────────────┘

OUTPUT: COMPONENT_SPEC

{
  "id": "tui-form_ex2",
  "name": "Form",
  "type": "tui-form",
  "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-form_ex2", "name": "Form", "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:"Form/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:"Form/Text",content:"Form"})
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

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

OUTPUT: COMPONENT_SPEC

{
  "id": "tui-form_ex3",
  "name": "Form",
  "type": "tui-form",
  "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-form_ex3", "name": "Form", "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:"Form/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:"Form/Error",content:"Error: Something went wrong…"})
U(cmpText,{x:40,y:60,width:310,height:20,textColor:"#6b7280",fontFamily:"Inter",fontSize:14,fontWeight:400})

Example 4 — Two fields with required + validation

OUTPUT: TUI_RENDER

┌──────────────────────────────────────────────────────────────┐
│ [Form]                                                      │
├──────────────────────────────────────────────────────────────┤
│ Username*: [ ada_lovelace________________________ ]          │
│ Email*:    [ ada@example.com______________________ ]         │
│ Error: Email must contain '@'                                │
├──────────────────────────────────────────────────────────────┤
│ Keys: <up>/<down> field  <enter> edit  <esc> back            │
└──────────────────────────────────────────────────────────────┘

OUTPUT: COMPONENT_SPEC

{
  "id": "tui-form_ex4",
  "name": "Form",
  "type": "tui-form",
  "bbox": { "topPx": 96, "leftPx": 24, "widthPx": 342, "heightPx": 152 },
  "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": "wrap", "ellipsis": "…", "maxLines": 0 },
  "state": { "focused": true, "disabled": false, "loading": false, "error": "Email must contain '@'" },
  "hotkeys": ["<up>", "<down>", "<enter>", "<esc>"]
}

OUTPUT: PENCIL_SPEC

{
  "canvas": { "widthPx": 390, "heightPx": 844, "backgroundColor": "#ffffff" },
  "grid": { "cellWidthPx": 8, "cellHeightPx": 16 },
  "nodes": [],
  "components": [
    { "id": "tui-form_ex4", "name": "Form", "bbox": { "topPx": 96, "leftPx": 24, "widthPx": 342, "heightPx": 152 }, "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:
bg=I(screen,{type:"rect",name:"Form/Background"})
U(bg,{x:24,y:96,width:342,height:152,fillColor:"#ffffff",strokeColor:"#e5e7eb",strokeThickness:1,cornerRadius:12})
u=I(screen,{type:"text",name:"Form/Row1",content:"Username*: [ ada_lovelace ]"})
U(u,{x:40,y:120,width:310,height:20,textColor:"#111111",fontFamily:"Inter",fontSize:14,fontWeight:400})
e=I(screen,{type:"text",name:"Form/Row2",content:"Email*: [ ada@example.com ]"})
U(e,{x:40,y:144,width:310,height:20,textColor:"#111111",fontFamily:"Inter",fontSize:14,fontWeight:400})
err=I(screen,{type:"text",name:"Form/Error",content:"Error: Email must contain '@'"})
U(err,{x:40,y:168,width:310,height:20,textColor:"#ef4444",fontFamily:"Inter",fontSize:12,fontWeight:400})

Component Summary Row (for page aggregation)

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

国内适配

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

能力边界

✅ 适用场景

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

⚠️ 需要注意

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

❌ 不适用场景

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

使用流程

Step 1: 环境准备

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

Step 2: 配置初始化

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

Step 3: 核心功能使用

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

Step 4: 测试验证

运行测试确保功能正常。

Step 5: 部署上线

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

Tui Form

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)

Component Mapping (Actionable)

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

Example 4 — Two fields with required + validation

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 Form skill?

What does the Tui Form skill do?

Is Tui Form safe to use?

Which AI agents work with Tui Form?

Is Tui Form free to use?

Who published Tui Form?