mobile-design-system

Generates mobile UI design system with color tokens, component recipes, and layout patterns.

3|Updated Jan 14, 2026
One-click install
npx skills add https://github.com/lucasxf/engineering-daybook --skill mobile-design-system
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mobile-design-system
Source: https://github.com/lucasxf/engineering-daybook/tree/main/.claude/skills/mobile-design-system
Command: npx skills add https://github.com/lucasxf/engineering-daybook --skill mobile-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the challenge of maintaining visual parity between web and mobile interfaces, offering a comprehensive design system for mobile development with Learnimo.

Core Features & Use Cases

  • Design System Integration: Provides a consistent style guide for mobile UI components and layouts.
  • Color Tokens: Offers exact color tokens for mobile UI elements, ensuring visual consistency across platforms.
  • Component Recipes: Includes detailed recipes for common UI components, such as buttons, cards, and text inputs.
  • Use Case: When developing a new mobile app or updating existing components, use this Skill to ensure your app adheres to the 'Library at Dusk' design language.

Quick Start

Activate the mobile-design-system skill to apply the 'Library at Dusk' design system to your mobile UI components.

Frequently Asked Questions about mobile-design-system

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

FAQPage Schema
How do I maintain visual parity between web and mobile interfaces in React Native?

To maintain visual parity between web and mobile interfaces, apply a comprehensive design system providing exact color tokens and component recipes for React Native. This ensures visual consistency across platforms by standardizing mobile UI elements.

What are mobile UI color tokens and how do they work for design systems?

Mobile UI color tokens are exact color values used to standardize mobile design system elements. They ensure visual consistency by providing a unified style guide for React Native components, preventing color mismatches across different application screens.

Can I use this design system for existing mobile app components?

Yes, you can use this design system for existing mobile app components. It provides detailed component recipes for buttons, cards, and text inputs, allowing you to update your application to adhere to the 'Library at Dusk' design language.

What is the best way to apply a consistent style guide to mobile UI components?

The best way to apply a consistent style guide to mobile UI components is by activating a comprehensive mobile design system. This delivers exact color tokens, component recipes, and layout patterns to standardize your application's visual output.

Do I need React Native to use the mobile design system component recipes?

Yes, React Native is required to fully utilize the mobile design system component recipes. The system specifically provides support for React Native components and styles to achieve the desired mobile UI visual parity.