tui-line

用途

tui-line 用于生成 Line 组件的 ASCII 文本用户界面（TUI）表示。它属于 partme-ai/full-stack-skills 技能集，目标是在文本环境中产出像素级精确的组件渲染，并同时给出可供设计工具（Pencil MCP）使用的规格与批量设计计划。

主要能力

解析输入模型 JSON，字段包括 widthCols、grid、props、modelValue、state、style、typography、layout、hotkeys。
依据网格参数（cellWidthPx=8、cellHeightPx=16）将列/行位置换算为像素坐标。
输出 TUI_RENDER：使用制表符（box-drawing characters）构建等宽 ASCII 图形，并遵守 widthCols 限制。
输出 COMPONENT_SPEC：包含 bbox、style、typography、state、hotkeys 的 JSON 规格。
输出 PENCIL_SPEC：面向 Pencil MCP 的画布与组件列表。
输出 PENCIL_BATCH_DESIGN：生成 batch_design 调用，每次调用最多 25 个操作。
校验：确认 COMPONENT_SPEC 中的 bbox 尺寸与 TUI_RENDER 网格一致，并确认批量操作不超过 25 个的限制。

使用方式

技能始终输出布局属性（top/left/width/height、spacing、colors、typography、zIndex），并强制输出上述四类结果块。工作流程为：解析输入 → 计算布局 → 渲染 TUI_RENDER → 构建 COMPONENT_SPEC → 构建 PENCIL_SPEC → 规划 PENCIL_BATCH_DESIGN → 校验。

推荐输入模型示例：

{
  "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: TUI_RENDER —— 仅等宽文本。

OUTPUT: COMPONENT_SPEC —— JSON，含 id、name、type、bbox、zIndex、layout、style、typography、overflow、state、hotkeys。

OUTPUT: PENCIL_SPEC —— JSON，含 canvas、grid、nodes、components。

OUTPUT: PENCIL_BATCH_DESIGN —— 分批的 batch_design 调用，每批最多 25 个操作。

渲染规则（组件级）

遵循 tui-front-ui 的共享规则：

不使用 TAB 字符。
不超出 widthCols。
提供表头行、主体区域，若可交互则提供最小热键提示。
disabled=true 时必须抑制交互提示。
loading=true 时必须显示稳定占位符。
error!=null 时必须在单行页脚输出（按宽度截断）。

适用场景

需要在文本界面中精确表达 Line 组件布局与样式的场景。
需要同时产出设计工具（Pencil MCP）可执行规格与批量设计计划的场景。
需要覆盖默认、自定义样式、禁用/错误等边界状态的组件渲染。

限制

批量设计调用每次最多 25 个操作。
渲染不得使用 TAB 字符，且不得超出 widthCols。
关于收费、价格、平台支持范围等信息，资料中暂未提供。

技能介绍

用途

主要能力

使用方式

渲染规则（组件级）

适用场景

限制