skills.rest
mrjuguy
mrjuguyCOMMUNITY
Explore all skills by this author →
GitHub

react-components

Generate React Native components from architectural specifications using Expo and NativeWind.

Updated Jan 19, 2026
Search Tags:#ui#react#components#react-native#design-system#expo#nativewind
One-click install
npx skills add https://github.com/mrjuguy/kitchen_assistant --skill react-components-mrjuguy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-components
Source: https://github.com/mrjuguy/kitchen_assistant/tree/main/.agent/skills/react-components
Command: npx skills add https://github.com/mrjuguy/kitchen_assistant --skill react-components-mrjuguy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Bridges the gap between design specs and production-grade React Native components, ensuring consistency with Expo, NativeWind, and the design system, reducing UI drift and rework.

Core Features & Use Cases

  • Templates map architectural specs to reusable React Native components with proper typing and accessibility.
  • Styling guidance using NativeWind's className approach, with style prop used only for dynamic values or platform quirks.
  • Premium polish checklist including touch feedback, micro-animations, glassmorphism, and accessibility improvements to deliver high-quality UI.

Quick Start

Create a production-ready React Native component following the design system using Expo, NativeWind, and lucide-react-native.

Frequently Asked Questions about react-components

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

FAQPage Schema
How do I build production-grade React Native components from architectural specs?▼

To build production-grade React Native components, this Skill translates architectural specifications into reusable Expo UI elements using NativeWind for styling and lucide-react-native for icons. It ensures proper typing, accessibility, and design system alignment.

Does this Skill work with Expo projects using NativeWind?▼

Yes, this Skill works explicitly with Expo-based projects using NativeWind. It applies the className approach for styling and reserves the style prop for dynamic values or platform quirks to ensure components match your design system.

What is the best way to prevent UI drift when creating React Native components?▼

The best way to prevent UI drift is to map architectural specs to reusable components with a premium polish checklist. This includes touch feedback, micro-animations, glassmorphism, and strict adherence to NativeWind styling rules.

How do I add premium polish to my React Native UI components?▼

To add premium polish to React Native UI components, the Skill provides a checklist covering touch feedback, micro-animations, glassmorphism, and accessibility improvements. This ensures high-quality UI delivery and reduces rework.

When should I use the style prop instead of NativeWind className in React Native?▼

You should use the style prop instead of NativeWind className only for dynamic values or platform-specific quirks. The Skill enforces NativeWind's className approach as the primary styling method to maintain design system consistency.

Related Skills

Explore More Software Engineering Skills→
cristianbc2004cristianbc2004

expo-tailwind-setup

Configure Tailwind CSS v4 in Expo apps with NativeWind v5 and react-native-css.

Community
Intermediate
phoenicisfphoenicisf

figma-implement-design

Translate Figma designs into production-ready UI code.

Community
Advanced
1natsu1721natsu172
1

expo-tailwind-setup

Configure Tailwind CSS v4 in Expo projects with NativeWind v5 and react-native-css via Metro/PostCSS.

Community
Intermediate
TMHSDigitalTMHSDigital
2

mobile-component-patterns

Generate typed React Native components with StyleSheet or NativeWind and testing scaffolds.

Community
Intermediate