Sites e telas (frontend)
Para criar sites, apps e sistemas com ajuda da IA. 144 skills
#1angular-developer
Ajuda seu agente a criar código Angular e a dar conselhos sobre a estrutura do projeto. É útil para iniciar novos projetos, criar partes do código ou melhorar a performance e acessibilidade.
affaan-m/ECC
#2frontend-a11y
Ajuda seu agente a tornar interfaces web acessíveis para todos. Ele garante que sites e apps funcionem bem com leitores de tela e navegação por teclado.
affaan-m/ECC
#3frontend-patterns
Faz seu agente aplicar padrões modernos no desenvolvimento frontend. Ele otimiza performance, gerencia estado e segue boas práticas em React e Next.js.
affaan-m/ECC
#4nextjs-turbopack
Orienta seu agente no uso do Next.js 16+ com Turbopack para desenvolvimento mais rápido. Ajuda a otimizar o carregamento e a depurar problemas de compilação.
affaan-m/ECC
#5nuxt4-patterns
Auxilia seu agente a criar aplicações Nuxt 4 com segurança e performance. Entende padrões para carregamento de dados e renderização no servidor.
affaan-m/ECC
#6react-patterns
Faz seu agente usar os melhores padrões para criar componentes React. Ele foca em organização, dados, formulários e acessibilidade.
affaan-m/ECC
#7react-performance
Ajuda seu agente a otimizar a velocidade de sites feitos com React e Next.js. Ele segue regras para melhorar o carregamento e o desempenho.
affaan-m/ECC
#8swiftui-patterns
Ajuda seu agente a criar interfaces de usuário modernas em Swift. Ele aplica padrões de arquitetura, gerencia o estado das telas e otimiza a performance.
affaan-m/ECC
#9vite-patterns
Ajuda seu agente a configurar e otimizar o Vite, uma ferramenta de build. Permite ajustar o processo de compilação, gerenciar dependências e melhorar o desempenho de projetos web.
affaan-m/ECC
#10vue-patterns
Faz seu agente trabalhar com padrões do Vue.js 3, incluindo a Composition API e gerenciamento de estado. É útil para criar ou revisar código em projetos Vue, Nuxt ou Pinia.
affaan-m/ECC
#11web-artifacts-builder
Ajuda seu agente a construir artefatos HTML complexos com tecnologias modernas. Ideal para interfaces com gerenciamento de estado e componentes avançados.
anthropics/skills
#12frontend-ui-engineering
Ajuda seu agente a criar interfaces de usuário bonitas e fáceis de usar. Faz com que o resultado pareça profissional e funcione bem em diferentes dispositivos.
addyosmani/agent-skills
#13export-nextjs-handoff
Faz seu agente transformar designs em código Next.js. Ele cria componentes, estilos e notas para facilitar o trabalho do desenvolvedor.
nexu-io/open-design
#14artifacts-builder
Ajuda seu agente a construir interfaces web complexas usando tecnologias modernas. Ele cria elementos interativos e visualmente atraentes para sites.
nexu-io/open-design
#15figma-code-connect-components
Conecta o design do Figma ao código. Garante que as atualizações visuais sejam refletidas automaticamente no código.
nexu-io/open-design
#16figma-implement-design
Transforma designs do Figma em código pronto para produção. Facilita a entrega de designs para o desenvolvimento.
nexu-io/open-design
#17figma-use
Ajuda seu agente a rodar scripts para interagir com o Figma. Isso permite que ele modifique e inspecione designs, trabalhe com variáveis e sistemas de design.
nexu-io/open-design
#18frontend-design
Ajuda seu agente a criar interfaces de usuário bonitas e funcionais para sites e aplicativos. Ele garante que o design seja visualmente atraente e bem organizado.
nexu-io/open-design
#19frontend-dev
Permite que seu agente crie interfaces frontend com animações e mídias geradas por IA. É ideal para páginas de destaque e sites que precisam impressionar visualmente.
nexu-io/open-design
#20frontend-skill
Ajuda seu agente a criar landing pages, sites e interfaces de aplicativos visualmente fortes. Ele segue as melhores práticas para um design de frontend de alta qualidade.
nexu-io/open-design
#21gsap-core
Permite que seu agente crie animações JavaScript usando a biblioteca GSAP. É ideal para animar elementos em sites e aplicativos, com controle sobre tempo e estilo.
nexu-io/open-design
#22gsap-frameworks
Ajuda seu agente a adicionar animações GSAP em frameworks como Vue e Svelte. Ele gerencia o ciclo de vida dos componentes para animações fluidas.
nexu-io/open-design
#23gsap-performance
Ajuda seu agente a otimizar animações GSAP. Garante que as animações fiquem fluidas e rápidas, evitando travamentos na tela.
nexu-io/open-design
#24gsap-plugins
Permite ao agente usar plugins do GSAP para funcionalidades extras. Útil para animações complexas como rolagem, arrastar elementos ou efeitos de texto.
nexu-io/open-design
#25gsap-react
Ajuda seu agente a criar animações em projetos React ou Next.js. Facilita a integração de animações GSAP com componentes React.
nexu-io/open-design
#26gsap-scrolltrigger
Permite ao agente criar animações que reagem à rolagem da página. Ideal para efeitos de parallax ou seções que se fixam na tela.
nexu-io/open-design
#27gsap-timeline
Faz seu agente organizar animações em sequência. Útil para criar coreografias de animação complexas ou controlar a ordem dos efeitos.
nexu-io/open-design
#28image-to-code
Ajuda seu agente a criar um site a partir de uma imagem. Ele analisa o design da imagem e o recria como um site funcional, focando em detalhes visuais importantes.
nexu-io/open-design
#29shadcn-ui
Ajuda a construir componentes de interface com o shadcn/ui. Facilita a criação rápida de componentes estruturados e acessíveis para sites e aplicativos.
nexu-io/open-design
#30web-clone
Recria websites existentes. Ajuda a copiar o visual e a interatividade de um site, sendo útil para aprender ou adaptar designs.
nexu-io/open-design
#31web-artifacts-builder
Ajuda seu agente a criar interfaces web complexas usando React e Tailwind. Permite construir partes de sites que podem ser compartilhadas.
nexu-io/open-design
#32artifacts-builder
Ajuda seu agente a construir interfaces de usuário complexas. Ele usa tecnologias modernas para criar páginas web interativas e ricas.
ComposioHQ/awesome-claude-skills
#33frontend
Ajuda seu agente a criar e aprimorar interfaces de usuário para a web. Útil para qualquer tarefa relacionada a design visual, layout, estilo e experiência do usuário.
code-yeongyu/oh-my-openagent
#34applicationinsights-web-ts
Ajuda seu agente a adicionar monitoramento a aplicações web. Ele rastreia o uso e possíveis erros diretamente no navegador do usuário.
sickn33/agentic-awesome-skills
#35assay
Ajuda seu agente a testar páginas da web. Ele verifica se a página funciona como esperado e encontra erros automaticamente. Útil para garantir que sites funcionem bem.
sickn33/agentic-awesome-skills
#36astro
Permite que seu agente crie sites focados em conteúdo. Ele usa uma tecnologia que carrega rápido e funciona bem em diferentes partes. Ideal para blogs e sites informativos.
sickn33/agentic-awesome-skills
#37browser-extension-reverse
Permite ao agente analisar extensões de navegador. Ele investiga como elas funcionam para encontrar informações ou falhas de segurança.
sickn33/agentic-awesome-skills
#38building-native-ui
Ajuda seu agente a criar interfaces de aplicativos bonitas e funcionais. Ele ensina sobre navegação, estilos e componentes para apps nativos.
sickn33/agentic-awesome-skills
#39cc-skill-frontend-patterns
Ajuda seu agente a criar interfaces de usuário modernas e eficientes. Faz o agente seguir as melhores práticas para garantir que o site ou aplicativo funcione bem e seja fácil de usar.
sickn33/agentic-awesome-skills
#40chrome-extension-developer
Faz seu agente criar extensões para o navegador Chrome. Ele entende como fazer scripts funcionarem e se comunicarem.
sickn33/agentic-awesome-skills
#41expo-tailwind-setup
Configura o Tailwind CSS para estilizar aplicativos Expo de forma eficiente. Ajuda o agente a criar interfaces bonitas e consistentes em diferentes plataformas.
sickn33/agentic-awesome-skills
#42fixing-accessibility
Ajuda seu agente a corrigir problemas de acessibilidade em páginas web. Ele melhora a navegação, o contraste e o uso de formulários para todos os usuários.
sickn33/agentic-awesome-skills
#43fixing-metadata
Faz seu agente ajustar informações importantes de páginas web. Ele otimiza títulos, descrições e dados estruturados para melhor visibilidade e apresentação.
sickn33/agentic-awesome-skills
#44fixing-motion-performance
Ajuda seu agente a consertar problemas de animação. Faz as animações e transições ficarem mais fluidas. Útil quando algo está travando.
sickn33/agentic-awesome-skills
#45formik-patterns
Ajuda seu agente a criar formulários com validação. É útil para garantir que os dados inseridos pelos usuários estejam corretos.
sickn33/agentic-awesome-skills
#46fp-react
Faz seu agente mostrar como usar programação funcional com React. Ajuda com estado, formulários e dados.
sickn33/agentic-awesome-skills
#47fp-ts-react
Ajuda seu agente a mostrar padrões funcionais com fp-ts em apps React. Útil para estado, formulários e dados.
sickn33/agentic-awesome-skills
#48frontend-api-integration-patterns
Ajuda seu agente a integrar o frontend com APIs. Usa padrões para lidar com erros, cancelamentos e atualizações de forma eficiente.
sickn33/agentic-awesome-skills