Skills
.Work. You
Rest

ba-mobile-frontend-code-gen

Community

Automate mobile frontend code from design system.

Software Engineering#mobile#react-native#flutter#design-system#brand-guideline#frontend-code-gen
AuthorYukine5377
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the generation of mobile frontend code from user requirements, Brand Guideline, and a Design System, ensuring UI/UX consistency, reusability, and maintainability across mobile projects.

Core Features & Use Cases

  • Brand-guided code generation: Produce mobile UI code that strictly follows Brand Guidelines and the Design System tokens (colors, typography, spacing, radii, elevation).
  • Multi-stack support: Generates code for React Native, Flutter, or native iOS/Android, with architecture that can adapt to each platform.
  • End-to-end components & layouts: Includes tokens, base UI components (Button, Text, Input, Card, ListItem, Badge), layout primitives (Stack, Tabs, Drawer), and navigation scaffolding.

Quick Start

Provide the design input and brand guideline, specify the target mobile stack, and run the generator to produce the mobile frontend code.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: ba-mobile-frontend-code-gen
Download link: https://github.com/Yukine5377/common/archive/main.zip#ba-mobile-frontend-code-gen

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.