Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/webflow/webflow-skills/code-component-commandnpx skills add webflow/webflow-skills --skill code-component-commandgit clone --depth 1 https://github.com/webflow/webflow-skillsWhat it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00051 | $0.06758 |
| Opus 5 | $0.00026 | $0.03379 |
| Sonnet 5 | $0.00010 | $0.01352 |
| Haiku 4.5 | $0.00005 | $0.00676 |
Grade A, and why
webflow-cli:code-component scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 1,151 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Code Component
Create, build, and deploy React components to Webflow Designer with comprehensive validation and deployment verification.
Important Note
ALWAYS use Bash tool for all Webflow CLI operations:
- Execute
webflowCLI commands via Bash tool - Use Read tool to examine generated files (never modify)
- Use Glob tool to discover project files
- Verify CLI installation:
webflow --version - Check authentication: On first
webflow library share, workspace authentication happens automatically - DO NOT use Webflow MCP tools for CLI workflows
- All CLI commands require proper descriptions (not context parameters)
Package Manager Detection:
- Check for lock files:
package-lock.json(npm),pnpm-lock.yaml(pnpm),yarn.lock(yarn) - If no lock file found, ask user which package manager to use (npm/pnpm/yarn)
- Use detected package manager for all install/build commands
Instructions
Phase 1: Environment Verification
- Verify CLI installed: Run
webflow --versionto confirm CLI is installed - Check project state: Determine if user has existing React project or needs guidance
- Identify workspace: Explain that workspace authentication happens on first share
- Review configuration: Check if webflow.json exists with library configuration
Phase 2: Project Configuration
- Ask operation type: Clarify what user wants to do:
- Configure existing React project for Code Components
- Add components to already-configured project
- Build and share existing library
- Configure webflow.json: Add library configuration to webflow.json:
- Library name (appears in Webflow Designer)
- Components glob pattern (e.g.,
./src/**/*.webflow.tsx) - Optional bundleConfig for custom webpack
- Read configuration files: Use Read tool to show:
webflow.json- Library configurationpackage.json- Dependencies and scripts- Component file structure
- Verify dependencies: Ensure React is installed and build scripts exist
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 2d ago First seen · 1,151 lines · 51 tokens per session scan A 768e9b7d0880
webflow-cli:code-component is a skill published in the GitHub repository webflow/webflow-skills (114 stars, last pushed 3d ago), licensed MIT. It adds 51 tokens to every session and 6,758 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
dingtalk_channel_connect
Use a headed browser to automatically complete DingTalk channel integration for QwenPaw. Applicable when the user mentions DingTalk, developer console, Client ID, Client Secret, bot, Stream mode, binding or configuring a channel. Supports pausing when a login page is detected and resuming after the user logs in.
make_plan
For external plan request scenarios, guides the Agent to request a clear, actionable, step-by-step plan from a stronger Agent via listagents and chatwithagent, emphasizing that the plan is executed by the requester, not by the consulted Agent.
当用户需要对PDF文件进行任何操作时，请使用此技能。包括从 PDF 中读取或提取文本/表格、合并多个 PDF、拆分 PDF、旋转页面、添加水印、创建新PDF、填写PDF表单、加密/解密 PDF、提取图片，以及对扫描版 PDF 进行 OCR 使其可搜索。如果用户提到 .pdf 文件或要求生成 PDF，请使用此技能。.
gpt-image-2
面向 GPT Image 2 的图像生成 / 编辑技能。可在 3 种环境下使用：(A) Garden 本地模式，通过 OpenAI 兼容接口直接出图并落盘；(B) Host-Native 模式，把本 Skill 当作提示词工程指引，把渲染好的 prompt 交给宿主 Agent 自带的图像工具出图；(C) Advisor 模式，宿主无任何图像工具时退化为高质量 prompt 顾问。涵盖 18 大类、80+ 个结构化模板，覆盖海报 / UI / 产品 / 信息图 / 学术图 / 技术架构图 / 漫画 / 头像 / 流程板 / 电影分镜 / IP 周边 / 编辑工作流等场景。.
new
Create a new project to start development quickly.
oss-upload
Upload local files to Tencent COS (oss.1024code.com CDN) using coscli. Use when user wants to upload a file to CDN/OSS, or deploy static assets.