Safely migrates React Native Paper UI code to NativeWind utility classes while preserving behavior and accessibility.
Install
mkdir -p .claude/skills/paper-to-nativewind && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/12903" && unzip -o skill.zip -d .claude/skills/paper-to-nativewind && rm skill.zipInstalls to .claude/skills/paper-to-nativewind
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Migrate React Native Paper UI code to NativeWind utility classes while preserving behavior, theming intent, and accessibility.Key capabilities
- →Migrate React Native Paper UI code to NativeWind
- →Preserve component behavior
- →Maintain theming intent
- →Ensure accessibility
- →Translate style intent into utility classes
How it works
This skill refactors existing React Native Paper components by mapping them to NativeWind layouts, replacing theme-based styles with utility classes, and validating states and responsiveness.
Inputs & outputs
When to use paper-to-nativewind
- →Migrating UI screens to Tailwind-based styling
- →Replacing themed component libraries
- →Refactoring legacy React Native codebases
About this skill
Paper to NativeWind
Use this skill when refactoring existing React Native Paper screens/components into a NativeWind-first implementation.
Goals
- Keep feature behavior unchanged.
- Keep accessibility semantics unchanged or better.
- Translate style intent into utility classes with clear composition.
- Avoid introducing visual regressions in spacing, typography, and states.
Recommended Workflow
- Identify all Paper components in scope (for example:
Button,Card,TextInput,Chip,Snackbar,Dialog). - Map each component to a NativeWind-native layout and primitive set.
- Preserve component props and interaction contracts.
- Replace theme-based style objects with utility class tokens.
- Validate disabled/loading/error/focus states.
- Verify parity on small and large screen sizes.
Conversion Rules
- Prefer incremental migration per component or screen, not large rewrites.
- Keep state logic and business logic untouched unless required for parity.
- Do not silently drop variants (outlined, elevated, tonal, etc.); map each one.
- Replace one-off inline styles with reusable className patterns when repeated.
- Keep text contrast and tap targets compliant.
- If exact parity is impossible, document tradeoffs explicitly.
Output Expectations
- Updated component code using NativeWind className conventions.
- Brief migration notes listing mapped components and any accepted differences.
- Clear TODO markers for unresolved parity gaps.
Validation Checklist
- Interaction parity: press, focus, disabled, loading.
- Visual parity: spacing, border radius, elevation/shadow, typography.
- Accessibility: labels, roles, hints, hit slop where needed.
- Responsiveness: no clipping or overlap on narrow devices.
When not to use it
- →When the user wants to introduce visual regressions
- →When the user wants to silently drop component variants
- →When the user wants to modify state logic or business logic unnecessarily
Limitations
- →Prefer incremental migration per component or screen
- →Requires explicit documentation of tradeoffs if exact parity is impossible
- →The skill focuses on styling migration, not business logic changes
How it compares
This skill automates the translation of styling from a component library to a utility-first CSS framework while preserving critical aspects like behavior and accessibility, which is more efficient than manual, line-by-line conversion.
Compared to similar skills
paper-to-nativewind side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| paper-to-nativewind (this skill) | 0 | 3mo | No flags | Intermediate |
| gesture-handler-3-migration | 1 | 2mo | No flags | Advanced |
| swiftui-patterns-developer | 1 | 6mo | No flags | Intermediate |
| frontend-folder-creation | 0 | 1mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
gesture-handler-3-migration
software-mansion
Migrates files containing React Native components which use the React Native Gesture Handler 2 API to Gesture Handler 3.
swiftui-patterns-developer
anyproto
SwiftUI view structure, composition, and best practices. Use when refactoring SwiftUI views, organizing view files, or extracting subviews.
frontend-folder-creation
Yimura
Use when creating, organizing, renaming, or fixing feature folders, subfolders, kebab case files, or barrel exports in the React Native RemoteUnlock app's frontend feature directories.
react-native-architecture
wshobson
Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecting React Native projects.
react-native-design
wshobson
Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating performant animations.
tamagui
tamagui
Universal React UI framework for web and native. Use when building cross-platform apps with Tamagui, creating styled components with `styled()`, configuring design tokens/themes, using Tamagui UI components, or working with animations. Triggers: "tamagui", "styled()", "$token", "XStack/YStack", "useTheme", "@tamagui/*" imports, "createStyledContext", "variants".