用途:本技能用于在开发中强制执行一套受约束、有明确取向的样式规范,以减少决策负担、提升性能、实现一致主题化,并将解法限制在规范模式内。适用场景包括创建带样式的新组件、审查现有组件样式、按设计系统重构样式、修复样式不一致、添加暗色模式以及组件主题化。
主要能力与核心原则:优先使用 Gluestack 组件而非 React Native 原生组件(View→Box、Text→Text、TouchableOpacity→Pressable、ScrollView→ScrollView、Image→Image、TextInput→Input/InputField、FlatList→FlashList);优先使用语义化 token 而非任意值;优先使用 className 而非内联样式;遵循间距刻度而非像素值;移除无用代码。
规则要点:语义颜色 token 包括 primary、secondary、tertiary、error、success、warning、info、typography、outline、background,以及 bg-background-error 等状态背景 token。内联样式的解决优先级为 className 工具类、组件变体、tva、NativeWind interop,内联样式仅作最后手段。间距只允许标准刻度值。暗色模式使用 CSS 变量加 dark: 前缀。复杂组件使用子组件模式,多变体组件使用 tva。自定义组件通过字符串拼接允许 className 覆盖。
验证方式:运行 python3 .claude/skills/gluestack-nativewind/scripts/validate_styling.py [path],可检测直接引入的 RN 组件、原始颜色值、可被 className 替代的内联样式、任意括号值、非刻度间距。
限制:平台特定代码、深度集成原生模块、性能关键路径等少数情况可作为例外,但需记录说明;本资料未提供收费、价格或平台信息。