skills.rest
zivtech
zivtechOFFICIAL
Explore all skills by this author →
WebsiteGitHub

mobile-design-executor

Generate React Native and Expo components with TypeScript from mobile design specifications.

Updated Mar 5, 2026
Search Tags:#typescript#accessibility#react-native#code-generation#expo#mobile-design
One-click install
npx skills add https://github.com/zivtech/joyus-desktop --skill mobile-design-executor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-design-executor
Source: https://github.com/zivtech/joyus-desktop/tree/main/.claude/skills/mobile-design-executor
Command: npx skills add https://github.com/zivtech/joyus-desktop --skill mobile-design-executor

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill bridges the gap between mobile design specifications and functional code, ensuring that UI implementations are consistent, accessible, and platform-aware.

Core Features & Use Cases

  • Component Generation: Creates React Native/Expo functional components with TypeScript, including navigation, gestures, and safe area handling.
  • Platform Compliance: Automatically enforces platform-specific conventions for iOS and Android, including accessibility roles and touch target sizing.
  • Use Case: When you have a completed mobile-design-planner spec, use this skill to generate the corresponding React Native screen components, complete with loading, error, and empty states.

Quick Start

Use the mobile-design-executor skill to generate the React Native components for the mobile screen defined in the current planner spec.

Frequently Asked Questions about mobile-design-executor

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

FAQPage Schema
How do I generate React Native components from mobile design specifications?▼

To generate React Native components from mobile design specifications, you input your completed design planner spec into the executor to produce production-ready Expo functional components with TypeScript, navigation, and gesture handling.

Does this React Native code generator handle iOS and Android accessibility compliance?▼

Yes, this React Native code generator handles accessibility compliance by automatically enforcing platform-specific conventions for iOS and Android, including appropriate accessibility roles and minimum touch target sizing.

What is the best way to ensure safe area management in React Native code generation?▼

The best way to ensure safe area management in React Native code generation is to use a structured execution protocol that maps design tokens and automatically applies safe area handling for platform-specific UI constraints.

Can I use Expo with this tool to generate mobile screens with TypeScript?▼

Yes, you can use Expo with this tool to generate mobile screens with TypeScript, producing functional components that satisfy platform-specific navigation, gesture handling, and state coverage requirements.

Why does my generated React Native screen need a completed mobile design planner spec?▼

Your generated React Native screen needs a completed mobile design planner spec because the executor bridges the gap between structured design specifications and functional code, ensuring UI implementations remain consistent, accessible, and platform-aware.

Related Skills

Explore More Software Engineering Skills→
u1pnsu1pns
8

product-designer

Translate product requirements into UX design specifications with component libraries.

Community
Advanced
IsKenKenYaIsKenKenYa

vercel-react-native-skills

Enforce React Native and Expo performance best practices for lists, animations, and navigation.

Community
Advanced
josephblaisjosephblais

mobile-accessibility

Provide accessibility reference data for React Native, iOS, and Android auditing.

Community
Intermediate
Yukine5377Yukine5377

ba-html-to-react-native-ds-code-gen

Convert HTML prototypes into React Native/Expo components with design tokens.

Community
Advanced