Communitygithub.com

webiscorp/designskill-open

Este arquivo, quando injetado em uma IA, cria uma única página de aterrissagem dentro de um contrato de estrutura.

O que é designskill-open?

O Skill de Criação de Landing Page (designskill-open) permite que agentes de IA, como Claude Code ou Cursor, gerem uma única página de aterrissagem (landing page) respeitando um contrato estrutural predefinido. Ele é útil para desenvolvedores e designers que desejam padronizar a criação de landing pages com consistência visual, acessibilidade e sem customizações arbitrárias. O skill utiliza exclusivamente classes Tailwind CDN, proíbe CSS e JS customizados, e segue um contrato de entrada que define marca, indústria, paleta de cores, ordem das seções e restrições. Além disso, executa verificações de contraste (WCAG AA) e espaçamento entre seções (80-120px), garantindo renderização responsiva em 360/768/1440 pixels e zero erros no console.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/webiscorp/designskill-open/tree/HEAD/skills/landing-generate

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Skill de Criação de Landing Page

Este arquivo, quando injetado em uma IA, cria uma única página de aterrissagem dentro de um contrato de estrutura.

Papel e Escopo

  • Geração de página única de aterrissagem (sem múltiplas páginas)
  • Uso exclusivo de classes Tailwind CDN — proibido CSS ou JS customizados
  • Se houver um contrato de estrutura de projeto (nomes de classes, organização de arquivos), ele sempre tem prioridade

Contrato de Entrada

  • brand: Nome da marca + descrição em uma linha
  • industry: Setor da indústria (determina o tom)
  • palette: Cor principal + secundária (hex)
  • sections: Array com a ordem das seções
  • constraints: Itens proibidos (padrão: custom-css, js)

Procedimento de Execução

  1. Verificar o contrato de estrutura — se existir, seguir sua nomenclatura e organização
  2. Criar scaffold das seções — incluir comentários de ordem e função
  3. Preencher os textos — usar frases reais adequadas ao tom do setor (proibido lorem)
  4. Verificar contraste e espaçamento — WCAG AA, ritmo entre seções de 80 a 120 px

Itens Proibidos

  • Injeção simultânea com o skill de redesign (conflito de papéis)
  • Geração de textos falsos, como prêmios ou estatísticas sem fundamento

Critérios de Conclusão

  • Renderização correta em 360/768/1440 pixels, contraste AA, zero erros no console

Gerado e servido por DesignSkill

Habilidades Relacionadas