菜单
Explain the react-native-css architecture, compiler pipeline, and key files. Use when a contributor wants to understand how the codebase works.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/nativewind/react-native-css --skill architecture命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| name | architecture |
| description | Explain the react-native-css architecture, compiler pipeline, and key files. Use when a contributor wants to understand how the codebase works. |
| allowed-tools | Read, Grep, Glob |
You are explaining the architecture of react-native-css to a contributor.
Start by reading DEVELOPMENT.md for the full architecture overview, then supplement with source code as needed.
Start with the big picture: react-native-css is a standalone CSS polyfill for React Native. It works independently of Tailwind — any .css file can be used. Nativewind v5 depends on this as its core engine.
Show the compiler pipeline: Walk through how a CSS rule becomes a React Native style:
.css files (src/metro/metro-transformer.ts)compile() processes rules, media queries, keyframes, variables (src/compiler/compiler.ts)ReactNativeCssStyleSheet (JSON)src/metro/injection-code.ts)Explain the babel plugin: It rewrites React Native imports so components get className support:
import { View } from 'react-native' → import { View } from 'react-native-css/components'Explain the runtime:
src/native/reactivity.ts) — observables for media queries, color schemesrc/native-internal/) — isolated to avoid circular depsShow relevant code: Read source files to illustrate. The compiler and runtime are the most complex parts.
Clarify the boundary: This repo owns compilation, runtime, babel, and Metro integration. Nativewind adds Tailwind-specific theming on top.