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
rtdf and inspect its installed version and existing project conventions.
- Load only the references required for the task.
- For every component involved, open the component index and the matching detail file before writing props, callbacks, children, render functions, methods, or imports.
- 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.
Operating Rules
- Prefer
bun for package management and commands.
- 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.
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>.md for 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
Icon component, SVG symbols, and Iconify, read icons.
- For
ConfigProvider and locale presets, read internationalization.
- For
create-any-tdf templates and CLI options, read scaffolding.
- For an exact built-in theme record, inspect
data/themes.json only 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 both
Prefer @plugin "rtdf/theme/plugin" 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.
1---2name: rtdf3description: Build, modify, review, and troubleshoot RTDF projects with exact offline component documentation. Use for RTDF or rtdf.dev, React mobile UI, Tailwind CSS 4 setup, component APIs, themes and dark mode, icons, i18n, or create-any-tdf scaffolding. Do not use for generic React work that has no RTDF dependency.4---56# RTDF78Use 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`.910## Workflow11121. Confirm that the target uses `rtdf` and inspect its installed version and existing project conventions.132. Load only the references required for the task.143. For every component involved, open the component index and the matching detail file before writing props, callbacks, children, render functions, methods, or imports.154. Implement with React patterns already used by the target project.165. Run the narrowest relevant project check or test, then report any version or documentation mismatch.1718The 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.1920## Operating Rules2122- Prefer `bun` for package management and commands.23- Do not guess RTDF component props, callbacks, children behavior, render functions, exposed methods, or exports.24- Preserve the target project's React conventions and public component behavior.25- Prefer arrow functions unless the target project has a stronger local convention.26- For Tailwind CSS 4, avoid arbitrary size and color classes. Put reusable values in CSS variables or shared project CSS.27- Keep theme and color decisions in public CSS rather than component-local class workarounds.2829## Reference Routing3031- For installation, entry CSS, dependencies, and Tailwind source registration, read [project setup](references/project.md).32- For component selection or exact APIs, read [the component index](references/components.md), then open `references/components/<nav>.md` for every selected component.33- For dark mode, multi-theme mode, the Tailwind theme plugin, `@theme`, and runtime switching, read [theme and mode](references/theme.md).34- For color semantics and generated palettes, read [the color system](references/color.md).35- For the `Icon` component, SVG symbols, and Iconify, read [icons](references/icons.md).36- For `ConfigProvider` and locale presets, read [internationalization](references/i18n.md).37- For `create-any-tdf` templates and CLI options, read [scaffolding](references/scaffold.md).38- For an exact built-in theme record, inspect `data/themes.json` only after reading the theme reference.3940## Theme Generation4142Resolve `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.4344```sh45bun scripts/generate-theme.mjs --preset ANYTDF --format both46bun scripts/generate-theme.mjs --random --seed 1 --name MyTheme --format plugin47bun scripts/generate-theme.mjs --primary "oklch(0.52 0.24 35)" --dark "oklch(0.72 0.18 250)" --format both48```4950Prefer `@plugin "rtdf/theme/plugin"` 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