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
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/bytedance/agentkit-samples/byted-util-vite-react-tailwindnpx skills add bytedance/agentkit-samples --skill byted-util-vite-react-tailwindgit clone --depth 1 https://github.com/bytedance/agentkit-samplesWrote 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.svg" alt="Measured on agentmods" height="20"></a>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 | $0.00032 | $0.01833 |
| Sonnet 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 2d 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.
- 2d 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 (446 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. 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
Generates high-converting landing pages as complete Next.js/React (TSX) components with Tailwind CSS. Creates hero sections, feature grids, pricing tables, FAQ accordions, testimonial blocks, and CTA sections using proven copy frameworks (PAS, AIDA, BAB). Outputs SEO meta tags, structured data, and…
figma
Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI).…
frontend-design
Guidance for distinctive, intentional visual design when building or reshaping UI, HTML/React artifacts, dashboards, charts, and visual reports. Use before implementation to choose a content-specific structure, typography, and visual system that does not read as a templated default.