Repolode
Enviar
amaancoderx

amaancoderx/npxskillui

Uma CLI que extrai o sistema de design de um site, repositório ou projeto local para uma pasta de arquivos que o Claude Code pode ler para criar uma UI alinhada ao projeto.

Ver no GitHubSite
Estrelas
2,418
Forks
250
Issues abertas
6
Último commit
há 5 meses

O que é?

SkillUI é uma ferramenta de linha de comando que rastreia um site ativo, um repositório Git ou uma base de código local e extrai seu sistema de design: tokens de cores, escala tipográfica, grade de espaçamento e componentes. Ela empacota o resultado em uma pasta com os arquivos SKILL.md e CLAUDE.md para que o Claude Code carregue automaticamente o contexto de design quando você pedir que ele crie uma UI.

A ferramenta funciona em vários modos. O modo padrão faz uma análise estática de HTML, CSS, fontes e tokens, sem navegador. O modo Ultra usa Playwright para capturar screenshots durante a rolagem, diferenças nos estados de hover e focus, keyframes de CSS, padrões de layout e fingerprints de componentes do DOM. O modo Dir examina arquivos .css, .scss, .ts, .tsx, .js e .jsx em busca de configurações do Tailwind, variáveis CSS e padrões de tokens; já o modo Repo clona um repositório público e executa o modo Dir nele.

A ferramenta requer Node.js 18 ou posterior e não precisa de serviços de IA nem de uma chave de API, pois toda a análise é feita localmente. O modo Ultra também requer a instalação do Playwright com Chromium.

Recursos principais

  • 01Extrai tokens de cores, tipografia e espaçamento de uma URL, repositório Git ou diretório local.
  • 02Gera os arquivos SKILL.md e CLAUDE.md, que o Claude Code carrega automaticamente.
  • 03O modo Ultra captura screenshots durante a rolagem, diferenças de hover/focus e animações CSS usando Playwright.
  • 04Gera arquivos de tokens em JSON e variáveis CSS, além de incluir fontes do Google Fonts.
  • 05É executada totalmente localmente, sem exigir modelo de IA nem chave de API.

Casos de uso

  • Recriar o estilo visual de um site existente como ponto de partida para uma nova landing page.
  • Fornecer ao Claude Code o contexto de design de um app interno antes de pedir que ele adicione telas.
  • Documentar os tokens de design de uma base de código que não tem um guia de estilo escrito.

Tópicos

#design-system#claude-code#cli#css#design-tokens#playwright#static-analysis

Perguntas frequentes

O que é npxskillui?
Uma CLI que extrai o sistema de design de um site, repositório ou projeto local para uma pasta de arquivos que o Claude Code pode ler para criar uma UI alinhada ao projeto. SkillUI é uma ferramenta de linha de comando que rastreia um site ativo, um repositório Git ou uma base de código local e extrai seu sistema de design: tokens de cores, escala tipográfica, grade de espaçamento e componentes. Ela empacota o resultado em uma pasta com os arquivos SKILL.md e CLAUDE.md para que o Claude Code carregue automaticamente o contexto de design quando você pedir que ele crie uma UI.
npxskillui é gratuito? Qual é a licença?
npxskillui não declara licença. O código é público, mas sem licença você não tem permissão explícita para reutilizá-lo; fale com o autor antes de depender dele.
npxskillui ainda é mantido?
Atualizado nos últimos 6 meses. O último commit de npxskillui foi em 7 de mai. de 2026.
Para que posso usar npxskillui?
Recriar o estilo visual de um site existente como ponto de partida para uma nova landing page. Fornecer ao Claude Code o contexto de design de um app interno antes de pedir que ele adicione telas. Documentar os tokens de design de uma base de código que não tem um guia de estilo escrito.
Onde consigo npxskillui?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/amaancoderx/npxskillui

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

Projetos relacionados