> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devinenterprise.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Gerenciando componentes de front-end
> Devin pode trabalhar com bibliotecas de front-end e compartilhar elementos visuais com você durante suas sessões.
# Criando uma Story no Storybook
O Devin tem acesso a um navegador integrado e pode fazer capturas de tela de seus projetos e aplicações. Neste tutorial, estamos trabalhando com um [dashboard](https://github.com/powerhouse-inc/fusion) open source simples baseado em Next.js. O Devin vai nos ajudar a pegar alguns dos componentes já existentes na nossa aplicação e adicioná-los ao nosso ambiente do Storybook. Caso você ainda não conheça, o [Storybook](https://storybook.js.org/) é um “workshop” de frontend open source que ajuda você a visualizar, categorizar e testar seus componentes de UI em um único lugar centralizado.
#### Prompt inicial
Nosso prompt para esta [sessão](https://app.devin.ai/sessions/8426d6656a7a4b0c8cb4dccc2d83b138?ts=1729958134257) é bem simples, pois esperamos que o Devin faça por conta própria parte da pesquisa de contexto necessária sobre o Storybook e sobre o nosso próprio aplicativo.
#### Instalando e executando o Storybook
Devin começa examinando o componente Card da nossa aplicação para obter contexto e, em seguida, instala e executa o pacote Storybook em seu workspace. Uma das capacidades mais poderosas do Devin é que ele pode instalar, configurar e executar aplicações por conta própria e reagir às saídas em seu Shell integrado. Devin cria um arquivo de configuração do Storybook e então executa a aplicação. Executar o Storybook, nesse caso, gera alguns erros de compilação.
#### Depuração
Também podemos ver, no navegador do Devin, que o erro de build que encontramos ao executar o Storybook também resultou em um erro de frontend quando o Devin tentou carregar o componente Card. Quando você estiver lidando com sessões do Devin que envolvem tarefas de frontend, pode ser muito útil conseguir voltar no histórico do que o Devin “viu” em seu Browser em cada etapa do processo de desenvolvimento:
#### Implementando a story do Card
Devin agora passa a corrigir os erros para que a nossa story do componente Card seja renderizada corretamente no Storybook. Depois de algumas poucas iterações, Devin consegue gerar o build do app corretamente e nos envia uma captura de tela da saída correta do Storybook na nossa sessão. Pedir para Devin enviar capturas de tela específicas enquanto trabalha pode ajudar você a verificar o que está acontecendo e o que está sendo renderizado na interface da sua aplicação.
Quando comparamos a implementação do Storybook feita por Devin — e, em específico, a story do Card — com o que a aplicação principal possui, vemos algumas melhorias que Devin fez em relação à implementação open source. Em especial, Devin adicionou exemplos adicionais do componente Card com documentação mais detalhada e demonstrações na sua story. Ele também adicionou suporte de configuração no Storybook para temas claro/escuro.
Recomendamos que você experimente algumas tarefas voltadas para frontend com Devin, seja para ajudar sua equipe a ter um inventário melhor de componentes em uma ferramenta como o Storybook, seja para testar fluxos de UI/UX em seu navegador integrado. [Solicite acesso ao nosso plano Teams](https://cognition.com/get-started#company) hoje para experimentar por conta própria.