bytedance/agentkit-samples is a collection of examples and tutorials for Volcengine AgentKit, an AI-agent development platform for building, deploying, and operating agent applications. Developers use the samples to learn agent creation, multi-agent collaboration, memory, retrieval, MCP integrations, media generation, customer service, and other workflows. The catalogue skills provide agent workflows based on these examples.
Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/bytedance/agentkit-samplesnpx agentmods add skills/bytedance/agentkit-samples/byted-util-vite-react-tailwindWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/bytedance/agentkit-samples/byted-util-vite-react-tailwind)<a href="https://agentmods.dev/skills/bytedance/agentkit-samples/byted-util-vite-react-tailwind"><img src="https://agentmods.dev/badge/skills/bytedance/agentkit-samples/byted-util-vite-react-tailwind/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/bytedance/agentkit-samples/byted-util-vite-react-tailwind"><img src="https://agentmods.dev/badge/skills/bytedance/agentkit-samples/byted-util-vite-react-tailwind.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector warn
SkillSpector: 2 findings, up to medium
These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →
- medium MCP Rug Pull · line 48 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
- medium MCP Rug Pull · line 382 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
What 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.1 | $0.00064 | $0.03665 |
| Opus 5.5 | $0.00026 | $0.01466 |
| Sonnet 5.5 | $0.00013 | $0.00733 |
| Haiku 4.5 | $0.00006 | $0.00366 |
Grade A, and why
byted-util-vite-react-tailwind 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 1mo 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 — 392 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Vite + React + TailwindCSS v4 开发技能
基于 Vite + React + TailwindCSS v4 + lucide-react 技术栈的前端项目搭建和开发指南。
技术栈
| 技术 | 版本 | 用途 |
|---|---|---|
| Vite | ^5.x 或 ^6.x | 构建工具、开发服务器 |
| React | ^18.x 或 ^19.x | UI 框架 |
| TailwindCSS | ^4.x | 原子化 CSS 框架（Vite 插件模式） |
| @tailwindcss/vite | ^4.x | TailwindCSS Vite 插件 |
| lucide-react | latest | 图标库 |
| TypeScript | ^5.x 或 ^6.x | 类型安全 |
项目初始化
Step 1: 创建 Vite + React 项目
# 创建项目（使用 React + TypeScript 模板）
npm create vite@latest . -- --template react-ts
# 安装依赖
npm install
Step 2: 安装 TailwindCSS v4
# 安装 TailwindCSS v4 及 Vite 插件
npm install tailwindcss @tailwindcss/vite
注意： v4 不再需要
postcss、autoprefixer，也不需要运行npx tailwindcss init。
Step 3: 配置 Vite 插件
在 vite.config.ts 中添加 @tailwindcss/vite 插件：
vite.config.ts:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
react(),
tailwindcss(),
],
})
Step 4: 清空默认样式并配置 CSS（⚠️ 强制关键步骤）
必须将 src/index.css 和 src/App.css 的全部内容清空，然后在 src/index.css 中只写 TailwindCSS 引入（和可选的 @theme）：
src/index.css:
@import "tailwindcss";
src/App.css:
/* 清空此文件所有内容，或直接删除此文件 */
🚨 严格禁止： 不要在
index.css中写任何*、body、html等全局选择器样式！包括但不限于：/* ❌ 以下全部禁止 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: ...; -webkit-font-smoothing: antialiased; } html { scroll-behavior: smooth; }这些全局 reset 样式会覆盖 TailwindCSS 的 preflight（内置 reset），导致间距、字体、布局等样式全部异常。TailwindCSS v4 已经内置了完善的 CSS Reset，不需要也不允许额外添加全局 reset。
正确的
index.css只包含：@import "tailwindcss"+ 可选的@theme自定义主题变量。除此之外不写任何 CSS 规则。
v4 使用
@import "tailwindcss"替代 v3 的@tailwind base; @tailwind components; @tailwind utilities;。不再需要tailwind.config.js配置文件。
Step 5: 安装 lucide-react 图标库
npm install lucide-react
Step 6: 安装工具库（如需 cn 工具函数）
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 1mo ago First seen · 392 lines · 64 tokens per session scan A 3c127d805d04
byted-util-vite-react-tailwind is a skill published in the GitHub repository bytedance/agentkit-samples (474 stars, last pushed yesterday), licensed Apache-2.0. It adds 64 tokens to every session and 3,665 once invoked, about $0.0003 per session on Opus 5.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-09-03.
Other skills, from other repositories
web-design-engineer
Build or redesign polished browser-rendered visual artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations. Use for visual front-end creation, design-system exploration, design critique, or explicit browser acceptance / QA of a web artifact.…
agentos-ui-ux
Design, review, or implement AgentOS UI and UX work using the project’s operator-console visual system. Use for React/Tailwind pages, cards, dialogs, mobile layouts, theme work, navigation, forms, empty/loading/error states, and UI consistency reviews in AgentOS.
landing-page-generator
Build React/Next.js landing pages with Tailwind, focused copy, accessible sections, calls to action, metadata, and performance validation.
figma
Fetch Figma design context, variables, screenshots, and assets through MCP when working from Figma URLs or node IDs, or diagnosing its integration.
frontend-design
Design and implement polished web components, pages, and applications with a coherent visual direction and usable interaction states.
motion-dev
Use when React animation library — spring physics, gesture animations, layout animations, scroll effects, SVG path drawing. Successor to Framer Motion. Use when building UI animations, micro-interactions, page transitions, shared element transitions, parallax effects.