# Mobile Design

> Crea o refina UI de apps móviles como un prototipo local clicable, normalmente en un marco a escala de iPhone con tokens, primitivos y componentes de pantalla reutilizables, listo para previsualizar en el navegador.

Fuente: https://skillsagentes.com/skills/rbrown101010/rileys-skills/mobile-design
Markdown: https://skillsagentes.com/skills/rbrown101010/rileys-skills/mobile-design.md

Repositorio: https://github.com/rbrown101010/rileys-skills
Autor: rbrown101010
Licencia: no declarada
Actualizado: hace 3 meses
Coste de contexto: 101 tok instalada, 1.1k tok al activarse, 14.1k tok con todos los archivos del bundle
Bundle: 14 archivos, 55 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add rbrown101010/rileys-skills --skill mobile-design --agent claude-code
# Cursor
npx -y skills add rbrown101010/rileys-skills --skill mobile-design --agent cursor
# Codex
npx -y skills add rbrown101010/rileys-skills --skill mobile-design --agent codex
# Gemini CLI
npx -y skills add rbrown101010/rileys-skills --skill mobile-design --agent gemini
# Windsurf
npx -y skills add rbrown101010/rileys-skills --skill mobile-design --agent windsurf
# Cline
npx -y skills add rbrown101010/rileys-skills --skill mobile-design --agent cline
```

## Qué hace

- Construye UI de apps móviles como un prototipo local clicable en vez de mockups estáticos
- Usa un lienzo fijo de 402x874 escalado con `transform: scale()`, dentro de un marco tipo iPhone
- Organiza el código en `styles.css`, `data.jsx`, `primitives.jsx`, `screens.jsx` y `app.jsx` para separar tokens, primitivos y pantallas
- Lanza un servidor de previsualización local y lo abre en el navegador con `start_mobile_preview.py`
- Aplica reglas de diseño: safe areas de iOS, tap targets de mínimo 44px, ritmo de 8px y un solo color de acento

## Cuándo usarla

- El usuario quiere diseño de producto mobile-first o un concepto de app pulido
- Se necesita una vista previa clicable en el navegador para iterar en local
- Hay que explorar flujos de pantalla a pantalla o iterar en tamaños, espaciado, tipografía y jerarquía para móvil

## Qué la activa

- "Diseña el flujo de onboarding de esta app móvil"
- "Crea un prototipo clicable de esta pantalla de perfil"
- "Ajusta el espaciado y la tipografía de esta app para móvil"

## Antes de instalar

- Necesita Python 3 para ejecutar los scripts de scaffold y previsualización.
- Necesita en el PATH: python3
- Variables de entorno: CODEX_HOME, MOBILE_DESIGN_SKILL
- makes network requests
- reads environment config

## Archivos

- SKILL.md — 4 KB
- agents/openai.yaml — 242 B
- assets/prototype-starter/app.jsx — 3 KB
- assets/prototype-starter/data.jsx — 2 KB
- assets/prototype-starter/iOS.jsx — 15 KB
- assets/prototype-starter/index.html — 2 KB
- assets/prototype-starter/primitives.jsx — 11 KB
- assets/prototype-starter/screens.jsx — 6 KB
- assets/prototype-starter/styles.css — 2 KB
- references/component-architecture.md — 1 KB
- references/mobile-visual-system.md — 2 KB
- scripts/scaffold_mobile_app.py — 3 KB
- scripts/start_mobile_preview.py — 3 KB
- scripts/stop_mobile_preview.py — 1 KB

## SKILL.md

No se reproduce aquí. Léelo en https://github.com/rbrown101010/rileys-skills/blob/main/mobile-design/SKILL.md

## Dónde encaja

- Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual.
- Creador: [rbrown101010](https://skillsagentes.com/creators/rbrown101010.md) — 0 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Docimations](https://skillsagentes.com/skills/rbrown101010/rileys-skills/docimations.md): Crea diagramas animados SVG a GIF para Google Docs: flowcharts, diagramas de proceso, líneas de tiempo, árboles de decisión y mapas de contexto listos para insertar en un Doc nativo.
- [Firebase Cli](https://skillsagentes.com/skills/rbrown101010/rileys-skills/firebase-cli.md): Trabaja con Firebase desde la terminal: repara o instala el CLI, autentica, selecciona proyectos, gestiona bases Firestore y Realtime Database, registra apps e imprime la config del SDK.
- [Mobile App](https://skillsagentes.com/skills/rbrown101010/rileys-skills/mobile-app.md): Crea, prototipa, despliega, previsualiza, firma e instala apps móviles. Cubre proyectos móviles con Vibecode CLI, prototipos de diseño local y herramientas integradas de build/firma/instalación para iOS.
- [Notion Full Control](https://skillsagentes.com/skills/rbrown101010/rileys-skills/notion-full-control.md): Acceso directo y completo a la API de Notion fuera del conector integrado: buscar páginas y bases de datos, inspeccionar esquemas, consultar filas, crear o actualizar páginas, añadir bloques y peticiones raw.
- [Chronicle](https://skillsagentes.com/skills/rbrown101010/rileys-skills/chronicle.md): Permite ver la pantalla del usuario y varias horas de historial. Debe usarse para resolver ambigüedad en una petición, o si el usuario pregunta sobre Chronicle o qué se ve en su pantalla.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)