How do I install the Tui Vuex Detail skill?

Run npx skillmds@latest add full-stack-skills/tui-vuex-detail 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 Vuex Detail skill do?

Generate pixel-precise ASCII TUI for Vuex Detail (u-vuex-detail) 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 Vuex Detail 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 Vuex Detail?

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

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

Who published Tui Vuex Detail?

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

Tui Vuex Detail by full-stack-skills

Name: Tui Vuex Detail
Author: full-stack-skills

Purpose

Produce an ASCII Text UI (TUI) representation of Vuex Detail.
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 doc URLs. Use the repository index:

full-stack-skills/tui-sources/components.json (lookup by skill=tui-vuex-detail or slug=vuex-detail)

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-vuex-detail_1",
  "name": "Vuex Detail",
  "type": "tui-vuex-detail",
  "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:"Vuex Detail/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:"Vuex Detail/Text",content:"Vuex Detail"})
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).

Examples (Must include all output blocks)

Example 1 — Minimal / default

OUTPUT: TUI_RENDER

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

OUTPUT: COMPONENT_SPEC

{
  "id": "tui-vuex-detail_ex1",
  "name": "Vuex Detail",
  "type": "tui-vuex-detail",
  "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-vuex-detail_ex1", "name": "Vuex Detail", "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:"Vuex Detail/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:"Vuex Detail/Text",content:"Vuex Detail"})
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

┌──────────────────────────────────────────────────────────────┐
│ [Vuex Detail]                                                    │
├──────────────────────────────────────────────────────────────┤
│ (custom style example)                                      │
└──────────────────────────────────────────────────────────────┘

OUTPUT: COMPONENT_SPEC

{
  "id": "tui-vuex-detail_ex2",
  "name": "Vuex Detail",
  "type": "tui-vuex-detail",
  "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-vuex-detail_ex2", "name": "Vuex Detail", "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:"Vuex Detail/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:"Vuex Detail/Text",content:"Vuex Detail"})
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

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

OUTPUT: COMPONENT_SPEC

{
  "id": "tui-vuex-detail_ex3",
  "name": "Vuex Detail",
  "type": "tui-vuex-detail",
  "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-vuex-detail_ex3", "name": "Vuex Detail", "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:"Vuex Detail/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:"Vuex Detail/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-vuex-detail | Vuex Detail | 0 | 0 | 0 | 0 | 0 | keyProps=... | state=... | hotkeys=... |

国内适配

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

能力边界

✅ 适用场景

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

⚠️ 需要注意

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

❌ 不适用场景

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

使用流程

Step 1: 环境准备

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

Step 2: 配置初始化

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

Step 3: 核心功能使用

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

Step 4: 测试验证

运行测试确保功能正常。

Step 5: 部署上线

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

Tui Vuex Detail

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)

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

Component Summary Row (for page aggregation)

国内适配

能力边界

✅ 适用场景

⚠️ 需要注意

❌ 不适用场景

使用流程

Step 1: 环境准备

Step 2: 配置初始化

Step 3: 核心功能使用

Step 4: 测试验证

Step 5: 部署上线

Frequently asked questions

Tui Vuex Detail

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)

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

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 Vuex Detail skill?

What does the Tui Vuex Detail skill do?

Is Tui Vuex Detail safe to use?

Which AI agents work with Tui Vuex Detail?

Is Tui Vuex Detail free to use?

Who published Tui Vuex Detail?