weapp-tailwindcss-lynx

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

A setup guide for using Tailwind CSS with ReactLynx and Rspeedy, a build system for Lynx applications.

In plain words
What is it for?
Configure the Rspeedy plugin and CSS entry, handle static or enumerated class names, investigate encoder warnings, and verify bundles on iOS or Android.
Why use it?
It helps produce CSS that the Lynx runtime can consume while separating generated CSS, encoder support, and real device behavior.

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-lynx
Any agent
npx skills add sonofmagic/weapp-tailwindcss --skill weapp-tailwindcss-lynx
Clone the repo
git clone --depth 1 https://github.com/sonofmagic/weapp-tailwindcss

Made for: Claude Code, Codex.

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

agentmods badge for weapp-tailwindcss-lynx

README.md
[![agentmods](https://agentmods.dev/badge/skills/sonofmagic/weapp-tailwindcss/weapp-tailwindcss-lynx.svg)](https://agentmods.dev/skills/sonofmagic/weapp-tailwindcss/weapp-tailwindcss-lynx)
Your own site
<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="Measured on agentmods" height="20"></a>
Per session 129 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 642 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.00129 $0.00642
Opus 5 $0.00064 $0.00321
Sonnet 5 $0.00026 $0.00128
Haiku 4.5 $0.00013 $0.00064

Measured 3d ago against content hash e041cb1e9774, 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-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 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-lynx/SKILL.md · 33 lines

What it actually says

weapp-tailwindcss Lynx

通过 Rspeedy/Rspack 构建图生成 Lynx 原生运行时可消费的 Tailwind CSS,保留 ReactLynx className,不引入运行时样式表或 JSX 转换。

完整的 generatorrspack 和固定平台字段见站点的 ReactLynx / Rspeedy 配置参考

工作流

  1. 确认项目是 ReactLynx + Rspeedy,而不是 React Native、uni-app App 或 Rspeedy Web。
  2. 检查 @lynx-js/rspeedy、Tailwind CSS、Node 与 @weapp-tailwindcss/lynx 版本。
  3. 读取 references/rspeedy-integration.md,配置 pluginLynxTailwindcss() 和 theme + utilities CSS 入口。
  4. 保持完整静态 className 或枚举;动态候选使用 @source inline(...),不要拼接半截任意值。
  5. 区分 Tailwind 已生成、Lynx encoder 已接受和真实运行端已生效三个层级。
  6. 检查 Rspeedy 警告;业务 utility 被删除时调整属性或 selector,不把警告全部视为 preflight 噪声。
  7. 先跑单测和真实 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 证据和目标端验证步骤。

Files

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.

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 · 33 lines · 129 tokens per session scan A e041cb1e9774

Subscribe to this mod's changes

weapp-tailwindcss-lynx is a skill published in the GitHub repository sonofmagic/weapp-tailwindcss (1,855 stars, last pushed 2d ago), licensed MIT. It adds 129 tokens to every session and 642 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

weapp-vite-react-best-practices

面向使用 weapp-vite 与 @weapp-vite/react 开发 React 19 微信小程序的实践手册。适用于配置 weapp.react、编写 JSX/TSX 页面、选择 static/dynamic render mode、接入可选 React Compiler、管理 createReactMiniProgramRoot 生命周期,以及通过 createNativeComponent / Slot 与原生或 Wevu 组件互操作。.

weapp-vite/weapp-vite · 103 tokens

nextjs-nextra-starter-distill-zh

蒸馏并应用当前仓库的 Next.js Nextra 启动模板架构、已实现功能、二次开发扩展点与迁移模式。适用于理解本项目、继续二次开发、修改 docs/landing/i18n/theme/auth/UI 行为,或把这些 Next.js 16 + Nextra 4 + Tailwind CSS 4 模式复用到其他项目。.

pdsuwwz/nextjs-nextra-starter · 97 tokens

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…

luminary19/atelier · 211 tokens

chakra-ui-builder

Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form…

chakra-ui/chakra-ui · 214 tokens

material-ui-nextjs

Integrates Material UI with Next.js App and Pages routers using @mui/material-nextjs, Emotion cache providers, next/font, CSS layers with Tailwind/CSS Modules, Link component prop patterns, CSS theme variables SSR notes, and App Router useSearchParams + Suspense. Use when setting up or debugging MUI in a Next.js app.

mui/material-ui · 76 tokens

material-ui-styling

Chooses the right Material UI styling approach (sx, styled, theme overrides, global CSS) from official MUI guidance. Use when styling @mui/material components, customizing themes, overriding slots, or comparing sx vs styled.

mui/material-ui · 52 tokens