react-native-design Skill for Claude Code: Styling, Navigation and Animations

react-native-design helps Claude build React Native screens with StyleSheet styling, React Navigation 6+ and Reanimated 3 animations.

Installs: 15.8K; on skills.sh
Stars: 42.1K; on GitHub
Files: 4; besides SKILL.md
Updated: Oct 2026; last repo commit

react-native-design is a reference skill from wshobson's agents collection. It gives Claude patterns for styling with StyleSheet, navigation with React Navigation 6+, animation with Reanimated 3, gestures with Gesture Handler, and platform-specific code for iOS and Android.

It loads when you build React Native apps, set up navigation or add animations. The SKILL.md holds a quick-start component, eight best practices and a list of common issues. The detailed patterns sit in four reference files that Claude reads when it needs them.

The navigation reference lists npm install commands for React Navigation and its peer dependencies. Claude can run them in your project if you let it.

Good for

Mobile developers building cross-platform React Native apps
Developers styling components and responsive layouts for iOS and Android
Developers fixing laggy animations or gesture conflicts

Install react-native-design

Claude Code

Copy this prompt.

Install the react-native-design skill in Claude Code. Run this command:

/plugin marketplace add wshobson/agents
/plugin install ui-design@claude-code-workflows

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Pick one route. The plugin routes install the whole ui-design plugin: 3 agents, 4 commands and 9 skills (counted from the plugin folder in the repo tree, which has no hooks or MCP config files). The skills-only routes install just this skill, with no agents or commands.

From the project README. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

When to Use This Skill
Detailed section: Core Concepts
Quick Start Component
Best Practices
Common Issues

Key facts

License (per GitHub): MIT
Author: wshobson (repo owner)
Repository: wshobson/agents, folder plugins/ui-design/skills/react-native-design
Installs on skills.sh: 15,815 as of 2026-11-02
Repo stars: 42,081 as of 2026-11-02 (whole repo)
Last repo commit: 2026-10-30
Files in the skill folder: 5 files including SKILL.md
skills.sh audits: Gen Agent Trust Hub: pass; Socket: pass; Snyk: pass

What it includes

A complete styled React Native component
A worked component with StyleSheet styles to copy from.
Quick start component
Core concepts in five parts
StyleSheet and styling, flexbox layout, React Navigation setup, Reanimated 3 basics and platform-specific styling.
references/details.md
React Navigation patterns
Setup with an npm install list, type-safe navigation, navigation hooks and stack navigation.
Runs code · references/navigation-patterns.md
Reanimated 3 and gestures
Shared values, animated styles, animation callbacks, and pan, pinch, rotate and tap gestures.
references/reanimated-patterns.md
Styling and theming
StyleSheet fundamentals, combining styles, a theme context and responsive design.
references/styling-patterns.md
Eight rules
TypeScript types, memoization, UI-thread animations, StyleSheet.create, safe areas, real-device testing, FlatList for long lists and Platform.select.
Best practices
Six frequent problems with fixes
Gesture conflicts, navigation type errors, animation jank, memory leaks, font loading and safe areas on notched devices.
Common issues

From the official docs

Permissions

Low risk

The skill is text guidance, but its navigation reference lists npm install commands that Claude may run in your project. Approve installs yourself.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

A reference file lists npm install commands
navigation-patterns.md installs React Navigation packages and peer dependencies. Approve installs yourself and check package.json afterwards.

Technical details

Talks to	npm registry, if Claude runs the install commands from the navigation reference
Scopes	Your React Native project files

Questions

What does the react-native-design skill do?

It gives Claude React Native patterns for styling, navigation, animation and gestures. Claude then writes screens that follow them and avoids known issues like jank and gesture conflicts.

How do I install it?

Use the install box above and pick one route. The skills CLI route installs only this skill. The plugin route installs the whole ui-design plugin, which adds 3 agents, 4 commands and 9 skills (counted from the repo tree).

Which versions does it cover?

The SKILL.md names React Navigation 6+ and Reanimated 3. It does not name a React Native version.

Does it need an API key?

No key is named in the SKILL.md or its four reference files. It bundles no scripts.

Is it safe?

It is guidance with no scripts. The navigation reference lists npm install commands for React Navigation packages, so approve any install Claude proposes in your project.

Does it cover Expo?

The SKILL.md mentions expo-font as one way to load custom fonts. It does not describe an Expo setup.

Information

updated Nov 2, 2026

Repository: wshobson/agents
Folder: plugins/ui-design/skills/react-native-design

wshobson/agents skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 7

react-native-design SKILL.md · github.com
wshobson/agents README · github.com
plugin.json · github.com
references/details.md · github.com
references/navigation-patterns.md · github.com
references/reanimated-patterns.md · github.com
references/styling-patterns.md · github.com