<< All versions
Skill v1.0.1
currentAutomated scan100/100partme-ai/full-stack-skills/tui-textarea
2 files
──Details
PublishedMay 15, 2026 at 12:53 AM
Content Hashsha256:424e4a878d47474d...
Git SHAaed23d528f0f
Bump Typepatch
──Files
Files (1 file, 11.5 KB)
SKILL.md11.5 KBactive
SKILL.md · 302 lines · 11.5 KB
version: "1.0.1" name: tui-textarea description: "Generate and render a pixel-precise ASCII TUI Textarea component with complete output blocks (TUI_RENDER, COMPONENT_SPEC, PENCIL_SPEC, PENCIL_BATCH_DESIGN) for Pencil MCP drawing workflows. Use when the user asks to create a textarea in a terminal UI, text-based interface, or Pencil MCP project."
Purpose
- Produce an ASCII Text UI (TUI) representation of Textarea.
- 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).
Workflow
- Parse input — Read the input model JSON (widthCols, grid, props, state, style, typography, layout, hotkeys).
- Calculate layout — Convert column/row positions to pixel coordinates using the grid (cellWidthPx=8, cellHeightPx=16).
- Render TUI_RENDER — Build the monospace ASCII art with box-drawing characters, respecting widthCols.
- Build COMPONENT_SPEC — Emit the JSON spec with bbox, style, typography, state, and hotkeys.
- Build PENCIL_SPEC — Emit the canvas and component list for Pencil MCP.
- Plan PENCIL_BATCH_DESIGN — Emit batch_design calls (max 25 ops per call) to create the design in Pencil.
- Validate — Verify bbox dimensions in COMPONENT_SPEC match the TUI_RENDER grid; confirm batch ops stay within the 25-op limit.
Input Model (Recommended)
json
{"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
text
...monospace-only text...
OUTPUT: COMPONENT_SPEC
json
{"id": "tui-textarea_1","name": "Textarea","type": "tui-textarea","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
json
{"canvas": { "widthPx": 390, "heightPx": 844, "backgroundColor": "#ffffff" },"grid": { "cellWidthPx": 8, "cellHeightPx": 16 },"nodes": [],"components": []}
OUTPUT: PENCIL_BATCH_DESIGN
text
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:"Textarea/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:"Textarea/Text",content:"Textarea"})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
text
┌──────────────────────────────────────────────────────────────┐│ [Textarea] │├──────────────────────────────────────────────────────────────┤│ Search ││ [ type here...______________________________ ] │└──────────────────────────────────────────────────────────────┘
OUTPUT: COMPONENT_SPEC
json
{"id": "tui-textarea_ex1","name": "Textarea","type": "tui-textarea","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
json
{"canvas": { "widthPx": 390, "heightPx": 844, "backgroundColor": "#ffffff" },"grid": { "cellWidthPx": 8, "cellHeightPx": 16 },"nodes": [],"components": [{ "id": "tui-textarea_ex1", "name": "Textarea", "bbox": { "topPx": 24, "leftPx": 24, "widthPx": 342, "heightPx": 96 }, "zIndex": 1 }]}
OUTPUT: PENCIL_BATCH_DESIGN
text
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:"Textarea/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:"Textarea/Text",content:"Textarea"})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
text
┌──────────────────────────────────────────────────────────────┐│ [Textarea] │├──────────────────────────────────────────────────────────────┤│ Email ││ [ ada@example.com|___________________________ ] [x] │├──────────────────────────────────────────────────────────────┤│ Keys: <tab> next <enter> commit <esc> back │└──────────────────────────────────────────────────────────────┘
OUTPUT: COMPONENT_SPEC
json
{"id": "tui-textarea_ex2","name": "Textarea","type": "tui-textarea","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
json
{"canvas": { "widthPx": 390, "heightPx": 844, "backgroundColor": "#ffffff" },"grid": { "cellWidthPx": 8, "cellHeightPx": 16 },"nodes": [],"components": [{ "id": "tui-textarea_ex2", "name": "Textarea", "bbox": { "topPx": 24, "leftPx": 24, "widthPx": 342, "heightPx": 104 }, "zIndex": 1 }]}
OUTPUT: PENCIL_BATCH_DESIGN
text
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:"Textarea/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:"Textarea/Text",content:"Textarea"})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
text
┌──────────────────────────────────────────────────────────────┐│ [Textarea] Disabled │├──────────────────────────────────────────────────────────────┤│ Password ││ [ ••••••••••_______________________________ ] │└──────────────────────────────────────────────────────────────┘
OUTPUT: COMPONENT_SPEC
json
{"id": "tui-textarea_ex3","name": "Textarea","type": "tui-textarea","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
json
{"canvas": { "widthPx": 390, "heightPx": 844, "backgroundColor": "#ffffff" },"grid": { "cellWidthPx": 8, "cellHeightPx": 16 },"nodes": [],"components": [{ "id": "tui-textarea_ex3", "name": "Textarea", "bbox": { "topPx": 24, "leftPx": 24, "widthPx": 342, "heightPx": 112 }, "zIndex": 1 }]}
OUTPUT: PENCIL_BATCH_DESIGN
text
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:"Textarea/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:"Textarea/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)
text
| id | name | top | left | width | height | z | keyProps | state | hotkeys || tui-textarea | Textarea | 0 | 0 | 0 | 0 | 0 | keyProps=... | state=... | hotkeys=... |