tui-form

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: PENCILBATCHDESIGN

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: PENCILBATCHDESIGN

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: PENCILBATCHDESIGN

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: PENCILBATCHDESIGN

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*:    [ [email protected]______________________ ]         │
│ 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: PENCILBATCHDESIGN

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*: [ [email protected] ]"})
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: 部署上线

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

Installation

Similar popular skills

Also in this package

Agent compatibility

Repository health

Package contents

History

SKILL.md

Purpose

Source Documentation

Input Model (Recommended)

Output Contract (Mandatory)

OUTPUT: TUI_RENDER

OUTPUT: COMPONENT_SPEC

OUTPUT: PENCIL_SPEC

OUTPUT: PENCILBATCHDESIGN

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: PENCILBATCHDESIGN

Example 2 — Styled / customized

OUTPUT: TUI_RENDER

OUTPUT: COMPONENT_SPEC

OUTPUT: PENCIL_SPEC

OUTPUT: PENCILBATCHDESIGN

Example 3 — Disabled / error / edge-case

OUTPUT: TUI_RENDER

OUTPUT: COMPONENT_SPEC

OUTPUT: PENCIL_SPEC

OUTPUT: PENCILBATCHDESIGN

Example 4 — Two fields with required + validation

OUTPUT: TUI_RENDER

OUTPUT: COMPONENT_SPEC

OUTPUT: PENCIL_SPEC

OUTPUT: PENCILBATCHDESIGN

Component Summary Row (for page aggregation)

国内适配

能力边界

✅ 适用场景

⚠️ 需要注意

❌ 不适用场景

使用流程

Step 1: 环境准备

Step 2: 配置初始化

Step 3: 核心功能使用

Step 4: 测试验证

Step 5: 部署上线