Skills
.Work. You
Rest

rn-screen

Community

Generate React Native screens with states.

Software Engineering#state management#data fetching#component generation#ui development#react native#fsd architecture
Authorrladydqls99
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the creation of React Native screen components, ensuring they are structured correctly and handle common states like loading, error, and empty data.

Core Features & Use Cases

  • FSD Architecture: Creates components within the src/pages/<ScreenName>/ui/ directory.
  • Data Fetching Integration: Includes boilerplate for useQuery from @tanstack/react-query.
  • State Management: Provides ready-to-use components for loading, error, and empty states.
  • Styling Conventions: Enforces a specific order for StyleSheet properties.
  • Use Case: When asked to "Create a new screen for user profiles that fetches data", this Skill will generate the basic structure, including data fetching logic and state handling.

Quick Start

Use the rn-screen skill to generate a new React Native screen component for user profiles.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: rn-screen
Download link: https://github.com/rladydqls99/claude-marketplace/archive/main.zip#rn-screen

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.