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-lynxgit 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-lynx)<a href="https://agentmods.dev/skills/sonofmagic/weapp-tailwindcss/weapp-tailwindcss-lynx"><img src="https://agentmods.dev/badge/skills/sonofmagic/weapp-tailwindcss/weapp-tailwindcss-lynx/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-lynx"><img src="https://agentmods.dev/badge/skills/sonofmagic/weapp-tailwindcss/weapp-tailwindcss-lynx.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.00129 | $0.00642 |
| Opus 5.5 | $0.00052 | $0.00257 |
| Sonnet 5.5 | $0.00026 | $0.00128 |
| Haiku 4.5 | $0.00013 | $0.00064 |
Grade A, and why
weapp-tailwindcss-lynx 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-lynx — 100% identical, 0 lines differ
What it actually says
weapp-tailwindcss Lynx
通过 Rspeedy/Rspack 构建图生成 Lynx 原生运行时可消费的 Tailwind CSS，保留 ReactLynx className，不引入运行时样式表或 JSX 转换。
完整的 generator、rspack 和固定平台字段见站点的 ReactLynx / Rspeedy 配置参考。
工作流
- 确认项目是 ReactLynx + Rspeedy，而不是 React Native、uni-app App 或 Rspeedy Web。
- 检查
@lynx-js/rspeedy、Tailwind CSS、Node 与@weapp-tailwindcss/lynx版本。 - 读取 references/rspeedy-integration.md，配置
pluginLynxTailwindcss()和 theme + utilities CSS 入口。 - 保持完整静态
className或枚举；动态候选使用@source inline(...)，不要拼接半截任意值。 - 区分 Tailwind 已生成、Lynx encoder 已接受和真实运行端已生效三个层级。
- 检查 Rspeedy 警告；业务 utility 被删除时调整属性或 selector，不把警告全部视为 preflight 噪声。
- 先跑单测和真实 bundle，再在目标端验证伪类、媒体、渐变、重要值和复杂视觉效果。
不可破坏的边界
- 插件固定
platform: 'lynx'与generator.target: 'web'，但输出仍经过 Lynx 原生兼容处理。 - 不使用小程序 safe class；ReactLynx 保留原始
className。 - 不使用 React Native manifest、Metro、Babel transform 或
tw()runtime。 - 浏览器 preflight 不适合 Lynx；默认只引入 Tailwind theme 与 utilities。
- Tailwind 能生成某条规则不代表 Lynx encoder 或设备运行时支持它。
输出要求
输出安装、完整 Rspeedy/CSS 配置、候选写法、encoder 警告结论、bundle 证据和目标端验证步骤。
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 · 33 lines · 129 tokens per session scan A e041cb1e9774
weapp-tailwindcss-lynx is a skill published in the GitHub repository sonofmagic/weapp-tailwindcss (1,866 stars, last pushed 7d ago), licensed MIT. It adds 129 tokens to every session and 642 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
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…
Cypress v14 Component Testing
Component testing patterns with Cypress v14 including React, Vue, and Angular component mounting, custom mount commands, interaction testing, visual snapshots, and integration with Vite and Webpack bundlers.
weapp-vite-react-best-practices
A Chinese-language guide for building React 19 WeChat mini programs with weapp-vite and @weapp-vite/react. WeChat mini programs are small apps that run inside WeChat.
nextjs-nextra-starter-distill-zh
A project guide for a Next.js documentation and landing-page starter built with Nextra, Tailwind CSS, MDX, translations, themes, and interface components. It explains the repository’s structure, existing features, extension points, and migration patterns.
atelier-components
Atelier suite — turn the design system into real, accessible, production code. Scaffold a premium React/Next + Tailwind v4 + shadcn/ui project, wire the atelier-foundations tokens into shadcn's theme variables, install the best-in-class single-purpose components (Vaul drawer, Sonner toast, cmdk command palette, Tremor…
migrate-radix-to-base
Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert radix primitives, or switch a shadcn project's base library. Handles single components ("migrate accordion") and whole projects.