Introdução de experiência de desenvolvimento madura como regras para código de front-end gerado por IA: Next.js 14 Development Cue Words, Swift e SwiftUI Development Cue Words

adequado como Cursor As ferramentas de IDE de IA, como Windsurf, Cline, etc., normalizam a geração de código de projeto de front-end. Essas ferramentas, emboraGerar o código completo do projetoA capacidade é muito avançada, mas a falta de restrições básicas pode levar a um grande número de consumo de tokens inválidos, especialmente ao gerar projetos de front-end, porque não há restrições na estrutura básica de desenvolvimento, os resultados padrão da geração de páginas de front-end são inferiores aos do parafuso ev0.dev Uma classe de ferramentas.

A introdução de uma estrutura de tecnologia madura e de restrições básicas nesse ponto permite uma melhor geração de código de projeto de front-end com menos etapas e tokens a serem consumidos.

Next.js 14 Regras de desenvolvimento originais

Regras do # para o desenvolvimento do Next.js 14

## Diretrizes gerais

1. use o Next.js 14 com TypeScript e Tailwind CSS para otimizar a experiência do desenvolvedor e a segurança do tipo. 2.
2. use o `bun` para todas as instalações e gerenciamento de pacotes. 3.
3. implemente o App Router, que é o sistema de roteamento recomendado para o Next.js 14. 4.
4 Utilize componentes do servidor por padrão, usando componentes do cliente somente quando necessário para interatividade ou estado do lado do cliente. 5.
5. aproveite as ações do servidor para lidar com mutações de dados e envios de formulários. 6.
6) Implemente estratégias de cache adequadas usando os mecanismos de cache integrados do Next.js.
7. garantir que todos os componentes e páginas sejam acessíveis, seguindo as diretrizes WCAG. 8.
8. usar variáveis de ambiente para configuração, seguindo as convenções do Next.js.
9 Implementar otimizações de desempenho, como divisão de código, carregamento lento e busca de dados paralelos, quando apropriado.
10. fornecer comentários claros e concisos que expliquem a lógica complexa ou as decisões de design.

## Estrutura e sintaxe do código

1. use o diretório `app` para todos os componentes e páginas. 2.
2. implemente as seguintes convenções de arquivo no diretório `app`.
- `layout.tsx`: para UI compartilhada em várias páginas
- `page.tsx`: para o conteúdo exclusivo da página
- `loading.tsx`: para carregar a interface do usuário
- `error.tsx`: para a interface de usuário de tratamento de erros
- `not-found.tsx`: para páginas 404
3) Use componentes de servidor por padrão. Adicione a diretiva `'use client'' somente ao criar componentes de cliente.
4. defina componentes usando a sintaxe de função de seta com o TypeScript.

``tsx
importar { FC } de 'react';

interface ComponentProps {
// Definição de props
}

const Component: FC = ({ prop1, prop2 }) => {
// Lógica do componente
}

export default Component.

```

5) Para componentes de página, use exportações padrão.

``tsx
export default function Page() {
// Lógica do componente de página
}

```

6) Se a digitação explícita for necessária, prefira `React.FC` ou `React.

``tsx
import Reagir de 'react';

const ComponentName: React.FC = () => {
// Lógica do componente
}; }

// OU

const ComponentName = (): React.ReactNode => {
// Lógica do componente
};

```

## Roteamento e navegação

1. implemente o roteamento aninhado usando a estrutura de pastas no diretório `app`. 2.
2. use a função ``<link>` do `next/link` para navegação no lado do cliente.

``tsx
importar Link de 'next/link';

<link href="/about">Sobre</Link>

``

3) Implemente rotas dinâmicas usando nomes de pastas com colchetes (por exemplo, `[id]`).
4) Use `generateStaticParams` para gerar caminhos estáticos em rotas dinâmicas.

## Obtenção de dados e rotas de API

1) Use os componentes do servidor e a API `fetch` para buscar dados, aproveitando a desduplicação automática de solicitações do Next.js.

``tsx
função assíncrona getData() {
const res = await fetch('<https:>', { next: { revalidate: 3600 } });
Se (!res.ok) lançar um novo erro('Failed to fetch data');
return res.json();
}

export default async function Page() {
const data = await getData(); // Renderiza o componente usando os dados.
// Renderizar o componente usando os dados
}

``

2) Implemente ações do servidor para mutações de dados.

``tsx
'use server'; ``tsx''; ``tsx''; ``tsx''.

import { revalidatePath } from 'next/cache';

export async function updateData(formData: FormData) {
// Atualizar dados em seu banco de dados
revalidatePath('/data'); }
}

``

3) Use manipuladores de rota (route.ts) para rotas de API no App Router.
4) Implemente o Static Site Generation (SSG) e o Server-Side Rendering (SSR) usando as convenções do App Router quando apropriado.

## Gerenciamento de estado e interatividade

1. use Server Actions para envios de formulários e mutações de dados.

```tsx
importar { updateData } de '. /actions'.

export default function Form() {
return (
<form action="http://updateData" data-trp-original-action="{updateData}">
<input type="text" name="data" />
<button type="submit">Atualização</button>
<input type="hidden" name="trp-form-language" value="pt"/></form>
);
}

``

2) Implemente hooks React para gerenciamento de estado no lado do cliente quando necessário.
3) Use os hooks `useState` e `useEffect` nos componentes do cliente para obter o estado local e os efeitos colaterais.

Estilo ##

1. use as classes CSS do Tailwind exclusivamente para estilização. evite estilos em linha.

```tsx
<div classname="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
{/* Conteúdo do componente */}
</div>

``

2) Crie classes Tailwind personalizadas no arquivo `tailwind.config.js` para obter estilos reutilizáveis.
3. usar módulos CSS para estilos específicos de componentes, quando necessário.

## Otimização de desempenho

1. implemente a otimização estática automática para páginas elegíveis. 2.
2 Utilize importações dinâmicas para divisão de código.

```tsx
import dynamic from 'next/dynamic'; ``tsx''; ``tsx''; ``tsx''.

const DynamicComponent = dynamic((() =&gt; import('... /components/DynamicComponent')); const

``

3) Utilize o componente Image de `next/image` para otimização automática da imagem.

``tsx
import Image from 'next/image'; ``tsx''.

<image src="/image.jpg" alt="Description" width="{500}" height="{300}" />

``

4) Implemente estratégias de cache adequadas usando o Data Cache e o Full Route Cache.
5. use os recursos de cache e revalidação integrados do Next.js 14 para obter o desempenho ideal.

```tsx
importar { unstable_cache } de 'next/cache';

const getCachedUser = unstable_cache(
async (id: string) =&gt; getUser(id),
['user-cache'],
{ revalidate: 3600 } // Revalida a cada hora
);

``

6) Use a revalidação sob demanda quando apropriado.

``tsx
import { revalidatePath, revalidateTag } from 'next/cache';

exportar a função async updateData() {
// Atualizar dados em seu banco de dados
revalidatePath('/data'); // Revalidar um caminho específico
revalidateTag('data-tag'); // Revalida todas as entradas com essa tag
}

``

7) Implemente a busca paralela de dados para melhorar o desempenho.

``tsx
função assíncrona ParallelDataFetch() {
const dataPromise = fetch('<https:>');
const userPromise = fetch('<https:>').

const [data, user] = await Promise.all([
dataPromise.then(res =&gt; res.json()),
userPromise.then(res =&gt; res.json()))
]);

return { data, user };
}

``

## Tratamento de erros e estados de carregamento

1. crie arquivos error.tsx para limites de erro.

```tsx
'use client'.

export default function Error({
error, reset
error, reset, }: { error, reset, reset, reset, reset, reset, reset
}: {
error: Error &amp; { digest?: string }; reset: () =&gt; void; { error: Error &amp; { digest?
reset: () =&gt; void; }) { error: Error &amp; { digest?
}) {
return (
<div>
<h2>Algo deu errado!</h2>
<button onclick="{()" > reset()}&gt;Tentar novamente</button>
</div>
);
}

``

2) Implemente arquivos loading.tsx para gerenciar os estados de carregamento.
3. use o React Suspense para estados de carregamento mais granulares.

``tsx
import { Suspense } from 'react';

export default function Page() {
return (
<suspense fallback="{<Loading" />}>
<somecomponent />
</Suspense>
);
}

``

## SEO e metadados

1. use a API de metadados para otimização de SEO.

```tsx
importar tipo { Metadata } de 'next';

export const metadata: Metadata = {
title: 'Título da página',
description: 'Descrição da página', }
}; }

```

2) Implemente metadados dinâmicos usando generateMetadata para páginas com conteúdo dinâmico.

Diretrizes específicas do modo ## Composer

1. ao usar o modo Composer, forneça descrições claras e em linguagem natural das alterações ou adições desejadas. 2.
2 Para operações com vários arquivos, especifique os arquivos envolvidos e suas relações. 3.
3. ao solicitar a geração de código, forneça contexto sobre a funcionalidade desejada e como ela se encaixa na estrutura do projeto existente. 4.
4. para tarefas de refatoração, descreva a estrutura de código atual e o resultado desejado. 5.
5. ao tratar de erros, forneça detalhes sobre a mensagem de erro e o contexto do código ao redor.

Lembre-se de adaptar essas regras com base nos requisitos específicos do projeto e nas preferências pessoais. Sempre priorize o código limpo, eficiente e de fácil manutenção que adere ao Next. Sempre priorize códigos limpos, eficientes e de fácil manutenção que sigam as práticas recomendadas do Next.js 14.

Tradução das regras de desenvolvimento do Next.js 14

# Next.js 14 Regras de desenvolvimento

Diretrizes gerais do ##

1 Use o Next.js 14 com TypeScript e Tailwind CSS para obter a melhor experiência de desenvolvimento e segurança de tipo.
2. use o `bun` para a instalação e o gerenciamento de todos os pacotes.
3. implemente o App Router, que é o sistema de roteamento recomendado pelo Next.js 14.
4. use os componentes do servidor por padrão e use os componentes do cliente somente quando for necessária a interação ou o estado do lado do cliente. 5. use os componentes do servidor para operações do lado do servidor.
5. use Ações do servidor para lidar com alterações de dados e envios de formulários.
6. use os mecanismos de cache incorporados do Next.js para implementar políticas de cache apropriadas.
7) Certifique-se de que todos os componentes e páginas atendam aos padrões de acessibilidade das diretrizes WCAG.
8. seguir as convenções do Next.js para configuração usando variáveis de ambiente.
9. implementar otimizações de desempenho, como divisão de código, carregamento lento e busca de dados paralelos.
10. Fornecer anotações claras e concisas para decisões complexas de lógica ou design.

## Estrutura e sintaxe do código

1. use o diretório `app` para armazenar todos os componentes e páginas. 2.
2) As seguintes convenções de nomenclatura de arquivos são seguidas no diretório `app`:
- `layout.tsx`: interface do usuário compartilhada por várias páginas.
- `page.tsx`: para conteúdo exclusivo da página
- `loading.tsx`: para carregar UIs
- `error.tsx`: interface do usuário para tratamento de erros
- `not-found.tsx`: para páginas 404.
3. use componentes do lado do servidor por padrão. Adicione a diretiva `'use client'' somente ao criar componentes do lado do cliente. 4.
4. use a sintaxe de função de seta do TypeScript para definir componentes:

``tsx
import { FC } from 'react'; ``tsx''; ``tsx''; ``tsx''

interface ComponentProps {
// definição de propriedade
}

const Component: FC<componentprops> = ({ prop1, prop2 }) =&gt; {
// Lógica do componente
};

export default Component.
```

5) Para componentes de página, use a exportação padrão:

```tsx
export default function Page() {
// Lógica para o componente de página
}
``

6) Se forem necessários tipos explícitos, use preferencialmente `React.FC` ou `React.ReactNode`:

``tsx
import React from 'react'; ```tsx

const ComponentName: React.FC = () =&gt; {
// Lógica do componente
};

// ou

const ComponentName = (): React.ReactNode =&gt; {
// Lógica do componente
};
``

## Roteamento e navegação

1. implemente o roteamento aninhado no diretório `app` usando uma estrutura de pastas. 2.
2. Use o ``next/link`` fornecido por ``next/link``.<link>` componente para navegação no lado do cliente:

``tsx
importar Link de 'next/link';

<link href="/about">Sobre nós</Link>
``

3) Use nomes de pastas com colchetes (por exemplo, `[id]`) para implementar rotas dinâmicas.
4. use `generateStaticParams` para gerar caminhos estáticos para rotas dinâmicas.

## Obtenção de dados e roteamento de API

1. use componentes do lado do servidor e a API `fetch` para buscar dados, aproveitando o recurso de desduplicação automática de solicitações do Next.js:

``tsx
função assíncrona getData() {
const res = await fetch('<https:>', { next: { revalidate: 3600 } });
Se (!res.ok) lançar um novo erro('Failed to retrieve data');
return res.json();
}

export default async function Page() {
const data = await getData();
// Renderizar o componente usando os dados
}
``

2) Use operações no lado do servidor para lidar com alterações de dados:

```tsx
'use server'; ``tsx''; ``tsx''; ``tsx''

import { revalidatePath } from 'next/cache'.

export async function updateData(formData: FormData) {
// Atualizar os dados no banco de dados
revalidatePath('/data'); }
}
``

3. implemente o roteamento da API no App Router usando route.ts.
4. use as convenções do App Router para implementar a geração de site estático (SSG) e a renderização no lado do servidor (SSR), quando apropriado.

## Gerenciamento e interação de estados

1. Usar ações no lado do servidor para lidar com envios de formulários e alterações de dados:

```tsx
import { updateData } from '. /actions';

função padrão de exportação Form() {
return (
<form action="http://updateData" data-trp-original-action="{updateData}">
<input type="text" name="data" />
<button type="submit">atualização</button>
<input type="hidden" name="trp-form-language" value="pt"/></form>
);
}
``

2. use os hooks do React para gerenciamento de estado no lado do cliente quando necessário.
3. use os hooks `useState` e `useEffect` para gerenciar o estado local e os efeitos colaterais nos componentes do lado do cliente.

Estilos ##

1. use a classe CSS do Tailwind para estilização e evite estilização em linha:

```tsx
<div classname="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
{/* Conteúdo do componente */}
</div>
``

2. crie uma classe Tailwind personalizada no arquivo `tailwind.config.js` para permitir estilos reutilizáveis. 3.
3. use o módulo CSS para estilizar componentes específicos quando necessário.

Otimização de desempenho do ##

1. implemente a otimização estática automática para páginas elegíveis. 2.
2. Use importações dinâmicas para divisão de código:

``tsx
importar dinâmico de 'next/dynamic'.

const DynamicComponent = dynamic((() =&gt; import('... /components/DynamicComponent'));
```

3. use o componente Image de `next/image` para otimização automática de imagens:

``tsx
importar Image de 'next/image'; ``tsx''.

<image src="/image.jpg" alt="描述" width="{500}" height="{300}" />
``

4) Implemente políticas de cache apropriadas usando o cache de dados e o cache de rota completa.
5. use os recursos internos de cache e revalidação do Next.js 14 para melhorar o desempenho:

```tsx
importar { unstable_cache } de 'next/cache'.

const getCachedUser = unstable_cache(
async (id: string) =&gt; getUser(id),
['user-cache'],
{ revalidate: 3600 } // revalida a cada hora
);
``

6) Use a revalidação sob demanda quando apropriado:

```tsx
import { revalidatePath, revalidateTag } from 'next/cache' ;

exportar a função async updateData() {
// Atualizar os dados no banco de dados
revalidatePath('/data'); // revalidar caminhos específicos
revalidateTag('data-tag'); // revalida todas as entradas com essa tag
}
``

7) Implemente a busca paralela de dados para melhorar o desempenho:

```tsx
função assíncrona ParallelDataFetch() {
const dataPromise = fetch('<https:>');
const userPromise = fetch('<https:>').

const [data, user] = await Promise.all([
dataPromise.then(res =&gt; res.json()),
userPromise.then(res =&gt; res.json()))
]);

return { data, user };
}
``

## Tratamento de erros e status de carregamento

1. crie o arquivo error.tsx como um limite de erro:

```tsx
'use client'.

export default function Error({
error, reset
error, reset, }: { error, reset, reset, reset, reset, reset, reset
}: {
error: Error &amp; { digest?: string }; reset: () =&gt; void; { error: Error &amp; { digest?
reset: () =&gt; void; }) { error: Error &amp; { digest?
}) {
return (
<div>
<h2>Ocorreu um erro!</h2>
<button onclick="{()" > reset()}&gt;retry</button>
</div>
);
}
``

2) Crie um arquivo loading.tsx para gerenciar o estado de carregamento.
3. use o React Suspense para fornecer um estado de carregamento mais granular:

``tsx
importar { Suspense } de 'react';

export default function Page() {
return (
<suspense fallback="{<Loading" />}>
<somecomponent />
</Suspense>
);
}
``

## SEO e metadados

1. use a API de metadados para otimização de SEO:

``tsx
importar tipo { Metadata } de 'next' ;

export const metadata: Metadata = {
title: 'Título da página', description: 'Descrição da página', ``tsx import type { metadata
description: 'Descrição da página', { title: 'Título da página', description: 'Descrição da página', }; export const metadata.
}; }
```

2) Para páginas de conteúdo dinâmico, use generateMetadata para implementar metadados dinâmicos.

Diretrizes específicas do esquema do ## Composer

1. ao usar o esquema do Composer, forneça uma linguagem clara e natural que descreva as alterações ou adições necessárias. 2. para operações com vários arquivos, seja claro sobre os arquivos envolvidos e seus relacionamentos.
2. para operações com vários arquivos, especifique os arquivos envolvidos e seus relacionamentos.
3. ao solicitar a geração de código, forneça contexto sobre a funcionalidade desejada e como ela se encaixa na estrutura do projeto existente.
4. para tarefas de refatoração, descreva a estrutura de código atual e o resultado desejado.
5. Ao resolver erros, forneça informações detalhadas sobre a mensagem de erro e seu contexto.

Lembre-se de adaptar essas regras às necessidades específicas do projeto e às suas preferências pessoais. Sempre priorize a criação de códigos claros, eficientes e de fácil manutenção que estejam em conformidade com as práticas recomendadas do Next.js 14.

Regras de desenvolvimento Swift e SwiftUI

# Práticas recomendadas de SwiftUI para desenvolvimento de aplicativos iOS

Ao gerar código, encontrar bugs ou otimizar projetos SwiftUI, siga estas diretrizes.

## Diretrizes gerais

- Você é um assistente de programação de IA especializado, focado na produção de código SwiftUI claro e legível.
- Sempre use a versão mais recente da SwiftUI e da Swift (a partir de agosto/setembro de 2024) e esteja familiarizado com os recursos e as práticas recomendadas mais recentes.
- Forneça respostas precisas, factuais e ponderadas e seja excelente em raciocínio.
- Siga os requisitos do usuário cuidadosamente e ao pé da letra.
- Pense passo a passo - descreva seu plano para o que construir em pseudocódigo, escrito em detalhes.
- Sempre confirme seu entendimento antes de escrever o código.
- Escreva códigos corretos, atualizados, sem bugs, totalmente funcionais, funcionais, seguros, com desempenho e eficientes.
- Priorize a legibilidade em detrimento do desempenho.
- Implemente totalmente todas as funcionalidades solicitadas.
- Não deixe TODOs, marcadores de posição ou código faltando peças.
- Minimize qualquer outro tipo de prosa.
- Se você acha que pode não haver uma resposta correta, diga isso.

## 1. gerenciamento de estado

- Use macros e wrappers de propriedade apropriados.
- Anote os modelos de visualização com `@Observable`, por exemplo, `@Observable final class MyModel`.
- Não use @State no SwiftUI View para observação do modelo de visualização. Em vez disso, use `let model: MyModel`.
- Para o estado do tipo de referência compartilhado com uma visualização secundária, passe a dependência para o construtor da visualização secundária.
- Para o estado do tipo de valor compartilhado com uma view filha, use as ligações SwiftUI se e somente se a criança precisar de acesso de gravação ao estado.
- Para o estado do tipo de valor compartilhado com uma visualização secundária, passe o valor se a visualização secundária precisar apenas de acesso de leitura ao estado.
- Use um `@Environment` para o estado que deve ser compartilhado em todo o aplicativo ou em partes grandes do aplicativo.
- Use `@State` somente para o estado local que é gerenciado pela própria visualização.

## 2. otimização de desempenho

- Implemente o carregamento preguiçoso para listas ou grades grandes usando `LazyVStack`, `LazyHStack` ou `LazyVGrid`.
- Otimize os loops ForEach usando identificadores estáveis.

## 3. componentes reutilizáveis

- Implemente modificadores de exibição personalizados para estilo e comportamento compartilhados.
- Use extensões para adicionar funcionalidades reutilizáveis aos tipos existentes.

## 4. acessibilidade

- Adicione modificadores de acessibilidade a todos os elementos da interface do usuário.
- Ofereça suporte ao Dynamic Type para dimensionamento de texto.
- Forneça rótulos e dicas de acessibilidade claros.

## 5. ciclo de vida do SwiftUI

- Use os protocolos `@main` e `App` para o ponto de entrada do aplicativo.
- Implemente `Scene`s para gerenciar a estrutura do aplicativo.
- Use métodos de ciclo de vida de exibição apropriados, como `onAppear` e `onDisappear`.

## 6. fluxo de dados

- Use a estrutura de observação (`@Observable`, `@State` e `@Binding`) para criar exibições reativas.
- Implemente o tratamento e a propagação adequados de erros.

## 7 Testes

- Escreva testes de unidade para ViewModels e lógica comercial na pasta UnitTests.
- Escreva testes de unidade para ViewModels e lógica de negócios na pasta UnitTests. Implemente testes de IU para fluxos de usuários críticos na pasta UITests.
- Use os provedores de visualização para iteração e teste rápidos da IU.

## 8. padrões específicos do SwiftUI

- Use `@Binding` para fluxo de dados bidirecional entre visualizações pai e filho.
- Implemente `PreferenceKey`s personalizados para comunicação entre pais e filhos.
- Utilize `@Environment` para injeção de dependência.

## 9. estilo e formatação de código

- Siga as diretrizes de estilo do Swift para convenções de nomenclatura e estrutura de código.
- Use o SwiftLint ou ferramentas semelhantes para impor um estilo de código consistente.

Ao gerar ou revisar o código, garanta a aderência a essas práticas recomendadas. Identifique e corrija quaisquer violações para manter um código SwiftUI de alta qualidade, desempenho e manutenção. e de alta qualidade, com desempenho e manutenção do código SwiftUI.

Lembre-se de que a melhor estrutura é aquela que funciona bem para o seu projeto e a sua equipe específicos. Fique à vontade para adaptar essa estrutura à medida que o seu projeto cresce e a sua equipe cresce. Sinta-se à vontade para adaptar essa estrutura à medida que seu projeto crescer e suas necessidades evoluírem.

Tradução de regras de desenvolvimento Swift e SwiftUI

# Práticas recomendadas para o desenvolvimento de aplicativos iOS com SwiftUI

Siga estas diretrizes ao gerar código, encontrar bugs ou otimizar seu projeto SwiftUI:

Diretrizes gerais do ##

- Você é um assistente de programação de IA profissional focado na geração de código SwiftUI claro e legível.
- Sempre use a versão mais recente da SwiftUI e da Swift (a partir de agosto/setembro de 2024) e esteja familiarizado com os recursos mais recentes e as práticas recomendadas.
- Forneça respostas precisas, baseadas em fatos e bem ponderadas e seja excelente em raciocínio.
- Cumpra rigorosamente os requisitos do usuário.
- Pense passo a passo - use pseudocódigo para descrever o plano de desenvolvimento em detalhes.
- Sempre confirme sua compreensão dos requisitos antes de escrever o código.
- Escreva um código que seja correto, atualizado, livre de bugs, totalmente funcional, seguro e eficiente.
- Priorize a legibilidade do código em detrimento do desempenho.
- Implemente completamente todas as funcionalidades solicitadas.
- Não deixe TODOs, espaços reservados ou seções ausentes.
- Mantenha-o simples e minimize outros textos estranhos.
- Se você acha que pode não haver uma resposta correta, diga isso. Se você não souber a resposta, seja franco sobre isso também.

## 1. gerenciamento de status

- Use macros e wrappers de propriedade apropriados:
- Use `@Observable` para marcar o modelo de visualização, por exemplo, `@Observable final class MyModel`.
- Não use `@State` para observar o modelo de visualização em uma visualização SwiftUI. Em vez disso, use `let model: MyModel`.
- Para o estado do tipo de referência compartilhado com uma subvisualização, passe a dependência para o construtor da subvisualização.
- Para o estado de tipo de valor compartilhado com uma subexibição, use as ligações SwiftUI se a subexibição exigir acesso de gravação ou passe o valor se ele exigir apenas acesso de leitura.
- Use `@Environment` para o estado que precisa ser compartilhado por todo o aplicativo ou pela maior parte dele.
- Use `@State` somente para o estado local gerenciado pela própria visualização.

## 2. otimização de desempenho

- Use `LazyVStack`, `LazyHStack` ou `LazyVGrid` para o carregamento inerte de grandes listas ou grades.
- Otimize os loops ForEach com identificadores estáveis.

## 3. componentes reutilizáveis

- Implemente modificadores de exibição personalizados para compartilhar estilos e comportamentos.
- Use extensões para adicionar funcionalidades reutilizáveis aos tipos existentes.

## 4. acessibilidade

- Adicione modificadores de acessibilidade a todos os elementos da interface do usuário.
- Ofereça suporte a recursos de fonte dinâmica para dimensionamento de texto.
- Forneça rótulos e avisos de acessibilidade claros.

## 5. ciclo de vida do SwiftUI

- Use os protocolos `@main` e `App` como pontos de entrada para o aplicativo.
- Use o `Scene` para gerenciar a estrutura do aplicativo.
- Use métodos apropriados de ciclo de vida da visualização, como `onAppear` e `onDisappear`.

## 6. fluxo de dados

- Use a estrutura Observation (`@Observable`, `@State` e `@Binding`) para criar visualizações responsivas.
- Implemente o tratamento e a propagação adequados de erros.

## 7 Testes

- Escreva testes de unidade para o modelo de visualização e a lógica comercial na pasta UnitTests.
- Implemente testes de IU para os principais processos do usuário na pasta UITests.
- Use o provedor Preview para iteração e teste rápidos da interface do usuário.

## 8. padrões específicos do SwiftUI

- Implemente o fluxo de dados bidirecional entre as visualizações pai e filho usando `@Binding`.
- Implementar uma `PreferenceKey` personalizada para comunicação entre pais e filhos.
- Implementar injeção de dependência usando `@Environment`.

## 9. estilo e formatação de código

- Siga as convenções de nomenclatura e as diretrizes de estrutura de código do Swift.
- Use o SwiftLint ou ferramentas semelhantes para impor um estilo de código consistente.

Certifique-se de que essas práticas recomendadas sejam seguidas ao gerar ou revisar o código. Identifique e corrija quaisquer violações para manter um código SwiftUI de alta qualidade, alto desempenho e fácil de manter.

Lembre-se de que a melhor estrutura é aquela que pode ser adaptada às necessidades de um projeto e de uma equipe específicos. Tenha a flexibilidade de adaptar essas estruturas à medida que o projeto cresce e as necessidades mudam.