Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
From hairyf-skills-4
Builds shadcn-style UI components in React Native (Expo) using Nativewind/Uniwind, RN Primitives, and CLI scaffolding.
How this skill is triggered — by the user, by Claude, or both
Slash command
/hairyf-skills-4:react-native-reusablesThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
> The skill is based on React Native Reusables (docs as of 2026-02-26), generated at 2026-02-26.
GENERATION.mdreferences/best-practices-adding-components.mdreferences/best-practices-troubleshooting.mdreferences/core-customization.mdreferences/core-installation.mdreferences/core-overview.mdreferences/features-blocks.mdreferences/features-components-overview.mdreferences/features-forms-controls.mdreferences/features-overlays-portals.mdreferences/features-registry-cli.mdreferences/features-text-and-icons.mdThe skill is based on React Native Reusables (docs as of 2026-02-26), generated at 2026-02-26.
React Native Reusables brings the shadcn/ui experience to React Native: copy-paste or CLI-scaffolded components, theming via CSS variables, and RN Primitives under the hood. It supports Nativewind and Uniwind, requires a root PortalHost for overlays, and uses a Text inheritance system and an Icon wrapper for Lucide.
| Topic | Description | Reference |
|---|---|---|
| Overview | What RNR is, differences from shadcn/ui (portals, no cascade, icons, etc.) | core-overview |
| Installation | CLI init vs manual setup, adding components, PortalHost, dependencies | core-installation |
| Customization | components.json, global.css, tailwind.config, theme.ts | core-customization |
| Topic | Description | Reference |
|---|---|---|
| Components overview | Button, Input, Dialog, variants, asChild, compound components | features-components-overview |
| Text and icons | TextClassContext inheritance, Icon wrapper with Lucide | features-text-and-icons |
| Forms & controls | Label, Input, Select, Checkbox, RadioGroup, compound pattern | features-forms-controls |
| Overlays & portals | PortalHost, Dialog/Popover/SelectContent, contentInsets | features-overlays-portals |
| Registry and CLI | init, add, doctor; custom registry and registryDependencies | features-registry-cli |
| Blocks | Auth blocks, Clerk integration, adding blocks via CLI | features-blocks |
| Topic | Description | Reference |
|---|---|---|
| Adding components | Prefer CLI, PortalHost placement, path aliases, cn helper, manual copy | best-practices-adding-components |
| Troubleshooting | doctor, --log-level all, PortalHost, aliases, dependencies | best-practices-troubleshooting |
npx claudepluginhub hairyf/skillsBuilds React Native UI components using core elements like View, Text, Image, ScrollView, FlatList, TextInput, TouchableOpacity, and SafeAreaView. Covers composition, reusability, and best practices.
Master React Native 0.79.5 components, styling with StyleSheet, list performance optimization, and accessible mobile UI patterns.
Provides React Native and Expo best practices for performant mobile apps, including list optimization, Reanimated animations, native navigation, and UI patterns like expo-image.