Skills Agentes

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.

Estrellas
4

en todo el repo

Actividad
42

0–100, la ruta de este skill

Actualizado
hace 3 meses

último commit aquí

Commits
0

últimos 90 días

Contexto
1.1k tok

101 tok en reposo

Paquete
14 archivos

55 KB

Instalar

Funciona con cualquier agente que lea SKILL.md

npx -y skills add rbrown101010/rileys-skills --skill mobile-design --agent claude-code

Se instala solo en este repositorio.

Este skill makes network requests, reads environment config.

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

Úsalo cuando

  • 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

No lo uses cuando

    Qué lo activa

    Di cualquiera de estas frases y el agente debería cargar este skill.

    • 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

    Archivos

    14 archivos en el paquete. Solo se lee SKILL.md al activarse — las referencias se cargan si el skill decide que las necesita.

    Antes de instalar

    Necesita Python 3 para ejecutar los scripts de scaffold y previsualización.

    Necesita en el PATH:python3

    Variables de entorno:CODEX_HOMEMOBILE_DESIGN_SKILL

    Detalles

    Categoría
    Diseño y UI
    Licencia
    No especificada
    Recursos incluidos
    scripts en python + referencias
    Código fuente
    Ver SKILL.md

    Más de rbrown101010/rileys-skills

    Este repo incluye 31 skills. Si instalas uno, normalmente ya tienes los demás.

    Encuentra oportunidades de patrocinio, promoción pagada y colaboraciones de marca en el Gmail de Riley; investiga cada marca, deduplica y prioriza los leads, y los exporta como tabla, documento u hoja de cálculo.

    Costo de contexto al activarse
    1.6k tok
    Tamaño del paquete
    2 archivos
    Última actualización
    hace 3 meses
    marketing

    Usa la API GraphQL de Buffer para consultar cuentas, organizaciones, canales, colas, publicaciones y límites diarios, y para crear Ideas, borradores, posts en cola o programados en Buffer.

    Costo de contexto al activarse
    1.1k tok
    Tamaño del paquete
    4 archivos
    Última actualización
    hace 3 meses
    redes sociales

    Compila, firma e instala apps iOS en dispositivos reales usando el servicio de firma de Vibecode. Para compilar desde el código fuente, firmar, instalar en un iPhone, registrar un dispositivo o configurar Apple Developer.

    Costo de contexto al activarse
    3.9k tok
    Tamaño del paquete
    19 archivos
    Última actualización
    hace 3 meses
    herramientas desarrollo

    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.

    Costo de contexto al activarse
    1.5k tok
    Tamaño del paquete
    1 archivo
    Última actualización
    hace 3 meses
    productividad

    Para leer, crear o editar documentos `.docx`, sobre todo cuando importa la fidelidad del formato o el layout; usa `python-docx` junto con `scripts/render_docx.py` para revisiones visuales.

    Costo de contexto al activarse
    747 tok
    Tamaño del paquete
    6 archivos
    Última actualización
    hace 3 meses
    documentos

    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.

    Costo de contexto al activarse
    867 tok
    Tamaño del paquete
    4 archivos
    Última actualización
    hace 3 meses
    documentos

    Skills relacionados

    Crea arte algorítmico con p5.js, aleatoriedad con semilla y exploración interactiva de parámetros. Úsalo cuando pidan arte por código, arte generativo, flow fields o sistemas de partículas.

    Costo de contexto al activarse
    4.9k tok
    Tamaño del paquete
    4 archivos
    Última actualización
    hace 4 meses
    Oficialdiseno ui

    Aplica los colores y la tipografía oficiales de la marca Anthropic a cualquier artefacto que pueda beneficiarse de su look-and-feel. Úsalo cuando apliquen colores de marca o estándares de diseño.

    Costo de contexto al activarse
    559 tok
    Tamaño del paquete
    2 archivos
    Última actualización
    hace 4 meses
    Oficialdiseno ui

    Crea arte visual en documentos .png y .pdf partiendo de una filosofía de diseño. Úsalo cuando pidan un póster, una pieza de arte, un diseño u otra pieza estática.

    Costo de contexto al activarse
    3k tok
    Tamaño del paquete
    83 archivos
    Última actualización
    hace 4 meses
    Oficialdiseno ui