One-click install
npx skills add https://github.com/Sajinthan/rn-boilderplate --skill component-sajinthan
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: component
Source: https://github.com/Sajinthan/rn-boilderplate/tree/main/.claude/skills/component
Command: npx skills add https://github.com/Sajinthan/rn-boilderplate --skill component-sajinthan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines the creation of reusable React Native UI components by providing a consistent structure, patterns, and templates to accelerate development and ensure code quality.

Core Features & Use Cases

  • Component templates: standard file layout and starter code for components, forms, modals, cards, and lists.
  • Pattern guidance: supports variant patterns, forwardRef for inputs, and modal/collapsible patterns for common UI needs.
  • Use Case: Team wants a library of reusable UI elements with a consistent API and export structure to speed up app development.

Quick Start

Create a basic Button component using the provided ComponentName template.

Frequently Asked Questions about component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create reusable React Native UI components with a consistent structure?

You can create reusable React Native UI components by applying standardized templates and patterns. This ensures a consistent API, predictable export barrels, and uniform file layouts for elements like buttons, modals, and cards across your mobile app.

What is the best way to structure a React Native component library starter?

The best way to structure a React Native component library starter is to use templates that define a standard file layout and incorporate pattern guidance like variants and forwardRef for inputs. This accelerates development and ensures code quality.

How do forwardRef and variant patterns work when generating React Native components?

ForwardRef and variant patterns standardize component APIs by allowing ref forwarding for inputs and enabling style variations. Applying these patterns during component generation ensures predictable behavior and theming across your UI elements.

Does this React Native component generator support barrel exports?

Yes, this React Native component generation process supports barrel exports. It applies established conventions to provide predictable export structures, ensuring your component library starter maintains a clean and unified public API.

Can I use these component templates for forms, modals, and lists in React Native?

Yes, you can use these component templates for forms, modals, cards, and lists in React Native. The templates provide standard file layouts and starter code to address common UI needs while maintaining a consistent API.

Why do I need a standardized template for React Native UI components?

You need a standardized template for React Native UI components to streamline creation and ensure code quality. Providing a consistent structure, patterns, and predictable exports accelerates team development and maintains a unified component library.