weapp-tailwindcss is a build toolchain that generates and adapts Tailwind CSS for web pages, mini-programs, app webviews, React Native, and Lynx applications. It is for developers who want one Tailwind-based styling workflow to produce CSS and styles for multiple platforms.
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 skills add sonofmagic/weapp-tailwindcss --skill weapp-tailwindcss-troubleshootgit clone --depth 1 https://github.com/sonofmagic/weapp-tailwindcssWrote 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/sonofmagic/weapp-tailwindcss/weapp-tailwindcss-troubleshoot)<a href="https://agentmods.dev/skills/sonofmagic/weapp-tailwindcss/weapp-tailwindcss-troubleshoot"><img src="https://agentmods.dev/badge/skills/sonofmagic/weapp-tailwindcss/weapp-tailwindcss-troubleshoot/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/sonofmagic/weapp-tailwindcss/weapp-tailwindcss-troubleshoot"><img src="https://agentmods.dev/badge/skills/sonofmagic/weapp-tailwindcss/weapp-tailwindcss-troubleshoot.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.00130 | $0.00646 |
| Opus 5.5 | $0.00052 | $0.00258 |
| Sonnet 5.5 | $0.00026 | $0.00129 |
| Haiku 4.5 | $0.00013 | $0.00065 |
Grade A, and why
weapp-tailwindcss-troubleshoot 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.
Copies of this mod
1 near-identical copy found in the catalogue:
- weapp-tailwindcss-troubleshoot — 100% identical, 0 lines differ
What it actually says
weapp-tailwindcss troubleshoot
从生成、转译、产物到运行时逐层定位根因，避免用配置猜测掩盖症状。
诊断顺序
- 收集最小复现：框架、bundler、目标端、版本、命令、原始 class、期望与实际产物。
- 读取 references/symptom-matrix.md，先归类症状，再执行对应最短路径。
- 检查 Tailwind 入口是否为纯 CSS、是否实际进入构建图、
cssEntries是否为绝对路径、@source是否覆盖源码。 - 检查是否存在第二个 Tailwind 生成器，或 H5/Web 被错误
disabled。 - 分别验证 CSS 候选、模板/JS safe class、最终平台样式文件和真实页面；不要只看固定的
app.wxss文件名。 - watch/HMR 问题要在同一进程连续新增 class，区分首次构建成功与增量图失效。
- CLI 问题先确认
web/weapptarget、stdin/stdout、source map 与 watch 模式，不期待它改写模板或脚本。 - 只有根因确认后才修改配置，并补一条可重复的回归验证。
安全边界
- JS 转译只接受 Tailwind 验证过的
classNameSet；未命中时修复扫描或刷新时序，不启用启发式全字符串转译。 space-*先处理结构和组件虚拟节点，再最小扩展cssOptions.cssChildCombinatorReplaceValue。- App WebView 兼容必须记录 Android Chromium、iOS WebKit 或 Harmony/HBuilderX 环境，并以真实运行截图或日志为证据。
- 不为排障临时加入
@tailwindcss/vite或@tailwindcss/postcss。 - ReactLynx/Rspeedy 构建与 CSS encoder 问题转到
$weapp-tailwindcss-lynx。
输出要求
先给根因层级和证据，再给最小修复、验证命令、预期结果和未解决时的下一条观测点。
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 · 32 lines · 130 tokens per session scan A 94593057f1bd
weapp-tailwindcss-troubleshoot is a skill published in the GitHub repository sonofmagic/weapp-tailwindcss (1,866 stars, last pushed 3d ago), licensed MIT. It adds 130 tokens to every session and 646 once invoked, about $0.0005 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-08-30.
Other skills, from other repositories
inspecting-hermes-desktop-dom
Read the live Hermes desktop DOM/CSS over CDP.
fixing-motion-performance
Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.
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.
optimize-web-animations
Profile, audit, and optimize frontend page performance with emphasis on animation work, memory-leak risks, long-session slowdowns, CSS animations, canvas/WebGL requestAnimationFrame loops, marquees, skeletons, GSAP/Three/Matter effects, timers, listeners, and observers. Use when the user asks to make animations…
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…
frontend-testing-debugging
Use when testing, debugging, or making targeted improvements to rendered frontend apps through the Frontend Design Skills or web dev plugin: local dev servers, UI regressions, interaction bugs, console errors, responsive layout, and visual QA. Check whether the Browser plugin is available and use it first when it is…