SKILL.md
Purpose
- Produce an ASCII Text UI (TUI) representation of Swiper.
- Always output layout attributes (top/left/width/height, spacing, colors, typography, zIndex).
- Always output Pencil MCP–ready specs and a
batch_designplan (≤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-swiper_1",
"name": "Swiper",
"type": "tui-swiper",
"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:"Swiper/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:"Swiper/Text",content:"Swiper"})
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=truemust suppress interaction hints.loading=truemust show a stable placeholder.error!=nullmust be printed in a single line footer (truncated to width).
Examples (Must include all output blocks)
Example 1 — Minimal / default
OUTPUT: TUI_RENDER
┌──────────────────────────────────────────────────────────────┐
│ [Swiper] │
├──────────────────────────────────────────────────────────────┤
│ [Home] Search Settings │
└──────────────────────────────────────────────────────────────┘OUTPUT: COMPONENT_SPEC
{
"id": "tui-swiper_ex1",
"name": "Swiper",
"type": "tui-swiper",
"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-swiper_ex1", "name": "Swiper", "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:"Swiper/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:"Swiper/Text",content:"Swiper"})
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
┌──────────────────────────────────────────────────────────────┐
│ [Swiper] │
├──────────────────────────────────────────────────────────────┤
│ [Profile] Settings Security Notific… (Billing) │
├──────────────────────────────────────────────────────────────┤
│ Keys: <left>/<right> switch <enter> activate <esc> back │
└──────────────────────────────────────────────────────────────┘OUTPUT: COMPONENT_SPEC
{
"id": "tui-swiper_ex2",
"name": "Swiper",
"type": "tui-swiper",
"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-swiper_ex2", "name": "Swiper", "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:"Swiper/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:"Swiper/Text",content:"Swiper"})
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
┌──────────────────────────────────────────────────────────────┐
│ [Swiper] Disabled │
├──────────────────────────────────────────────────────────────┤
│ [Profile] (Settings) │
└──────────────────────────────────────────────────────────────┘OUTPUT: COMPONENT_SPEC
{
"id": "tui-swiper_ex3",
"name": "Swiper",
"type": "tui-swiper",
"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-swiper_ex3", "name": "Swiper", "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:"Swiper/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:"Swiper/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-swiper | Swiper | 0 | 0 | 0 | 0 | 0 | keyProps=... | state=... | hotkeys=... |国内适配
- 支持中文文档和中文注释
- 示例代码兼容国内开发环境
- 提供中文 FAQ 和常见问题解答
能力边界
✅ 适用场景
- 当你需要使用此技能对应的技术栈时
- 当项目需要遵循最佳实践时
- 当需要快速上手或深入理解核心概念时
⚠️ 需要注意
- 复杂业务逻辑需要结合具体场景调整
- 性能优化需要根据实际数据量评估
❌ 不适用场景
- 不相关的技术栈或框架
- 需要完全自定义的特殊场景
使用流程
Step 1: 环境准备
确保开发环境已安装必要的依赖和工具。
Step 2: 配置初始化
根据项目需求进行基础配置。
Step 3: 核心功能使用
按照示例代码实现核心功能。
Step 4: 测试验证
运行测试确保功能正常。
Step 5: 部署上线
完成开发后进行部署和监控。