@the-bearded-bear/claude-craft 8.8.1 → 8.8.2

package/Dev/i18n/pt/ReactNative/commands/generate-screen.md

@@ -1,420 +1,587 @@
 ---
-description: Comando: Gerar Screen
+description: Geração de Tela React Native
+argument-hint: [arguments]
 ---
 
-# Comando: Gerar Screen
+# Geração de Tela React Native
 
-Gere uma nova screen React Native com Expo Router seguindo as melhores práticas e padrões do projeto.
+Você é um desenvolvedor React Native sênior. Você deve gerar uma tela completa com navegação, gerenciamento de estado, testes e acessibilidade.
 
----
-
-## Uso
+## Argumentos
+$ARGUMENTS
 
-```bash
-npx generate-screen <nome-da-screen> [opções]
-```
+Argumentos:
+- Nome da tela (ex.: `Profile`, `Settings`, `ProductDetail`)
+- (Opcional) Tipo: list, detail, form, dashboard
 
-**Opções:**
-- `--type`: tipo de screen (stack, tab, modal)
-- `--feature`: feature a qual pertence
-- `--with-test`: gerar arquivo de teste
-- `--with-form`: incluir componentes de formulário
+Exemplo: `/reactnative:generate-screen ProductDetail detail`
 
-**Exemplos:**
+## Modo de Planejamento
 
-```bash
-# Screen simples
-npx generate-screen UserProfile
+> **O modo de planejamento é obrigatório.** Antes de executar, o Claude ativa o modo de planejamento para analisar o código impactado, propor um plano de implementação e aguardar sua validação antes de realizar qualquer alteração.
 
-# Screen em feature específica
-npx generate-screen CreatePost --feature=posts
+## MISSÃO
 
-# Screen com teste
-npx generate-screen Settings --with-test
+### Etapa 1: Estrutura da Tela
 
-# Modal screen
-npx generate-screen ShareModal --type=modal
+```
+src/
+└── screens/
+    └── {ScreenName}/
+        ├── index.ts
+        ├── {ScreenName}Screen.tsx
+        ├── {ScreenName}Screen.types.ts
+        ├── {ScreenName}Screen.styles.ts
+        ├── {ScreenName}Screen.test.tsx
+        ├── hooks/
+        │   └── use{ScreenName}.ts
+        └── components/
+            └── {ScreenName}Header.tsx
 ```
 
----
-
-## Modo Plano
+### Etapa 2: Tipos
 
-> **O modo plano é obrigatório.** Antes de executar, Claude ativa o modo plano para analisar o código impactado, propor um plano de implementação e aguardar sua validação antes de realizar qualquer alteração.
+```typescript
+// src/screens/{ScreenName}/{ScreenName}Screen.types.ts
+import type { NativeStackScreenProps } from '@react-navigation/native-stack';
+import type { RootStackParamList } from '@/navigation/types';
+
+export type {ScreenName}ScreenProps = NativeStackScreenProps<
+  RootStackParamList,
+  '{ScreenName}'
+>;
+
+export interface {ScreenName}ScreenParams {
+  id: string;
+  title?: string;
+}
 
-## Templates Gerados
+export interface {ScreenName}Data {
+  id: string;
+  title: string;
+  description: string;
+  imageUrl?: string;
+  createdAt: string;
+  // ...outros campos
+}
 
-### 1. Screen Básica
+export interface {ScreenName}ScreenState {
+  data: {ScreenName}Data | null;
+  isLoading: boolean;
+  error: string | null;
+}
+```
 
-**app/user-profile.tsx:**
+### Etapa 3: Hook Personalizado
 
 ```typescript
-import { View, Text, StyleSheet } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+// src/screens/{ScreenName}/hooks/use{ScreenName}.ts
+import { useState, useEffect, useCallback } from 'react';
+import { useRoute } from '@react-navigation/native';
+
+import { {screenName}Service } from '@/services/{screenName}Service';
+import type { {ScreenName}Data, {ScreenName}ScreenParams } from '../{ScreenName}Screen.types';
+
+interface Use{ScreenName}Return {
+  data: {ScreenName}Data | null;
+  isLoading: boolean;
+  error: string | null;
+  refresh: () => Promise<void>;
+}
 
-export default function UserProfileScreen() {
-  return (
-    <SafeAreaView style={styles.container}>
-      <View style={styles.content}>
-        <Text style={styles.title}>User Profile</Text>
-      </View>
-    </SafeAreaView>
-  );
+export function use{ScreenName}(): Use{ScreenName}Return {
+  const route = useRoute<{ params: {ScreenName}ScreenParams }>();
+  const { id } = route.params;
+
+  const [data, setData] = useState<{ScreenName}Data | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchData = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      const result = await {screenName}Service.getById(id);
+      setData(result);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Ocorreu um erro');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [id]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const refresh = useCallback(async () => {
+    await fetchData();
+  }, [fetchData]);
+
+  return { data, isLoading, error, refresh };
 }
+```
 
-const styles = StyleSheet.create({
+### Etapa 4: Estilos
+
+```typescript
+// src/screens/{ScreenName}/{ScreenName}Screen.styles.ts
+import { StyleSheet } from 'react-native';
+import { theme } from '@/theme';
+
+export const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
+    backgroundColor: theme.colors.background,
   },
   content: {
     flex: 1,
-    padding: 16,
+    padding: theme.spacing.md,
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  errorContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: theme.spacing.lg,
+  },
+  errorText: {
+    fontSize: theme.typography.body.fontSize,
+    color: theme.colors.error,
+    textAlign: 'center',
+    marginBottom: theme.spacing.md,
+  },
+  retryButton: {
+    paddingHorizontal: theme.spacing.lg,
+    paddingVertical: theme.spacing.sm,
+    backgroundColor: theme.colors.primary,
+    borderRadius: theme.borderRadius.md,
+  },
+  retryButtonText: {
+    color: theme.colors.white,
+    fontWeight: '600',
+  },
+  headerImage: {
+    width: '100%',
+    height: 200,
+    resizeMode: 'cover',
   },
   title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    marginBottom: 16,
+    fontSize: theme.typography.h1.fontSize,
+    fontWeight: theme.typography.h1.fontWeight,
+    color: theme.colors.text,
+    marginBottom: theme.spacing.sm,
+  },
+  description: {
+    fontSize: theme.typography.body.fontSize,
+    color: theme.colors.textSecondary,
+    lineHeight: 24,
+  },
+  metadata: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: theme.spacing.md,
+  },
+  metadataText: {
+    fontSize: theme.typography.caption.fontSize,
+    color: theme.colors.textMuted,
   },
 });
 ```
 
-### 2. Screen com Data Fetching
+### Etapa 5: Componente da Tela
+
+```tsx
+// src/screens/{ScreenName}/{ScreenName}Screen.tsx
+import React, { useCallback } from 'react';
+import {
+  View,
+  Text,
+  ScrollView,
+  Image,
+  RefreshControl,
+  TouchableOpacity,
+  ActivityIndicator,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
-**app/article/[id].tsx:**
+import { use{ScreenName} } from './hooks/use{ScreenName}';
+import { styles } from './{ScreenName}Screen.styles';
+import type { {ScreenName}ScreenProps } from './{ScreenName}Screen.types';
 
-```typescript
-import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
-import { useLocalSearchParams } from 'expo-router';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { useArticle } from '@/features/articles/hooks/useArticle';
+export function {ScreenName}Screen({ navigation }: {ScreenName}ScreenProps) {
+  const { data, isLoading, error, refresh } = use{ScreenName}();
+  const [isRefreshing, setIsRefreshing] = React.useState(false);
 
-export default function ArticleScreen() {
-  const { id } = useLocalSearchParams<{ id: string }>();
-  const { data: article, isLoading, error } = useArticle(id);
+  const handleRefresh = useCallback(async () => {
+    setIsRefreshing(true);
+    await refresh();
+    setIsRefreshing(false);
+  }, [refresh]);
 
-  if (isLoading) {
+  // Estado de carregamento inicial
+  if (isLoading && !data) {
     return (
-      <View style={styles.centerContainer}>
-        <ActivityIndicator size="large" />
-      </View>
+      <SafeAreaView style={styles.container}>
+        <View
+          style={styles.loadingContainer}
+          accessibilityLabel="Carregamento em andamento"
+          accessibilityRole="progressbar"
+        >
+          <ActivityIndicator size="large" />
+        </View>
+      </SafeAreaView>
     );
   }
 
-  if (error || !article) {
+  // Estado de erro
+  if (error && !data) {
     return (
-      <View style={styles.centerContainer}>
-        <Text style={styles.errorText}>Erro ao carregar artigo</Text>
-      </View>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.errorContainer}>
+          <Text
+            style={styles.errorText}
+            accessibilityRole="alert"
+          >
+            {error}
+          </Text>
+          <TouchableOpacity
+            style={styles.retryButton}
+            onPress={refresh}
+            accessibilityLabel="Tentar novamente o carregamento"
+            accessibilityRole="button"
+          >
+            <Text style={styles.retryButtonText}>Tentar novamente</Text>
+          </TouchableOpacity>
+        </View>
+      </SafeAreaView>
     );
   }
 
+  // Estado normal com dados
   return (
-    <SafeAreaView style={styles.container}>
-      <View style={styles.content}>
-        <Text style={styles.title}>{article.title}</Text>
-        <Text style={styles.body}>{article.content}</Text>
-      </View>
+    <SafeAreaView style={styles.container} edges={['bottom']}>
+      <ScrollView
+        style={styles.content}
+        refreshControl={
+          <RefreshControl
+            refreshing={isRefreshing}
+            onRefresh={handleRefresh}
+            accessibilityLabel="Atualizar página"
+          />
+        }
+        contentContainerStyle={{ paddingBottom: 20 }}
+      >
+        {data?.imageUrl && (
+          <Image
+            source={{ uri: data.imageUrl }}
+            style={styles.headerImage}
+            accessibilityLabel={`Imagem de ${data.title}`}
+          />
+        )}
+
+        <View style={{ padding: 16 }}>
+          <Text
+            style={styles.title}
+            accessibilityRole="header"
+          >
+            {data?.title}
+          </Text>
+
+          <Text style={styles.description}>
+            {data?.description}
+          </Text>
+
+          <View style={styles.metadata}>
+            <Text style={styles.metadataText}>
+              Criado em {new Date(data?.createdAt || '').toLocaleDateString()}
+            </Text>
+          </View>
+        </View>
+      </ScrollView>
     </SafeAreaView>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-  },
-  centerContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  content: {
-    flex: 1,
-    padding: 16,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    marginBottom: 16,
-  },
-  body: {
-    fontSize: 16,
-    lineHeight: 24,
-  },
-  errorText: {
-    fontSize: 16,
-    color: '#f00',
-  },
-});
 ```
 
-### 3. Screen com Formulário
+### Etapa 6: Exportação
+
+```typescript
+// src/screens/{ScreenName}/index.ts
+export { {ScreenName}Screen } from './{ScreenName}Screen';
+export type { {ScreenName}ScreenProps, {ScreenName}ScreenParams } from './{ScreenName}Screen.types';
+```
 
-**app/create-post.tsx:**
+### Etapa 7: Navegação
 
 ```typescript
-import { View, Text, StyleSheet, ScrollView } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { router } from 'expo-router';
-import { useCreatePost } from '@/features/posts/hooks/useCreatePost';
-import { PostForm } from '@/features/posts/components/PostForm';
-import type { CreatePostDTO } from '@/features/posts/types/Post.types';
-
-export default function CreatePostScreen() {
-  const { mutate: createPost, isPending } = useCreatePost();
-
-  const handleSubmit = (data: CreatePostDTO) => {
-    createPost(data, {
-      onSuccess: (post) => {
-        router.push(`/post/${post.id}`);
-      },
-      onError: (error) => {
-        Alert.alert('Erro', 'Não foi possível criar o post');
-      },
-    });
-  };
+// src/navigation/types.ts
+export type RootStackParamList = {
+  Home: undefined;
+  {ScreenName}: { id: string; title?: string };
+  // ...outras telas
+};
+
+// src/navigation/RootNavigator.tsx
+import { {ScreenName}Screen } from '@/screens/{ScreenName}';
+
+<Stack.Screen
+  name="{ScreenName}"
+  component={{ScreenName}Screen}
+  options={({ route }) => ({
+    title: route.params?.title || '{ScreenName}',
+    headerBackTitleVisible: false,
+  })}
+/>
+```
 
-  return (
-    <SafeAreaView style={styles.container}>
-      <ScrollView style={styles.scrollView}>
-        <View style={styles.content}>
-          <Text style={styles.title}>Criar Novo Post</Text>
-          <PostForm
-            onSubmit={handleSubmit}
-            isSubmitting={isPending}
-          />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
+### Etapa 8: Testes
+
+```tsx
+// src/screens/{ScreenName}/{ScreenName}Screen.test.tsx
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+import { {ScreenName}Screen } from './{ScreenName}Screen';
+import { {screenName}Service } from '@/services/{screenName}Service';
+
+// Mock do serviço
+jest.mock('@/services/{screenName}Service');
+const mockService = {screenName}Service as jest.Mocked<typeof {screenName}Service>;
+
+const Stack = createNativeStackNavigator();
+
+function renderWithNavigation(params = { id: '123' }) {
+  return render(
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen
+          name="{ScreenName}"
+          component={{ScreenName}Screen}
+          initialParams={params}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
   );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-  },
-  scrollView: {
-    flex: 1,
-  },
-  content: {
-    padding: 16,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    marginBottom: 24,
-  },
-});
-```
+describe('{ScreenName}Screen', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
 
-### 4. Modal Screen
+  describe('Estado de carregamento', () => {
+    it('exibe indicador de carregamento inicialmente', () => {
+      mockService.getById.mockImplementation(() => new Promise(() => {}));
 
-**app/modal.tsx:**
+      renderWithNavigation();
 
-```typescript
-import { View, Text, StyleSheet, Pressable } from 'react-native';
-import { router } from 'expo-router';
-import { StatusBar } from 'expo-status-bar';
+      expect(screen.getByLabelText('Carregamento em andamento')).toBeTruthy();
+    });
+  });
 
-export default function ModalScreen() {
-  return (
-    <View style={styles.container}>
-      <StatusBar style="light" />
+  describe('Estado de sucesso', () => {
+    const mockData = {
+      id: '123',
+      title: 'Título de Teste',
+      description: 'Descrição de Teste',
+      createdAt: '2024-01-15T10:00:00Z',
+    };
 
-      <View style={styles.content}>
-        <Text style={styles.title}>Modal</Text>
+    beforeEach(() => {
+      mockService.getById.mockResolvedValue(mockData);
+    });
 
-        <Pressable
-          style={styles.closeButton}
-          onPress={() => router.back()}
-        >
-          <Text style={styles.closeButtonText}>Fechar</Text>
-        </Pressable>
-      </View>
-    </View>
-  );
-}
+    it('exibe os dados corretamente', async () => {
+      renderWithNavigation();
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  content: {
-    backgroundColor: '#fff',
-    borderRadius: 16,
-    padding: 24,
-    width: '80%',
-    maxWidth: 400,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    marginBottom: 24,
-    textAlign: 'center',
-  },
-  closeButton: {
-    backgroundColor: '#007AFF',
-    padding: 12,
-    borderRadius: 8,
-    alignItems: 'center',
-  },
-  closeButtonText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-});
-```
+      await waitFor(() => {
+        expect(screen.getByText('Título de Teste')).toBeTruthy();
+      });
 
-### 5. List Screen
+      expect(screen.getByText('Descrição de Teste')).toBeTruthy();
+    });
 
-**app/users.tsx:**
+    it('suporta pull to refresh', async () => {
+      renderWithNavigation();
 
-```typescript
-import { View, Text, StyleSheet, FlatList, ActivityIndicator } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { useUsers } from '@/features/users/hooks/useUsers';
-import { UserCard } from '@/features/users/components/UserCard';
-import type { User } from '@/features/users/types/User.types';
+      await waitFor(() => {
+        expect(screen.getByText('Título de Teste')).toBeTruthy();
+      });
 
-export default function UsersScreen() {
-  const { data: users, isLoading, error, refetch } = useUsers();
+      const scrollView = screen.getByLabelText('Atualizar página');
+      fireEvent(scrollView, 'refresh');
 
-  if (isLoading) {
-    return (
-      <View style={styles.centerContainer}>
-        <ActivityIndicator size="large" />
-      </View>
-    );
-  }
+      await waitFor(() => {
+        expect(mockService.getById).toHaveBeenCalledTimes(2);
+      });
+    });
+  });
 
-  if (error) {
-    return (
-      <View style={styles.centerContainer}>
-        <Text style={styles.errorText}>Erro ao carregar usuários</Text>
-      </View>
-    );
-  }
+  describe('Estado de erro', () => {
+    beforeEach(() => {
+      mockService.getById.mockRejectedValue(new Error('Erro de rede'));
+    });
 
-  return (
-    <SafeAreaView style={styles.container}>
-      <FlatList
-        data={users}
-        keyExtractor={(item: User) => item.id}
-        renderItem={({ item }) => <UserCard user={item} />}
-        contentContainerStyle={styles.listContent}
-        onRefresh={refetch}
-        refreshing={isLoading}
-        ListEmptyComponent={
-          <View style={styles.emptyContainer}>
-            <Text style={styles.emptyText}>Nenhum usuário encontrado</Text>
-          </View>
-        }
-      />
-    </SafeAreaView>
-  );
-}
+    it('exibe mensagem de erro', async () => {
+      renderWithNavigation();
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-  },
-  centerContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  listContent: {
-    padding: 16,
-  },
-  emptyContainer: {
-    padding: 32,
-    alignItems: 'center',
-  },
-  emptyText: {
-    fontSize: 16,
-    color: '#999',
-  },
-  errorText: {
-    fontSize: 16,
-    color: '#f00',
-  },
-});
-```
+      await waitFor(() => {
+        expect(screen.getByText('Erro de rede')).toBeTruthy();
+      });
+    });
 
----
+    it('permite tentar novamente em caso de erro', async () => {
+      renderWithNavigation();
 
-## Arquivo de Teste
+      await waitFor(() => {
+        expect(screen.getByText('Erro de rede')).toBeTruthy();
+      });
 
-**app/user-profile.test.tsx:**
+      // Agora a nova tentativa será bem-sucedida
+      mockService.getById.mockResolvedValueOnce({
+        id: '123',
+        title: 'Sucesso',
+        description: 'Agora funciona',
+        createdAt: '2024-01-15',
+      });
 
-```typescript
-import { render, screen } from '@testing-library/react-native';
-import UserProfileScreen from './user-profile';
+      fireEvent.press(screen.getByText('Tentar novamente'));
 
-describe('UserProfileScreen', () => {
-  it('should render correctly', () => {
-    render(<UserProfileScreen />);
-    expect(screen.getByText('User Profile')).toBeTruthy();
+      await waitFor(() => {
+        expect(screen.getByText('Sucesso')).toBeTruthy();
+      });
+    });
   });
 
-  it('should match snapshot', () => {
-    const tree = render(<UserProfileScreen />).toJSON();
-    expect(tree).toMatchSnapshot();
+  describe('Acessibilidade', () => {
+    it('possui roles de acessibilidade corretas', async () => {
+      mockService.getById.mockResolvedValue({
+        id: '123',
+        title: 'Teste',
+        description: 'Desc',
+        createdAt: '2024-01-15',
+      });
+
+      renderWithNavigation();
+
+      await waitFor(() => {
+        expect(screen.getByRole('header', { name: 'Teste' })).toBeTruthy();
+      });
+    });
   });
 });
 ```
 
----
+### Etapa 9: Variantes de Tela
 
-## Melhores Práticas
+#### Tela de Lista
 
-### 1. Naming
-- Arquivos: kebab-case (user-profile.tsx)
-- Componentes: PascalCase (UserProfileScreen)
-- Rotas dinâmicas: [param].tsx
+```tsx
+// Para uma tela do tipo lista
+import { FlatList } from 'react-native';
 
-### 2. Estrutura
-- SafeAreaView para gerenciar safe areas
-- ScrollView para conteúdo que pode rolar
-- FlatList para listas longas
-- StatusBar configurada apropriadamente
+export function {ScreenName}ListScreen() {
+  const { data, isLoading, refresh, loadMore, hasMore } = use{ScreenName}List();
 
-### 3. Estados
-- Loading state
-- Error state
-- Empty state
-- Success state
+  return (
+    <SafeAreaView style={styles.container}>
+      <FlatList
+        data={data}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => (
+          <{ScreenName}ListItem item={item} onPress={() => navigate(item.id)} />
+        )}
+        refreshControl={
+          <RefreshControl refreshing={isLoading} onRefresh={refresh} />
+        }
+        onEndReached={hasMore ? loadMore : undefined}
+        onEndReachedThreshold={0.5}
+        ListEmptyComponent={<EmptyState message="Nenhum item" />}
+        ListFooterComponent={hasMore ? <ActivityIndicator /> : null}
+      />
+    </SafeAreaView>
+  );
+}
+```
 
-### 4. Navegação
-- useLocalSearchParams para parâmetros de rota
-- router.push para navegação
-- router.back para voltar
+#### Tela de Formulário
 
-### 5. Tipagem
-- Todas as props tipadas
-- Parâmetros de rota tipados
-- Data fetching tipado
+```tsx
+// Para uma tela do tipo formulário
+import { useForm, Controller } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 
----
+export function {ScreenName}FormScreen() {
+  const { control, handleSubmit, formState } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: { name: '', email: '' },
+  });
 
-## Checklist
+  const onSubmit = async (data) => {
+    // ...
+  };
 
-- [ ] Screen criada na estrutura de app/
-- [ ] SafeAreaView implementada
-- [ ] Estados de loading/error tratados
-- [ ] Tipagem TypeScript completa
-- [ ] Estilos com StyleSheet.create
-- [ ] Navegação implementada
-- [ ] Teste criado
-- [ ] Documentação adicionada
+  return (
+    <KeyboardAvoidingView behavior="padding" style={styles.container}>
+      <ScrollView>
+        <Controller
+          control={control}
+          name="name"
+          render={({ field, fieldState }) => (
+            <TextInput
+              {...field}
+              onChangeText={field.onChange}
+              placeholder="Nome"
+              error={fieldState.error?.message}
+            />
+          )}
+        />
+        {/* outros campos */}
+        <Button
+          title="Salvar"
+          onPress={handleSubmit(onSubmit)}
+          loading={formState.isSubmitting}
+        />
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+```
 
----
+### Resumo
 
-**Screens bem estruturadas são a base de uma boa UX. Siga os padrões consistentemente.**
+```
+══════════════════════════════════════════════════════════════
+✅ TELA GERADA - {ScreenName}
+══════════════════════════════════════════════════════════════
+
+📁 Arquivos criados:
+- src/screens/{ScreenName}/index.ts
+- src/screens/{ScreenName}/{ScreenName}Screen.tsx
+- src/screens/{ScreenName}/{ScreenName}Screen.types.ts
+- src/screens/{ScreenName}/{ScreenName}Screen.styles.ts
+- src/screens/{ScreenName}/{ScreenName}Screen.test.tsx
+- src/screens/{ScreenName}/hooks/use{ScreenName}.ts
+
+📝 Funcionalidades:
+- TypeScript strict
+- Navegação tipada
+- Hook personalizado para lógica
+- Pull-to-refresh
+- Tratamento de estados: carregamento/erro/sucesso
+- Acessibilidade (roles, labels)
+- Testes completos
+
+🔧 Próximos passos:
+1. Adicionar a tela à navegação
+2. Criar serviço de API
+3. Personalizar estilos
+4. Executar testes: npm test {ScreenName}
+```