skills.rest
alejandro-technology
alejandro-technologyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

component-catalog

Catalog React Native UI components with props, variants, and design tokens.

Updated Feb 27, 2026
Search Tags:#reference#react-native#props#ui-components#usage-examples#component-catalog
One-click install
npx skills add https://github.com/alejandro-technology/react-native-template --skill component-catalog
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-catalog
Source: https://github.com/alejandro-technology/react-native-template/tree/main/.claude/skills/specialty/component-catalog
Command: npx skills add https://github.com/alejandro-technology/react-native-template --skill component-catalog

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Centralizes reference documentation for all UI components (core, form, layout) including their props, variants, sizes, and usage patterns to speed UI development.

Core Features & Use Cases

  • Core components catalog: Button, Text, TextInput, Card, Avatar, Badge, Modal, etc., with props and variants.
  • Form components: wrappers around core components for react-hook-form usage with automatic error display.
  • Layout components: RootLayout, Header, Toolbar, LoadingState, EmptyState, and more for screens.
  • Use cases: quickly select appropriate components when building screens, ensure design consistency, and accelerate prototyping.

Quick Start

Browse the catalog to locate a component, view its props, variants, and example usage.

Frequently Asked Questions about component-catalog

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

FAQPage Schema
How do I find React Native UI component props and variants for screen design?▼

React Native UI component props and variants are cataloged in a centralized reference covering core, form, and layout components. It provides rapid lookup of usage examples, sizes, and design tokens to speed up screen design and ensure consistency.

What is the best way to ensure design consistency when building React Native forms?▼

Ensuring design consistency in React Native forms involves using cataloged form component wrappers built for react-hook-form. These wrappers automatically handle error display and integrate core components to maintain uniform variant styling.

Can I use this UI component catalog with react-hook-form?▼

Yes, the UI component catalog supports react-hook-form by providing dedicated form component wrappers. These wrappers automatically display errors and wrap core components, streamlining form validation and UI development.

How do I quickly look up usage examples for React Native layout components?▼

Quickly looking up usage examples for React Native layout components involves browsing the catalog's layout section featuring RootLayout, Header, Toolbar, LoadingState, and EmptyState. It provides on-demand access to metadata, props, and resource directories.

Does the catalog include YAML frontmatter for UI component metadata?▼

Yes, the catalog includes YAML frontmatter for defining UI component metadata such as name and description. This structure allows developers to organize scripts, references, and assets for on-demand access during development.

When do I need a centralized UI component reference directory?▼

A centralized UI component reference directory is needed when building React Native apps requires rapid lookup of props, variants, and design tokens across multiple screens. It accelerates prototyping and enforces UI consistency.

Related Skills

Explore More Design & Creative Skills→
ricardohg1998-createricardohg1998-create

design-system-forge

Define design tokens, base UI components, and governance artifacts with automated documentation.

Community
Advanced
parisgroup-aiparisgroup-ai
1

mobile-native-bestpractices

Review React Native and Expo screens for architecture, performance, and accessibility issues.

Official
Advanced
salmanrranasalmanrrana
7

TanStack Forms

Integrate TanStack Forms with React for form construction, validation, and submission.

Community
Advanced
Project-N-E-K-OProject-N-E-K-O
2.4k

🎨 UI 设计规范

Codifies a reusable UI design system for N.E.K.O capsule interfaces and brand-blue tokens.

Official
Basic