106.9K+Baixar
Ir para o guia de uso
Component Canvaspor ibelick

Component Canvas Skill.

Inspecione componentes e variantes reais de UI em um canvas com deslocamento e zoom.

  • Variantes de componentes
  • Comparação
Baixar OpenDesignVer guia de uso
Análise da fonte · component-canvasSKILL.md
Tarefa Inspecione componentes e variantes reais de UI em um canvas com deslocamento e zoom. Entregáveis Uma rota ou ponto de entrada isolado de canvas com os componentes solicitados. Antes de começar O canvas não deve alterar o código, os hooks ou os estilos do componente para fazer a prévia funcionar.
Resumo editorial · fonte revisada em 2026-11-02 · não é um exemplo gerado

01 Funcionalidades

Inspecione componentes e variantes reais de UI em um canvas com deslocamento e zoom

Crie um canvas isolado para componentes existentes, compare variantes suportadas e preserve o comportamento real de teclado, portais e entrada.

Fluxo de trabalho baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Component Canvas cria uma superfície de inspeção em tela cheia em torno de componentes que já existem no projeto. Agrupa variantes suportadas e estados úteis para que designers os comparem rapidamente e depois interajam com os controles reais. A fonte mantém a implementação do componente independente do canvas.

O fluxo é especialmente preciso sobre o significado de comparar. Uma comparação de tamanho mantém texto, estilos e dados constantes; uma comparação de estilo altera somente o estilo. Também preserva portais nativos, foco e rolagem aninhada: uma prévia útil precisa funcionar além da captura de seu estado padrão.

Entregas esperadas

  • Uma rota ou ponto de entrada isolado de canvas com os componentes solicitados.
  • Grupos de variantes nomeados, com lista de cobertura e omissões explicadas.
  • Um relatório dos arquivos alterados, verificações executadas, decisões e comportamentos não testados.
Ver o briefing de exemplo

Do briefing à revisão

  1. 01
    Monte um exemplo seguro

    Leia as APIs públicas dos componentes e as convenções do projeto. Use dados de teste, mocks ou callbacks existentes para impedir gravações reais antes de montar um único componente.

  2. 02
    Crie grupos comparáveis

    Adicione variantes suportadas em grupos consistentes. Altere uma dimensão de comparação por vez e preserve o comportamento real de desabilitação, foco e interação do componente.

  3. 03
    Verifique o canvas ao redor dos componentes

    Teste deslocamento, zoom, ajuste à tela e navegação por teclado, junto com rolagem aninhada e portais nativos. Persista somente a câmera e confirme que redefini-la preserva o estado da prévia.

02 Quando usar

Quando usar

O canvas não deve alterar o código, os hooks ou os estilos do componente para fazer a prévia funcionar.

Bom encaixe

  • Inspeção de variantesCompare botões, campos ou outros componentes existentes usando suas APIs públicas reais.
  • Revisão de componentesOfereça aos designers um lugar para exercitar estados suportados sem alterar implementações de produção.

Limites a verificar

  • Contrato de componente somente para leituraO canvas não deve alterar o código, os hooks ou os estilos do componente para fazer a prévia funcionar.
  • Área de trabalho restritaOs grupos não podem ser arrastados e o canvas não tem histórico de edição nem desfazer/refazer.
  • Dados de teste segurosUm exemplo real é omitido quando chamadas e gravações de produção não podem ser isoladas com segurança.

Traga estas entradas

  • Escopo dos componentesNomeie os componentes e variantes públicas a incluir.
  • Preparação dos exemplosForneça dados seguros, providers e callbacks para exemplos interativos.
  • Convenções do projetoUse rotas, APIs de tema, dependências e controles de acesso existentes.

03 Decisões importantes

Decisões importantes

  1. Comportamento real

    Os exemplos respondem por interação nativa de ponteiro e teclado.

  2. Comparações justas

    Manter as demais propriedades constantes revela o que a variante realmente altera.

  3. Implementação delimitada

    A lógica de câmera e layout permanece separada do código do componente.

04 Exemplo de briefing

Experimente um briefing específico

O briefing de exemplo abaixo não foi testado. Verifique a configuração da skill antes de usá-lo.

Confira a fonte e a configuração

Nomeie os componentes e variantes públicas a incluir.

Arquivo-fonte original
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/component-canvas/SKILL.md

A referência abaixo abre as instruções originais. Confira a configuração do repositório antes de usá-las; não é um comando de instalação.

Comece com um entregável

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo
Use component-canvas para inspecionar nossos componentes Button, Select e Dialog existentes. Leia suas APIs públicas e mostre as variantes nomeadas suportadas usando dados de teste. Compare uma propriedade por vez, mantendo rótulos e demais configurações constantes. Não altere o código dos componentes e use o provider de tema atual. Comece com um exemplo seguro e depois acrescente os demais grupos. Verifique entrada por teclado, foco, rolagem aninhada e posição dos portais em vários níveis de zoom. Relate casos omitidos e verificações que exigem dispositivos indisponíveis.

Inspecione o resultado

Compare o resultado real com estes critérios observáveis.

  • O diff do código dos componentes está vazio e os exemplos não fazem gravações reais.
  • Alinhamento dos portais, foco e entrada nativa continuam utilizáveis com zoom.
  • A posição da câmera é restaurada após recarregar; a redefinição preserva o estado atual da prévia. Não há garantia de restaurar rascunhos após recarga, e falhas de armazenamento usam uma alternativa segura.

OpenDesign oferece um espaço de trabalho de design local para agentes de programação. Esta listagem não significa que a skill esteja incluída nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesignLer o guia rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte vinculada abaixo. O comportamento e os requisitos upstream podem mudar.

Responsável pela fonte
ibelick
Repositório
ibelick/ui-skills
Arquivo da skill
SKILL.md
Licença
MIT
Versão revisada
2026-11-02 · 4907a526b079
Resumo editorial da fonte
Inspecione componentes e variantes reais de UI em um canvas com deslocamento e zoom.

Resumo original de OpenDesign, baseado na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não uso da skill nem nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Posso arrastar grupos de componentes?

A fonte mantém explicitamente os grupos fixos. Deslocamento e zoom movem a câmera.

Ela inventa variantes ausentes?

Não. Lê a API pública e lista casos omitidos, em vez de modificar um componente para simular suporte.

O que permanece após recarregar?

A persistência prescrita armazena a câmera. Rascunhos da prévia não precisam sobreviver à recarga, salvo solicitação separada.

OpenDesign

Mantenha o briefing e o trabalho de design juntos.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Verifique a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesignExplorar skills de design
Arquivo-fonte original
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/component-canvas/SKILL.md