lixyd/portal-ui

Portal UI

Um portal serve a vários propósitos. Uma landing page vence um. Se a página tem uma oferta e uma ação, pare e use um skill de landing page. Este arquivo é a camada de decisão para o trabalho de uma pessoa.

Duas fontes definem os padrões que este arquivo não repete. As proibições visuais seguem Leonxlnx/taste-skill (MIT). Espaçamento, foco e temporização de movimento seguem elayadesign/ai-design-skills landing-page-design (MIT) apenas onde este arquivo os nomeia. Quando esses dois entrarem em conflito em um portal, este arquivo vence.

Ideia

Escreva uma frase antes de editar:

Nesta página, [um artefato que existe apenas aqui] se torna [o único dispositivo ao vivo].

Vale o terminal, o projeto em execução ou a interface real. Uma linha de varredura, uma grade neon ou "SYS.ONLINE" não vale: a mesma frase funciona para qualquer desenvolvedor. Mantenha um dispositivo ao vivo. Ele deve funcionar com o polegar, ter um fallback sem script e nunca bloquear o trabalho.

Marque um fragmento de interface real com data-ui. Monoespaço permanece dentro desse fragmento, dentro de pre/code e em figuras tabulares.

Ordem da página

1. Primeira tela: quem é, o que faz, o dispositivo ao vivo. Um h1, duas linhas ou menos em qualquer largura. Uma frase abaixo dele que diz o que fazer.
2. Trabalho próprio, com a imagem ou clipe real. O software de outra pessoa é um guia. Nomeie o autor na linha do guia. Não o coloque na grade de trabalhos.
3. Lista ao vivo opcional (um feed, um ranking) se for realmente buscada.
4. Guias: como usar a ferramenta, em uma frase. Contagens de estrelas são secundárias e podem se atualizar sozinhas.
5. Documentos que já existem. Não intitule o site com uma seção que não tem documentos. Um blog prometido ganha uma lista real, ou a palavra sai do título.
6. Rodapé: o nome, contato e qualquer oferta paga ou de suporte. A oferta de suporte não é par do trabalho.

Cada item na navegação tem um título e um destino real. O layout de telefone mantém essa navegação. Se a barra desaparecer abaixo de um ponto de quebra, adicione um controle que abre um painel plano de altura total. Os links chegam em ordem de leitura, com 60 ms de intervalo, total abaixo de 400 ms. O fundo do painel é o fundo da página, não um desfoque.

Cortes visuais

Remova estes antes de adicionar qualquer coisa: gradientes de texto, barras de vidro, linhas de varredura, grades animadas, bordas cônicas, brilhos, emoji em títulos, números de índice (01 //), badges em pílula acima do título, e mais de um efeito ambiente atrás do trabalho.

Mantenha o fundo, a tinta e um acento existentes quando o site já os tiver. Não introduza uma segunda face de exibição. O peso fica em 700 ou abaixo.

Movimento usa cubic-bezier(0.22, 1, 0.36, 1). Anime apenas transform e opacity. Revele cada seção uma vez com IntersectionObserver. Um ouvinte de scroll que deve existir é controlado por requestAnimationFrame. prefers-reduced-motion mantém cada palavra na tela e elimina o deslocamento.

CSS compartilhado: coloque cortes específicos do portal na folha de estilo da página inicial. Altere o arquivo compartilhado apenas para um bug que toda página tem, como um anel de foco ausente.

Entrega

• Skip link (link de pular), :focus-visible visível, item de navegação atual marcado.
• Sem href="#".
• og:image é uma imagem ampla do trabalho. Twitter card é summary_large_image.
• Texto alternativo nas imagens dos trabalhos. O dispositivo ao vivo tem um nome acessível.

Verificação

Execute node scripts/check.mjs <index.html> <css files> a partir deste skill. Em seguida, abra a página em 1440, 768 e 390. No telefone, abra o menu e siga cada link. Com movimento reduzido, a primeira tela ainda nomeia a pessoa e o trabalho.

Corrija um FAIL do script. Não reestilize páginas irmãs para corresponder a um corte da página inicial.