Figma Codegen
awdr74100/figwright
Generate framework-aware code from a Figma design. An agent skill from awdr74100/figwright.
Build, review, and troubleshoot VTDF Vue 3 applications using exact component APIs, themes, icons, localization, and scaffolding.
Install Vtdf
$ npx skills add any-tdf/any-tdf --skill vtdf -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install any-tdf/any-tdf vtdf --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/any-tdf/any-tdf.git skills-src && mkdir -p .claude/skills && cp -r skills-src/packages/skills/vtdf-skill/vtdf .claude/skills/vtdf && rm -rf skills-srcUse ~/.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/
Install the "vtdf" agent skill from https://github.com/any-tdf/any-tdf/tree/main/packages/skills/vtdf-skill/vtdf into .claude/skills/vtdf/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vtdf", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/any-tdf/any-tdf/tree/main/packages/skills/vtdf-skill/vtdfType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add any-tdf/any-tdf --skill vtdf -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install any-tdf/any-tdf vtdf --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/any-tdf/any-tdf.git skills-src && mkdir -p .agents/skills && cp -r skills-src/packages/skills/vtdf-skill/vtdf .agents/skills/vtdf && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "vtdf" agent skill from https://github.com/any-tdf/any-tdf/tree/main/packages/skills/vtdf-skill/vtdf into .agents/skills/vtdf/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vtdf", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add any-tdf/any-tdf --skill vtdf -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install any-tdf/any-tdf vtdf --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/any-tdf/any-tdf.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/packages/skills/vtdf-skill/vtdf .cursor/skills/vtdf && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "vtdf" agent skill from https://github.com/any-tdf/any-tdf/tree/main/packages/skills/vtdf-skill/vtdf into .cursor/skills/vtdf/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vtdf", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/any-tdf/any-tdf.git --path packages/skills/vtdf-skill/vtdf--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add any-tdf/any-tdf --skill vtdf -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install any-tdf/any-tdf vtdf --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/any-tdf/any-tdf.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/packages/skills/vtdf-skill/vtdf .gemini/skills/vtdf && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "vtdf" agent skill from https://github.com/any-tdf/any-tdf/tree/main/packages/skills/vtdf-skill/vtdf into .gemini/skills/vtdf/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vtdf", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install any-tdf/any-tdf vtdfInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add any-tdf/any-tdf --skill vtdf -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/any-tdf/any-tdf.git skills-src && mkdir -p .github/skills && cp -r skills-src/packages/skills/vtdf-skill/vtdf .github/skills/vtdf && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "vtdf" agent skill from https://github.com/any-tdf/any-tdf/tree/main/packages/skills/vtdf-skill/vtdf into .github/skills/vtdf/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vtdf", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add any-tdf/any-tdf --skill vtdf -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install any-tdf/any-tdf vtdf --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/any-tdf/any-tdf.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/packages/skills/vtdf-skill/vtdf .opencode/skills/vtdf && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "vtdf" agent skill from https://github.com/any-tdf/any-tdf/tree/main/packages/skills/vtdf-skill/vtdf into .opencode/skills/vtdf/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vtdf", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
vtdf- GitHub stars
- 779
- Token cost
- ~1.1k tokens
- SKILL.md length
- 517 words
- Files
- 85 (incl. scripts, references)
- Skills in repo
- 5
- Repo updated
- First seen
- Licence
- MIT
At a glance
Build, review, and troubleshoot VTDF Vue 3 applications using exact component APIs, themes, icons, localization, and scaffolding.
- Works in 5 steps: Confirm that the target uses vtdf and… → Load only the references required for… → For each indexed component involved,… → …
- The project uses vtdf
- SKILL.md covers Workflow, Operating Rules, Reference Routing and Theme Generation
- Calls bun
What it does
Vtdf is an agent skill from any-tdf/any-tdf. Build, review, and troubleshoot VTDF Vue 3 applications using exact component APIs, themes, icons, localization, and scaffolding. Use when the project uses vtdf or the user requests VTDF; exclude generic Vue 3 work without VTDF.
Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 88 other files, including scripts and reference files (for example `agents/openai.yaml`, `data/themes.json` and `references/color.md`).
It sits in Frontend & Design, covering Internationalization and Project scaffolding. It works with Vue.js and Tailwind CSS. The repository describes itself as: Mobile web component library based on Svelte/React/Vue and Tailwind. The licence is MIT.
When your agent uses it
- The project uses vtdf
- The user requests VTDF
- Exclude generic Vue 3 work without VTDF
Example prompts
- “/vtdf”
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- Confirm that the target uses vtdf and inspect its installed version and existing project conventions.
- Load only the references required for the task.
- For each indexed component involved, open the component index and the matching detail file before writing props, emits, slots, exposed…
- Implement with Vue 3 patterns already used by the target project.
- Run the narrowest relevant project check or test, then report any version or documentation mismatch.
What it can do on your machine
Read from SKILL.md and the folder at commit 6ba1fbc. 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
Ships 1 file in scripts/, which the agent can run.
Shell commands in SKILL.md call:
bun
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
Vtdf loads about 1.1k tokens when it runs, and up to ~138k if it reads all its reference files. Until then it costs about 58 tokens; SKILL.md has 517 words of instructions outside code blocks.
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); the scripts in this folder are not scanned.
SKILL.md
The full file from any-tdf/any-tdf at commit 6ba1fbc, republished under its MIT licence (© any-tdf). 517 words, ~1,100 tokens.
Download SKILL.mdSave it as
.claude/skills/vtdf/SKILL.md (or your agent's skills folder). This skill also uses 84 other files; get the full folder from GitHub.- name
- vtdf
- description
- Build, review, and troubleshoot VTDF Vue 3 applications using exact component APIs, themes, icons, localization, and scaffolding. Use when the project uses vtdf or the user requests VTDF; exclude generic Vue 3 work without VTDF.
VTDF
Use this skill to produce working VTDF code without guessing its public API. VTDF is the Vue 3 implementation of the Any TDF mobile web component system and uses Tailwind CSS 4, OKLCH theme variables, data-mode, and data-theme.
Workflow
- Confirm that the target uses
vtdfand inspect its installed version and existing project conventions. - Load only the references required for the task.
- For each indexed component involved, open the component index and the matching detail file before writing props, emits, slots, exposed methods, composables, or imports.
For
ConfigProvider, read the internationalization reference and its generated guide; it is not listed in the component index. For other unindexed exports, inspect the installed package declarations before use. - Implement with Vue 3 patterns already used by the target project.
- Run the narrowest relevant project check or test, then report any version or documentation mismatch.
The bundled component references represent the repository snapshot that produced this skill. If a project pins an older VTDF release, read the component detail's version section and preserve the installed release contract. When working inside the Any TDF monorepo, generated documentation and package source take precedence if they reveal a newer change; update the owning documentation source and regenerate the skill instead of hand-editing generated component files.
For the current documentation version, compatibility, functional feedback, utility exports, and Vite Markdown integration, use the guide index. These Skill directories are distributed from GitHub, not npm. Updating the component dependency does not update an installed Skill copy.
Operating Rules
- Follow the target project's package manager; use
bunfor a new project or this monorepo. - Do not guess VTDF component props, emits, slots, exposed methods, composables, or exports.
- Preserve the target project's Vue 3 conventions and public component behavior.
- Prefer arrow functions unless the target project has a stronger local convention.
- For Tailwind CSS 4, avoid arbitrary size and color classes. Put reusable values in CSS variables or shared project CSS.
- Keep theme and color decisions in public CSS rather than component-local class workarounds.
Show full SKILL.md (179 more words)Show less
Reference Routing
- For installation, entry CSS, dependencies, and Tailwind source registration, read project setup.
- For component selection or exact APIs, read the component index, then open
references/components/<nav>.mdfor every selected component. - For dark mode, multi-theme mode, the Tailwind theme plugin,
@theme, and runtime switching, read theme and mode. - For color semantics and generated palettes, read the color system.
- For the
Iconcomponent, SVG symbols, and Iconify, read icons. - For
ConfigProviderand locale presets, read internationalization. - For
create-any-tdftemplates and CLI options, read scaffolding. - For installing or refreshing this Skill, read Skill updates. Do not check the network or update installed Skills during ordinary component work.
- For an exact built-in theme record, inspect
data/themes.jsononly after reading the theme reference.
Theme Generation
Resolve scripts/generate-theme.mjs relative to this SKILL.md file and run it from the skill root. Do not assume that the user's application contains the script.
bun scripts/generate-theme.mjs --preset ANYTDF --format both
bun scripts/generate-theme.mjs --random --seed 1 --name MyTheme --format plugin
bun scripts/generate-theme.mjs --primary "oklch(0.52 0.24 35)" --dark "oklch(0.72 0.18 250)" --format bothPrefer @plugin "vtdf/theme" for new switchable-theme configuration while preserving the supported path already used by an existing project. Use @theme for single-theme variables and for the default variables Tailwind CSS needs to generate utilities.
© any-tdf, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 84 other files (scripts, references) in packages/skills/vtdf-skill/vtdf of any-tdf/any-tdf.
- SKILL.md
- agents/openai.yaml
- data/themes.json
- references/color.md
- references/components.md
- references/components/accordion.md
- references/components/actionPopover.md
- references/components/actionSheet.md
- references/components/alert.md
- references/components/asyncPicker.md
- references/components/avatar.md
- references/components/avatarGroup.md
- references/components/badge.md
- references/components/bottomSheet.md
- references/components/button.md
- references/components/buttonGroup.md
- references/components/calendar.md
- … and 68 more
Open the folder on GitHubat commit 6ba1fbc
Compare with similar skills
Vtdf 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Vtdf this skillany-tdf/any-tdf | 779 | — | ~1.1k | Automated safety check: Pass | MIT | |
| Figma Codegenawdr74100/figwright | 982 | — | ~4.2k | Automated safety check: Pass | MIT | |
| Declarative Agent Developermicrosoft/work-iq | 1k | — | ~3.2k | Automated safety check: Pass | Custom licence | |
| Admin Template Project Initializersouthliu/south-admin-react | 580 | — | ~519 | Automated safety check: Pass | MIT | |
| Add Componentindielayer/ui | 222 | — | ~293 | Automated safety check: Pass | MIT | |
| Frontend Code ReviewProgrammerAnthony/Expert-Coding-Harness | 235 | — | ~614 | Automated safety check: Pass | MIT |
Similar skills
- Official
Declarative Agent Developer
microsoft/work-iq
Create, build, deploy, and localize declarative agents for M365 Copilot and Teams.
Admin Template Project Initializer
southliu/south-admin-react
Removes the south-admin-react template's demo pages, components and menu entries, after a dry-run preview and your confirmation, and cleans up the matching imports.
Add Component
indielayer/ui
Add a new Vue component to @indielayer/ui with themes, tests, docs, and registry exports.
Frontend Code Review
ProgrammerAnthony/Expert-Coding-Harness
A skill your agent uses when 用户需要审查前端代码（React/Vue/Next.js/TypeScript/Tailwind等）、检查代码质量、性能问题、可维护性、安全漏洞、最佳实践落地时。触发场景：前端代码评审、前端代码优化、React/Vue代码检查、TypeScript代码审查、前端性能优化、前端安全审计、前端代码规范检查。
Vue Components
scalar/scalar
Build Vue 3 components with TypeScript and Tailwind using clean structure, composable logic, accessibility, and maintainable patterns.
More from any-tdf/any-tdf
Rtdf
any-tdf/any-tdf
Build, review, and troubleshoot RTDF React applications using exact component APIs, themes, icons, localization, and scaffolding.
Stdf
any-tdf/any-tdf
Build, review, and troubleshoot STDF Svelte 5 applications using exact component APIs, themes, icons, localization, and scaffolding.
Any Tdf Development
any-tdf/any-tdf
Guide implementation, fixes, reviews, documentation, generation, and validation in the Any TDF monorepo across the shared core, STDF/Svelte, RTDF/React, VTDF/Vue, demos, sites, tooling, AI skill…
Auto Commit
any-tdf/any-tdf
Inspect, plan, split, stage, commit, and optionally push local changes in the Any TDF repository using concise English Conventional Commit messages.
Related
Works with
Categories
Questions about Vtdf
What does Vtdf do?
Build, review, and troubleshoot VTDF Vue 3 applications using exact component APIs, themes, icons, localization, and scaffolding. Vtdf is an agent skill from any-tdf/any-tdf. Build, review, and troubleshoot VTDF Vue 3 applications using exact component APIs, themes, icons, localization, and scaffolding.
When should I use Vtdf?
Vtdf fits situations like: the project uses vtdf; the user requests VTDF; exclude generic Vue 3 work without VTDF.
How do I install Vtdf in Claude Code?
Run `npx skills add any-tdf/any-tdf --skill vtdf -a claude-code`. Or copy the skill folder (packages/skills/vtdf-skill/vtdf in any-tdf/any-tdf) into .claude/skills/vtdf in your project. Claude Code loads it when a task matches its description.
How do I install Vtdf in Codex?
Run `npx skills add any-tdf/any-tdf --skill vtdf -a codex`. Or copy the skill folder (packages/skills/vtdf-skill/vtdf in any-tdf/any-tdf) into .agents/skills/vtdf in your project. Codex loads it when a task matches its description.
Can I use Vtdf 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 any-tdf/any-tdf --skill vtdf -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/vtdf, .gemini/skills/vtdf, .github/skills/vtdf and .opencode/skills/vtdf in your project.
What does Vtdf need to run?
Going by SKILL.md and its folder, Vtdf needs the command-line tools its instructions call (bun).
Does Vtdf 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 Vtdf 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Vtdf use?
Vtdf 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 Vtdf use?
About 1.1k tokens (SKILL.md is roughly 4.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 137k tokens, read only when the agent opens those files.
What are the alternatives to Vtdf?
Skills that share tags, products or a category with Vtdf: Figma Codegen (awdr74100/figwright, 982 stars), Declarative Agent Developer (microsoft/work-iq, 1k stars), Admin Template Project Initializer (southliu/south-admin-react, 580 stars) and Add Component (indielayer/ui, 222 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Vtdf?
any-tdf (a GitHub organization) maintains it in any-tdf/any-tdf, which has 779 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on October 8, 2026.
Source: any-tdf/any-tdf on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.