Prototypes

O ui-demo ajuda você a gravar vídeos de demonstração de web apps com acabamento profissional usando Playwright, movimento de cursor visível e ritmo natural. Use o skill ui-demo para walkthroughs, vídeos de onboarding, tours de funcionalidades e gravações no estilo tutorial. Siga o fluxo descobrir, ensaiar e depois gravar para obter resultados confiáveis, especialmente em protótipos e interfaces que mudam rápido.

O frontend-slides ajuda você a criar apresentações em HTML ricas em animação do zero ou convertendo arquivos PowerPoint. Use o skill frontend-slides para palestras, pitch decks, workshops, demos internas e frontend-slides para UI Design quando quiser exploração visual, saída no navegador sem dependências e slides que caibam em uma única viewport.

algorithmic-art ajuda a criar arte generativa original em p5.js com um fluxo em duas etapas: definir uma filosofia algorítmica e depois gerar arquivos .html e .js executáveis com aleatoriedade controlada por seed, parâmetros ajustáveis e visualizador interativo.

ux-designer é uma skill estruturada de design de UX para pesquisa, acessibilidade, arquitetura da informação, fluxos de interação, orientação para wireframes e UX writing. Ela ajuda equipes a transformar ideias iniciais de produto em decisões de design mais claras e baseadas em critérios, usando `AGENTS.md` e arquivos de regras focados.

A skill prototype ajuda você a criar código descartável que responde a uma pergunta concreta antes de investir em uma implementação de verdade. Use-a para testar lógica, transições de estado, formato de dados ou a direção de uma interface com um protótipo executável que siga as convenções do repositório hospedeiro. É ideal quando você precisa de um guia rápido de prototype, e não de uma funcionalidade final.

Use o figma para extrair contexto de design, capturas de tela, variáveis e assets do servidor MCP do Figma e, em seguida, converter nós do Figma em decisões de UI prontas para implementação. Este skill de figma é ideal quando você tem uma URL do Figma ou um node ID e precisa de uso preciso do figma para trabalho de design para código, configuração ou troubleshooting.

brandkit é uma skill premium de geração de imagens para brand kits, voltada para trabalhos de branding, incluindo sistemas de logo, decks de identidade, boards de diretrizes visuais e apresentações de marca com direção de arte. Ela foi criada para entregar resultados coesos, com aparência de estúdio, em startups, ferramentas para desenvolvedores, segurança, games, apps de consumo e conceitos de luxo. Use brandkit quando você quiser um universo de marca refinado em vez de um moodboard genérico de IA.

shader-dev é uma skill prática de shaders GLSL para visuais em tempo real no estilo ShaderToy. Use a skill shader-dev para criar ou depurar ray marching, cenas com SDF, iluminação, partículas, movimento de fluidos, pós-processamento e shader-dev para UI Design com menos tentativa e erro do que com um prompt genérico.

Use a skill de remotion para transformar telas de projetos do Stitch em vídeos de walkthrough bem acabados, com transições, zooms e sobreposições de texto. Ela inclui etapas de instalação, arquivos de exemplo e um guia repetível de remotion para edição de vídeo e composições prontas para renderização.

pol-probe-advisor ajuda product managers a escolher o PoL (Proof of Life) probe certo para uma hipótese, um risco e um nível de recursos. Use a skill pol-probe-advisor para evitar overbuilding e alinhar o método de validação mais barato e útil ao objetivo real de aprendizado. Ideal para pol-probe-advisor em Product Management, com guia prático e orientação de uso.

A skill de storyboard transforma uma ideia de produto em uma narrativa de seis quadros que vai do problema à solução. Use-a para alinhamento de stakeholders, revisão de conceitos, demos e storyboard para protótipos quando você precisar de uma forma rápida e centrada no usuário para testar se uma ideia gera conexão.

O pol-probe ajuda você a definir uma prova de vida para testar uma hipótese arriscada de forma barata antes de construir um produto de verdade. Use a skill pol-probe para reduzir encenação de protótipo, definir critérios de sucesso rigorosos, escolher o tipo certo de prova e planejar o descarte depois do aprendizado.

A hyperframes-registry ajuda você a instalar e conectar itens reutilizáveis do registro HyperFrames com menos tentativa e erro. Use-a para executar `hyperframes add`, identificar blocos vs. componentes, mesclar snippets, integrar blocos ao `index.html` e seguir os mapeamentos de caminho do `hyperframes.json` para implementação de design e descoberta do registro.

gsap é uma referência prática de animação para composições HyperFrames. Ele ajuda você a escolher entre `gsap.to()`, `from()`, `fromTo()` e `gsap.timeline()`, e então aplicar os `vars`, easing, stagger, transforms e padrões de performance corretos. Use este guia de gsap quando precisar de motion pronto para implementação em animações de entrada, transições e efeitos de design reutilizáveis.

excalidraw-diagram cria diagramas em JSON do Excalidraw que argumentam visualmente, e não apenas exibem caixas e setas. Use-o para fluxos de trabalho, arquitetura, sequências, caminhos de decisão e diagramas de conceitos em que estrutura, legibilidade e relações reais importam. Inclui orientação de instalação, checagens com consciência de renderização e um fluxo de trabalho prático para criar diagramas melhores.

infocard ajuda você a criar cards informativos em estilo editorial no Markdown, incorporando HTML e CSS diretamente na página. É útil para resumos, panoramas de tópicos, painéis de destaque, cards de eventos, blocos de comparação e outros conteúdos pensados para UI Design que precisam parecer intencionalmente bem projetados. Não é indicado para diagramas nem visualização de dados; para isso, use uma skill dedicada a diagramas ou gráficos.

canvas cria diagramas JSON Canvas com posicionamento livre e coordenadas x/y explícitas. Use quando precisar de mapas mentais, grafos de conhecimento, mapas conceituais, quadros de planejamento e outros fluxos de diagramação em que o layout espacial importa mais do que a sequência. Não é a escolha certa para fluxos ou gráficos de dados. Use a skill canvas quando precisar de nós editáveis, links e uma estrutura de layout.

imagegen-frontend-mobile é uma skill de direção de imagem para telas premium de apps mobile e fluxos com várias telas. Ela ajuda a criar visuais nativos de aplicativo para conceitos em iOS, Android e multiplataforma, com hierarquia clara, texto legível, cores controladas e mockups sutis de celular. Use para geração de imagens, não para código, sites ou interfaces desktop.

gpt-taste é uma skill voltada para design que ajuda a criar páginas de UI refinadas, com direção de arte editorial, disciplina de espaçamento e motion com GSAP. Use a skill gpt-taste em páginas de marketing, landing pages e sites showcase quando quiser mais variedade de layout, melhor controle tipográfico e menos padrões genéricos de front-end. O guia inclui notas de instalação e uso para implementação prática.

A skill hand-drawn-diagrams transforma prompts em linguagem natural em diagramas Excalidraw com aparência de desenho à mão, fluxos, explicações, wireframes e mockups de páginas. Ela valida a saída e pode retornar uma URL de edição junto com imagens exportáveis. É ideal para diagramar rápido quando você quer um resultado em estilo esboço, não arte vetorial polida.

world-builder é uma skill com foco em design para criar e gerenciar zonas gerativas de jogo no overworld estilo Pokémon da Dorothy. Use a skill world-builder para transformar um tema, premissa ou ideia de localização em um mapa jogável, com clima, layout, terreno, posicionamento de NPCs e lógica espacial para Design Implementation.

O gif-sticker-maker transforma fotos em 4 stickers GIF animados no estilo Funko Pop / Pop Mart usando MiniMax Image Generation, MiniMax Video Generation e ffmpeg. Este skill gif-sticker-maker cobre pré-requisitos de instalação, templates de prompt, legendas e o fluxo completo de imagem para GIF.

O figma-create-new-file cria um novo arquivo em branco no Figma ou no FigJam em rascunhos, com padrões para tipo de editor e nome do arquivo. Este skill figma-create-new-file ajuda na implementação de design, em prototipagem rápida e em iniciar uma tela nova antes de use_figma. Também faz a resolução de planKey via whoami quando necessário.

O figma-use é a skill obrigatória para chamadas seguras de `use_figma` em fluxos de trabalho da Figma Plugin API. Use a skill figma-use para instalá-la e carregá-la antes de escrever, atualizar, inspecionar ou estruturar arquivos do Figma com JavaScript. Ela é especialmente útil para implementação de design, trabalho com componentes, variáveis, auto layout e leitura programática de arquivos.