Repolode
Enviar
freshtechbro

freshtechbro/claudedesignskills

Coleção de skills e plugins para Claude Code que ensinam Claude a usar Three.js, GSAP, React Three Fiber, Framer Motion, Babylon.js e outras ferramentas de 3D e animação para a web.

Ver no GitHub
Estrelas
1,080
Forks
185
Issues abertas
6
Último commit
há 11 meses

O que é?

Este repositório é um marketplace de plugins para Claude Code com 22 skills para desenvolvimento web moderno, com foco em gráficos 3D, animação e experiências interativas. Cada skill é uma pasta com um arquivo SKILL.md contendo instruções e padrões, além de documentos de referência, scripts auxiliares e templates que Claude carrega somente quando uma tarefa exige.

As skills abrangem bibliotecas como Three.js, React Three Fiber, Babylon.js, PlayCanvas, A-Frame, PixiJS, GSAP ScrollTrigger, Framer Motion, React Spring, Anime.js, Lottie e Rive, além de ferramentas de criação 3D como Blender, Spline e Substance 3D. Elas são organizadas em cinco bundles instaláveis, e também é possível adicionar plugins individuais com um único comando no Claude Code.

As skills também podem ser enviadas como arquivos zip para claude.ai ou copiadas para o diretório .claude/skills de um projeto local.

Recursos principais

  • 01Abrange Three.js, React Three Fiber, Babylon.js e PlayCanvas para criar cenas 3D.
  • 02Inclui GSAP ScrollTrigger, Framer Motion, Anime.js e Lottie para animações.
  • 03Pode ser instalado como plugins individuais ou em cinco bundles por categoria no Claude Code.
  • 04Cada skill reúne instruções em SKILL.md, documentos de referência e scripts auxiliares.
  • 05As skills podem ser enviadas para claude.ai ou copiadas para um projeto local.

Casos de uso

  • Pedir a Claude para criar uma cena Three.js com materiais PBR ou um componente React Three Fiber.
  • Adicionar animações controladas pela rolagem com GSAP ou transições com Framer Motion a uma página web.
  • Escolher entre engines 3D ou bibliotecas de animação com a ajuda de Claude.
  • Gerar código inicial para experiências interativas com WebGL ou WebXR.

Início rápido

  1. 1

    Adicione o marketplace ao Claude Code

    /plugin marketplace add freshtechbro/claudedesignskills
  2. 2

    Instale um plugin individual

    /plugin install threejs-webgl
  3. 3

    Ou instale um pacote completo

    /plugin install core-3d-animation

Antes de usar

  • Skills são pacotes de instruções para o Claude Code, não um software independente; portanto, não há nada para executar diretamente.
  • Os scripts do gerador exigem Python 3 e a configuração indicada pelo projeto, que usa somente a biblioteca padrão.

Tópicos

#claude-code#threejs#webgl#animation#gsap#react-three-fiber#3d-graphics#web-development

Perguntas frequentes

O que é claudedesignskills?
Coleção de skills e plugins para Claude Code que ensinam Claude a usar Three.js, GSAP, React Three Fiber, Framer Motion, Babylon.js e outras ferramentas de 3D e animação para a web. Este repositório é um marketplace de plugins para Claude Code com 22 skills para desenvolvimento web moderno, com foco em gráficos 3D, animação e experiências interativas. Cada skill é uma pasta com um arquivo SKILL.md contendo instruções e padrões, além de documentos de referência, scripts auxiliares e templates que Claude carrega somente quando uma tarefa exige.
claudedesignskills é gratuito? Qual é a licença?
claudedesignskills é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
claudedesignskills ainda é mantido?
Sem commits há mais de 6 meses. O último commit de claudedesignskills foi em 20 de nov. de 2025.
Para que posso usar claudedesignskills?
Pedir a Claude para criar uma cena Three.js com materiais PBR ou um componente React Three Fiber. Adicionar animações controladas pela rolagem com GSAP ou transições com Framer Motion a uma página web. Escolher entre engines 3D ou bibliotecas de animação com a ajuda de Claude. Gerar código inicial para experiências interativas com WebGL ou WebXR.
Como instalar claudedesignskills?
Adicione o marketplace ao Claude Code: /plugin marketplace add freshtechbro/claudedesignskills Instale um plugin individual: /plugin install threejs-webgl Ou instale um pacote completo: /plugin install core-3d-animation
Onde consigo claudedesignskills?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/freshtechbro/claudedesignskills

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados