Agent skill

Ardot Generate Library

by balabalabalading in balabalabalading/huuuuuuho-skills

在 Ardot 中构建可复用组件库或设计系统时使用此技能. An agent skill from balabalabalading/huuuuuuho-skills.

MITAuto-check passed

Install Ardot Generate Library

skills CLI
$ npx skills add balabalabalading/huuuuuuho-skills --skill ardot-generate-library -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install balabalabalading/huuuuuuho-skills ardot-generate-library --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/balabalabalading/huuuuuuho-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/Ardot-skills-nonofficial/ardot-generate-library .claude/skills/ardot-generate-library && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
ardot-generate-library
GitHub stars
118
Token cost
~1.6k tokens
SKILL.md length
80 words
Files
1
Skills in repo
8
Repo updated
First seen
Licence
MIT

At a glance

在 Ardot 中构建可复用组件库或设计系统时使用此技能. An agent skill from balabalabalading/huuuuuuho-skills.

  • SKILL.md covers 技能边界, 前置条件, 阶段一:基础 and 阶段二:组件创建, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Ardot Generate Library is an agent skill from balabalabalading/huuuuuuho-skills. 在 Ardot 中构建可复用组件库或设计系统时使用此技能。 涵盖从变量/设计令牌创建到使用正确变量绑定构建组件的完整工作流程, 直至最终验证。 触发条件:"创建组件库"、"构建设计系统"、 "制作可复用按钮"、"创建 UI 组件"、"构建组件集"、 "设计系统"、"组件库"、"可复用组件"。

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

The repository describes itself as: My personal collection of Skills — open-source tools that extend Agent's capabilities for content creation, development logging, and productivity workflows. The licence is MIT.

Example prompts

  • “构建设计系统”
  • “制作可复用按钮”
  • “创建 UI 组件”
  • “/ardot-generate-library”

What it can do on your machine

Read from SKILL.md and the folder at commit e2b6b5d. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are json and javascript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Ardot Generate Library loads about 1.6k tokens when it runs. Until then it costs about 43 tokens; SKILL.md has 80 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~43
When it runs · the whole SKILL.md, loaded when a task matches
~1.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from balabalabalading/huuuuuuho-skills at commit e2b6b5d, republished under its MIT licence (© balabalabalading). 80 words, ~1,597 tokens.

Download SKILL.mdSave it as .claude/skills/ardot-generate-library/SKILL.md (or your agent's skills folder).
name
ardot-generate-library
description
在 Ardot 中构建可复用组件库或设计系统时使用此技能。 涵盖从变量/设计令牌创建到使用正确变量绑定构建组件的完整工作流程, 直至最终验证。 触发条件:"创建组件库"、"构建设计系统"、 "制作可复用按钮"、"创建 UI 组件"、"构建组件集"、 "设计系统"、"组件库"、"可复用组件"。
disable-model-invocation
false

ardot-generate-library — 构建组件库

在 Ardot 中构建可复用组件库和设计系统。组件使用正确的变量绑定创建,以便响应主题/模式变化。

技能边界

  • 构建可复用组件时使用此技能(按钮、卡片、输入框、导航栏等)
  • 创建包含令牌和组件的设计系统时使用此技能
  • 如果构建一次性页面/屏幕,请改用 ardot-generate-design

前置条件

  • ardot-use — 用于 batch_edit DSL 规则、变量绑定、注意事项
  • ardot-create-new-file — 用于创建 Components 页面

阶段一:基础

1a:创建 Components 页面
create_new_page({name: "Components", select: false})
  → 记录 pageId(例如 "3:1672")
1b:创建设计令牌(变量)

使用 apply_variables 创建变量基础。组件将绑定到这些变量。

json
apply_variables({
  "variables": {
    "Colors": {
      "modes": ["Dark", "Light"],
      "variables": {
        "accent-primary": {
          "type": "COLOR", "scopes": ["ALL_FILLS"],
          "valuesByMode": {
            "Dark": {"r": 0.91, "g": 0.44, "b": 0.29, "a": 1},
            "Light": {"r": 0.83, "g": 0.38, "b": 0.23, "a": 1}
          }
        },
        "accent-primary-text": {
          "type": "COLOR", "scopes": ["TEXT_FILL"],
          "valuesByMode": {
            "Dark": {"r": 1, "g": 1, "b": 1, "a": 1},
            "Light": {"r": 1, "g": 1, "b": 1, "a": 1}
          }
        },
        "bg-secondary": {
          "type": "COLOR", "scopes": ["ALL_FILLS"],
          "valuesByMode": {
            "Dark": {"r": 0.15, "g": 0.15, "b": 0.15, "a": 1},
            "Light": {"r": 0.95, "g": 0.95, "b": 0.95, "a": 1}
          }
        },
        "text-primary": {
          "type": "COLOR", "scopes": ["TEXT_FILL"],
          "valuesByMode": {
            "Dark": {"r": 0.95, "g": 0.95, "b": 0.95, "a": 1},
            "Light": {"r": 0.1, "g": 0.1, "b": 0.1, "a": 1}
          }
        },
        "border-default": {
          "type": "COLOR", "scopes": ["STROKE"],
          "valuesByMode": {
            "Dark": {"r": 0.25, "g": 0.25, "b": 0.25, "a": 1},
            "Light": {"r": 0.85, "g": 0.85, "b": 0.85, "a": 1}
          }
        }
      }
    },
    "Spacing": {
      "modes": ["Dark", "Light"],
      "variables": {
        "spacing-xs": {"type": "FLOAT", "scopes": ["GAP"],
          "valuesByMode": {"Dark": 4, "Light": 4}},
        "spacing-sm": {"type": "FLOAT", "scopes": ["GAP"],
          "valuesByMode": {"Dark": 8, "Light": 8}},
        "spacing-md": {"type": "FLOAT", "scopes": ["GAP"],
          "valuesByMode": {"Dark": 16, "Light": 16}},
        "spacing-lg": {"type": "FLOAT", "scopes": ["GAP"],
          "valuesByMode": {"Dark": 24, "Light": 24}},
        "radius-sm": {"type": "FLOAT", "scopes": ["CORNER_RADIUS"],
          "valuesByMode": {"Dark": 6, "Light": 6}},
        "radius-md": {"type": "FLOAT", "scopes": ["CORNER_RADIUS"],
          "valuesByMode": {"Dark": 8, "Light": 8}},
        "radius-lg": {"type": "FLOAT", "scopes": ["CORNER_RADIUS"],
          "valuesByMode": {"Dark": 12, "Light": 12}}
      }
    }
  }
})

在追踪表中记录所有返回的变量 ID 以供后续绑定使用。

硬性关卡:

  • 禁止: 在变量存在之前创建组件
  • 禁止: 使用硬编码颜色创建组件(cornerRadius 除外)

阶段二:组件创建

按依赖顺序逐个构建组件:

原子组件(无依赖):
  → Button、Input、Label、Icon、Badge、Avatar、Divider

分子组件(依赖原子组件):
  → Card(使用 Button、Badge)、NavBar(使用 Button)、FormField(使用 Input、Label)
每个组件的工作流程
1. batch_edit (I) → 在 Components 页面上创建组件,设置 reusable:true
   - 对框架填充使用 boundVariables(暂不用于 TEXT 填充)
   - TEXT 子元素使用 fill: "#HEX" 占位符
   - 记录返回的组件节点 ID

2. batch_read → 验证组件结构

3. batch_edit (U) → 将变量绑定到 TEXT 子元素
   - 对每个 TEXT 节点应用 fills+boundVariables

4. batch_read → 验证变量绑定存在

5. capture_screenshot → 组件的视觉检查
示例:Button/Primary/md
js
// 第一步:创建组件
btnPrimaryMd = I("3:1672", {
  "type": "FRAME",
  "name": "Button/Primary/md",
  "reusable": true,
  "width": "hug_contents", "height": 32,
  "layout": "horizontal",
  "paddingLeft": 16, "paddingRight": 16,
  "paddingTop": 6, "paddingBottom": 6,
  "cornerRadius": 8,
  "primaryAxisAlignItems": "CENTER",
  "counterAxisAlignItems": "CENTER",
  "fills": [{"type": "SOLID", "color": {"r": 0.91, "g": 0.44, "b": 0.29},
    "boundVariables": {"color": {"id": "VariableID:3:14", "type": "VARIABLE_ALIAS"}}}],
  "children": [
    {"type": "TEXT", "name": "Label", "characters": "Button",
      "fontSize": 14, "fill": "#FFFFFF"}
  ]
})
// 返回:btnPrimaryMd → "3:544",TEXT 子元素 → "3:545"

// 第三步(单独的 batch_edit):绑定文本颜色变量
U("3:545", {
  "fills": [{"type": "SOLID", "color": {"r": 1, "g": 1, "b": 1},
    "boundVariables": {"color": {"id": "VariableID:3:15", "type": "VARIABLE_ALIAS"}}}]
})
示例:带子元素的卡片
js
card = I("3:1672", {
  "type": "FRAME",
  "name": "Card/Default",
  "reusable": true,
  "width": 320, "height": "hug_contents",
  "layout": "vertical",
  "paddingLeft": 20, "paddingRight": 20,
  "paddingTop": 20, "paddingBottom": 20,
  "cornerRadius": 12,
  "fills": [{"type": "SOLID", "color": {"r": 0.15, "g": 0.15, "b": 0.15},
    "boundVariables": {"color": {"id": "VariableID:3:16", "type": "VARIABLE_ALIAS"}}}],
  "strokes": [{"type": "SOLID", "color": {"r": 0.25, "g": 0.25, "b": 0.25},
    "boundVariables": {"color": {"id": "VariableID:3:18", "type": "VARIABLE_ALIAS"}}}],
  "children": [
    {"type": "TEXT", "name": "Title", "characters": "Card Title",
      "fontSize": 18, "fill": "#F2F2F2"},
    {"type": "TEXT", "name": "Body", "characters": "Card description text.",
      "fontSize": 14, "fill": "#AAAAAA"}
  ]
})

阶段三:验证

3a:结构验证
json
batch_read({parentId: "<ComponentsPageId>"})

检查:

  • 所有计划的组件存在且名称正确
  • 所有组件都有 reusable: true
  • 所有组件都有预期的子元素
3b:变量绑定验证

对于每个组件,验证变量绑定存在:

json
batch_read({nodeIds: ["<componentId1>", "<componentId2>", ...]})

检查 fills[].boundVariables 和 strokes[].boundVariables 不为空。

3c:视觉验证
json
capture_screenshot({
  "nodeIds": ["<所有组件 ID>"],
  "screenShotDir": "/tmp/ardot-components"
})

审查所有组件截图以确保视觉正确性。

硬性关卡 — 禁止的快捷方式

  • 禁止: 在变量存在之前创建组件
  • 禁止: 在组件填充中硬编码十六进制颜色(使用 boundVariables)
  • 禁止: 跳过 TEXT 两步变量绑定
  • 禁止: 使用与设计令牌不匹配的硬编码字体大小
  • 禁止: 在原子依赖之前创建依赖(分子)组件

推荐命名约定

<类别>/<变体>/<大小>

示例:
  Button/Primary/sm
  Button/Primary/md
  Button/Primary/lg
  Button/Secondary/md
  Button/Ghost/md
  Card/Default
  Card/Elevated
  Input/Default
  Input/Error
  Badge/Success
  Badge/Warning

使用 / 作为分隔符 — 这会创建与 Figma 兼容的组件分组。

© balabalabalading, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/Ardot-skills-nonofficial/ardot-generate-library of balabalabalading/huuuuuuho-skills.

Open the folder on GitHubat commit e2b6b5d

Compare with similar skills

Ardot Generate Library next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Ardot Generate Library compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Ardot Generate Library this skillbalabalabalading/huuuuuuho-skills118—~1.6kAutomated safety check: PassMIT
Blueprintaffaan-m/ECC276k2 repos~604Automated safety check: PassMIT
Token Budget Advisoraffaan-m/ECC276k—~927Automated safety check: PassMIT
Logic Thinker Coachdigoal/blog8.6k—~941Automated safety check: PassGPL-2.0
Article Fact Checkerdigoal/blog8.6k—~956Automated safety check: PassGPL-2.0
Industry Insight Writerdigoal/blog8.6k—~578Automated safety check: PassGPL-2.0

Similar skills

  • Blueprint

    affaan-m/ECC

    将单行目标转化为多会话、多代理工程项目的分步构建计划。每个步骤包含独立的上下文简介,以便新代理能直接执行。包括对抗性审查门、依赖图、并行步骤检测、反模式目录和计划突变协议。触发条件:当用户请求复杂多PR任务的计划、蓝图或路线图,或描述需要多个会话的工作时。不触发条件:任务可在单个PR或少于3个工具调用中完成,或用户说“直接执行”时。

    276k GitHub starsUsed in 2 repos~604 tokens
    DevelopmentAuto-check passed
  • 在回答前,为用户提供关于消耗多少响应深度的知情选择。当用户明确希望控制响应长度、深度或令牌预算时使用此技能。触发条件:"token budget", "token count", "token usage", "token limit", "response length", "answer depth", "short version", "brief answer", "detailed…

    276k GitHub stars~927 tokensUpdated 4 days ago
    AI & LLM EngineeringAuto-check passed
  • 通过持续的对话式提问,训练用户的逻辑思维与独立思考能力:给用户出思考题、用苏格拉底式追问引导用户自己发现漏洞、对用户的每次回复做点评并给出具体改进意见,同时把训练记录和薄弱点保存到 markdown,用于后续对话中做针对性、渐进式的训练。触发条件:用户提到"训练我的逻辑思维"、"锻炼独立思考"、"陪我练逻辑"、"logic…

    8.6k GitHub stars~941 tokensUpdated today
    Auto-check passed
  • 逐段逐句鉴定一篇文章内容的真伪,拆解论证结构,对每个事实/推断节点做六维核查(逻辑正确性、结论可量化性、证据链完整性、证据是否捏造、证据可考证性、来源可信度),最后输出带原文定位的问题清单和置信度打分表。触发条件:用户提到"鉴别真伪"、"这篇文章可信吗"、"内容审查"、"事实核查"、"fact…

    8.6k GitHub stars~956 tokensUpdated today
    Documents & OfficeAuto-check passed
  • 以第三方中立研究顾问身份,围绕某个行业近1个月内的最新动态,撰写适合公众号发布的简短深度文章(不超过4屏手机阅读)。触发条件:用户输入行业名称并希望生成行业洞察文章,提到"帮我写篇XX行业的文章"、"分析一下XX行业最近的动态"、"以顾问角度写XX"、"行业观察"、"行业跟踪"、"行业洞察"、"帮我写XX行业报告"、"XX行业近期发展"等。即使用户只说"帮我写一篇关于XX行业的文章",只要意图是…

    8.6k GitHub stars~578 tokensUpdated today
    Documents & OfficeAuto-check passed
  • Good Ask

    digoal/blog

    给定一个行业,围绕该行业提出若干个"好问题"(只提问、不给答案,但每个问题要配"为什么这是个好问题"的理由)。触发条件:用户提到"帮我想几个好问题"、"这个行业有什么值得问的问题"、"帮我出选题"、"行业狗皮膏药问题"、"行业老大难问题"、"近期热点问题"、"帮我策划几个话题"、"这个行业值得深挖的问题有哪些"、"good…

    8.6k GitHub stars~946 tokensUpdated today
    Auto-check passed

More from balabalabalading/huuuuuuho-skills

All 8 skills in this repo
  • Mp Article Writor

    balabalabalading/huuuuuuho-skills

    微信公众号文章创作。当用户想把软件更新、产品新闻、工具测评、工作流探索、个人实践或生活感悟等素材整理成公众号文章时使用。即使用户只是说「帮我写篇文章」「整理成推文」「发公众号」,也应当触发此技能。

    118 GitHub stars~3.2k tokensUpdated 13 days ago
    Auto-check passed
  • Logging Session

    balabalabalading/huuuuuuho-skills

    Record and query AI conversation logs — what users asked, how it was solved, and the result.

    118 GitHub stars~2.2k tokensUpdated 13 days ago
    Auto-check: warnings
  • Ardot Use

    balabalabalading/huuuuuuho-skills

    强制性前置条件 — 每次调用 batchedit 工具之前,必须先调用此技能. An agent skill from balabalabalading/huuuuuuho-skills.

    118 GitHub stars~1.7k tokensUpdated 13 days ago
    Auto-check passed
  • Ardot Generate Design

    balabalabalading/huuuuuuho-skills

    在 Ardot 中从头构建完整页面、屏幕或多区块 UI 布局时,将此技能与 ardot-use 配合使用. An agent skill from balabalabalading/huuuuuuho-skills.

    118 GitHub stars~1.2k tokensUpdated 13 days ago
    Auto-check passed
  • Article2ticktick

    balabalabalading/huuuuuuho-skills

    将技术周报中的文章整理为滴答清单(TickTick)待办事项,同时支持单篇文章直接添加。当用户提供周报 markdown 文档、要求将周报文章添加到滴答清单,或提及"技术周报"、"文章汇总"、"添加到滴答"等关键词时,使用此技能;当用户分享单篇文章链接并希望添加到滴答清单时,同样使用此技能。

    118 GitHub stars~1.1k tokensUpdated 13 days ago
    Auto-check: warnings
  • Ardot Style Guide

    balabalabalading/huuuuuuho-skills

    从头设计或为 Ardot 项目应用视觉主题时使用此技能. An agent skill from balabalabalading/huuuuuuho-skills.

    118 GitHub stars~909 tokensUpdated 13 days ago
    Auto-check passed

Questions about Ardot Generate Library

What does Ardot Generate Library do?

在 Ardot 中构建可复用组件库或设计系统时使用此技能. An agent skill from balabalabalading/huuuuuuho-skills. Ardot Generate Library is an agent skill from balabalabalading/huuuuuuho-skills.

How do I install Ardot Generate Library in Claude Code?

Run `npx skills add balabalabalading/huuuuuuho-skills --skill ardot-generate-library -a claude-code`. Or copy the skill folder (skills/Ardot-skills-nonofficial/ardot-generate-library in balabalabalading/huuuuuuho-skills) into .claude/skills/ardot-generate-library in your project. Claude Code loads it when a task matches its description.

How do I install Ardot Generate Library in Codex?

Run `npx skills add balabalabalading/huuuuuuho-skills --skill ardot-generate-library -a codex`. Or copy the skill folder (skills/Ardot-skills-nonofficial/ardot-generate-library in balabalabalading/huuuuuuho-skills) into .agents/skills/ardot-generate-library in your project. Codex loads it when a task matches its description.

Can I use Ardot Generate Library in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add balabalabalading/huuuuuuho-skills --skill ardot-generate-library -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ardot-generate-library, .gemini/skills/ardot-generate-library, .github/skills/ardot-generate-library and .opencode/skills/ardot-generate-library in your project.

What does Ardot Generate Library need to run?

SKILL.md names no scripts, command-line tools or credentials: Ardot Generate Library is instructions for the agent only.

Does Ardot Generate Library access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Ardot Generate Library safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Ardot Generate Library use?

Ardot Generate Library is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Ardot Generate Library use?

About 1.6k tokens (SKILL.md is roughly 6.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Ardot Generate Library?

Skills that share tags, products or a category with Ardot Generate Library: Blueprint (affaan-m/ECC, 276k stars), Token Budget Advisor (affaan-m/ECC, 276k stars), Logic Thinker Coach (digoal/blog, 8.6k stars) and Article Fact Checker (digoal/blog, 8.6k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Ardot Generate Library?

balabalabalading (a GitHub user) maintains it in balabalabalading/huuuuuuho-skills, which has 118 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on September 26, 2026.

Source: balabalabalading/huuuuuuho-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.