weapp-tailwindcss-custom-build

weapp-tailwindcss-custom-build is a skill for Claude Code, Codex from sonofmagic/weapp-tailwindcss. It costs 123 tokens per session (815 once invoked), scanned A, original, MIT.

A programming integration for adding Tailwind CSS support to a custom build tool or advanced build pipeline for WeChat Mini Programs. It connects CSS conversion with tools such as Vite, Webpack, Rspack, Rollup, Rolldown, and Gulp, including file watching and hot updates.

In plain words
What is it for?
Use it when building a custom bundler adapter, loader, or plugin; managing a module graph; supporting watch mode or hot module replacement; generating source maps; or keeping styles separate for Mini Program subpackages.
Why use it?
It keeps source files, generated CSS, JavaScript, assets, and source maps connected inside the build process. This avoids relying on broad scans of the output folder and helps rebuild only the parts affected by a change.

Skill for Claude CodeCodex

Install

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.

agentmods
npx agentmods add skills/sonofmagic/weapp-tailwindcss/weapp-tailwindcss-custom-build
Any agent
npx skills add sonofmagic/weapp-tailwindcss --skill weapp-tailwindcss-custom-build
Clone the repo
git clone --depth 1 https://github.com/sonofmagic/weapp-tailwindcss

Made for: Claude Code, Codex.

Per session 123 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 815 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5 $0.00123 $0.00815
Opus 5 $0.00062 $0.00407
Sonnet 5 $0.00025 $0.00163
Haiku 4.5 $0.00012 $0.00081

Measured 3d ago against content hash 13ad32443c7b, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

weapp-tailwindcss-custom-build 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 3d 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.

Origin

Copies of this mod

1 near-identical copy found in the catalogue:

skills/weapp-tailwindcss-custom-build/SKILL.md · 37 lines

What it actually says

weapp-tailwindcss custom build

围绕构建图和内存产物接入核心转换,避免用输出目录扫描补偿生命周期设计缺失。

工作流

  1. 先判断官方 Vite/Webpack/Rspack/Gulp 入口是否已满足需求;普通项目转到 $weapp-tailwindcss-setup
  2. 确认调用方拥有的生命周期、模块图、CSS 生成结果、asset API、watch 事件和 source map 能力。
  3. 读取 references/core-api.md 设计 createCompiler() 的 root、snapshot、失效和转换时序;仅在兼容旧自动 runtime 流程时使用 createContext()
  4. 涉及全局/分包样式注入时再读取 references/style-injection.md
  5. loadtransform、loader result、compilation、bundle asset 或 stream/Vinyl 对象中维护源码和产物关系。
  6. watch 中把精确 dependency/module ID 交给 invalidate(),只重新生成返回的 root,再用新 snapshot 转换实际可达的模板和 JavaScript。
  7. 让初始扫描、transform 与 HMR 共用 Scanner 的文件范围和显式外部 source,不另建宽泛 glob。
  8. 通过 bundler API 写回产物和 source map,不直接修改输出目录。

官方 Vite、Webpack、Rspack 与 Gulp 适配器的 graph 路径已经共享 compiler session:每个插件 owner 只创建一个 compiler,按 scope 投影可达 root 的 snapshot。第三方框架可以复用同样的时序,但必须继续拥有自己的模块图、watch 调度和 asset/Vinyl 写回;不要把 bundler 对象传入 core,也不要把 module ID 当作文件系统路径。

不可破坏的边界

  • createCompiler() 管理 Tailwind root 会话、revision 和不可变 snapshot;它不接管模块图可达性、watch 调度或产物写回。
  • 同一构建周期复用 compiler,并让 CSS、模板和 JS 显式消费同一 snapshot。
  • createContext() 继续兼容自动 runtime 收集模式,不要把两种状态模型混在同一事务中。
  • transformWxss()transformWxml()transformJs() 返回类型不同,必须分别处理错误和 map。
  • snapshot classSet 来自 Tailwind 生成/验证结果,不把扫描到的所有字符串直接塞入集合。
  • module ID 是 opaque 值;invalidate() 不会替调用方规范化 POSIX、Windows、virtual ID 或 query。
  • 入口发现若确需文件系统扫描,集中在明确扫描层并测试;不要在 generateBundle 等后置阶段临时读源码。
  • Rspack rule condition 解析必须覆盖函数与组合条件,补丁保持幂等并仅作用于目标 CSS rule。

输出要求

输出生命周期图、数据所有权、API 调用时序、错误/缓存策略、产物写回方式和 watch 回归场景。

Files

What ships with it

3 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.

Changes

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.

  1. 3d ago First seen · 37 lines · 123 tokens per session scan A 13ad32443c7b

Subscribe to this mod's changes

weapp-tailwindcss-custom-build is a skill published in the GitHub repository sonofmagic/weapp-tailwindcss (1,855 stars, last pushed 2d ago), licensed MIT. It adds 123 tokens to every session and 815 once invoked, about $0.0006 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-08-30.

Related

Other skills, from other repositories

nuxt-ui

Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.

nuxt/ui · 56 tokens

uniwind

Uniwind — Tailwind CSS v4 styling for React Native. Use when adding, building, or debugging components in a React Native project that uses Uniwind classNames. Covers setup, Metro config, global.css, theming, className props, accent- color props, platform/data/state/responsive variants, CSS variables, custom utilities…

uni-stack/uniwind · 130 tokens

coss-particles

Index of all COSS UI particle examples. Use when implementing UI features to find copy-paste-ready component patterns built on coss primitives. Each particle has a description and a JSON URL for easy installation.

cosscom/coss · 46 tokens

weapp-vite-best-practices

面向采用 weapp-vite 项目布局仓库或已安装 weapp-vite 依赖项目的工程化实践手册,覆盖 vite.config.ts 的 weapp 配置、内置 i18n、自动路由、routeRules/layout、buildScope、自动导入组件、分包、npm、六平台单目标构建、受管 TypeScript、HMR、sourcemap、prepare、MCP、Web runtime、lib mode、worker、AI skills,以及与 weapp-ide-cli 的命令治理边界。.

weapp-vite/weapp-vite · 134 tokens

native-to-weapp-vite-wevu-migration

面向原生微信、支付宝、抖音等小程序渐进迁移到 weapp-vite + 原生 或继续升级到 weapp-vite + wevu + Vue SFC 的结构化工作流,覆盖六平台单目标构建、原生扩展名保留、Web 联调边界、路线选择、工具链接入、SFC 试点、响应式升级与可回滚验证。.

weapp-vite/weapp-vite · 106 tokens

docs-and-website-sync

面向 weapp-vite monorepo 的文档、website 与公开 skills 同步工作流。适用于源码能力变化后同步配置、CLI、React/Wevu/Vue SFC、多平台、mpcore、README、packaged docs、脚手架 AGENTS.md、AI skills 元数据和触发回归入口。.

weapp-vite/weapp-vite · 79 tokens