mobile-ios-designpor Seth Hobson

Mobile iOS Design Skill.

Um skill para Claude Code e Codex voltado ao design de apps mobile: UI nativa iOS seguindo as Human Interface Guidelines da Apple com SwiftUI.

Mobile Apps
Código de UI

Baixar OpenDesign Ver guia de uso

wshobson/agents · plugins/ui-design/skills/mobile-ios-design/SKILL.mdSKILL.md

--- name: mobile-ios-design description: Master iOS Human Interface Guidelines and SwiftUI patterns for building native iOS apps. Use when designing iOS interfaces, implementing SwiftUI views, or ensuring apps follow Apple's design principles. --- ## When to Use This Skill ## Core Concepts ## Quick Start Component ## Best Practices

Metadados iniciais e títulos de seção lidos do arquivo original em 14/09/2026 · 6.921 caracteres no total

01 O que faz

O Que a Skill mobile-ios-design Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Esta skill ensina as Human Interface Guidelines da iOS e padrões de SwiftUI para construir aplicativos iOS nativos que seguem os princípios de design da Apple. Ela aborda clareza, deferência e profundidade como princípios centrais das HIG, os sistemas de layout em pilha e grade do SwiftUI, padrões de navegação incluindo NavigationStack e TabView, integração com o sistema via SF Symbols e Dynamic Type, e design visual usando cores semânticas e materiais.

A skill aborda considerações de plataforma para iOS, iPadOS e visionOS, com foco em interfaces voltadas para toque, layouts adaptativos para diferentes tamanhos de tela, acessibilidade e suporte automático a modo claro/escuro por meio de estilização semântica.

O que ele produz

Código de view SwiftUI com layouts em pilha, padrões de navegação e integração com o sistema

Veja o exemplo de prompt ↗

Como funciona

01
Aplicar Princípios do HIG
Construa interfaces seguindo clareza (conteúdo legível, ícones precisos), deferência (a UI ajuda os usuários a entender o conteúdo sem competir com ele) e profundidade (camadas visuais transmitem hierarquia).
02
Compor com Layouts de Stack e Grid
Use VStack e HStack com parâmetros de alinhamento e espaçamento, ou LazyVGrid com colunas GridItem adaptativas ou flexíveis para estruturar as views.
03
Implementar Padrões de Navegação
Use NavigationStack com navigationDestination para navegação hierárquica, ou TabView com Tab para seções de nível superior do aplicativo.
04
Integrar Recursos do Sistema
Use SF Symbols com modos de renderização e efeitos, e fontes semânticas que respeitam o Dynamic Type em vez de tamanhos fixos.
05
Aplicar Estilização Semântica
Use cores semânticas como .primary e .secondary, que se adaptam automaticamente aos modos claro e escuro, e materiais do sistema para efeitos de desfoque.

02 Encontre o ideal para você

Quando usar a skill mobile-ios-design

Use a skill mobile-ios-design no Claude Code ou Codex quando o trabalho for design de aplicativo móvel deste tipo. Adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

Projetar interfaces de aplicativos iOS seguindo as diretrizes HIG da Apple
Construir views e layouts com SwiftUI
Implementar padrões de navegação iOS (NavigationStack, TabView, sheets)
Criando layouts adaptáveis para iPhone e iPad
Construindo interfaces iOS acessíveis

Conheça os Limites

Usando cores fixas que não se adaptam aos modos claro e escuro
Criando closures com ciclos de referência forte que causam vazamentos de memória

03 Dentro da skill

Regras que a Skill mobile-ios-design Dá ao Claude Code e ao Codex

4 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Sempre Use Cores Semânticas
Use .primary, .secondary e .background em vez de cores fixas para oferecer suporte automático aos modos claro e escuro.
Use Fontes Semânticas para Dynamic Type
Aplique fontes semânticas como .body e .headline em vez de tamanhos fixos, para que o texto se ajuste conforme as preferências do usuário.
Respeite as Safe Areas
Use safeAreaInset e evite preenchimento fixo nas bordas da tela para impedir que o conteúdo seja obscurecido.
Use LazyVStack para Listas Longas
Use LazyVStack ou LazyHStack em vez de stacks comuns para listas roláveis, evitando problemas de desempenho.

04 Coloque em prática

Instale mobile-ios-design no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicione mobile-ios-design ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

npx skills add https://github.com/wshobson/agents --skill mobile-ios-design

Formato genérico da CLI skills para plugins/ui-design/skills/mobile-ios-design/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê à Skill uma Primeira Tarefa de Design de Aplicativo Mobile

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

Starter prompt

Build a feature list screen for an iOS app using NavigationStack. Each feature should be displayed in a card with an SF Symbol icon, title, and description. The cards should use semantic colors for automatic dark mode support and include proper accessibility labels. Add a detail view that shows when tapping a feature card, and ensure the layout adapts properly for both iPhone and iPad in split view mode.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Teste em um dispositivo físico para capturar toda a experiência de haptics e desempenho

No OpenDesign importe mobile-ios-design a partir do link do SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Arquivo da skill: plugins/ui-design/skills/mobile-ios-design/SKILL.md Checksum de conteúdo registrado na verificação; commit 4236bb9
License: MIT Do LICENSE.
Estrelas do repositório: 39.635 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório wshobson/agents, que contém 18 skills neste catálogo. Não é uma classificação ou contagem de uso para mobile-ios-design.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

Quando Usar Este SkillLista cenários incluindo design de interface iOS, views SwiftUI, padrões de navegação, layouts adaptativos e acessibilidade
Conceitos CentraisAborda princípios da HIG, sistema de layout do SwiftUI, padrões de navegação, integração com o sistema e design visual
Princípios das Human Interface GuidelinesDefine os princípios de clareza, deferência e profundidade com considerações de plataforma para iOS, iPadOS e visionOS
Sistema de Layout do SwiftUIMostra layouts baseados em pilha com VStack e HStack, e layouts em grade com LazyVGrid
Padrões de NavegaçãoDemonstra NavigationStack com navigationDestination e TabView com Tab para iOS 16 e 18
Integração com o SistemaExplica SF Symbols com modos de renderização e efeitos, e Dynamic Type com fontes semânticas
Design VisualAborda cores semânticas, materiais do sistema para efeitos de desfoque e sombras para profundidade
Componente de Início RápidoFornece um exemplo completo da view FeatureCard com ícone, título, descrição e estilização
Boas PráticasLista oito regras incluindo cores semânticas, SF Symbols, Dynamic Type, acessibilidade, áreas seguras e testes
Problemas ComunsIdentifica problemas de quebra de layout, desempenho, navegação, modo escuro, acessibilidade e vazamento de memória, com soluções

A Descrição da Própria Skill

Domine as Diretrizes de Interface Humana do iOS e os padrões SwiftUI para construir apps nativos do iOS. Use ao projetar interfaces iOS, implementar views SwiftUI ou garantir que os apps sigam os princípios de design da Apple.

Descrição do front-matter do SKILL.md. O arquivo completo tem cerca de 6.921 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre o Skill mobile-ios-design

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Qual padrão de navegação devo usar para iOS 16 e versões posteriores?

Use NavigationStack com navigationDestination para navegação hierárquica. NavigationStack recebe um parâmetro path e usa navigationDestination(for:) para definir views de destino para diferentes tipos de valor. Para navegação de nível superior, use TabView com a sintaxe Tab disponível a partir do iOS 18+.

Como garantir que meu texto se ajuste às configurações de acessibilidade do usuário?

Use fontes semânticas como .body e .headline em vez de tamanhos fixos. Essas fontes respeitam o Dynamic Type e se ajustam automaticamente de acordo com as preferências do usuário. Para fontes personalizadas, use o parâmetro relativeTo para vincular a fonte a um estilo de texto semântico.

Mobile iOS Design

Execute mobile-ios-design em uma Tarefa Real de Design de Aplicativo Móvel.

Baixe OpenDesign, importe mobile-ios-design do link do SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills