playbooks

home / skills / ehtbanton / claudeskillsrepo / react-native-component-generator

react-native-component-generator skill

/react-native-component-generator

This skill generates complete React Native TypeScript components with styles and platform handling for immediate use.

npx playbooks add skill ehtbanton/claudeskillsrepo --skill react-native-component-generator

Review the files below or copy the command above to add this skill to your agents.

Files (2)
SKILL.md
782 B
---
name: react-native-component-generator
description: Generate React Native components with TypeScript, styling, and platform-specific code. Triggers on "create react native component", "generate rn component", "mobile component", "react native screen".
---

# React Native Component Generator

Generate React Native TypeScript components with StyleSheet and platform handling.

## Output Requirements

**File Output:** `*.tsx` component files
**Format:** Valid React Native TypeScript
**Standards:** React Native 0.72+, TypeScript

## When Invoked

Immediately generate a complete React Native component with styles and types.

## Example Invocations

**Prompt:** "Create React Native button component"
**Output:** Complete `Button.tsx` with variants, loading state, and styles.

Overview

This skill generates ready-to-use React Native components in TypeScript, complete with StyleSheet-based styling and optional platform-specific branches. It produces a single .tsx file that follows React Native 0.72+ and TypeScript conventions. The output is focused on practical, production-ready patterns like typed props, variants, and loading/error states.

How this skill works

When triggered, the skill creates a complete component file (.tsx) that includes imports, typed prop definitions, default props, styles using StyleSheet, and platform-specific conditional code where appropriate. It can produce common component patterns (buttons, inputs, screens) with variants, accessibility attributes, and basic unit of styling ready to drop into a project. The generated code aims to be minimal, readable, and easily customizable.

When to use it

  • You need a new React Native UI component scaffolded quickly in TypeScript.
  • Creating components that must work across iOS and Android with small platform differences.
  • Prototyping screens or reusable widgets with consistent typing and styles.
  • Generating variant-driven UI elements (e.g., primary/secondary button) with loading states.
  • Kickstarting a component to adapt into your app’s design system.

Best practices

  • Review and adjust prop types and defaults to match your app’s data flow and state management.
  • Move repeated styles into a shared theme or constants file for consistent spacing and colors.
  • Replace inline platform checks with a small abstraction if many components need the same branching.
  • Add unit or snapshot tests for complex interaction or visual variants after generation.
  • Keep accessibility in mind: set accessible props, labels, and hitSlop where relevant.

Example use cases

  • Create a Button.tsx with primary/secondary variants, disabled and loading states, and accessibility labels.
  • Generate a LoginScreen.tsx scaffold with typed props, keyboard handling, and responsive styles.
  • Produce a PlatformCard.tsx that renders slightly different layouts on iOS vs Android using Platform.OS checks.
  • Scaffold a TextInput component with validation UI, clear button, and typed change handlers.

FAQ

What file format and React Native version does this target?

It generates .tsx files targeting React Native 0.72+ and TypeScript projects.

Does it include app-wide theming or only component-level styles?

It generates component-level StyleSheet styles; migrating shared values into a theme file is recommended for consistency.