Kampsy UI
kampsy/ui
Consumer guide to build UIs with kampsy-ui (Svelte 5 + Tailwind v4, Geist-inspired).
Build, review, and troubleshoot STDF Svelte 5 applications using exact component APIs, themes, icons, localization, and scaffolding.
Install Stdf
$ npx skills add any-tdf/any-tdf --skill stdf -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install any-tdf/any-tdf stdf --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/stdf-skill/stdf .claude/skills/stdf && 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 "stdf" agent skill from https://github.com/any-tdf/any-tdf/tree/main/packages/skills/stdf-skill/stdf into .claude/skills/stdf/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "stdf", 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/stdf-skill/stdfType 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 stdf -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install any-tdf/any-tdf stdf --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/stdf-skill/stdf .agents/skills/stdf && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "stdf" agent skill from https://github.com/any-tdf/any-tdf/tree/main/packages/skills/stdf-skill/stdf into .agents/skills/stdf/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "stdf", 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 stdf -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install any-tdf/any-tdf stdf --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/stdf-skill/stdf .cursor/skills/stdf && 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 "stdf" agent skill from https://github.com/any-tdf/any-tdf/tree/main/packages/skills/stdf-skill/stdf into .cursor/skills/stdf/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "stdf", 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/stdf-skill/stdf--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 stdf -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install any-tdf/any-tdf stdf --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/stdf-skill/stdf .gemini/skills/stdf && 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 "stdf" agent skill from https://github.com/any-tdf/any-tdf/tree/main/packages/skills/stdf-skill/stdf into .gemini/skills/stdf/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "stdf", 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 stdfInstalls 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 stdf -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/stdf-skill/stdf .github/skills/stdf && 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 "stdf" agent skill from https://github.com/any-tdf/any-tdf/tree/main/packages/skills/stdf-skill/stdf into .github/skills/stdf/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "stdf", 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 stdf -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 stdf --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/stdf-skill/stdf .opencode/skills/stdf && 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 "stdf" agent skill from https://github.com/any-tdf/any-tdf/tree/main/packages/skills/stdf-skill/stdf into .opencode/skills/stdf/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "stdf", 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
stdf- GitHub stars
- 779
- Token cost
- ~1.1k tokens
- SKILL.md length
- 505 words
- Files
- 86 (incl. scripts, references)
- Skills in repo
- 5
- Repo updated
- First seen
- Licence
- MIT
At a glance
Build, review, and troubleshoot STDF Svelte 5 applications using exact component APIs, themes, icons, localization, and scaffolding.
- Works in 5 steps: Confirm that the target uses stdf and… → Load only the references required for… → For each indexed component involved,… → …
- The project uses stdf
- SKILL.md covers Workflow, Operating Rules, Reference Routing and Theme Generation
- Calls bun
What it does
Stdf is an agent skill from any-tdf/any-tdf. Build, review, and troubleshoot STDF Svelte 5 applications using exact component APIs, themes, icons, localization, and scaffolding. Use when the project uses stdf or the user requests STDF; exclude generic Svelte 5 work without STDF.
Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 89 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 Svelte 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 stdf
- The user requests STDF
- Exclude generic Svelte 5 work without STDF
Example prompts
- “/stdf”
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- Confirm that the target uses stdf 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, events, snippets…
- Implement with Svelte 5 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
Stdf loads about 1.1k tokens when it runs, and up to ~143k if it reads all its reference files. Until then it costs about 60 tokens; SKILL.md has 505 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). 505 words, ~1,088 tokens.
Download SKILL.mdSave it as
.claude/skills/stdf/SKILL.md (or your agent's skills folder). This skill also uses 85 other files; get the full folder from GitHub.- name
- stdf
- description
- Build, review, and troubleshoot STDF Svelte 5 applications using exact component APIs, themes, icons, localization, and scaffolding. Use when the project uses stdf or the user requests STDF; exclude generic Svelte 5 work without STDF.
STDF
Use this skill to produce working STDF code without guessing its public API. STDF is the Svelte 5 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
stdfand 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, events, snippets, 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 Svelte 5 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 STDF 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. For STDF 2.x migrations, read the upgrade guide; this migration does not apply to RTDF or VTDF. These Skill directories are distributed from GitHub, not npm. Updating the component dependency does not update an installed Skill copy.
Show full SKILL.md (238 more words)Show less
Operating Rules
- Follow the target project's package manager; use
bunfor a new project or this monorepo. - Do not guess STDF component props, events, snippets, actions, exposed methods, or exports.
- Preserve the target project's Svelte 5 conventions and public component behavior.
- 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
stdf/source.css, 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,
@plugin "stdf/theme",@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
ConfigProvider,STDF_lang, and 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 "stdf/theme" for switchable themes. 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 85 other files (scripts, references) in packages/skills/stdf-skill/stdf 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 69 more
Open the folder on GitHubat commit 6ba1fbc
Compare with similar skills
Stdf 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 |
|---|---|---|---|---|---|---|
| Stdf this skillany-tdf/any-tdf | 779 | — | ~1.1k | Automated safety check: Pass | MIT | |
| Kampsy UIkampsy/ui | 288 | — | ~3.6k | 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 | |
| Front-End Checklist CLI Reviewthedaviddias/Front-End-Checklist | 74k | — | ~692 | Automated safety check: Pass | MIT |
Similar skills
Figma Codegen
awdr74100/figwright
Generate framework-aware code from a Figma design. An agent skill from awdr74100/figwright.
- 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.
Front-End Checklist CLI Review
thedaviddias/Front-End-Checklist
Runs the frontendchecklist CLI against local files or a deployed URL to check code against 380+ accessibility, performance, SEO and security rules, with fixable, cited findings.
Kmp Starter Feature Locale
DevAtrii/Kmp-Starter-Template
The KMP Starter Template localization system — StarterLocales, StarterLocale, LocaleProvider, and the locale selector UI in features/locale.
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.
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 Stdf
What does Stdf do?
Build, review, and troubleshoot STDF Svelte 5 applications using exact component APIs, themes, icons, localization, and scaffolding. Stdf is an agent skill from any-tdf/any-tdf. Build, review, and troubleshoot STDF Svelte 5 applications using exact component APIs, themes, icons, localization, and scaffolding.
When should I use Stdf?
Stdf fits situations like: the project uses stdf; the user requests STDF; exclude generic Svelte 5 work without STDF.
How do I install Stdf in Claude Code?
Run `npx skills add any-tdf/any-tdf --skill stdf -a claude-code`. Or copy the skill folder (packages/skills/stdf-skill/stdf in any-tdf/any-tdf) into .claude/skills/stdf in your project. Claude Code loads it when a task matches its description.
How do I install Stdf in Codex?
Run `npx skills add any-tdf/any-tdf --skill stdf -a codex`. Or copy the skill folder (packages/skills/stdf-skill/stdf in any-tdf/any-tdf) into .agents/skills/stdf in your project. Codex loads it when a task matches its description.
Can I use Stdf 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 stdf -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/stdf, .gemini/skills/stdf, .github/skills/stdf and .opencode/skills/stdf in your project.
What does Stdf need to run?
Going by SKILL.md and its folder, Stdf needs the command-line tools its instructions call (bun).
Does Stdf 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 Stdf 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 Stdf use?
Stdf 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 Stdf 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 142k tokens, read only when the agent opens those files.
What are the alternatives to Stdf?
Skills that share tags, products or a category with Stdf: Kampsy UI (kampsy/ui, 288 stars), Figma Codegen (awdr74100/figwright, 982 stars), Declarative Agent Developer (microsoft/work-iq, 1k stars) and Admin Template Project Initializer (southliu/south-admin-react, 580 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Stdf?
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.