Enforce cross-platform NativeWind styling patterns for React Native and React Native Web.
npx skills add https://github.com/estebandrg/liftera --skill nativewind-v4
Please help me install this Agent Skill. Skill: nativewind-v4 Source: https://github.com/estebandrg/liftera/tree/main/skills/nativewind-v4 Command: npx skills add https://github.com/estebandrg/liftera --skill nativewind-v4
This Skill codifies NativeWind patterns for Liftera, ensuring consistent styling across React Native and React Native Web while reducing styling drift and platform-specific mistakes.
Apply the NativeWind-based styling guidelines to a component by using className with Tailwind-like utilities, verify that styling renders identically on web and mobile, and adjust as needed using the provided examples.
High-intent search queries and answers about installing and using this skill.
Cross-platform React Native styling is achieved by using className with Tailwind-like utilities to ensure web and native rendering parity. This approach relies on local guidance and example code to enforce consistent design tokens.
Use className for standard utility-driven patterns, cn() for conditional class merging, and style props strictly for dynamic values. This decision guidance prevents styling drift and platform-specific rendering mistakes.
Yes, NativeWind supports dynamic values and utility-driven patterns for cross-platform apps. It targets className-based styling to maintain a unified design system across both React Native and React Native Web.
Avoid NativeWind styling pitfalls by enforcing cross-platform rules that use consistent design tokens. This prevents errors caused by using var() in className or hex color literals, ensuring proper web and native rendering.
Debug NativeWind rendering parity by using the provided best practices and debugging checklist for common patterns like flex, grid, and typography. This ensures components render identically on web and mobile platforms.
imkdwApply Tailwind CSS utility classes with custom design tokens and dark mode.
geinalaApply container queries, CSS Grid, and Flexbox for responsive web layouts.
ic-facetProvide Tailwind CSS styling patterns using the cn() utility and CSS custom properties.
TheBushidoCollectiveProvide styling patterns for React Native Web components using StyleSheet, theming, and responsive design.
