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.
Build, review, and troubleshoot RTDF React applications using exact component APIs, themes, icons, localization, and scaffolding.
Install Rtdf
$ npx skills add any-tdf/any-tdf --skill rtdf -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install any-tdf/any-tdf rtdf --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/rtdf-skill/rtdf .claude/skills/rtdf && 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 "rtdf" agent skill from https://github.com/any-tdf/any-tdf/tree/main/packages/skills/rtdf-skill/rtdf into .claude/skills/rtdf/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "rtdf", 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/rtdf-skill/rtdfType 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 rtdf -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install any-tdf/any-tdf rtdf --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/rtdf-skill/rtdf .agents/skills/rtdf && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "rtdf" agent skill from https://github.com/any-tdf/any-tdf/tree/main/packages/skills/rtdf-skill/rtdf into .agents/skills/rtdf/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "rtdf", 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 rtdf -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install any-tdf/any-tdf rtdf --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/rtdf-skill/rtdf .cursor/skills/rtdf && 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 "rtdf" agent skill from https://github.com/any-tdf/any-tdf/tree/main/packages/skills/rtdf-skill/rtdf into .cursor/skills/rtdf/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "rtdf", 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/rtdf-skill/rtdf--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 rtdf -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install any-tdf/any-tdf rtdf --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/rtdf-skill/rtdf .gemini/skills/rtdf && 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 "rtdf" agent skill from https://github.com/any-tdf/any-tdf/tree/main/packages/skills/rtdf-skill/rtdf into .gemini/skills/rtdf/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "rtdf", 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 rtdfInstalls 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 rtdf -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/rtdf-skill/rtdf .github/skills/rtdf && 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 "rtdf" agent skill from https://github.com/any-tdf/any-tdf/tree/main/packages/skills/rtdf-skill/rtdf into .github/skills/rtdf/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "rtdf", 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 rtdf -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 rtdf --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/rtdf-skill/rtdf .opencode/skills/rtdf && 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 "rtdf" agent skill from https://github.com/any-tdf/any-tdf/tree/main/packages/skills/rtdf-skill/rtdf into .opencode/skills/rtdf/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "rtdf", 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
rtdf- GitHub stars
- 779
- Token cost
- ~1.1k tokens
- SKILL.md length
- 516 words
- Files
- 85 (incl. scripts, references)
- Skills in repo
- 5
- Repo updated
- First seen
- Licence
- MIT
At a glance
Build, review, and troubleshoot RTDF React applications using exact component APIs, themes, icons, localization, and scaffolding.
- Works in 5 steps: Confirm that the target uses rtdf and… → Load only the references required for… → For each indexed component involved,… → …
- The project uses rtdf
- SKILL.md covers Workflow, Operating Rules, Reference Routing and Theme Generation
- Calls bun
What it does
Rtdf is an agent skill from any-tdf/any-tdf. Build, review, and troubleshoot RTDF React applications using exact component APIs, themes, icons, localization, and scaffolding. Use when the project uses rtdf or the user requests RTDF; exclude generic React work without RTDF.
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 React 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 rtdf
- The user requests RTDF
- Exclude generic React work without RTDF
Example prompts
- “/rtdf”
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- Confirm that the target uses rtdf 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, callbacks, children…
- Implement with React 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
Rtdf loads about 1.1k tokens when it runs, and up to ~147k if it reads all its reference files. Until then it costs about 58 tokens; SKILL.md has 516 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). 516 words, ~1,106 tokens.
Download SKILL.mdSave it as
.claude/skills/rtdf/SKILL.md (or your agent's skills folder). This skill also uses 84 other files; get the full folder from GitHub.- name
- rtdf
- description
- Build, review, and troubleshoot RTDF React applications using exact component APIs, themes, icons, localization, and scaffolding. Use when the project uses rtdf or the user requests RTDF; exclude generic React work without RTDF.
RTDF
Use this skill to produce working RTDF code without guessing its public API. RTDF is the React 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
rtdfand 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, callbacks, children, render functions, methods, 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 React 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 RTDF 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 RTDF component props, callbacks, children behavior, render functions, exposed methods, or exports.
- Preserve the target project's React 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 "rtdf/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/rtdf-skill/rtdf 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
Rtdf 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 |
|---|---|---|---|---|---|---|
| Rtdf this skillany-tdf/any-tdf | 779 | — | ~1.1k | Automated safety check: Pass | MIT | |
| Admin Template Project Initializersouthliu/south-admin-react | 580 | — | ~519 | Automated safety check: Pass | MIT | |
| Senior FrontendOhh-889/skyroc | 795 | 2 repos | ~1.1k | Automated safety check: Notes | MIT | |
| Nextjs Nextra Starter Distillpdsuwwz/nextjs-nextra-starter | 318 | — | ~596 | Automated safety check: Pass | MIT | |
| Figma Codegenawdr74100/figwright | 982 | — | ~4.2k | Automated safety check: Pass | MIT | |
| Nextjs Nextra Starter Distill Zhpdsuwwz/nextjs-nextra-starter | 318 | — | ~313 | Automated safety check: Pass | MIT |
Similar skills
Senior Frontend
Ohh-889/skyroc
Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS.
Nextjs Nextra Starter Distill
pdsuwwz/nextjs-nextra-starter
Distill and apply this repository's Next.js Nextra starter architecture, implemented features, extension points, and migration patterns.
Figma Codegen
awdr74100/figwright
Generate framework-aware code from a Figma design. An agent skill from awdr74100/figwright.
Nextjs Nextra Starter Distill Zh
pdsuwwz/nextjs-nextra-starter
蒸馏并应用当前仓库的 Next.js Nextra 启动模板架构、已实现功能、二次开发扩展点与迁移模式。适用于理解本项目、继续二次开发、修改 docs/landing/i18n/theme/auth/UI 行为，或把这些 Next.js 16 + Nextra 4 + Tailwind CSS 4 模式复用到其他项目。
Senior Frontend
alirezarezvani/claude-skills
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications.
More from any-tdf/any-tdf
Stdf
any-tdf/any-tdf
Build, review, and troubleshoot STDF Svelte 5 applications using exact component APIs, themes, icons, localization, and scaffolding.
Vtdf
any-tdf/any-tdf
Build, review, and troubleshoot VTDF Vue 3 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 Rtdf
What does Rtdf do?
Build, review, and troubleshoot RTDF React applications using exact component APIs, themes, icons, localization, and scaffolding. Rtdf is an agent skill from any-tdf/any-tdf. Build, review, and troubleshoot RTDF React applications using exact component APIs, themes, icons, localization, and scaffolding.
When should I use Rtdf?
Rtdf fits situations like: the project uses rtdf; the user requests RTDF; exclude generic React work without RTDF.
How do I install Rtdf in Claude Code?
Run `npx skills add any-tdf/any-tdf --skill rtdf -a claude-code`. Or copy the skill folder (packages/skills/rtdf-skill/rtdf in any-tdf/any-tdf) into .claude/skills/rtdf in your project. Claude Code loads it when a task matches its description.
How do I install Rtdf in Codex?
Run `npx skills add any-tdf/any-tdf --skill rtdf -a codex`. Or copy the skill folder (packages/skills/rtdf-skill/rtdf in any-tdf/any-tdf) into .agents/skills/rtdf in your project. Codex loads it when a task matches its description.
Can I use Rtdf 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 rtdf -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/rtdf, .gemini/skills/rtdf, .github/skills/rtdf and .opencode/skills/rtdf in your project.
What does Rtdf need to run?
Going by SKILL.md and its folder, Rtdf needs the command-line tools its instructions call (bun).
Does Rtdf 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 Rtdf 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 Rtdf use?
Rtdf 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 Rtdf 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 146k tokens, read only when the agent opens those files.
What are the alternatives to Rtdf?
Skills that share tags, products or a category with Rtdf: Admin Template Project Initializer (southliu/south-admin-react, 580 stars), Senior Frontend (Ohh-889/skyroc, 795 stars), Nextjs Nextra Starter Distill (pdsuwwz/nextjs-nextra-starter, 318 stars) and Figma Codegen (awdr74100/figwright, 982 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Rtdf?
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.