mobile-design
Foca em criar designs para celular que sejam fáceis de usar com o toque. Garante que os aplicativos funcionem bem em diferentes plataformas.
O que ela faz
Esta habilidade ajuda a criar aplicativos para celular pensando primeiro no usuário e nas limitações do celular. Ela garante que o design seja adequado para telas pequenas, toques e respeite as regras de cada sistema (iOS ou Android).
Quando usar
- ✓Ao iniciar o design de uma nova tela de aplicativo.
- ✓Ao avaliar se uma ideia de recurso funcionará bem em celulares.
- ✓Quando se quer evitar erros comuns de design para celular.
Exemplo do que pedir para a IA
“Avalie esta tela para um aplicativo iOS: ela tem botões grandes o suficiente para serem tocados? Funciona sem internet?”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
A IA verifica se o design considera as diferenças entre celular e computador, se os botões são fáceis de tocar e se o aplicativo funciona bem mesmo com conexão lenta ou sem internet.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add sickn33/agentic-awesome-skills --skill mobile-designOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/mobile-design/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Sistema de Design Mobile
(Mobile-First · Touch-First · Respeitoso com a Plataforma)
Filosofia: Prioridade ao toque. Consciente da bateria. Respeitoso com a plataforma. Capaz de funcionar offline. Lei Principal: Mobile NÃO é um desktop pequeno. Regra Operacional: Pense primeiro nas restrições, depois na estética.
Esta habilidade existe para prevenir o pensamento de desktop, padrões de IA e suposições inseguras ao projetar ou construir aplicativos móveis.
1. Índice de Viabilidade e Risco Mobile (IVRM)
Antes de projetar ou implementar qualquer recurso ou tela mobile, avalie a viabilidade.
Dimensões do IVRM (1–5)
| Dimensão | Pergunta |
|---|---|
| Clareza da Plataforma | A plataforma alvo (iOS / Android / ambas) está explicitamente definida? |
| Complexidade da Interação | Quão complexos são os gestos, fluxos ou navegação? |
| Risco de Performance | Isso envolve listas, animações, estado pesado ou mídia? |
| Dependência Offline | O recurso quebra ou degrada sem rede? |
| Risco de Acessibilidade | Isso impacta a acessibilidade motora, visual ou cognitiva? |
Fórmula da Pontuação
MFRI = (Platform Clarity + Accessibility Readiness)
− (Interaction Complexity + Performance Risk + Offline Dependence)
Intervalo: -10 → +10
Interpretação
| IVRM | Significado | Ação Necessária |
|---|---|---|
| 6–10 | Seguro | Prosseguir normalmente |
| 3–5 | Moderado | Adicionar validação de performance + UX |
| 0–2 | Arriscado | Simplificar interações ou arquitetura |
| < 0 | Perigoso | Redesenhar antes da implementação |
2. Pensamento Obrigatório Antes de Qualquer Trabalho
⛔ PARE: Pergunte Antes de Assumir (Obrigatório)
Se qualquer um dos itens a seguir não estiver explicitamente declarado, você DEVE perguntar antes de prosseguir:
| Aspecto | Pergunta | Por quê |
|---|---|---|
| Plataforma | iOS, Android, ou ambos? | Afeta navegação, gestos, tipografia |
| Framework | React Native, Flutter, ou nativo? | Determina performance e padrões |
| Navegação | Abas, pilha, gaveta? | Arquitetura central de UX |
| Offline | Precisa funcionar offline? | Estratégia de dados e sincronização |
| Dispositivos | Apenas celular ou tablet também? | Regras de layout e densidade |
| Público | Consumidor, corporativo, necessidades de acessibilidade? | Toque e legibilidade |
🚫 Nunca use como padrão sua stack ou padrão favorito.
3. Leitura de Referência Obrigatória (Imposta)
Universal (Sempre Leia Primeiro)
| Arquivo | Propósito | Status |
|---|---|---|
| mobile-design-thinking.md | Anti-memorização, força de contexto | 🔴 NECESSÁRIO PRIMEIRO |
| touch-psychology.md | Lei de Fitts, zonas do polegar, gestos | 🔴 NECESSÁRIO |
| mobile-performance.md | 60fps, memória, bateria | 🔴 NECESSÁRIO |
| mobile-backend.md | Sincronização offline, push, APIs | 🔴 NECESSÁRIO |
| mobile-testing.md | Testes de dispositivo e E2E | 🔴 NECESSÁRIO |
| mobile-debugging.md | Debugging nativo vs JS | 🔴 NECESSÁRIO |
Específico da Plataforma (Condicional)
| Plataforma | Arquivo |
|---|---|
| iOS | platform-ios.md |
| Android | platform-android.md |
| Multiplataforma | AMBOS acima |
❌ Se você não leu o arquivo da plataforma, não está autorizado a projetar UI.
4. Anti-Padrões de IA Mobile (Proibidos Severamente)
🚫 Pecados de Performance (Não Negociáveis)
| ❌ Nunca | Por quê | ✅ Sempre |
|---|---|---|
| ScrollView para listas longas | Explosão de memória | FlatList / FlashList / ListView.builder |
…
Perguntas frequentes
O que significa 'Mobile-First'?
Significa pensar primeiro em como o aplicativo vai funcionar e parecer em um celular, que tem tela menor e é usado de forma diferente de um computador.
Por que é importante pensar nas 'limitações'?
Celulares têm menos poder de processamento, bateria e conexões de internet variadas. Pensar nisso evita que o aplicativo fique lento ou não funcione.
O que é 'Touch-First'?
É pensar que as pessoas vão interagir com o aplicativo usando os dedos na tela, então os botões e áreas de toque precisam ser grandes e fáceis de acertar.
Detalhes
Descrição original do autor
(Mobile-First · Touch-First · Platform-Respectful)
Popularidade
- Estrelas no GitHub
- 48 mil
- Posição no ranking
- #3606
- Licença
- MIT
- Atualizada em
- 15/10/2026
Comentários
- …
Mais skills deste repositório
00-andruia-consultant
Ajuda seu agente a iniciar ou melhorar projetos de IA. Ele analisa código, sugere ferramentas e cria planos de ação em espanhol.
sickn33/agentic-awesome-skills
007
Faz seu agente realizar auditorias de segurança e modelagem de ameaças. É útil para proteger projetos contra ataques e vulnerabilidades.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Ajuda seu agente a criar ou melhorar ferramentas de IA. Ele define como as ferramentas funcionam, escreve a documentação e valida a estrutura.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Faz seu agente criar um resumo sobre um setor específico. É útil para entender o contexto, regras, padrões de uso e riscos de um projeto, usando fontes confiáveis.
sickn33/agentic-awesome-skills
Skills parecidas
accessibility
Ajuda seu agente a criar interfaces que todos possam usar. Garante que sites e aplicativos funcionem bem para pessoas com deficiência, como cegos ou com mobilidade reduzida.
affaan-m/ECC
design-system
Ajuda seu agente a criar um sistema de design a partir de um código existente. Ele extrai informações visuais e verifica a consistência, gerando um relatório e uma prévia interativa.
affaan-m/ECC
liquid-glass-design
Ajuda seu agente a criar interfaces de usuário com efeito 'Liquid Glass' para iOS. Permite adicionar efeitos visuais dinâmicos e interativos em SwiftUI e UIKit.
affaan-m/ECC