Communitygithub.com

jhd3197/AgentSite

Portfólio pessoal ou de estúdio — introdução tipográfica ousada, grade de projetos, links para estudos de caso e contato.

O que é AgentSite?

O AgentSite é uma habilidade focada na criação de sites de portfólio pessoal ou de estúdio, projetados para causar uma impressão imediata no visitante: 'Quero trabalhar com essa pessoa.' A habilidade cobre todos os elementos essenciais de um portfólio moderno, incluindo uma barra de navegação enxuta, uma introdução tipográfica impactante com texto dimensionado via clamp(), uma grade de projetos com 4 a 9 cards de estudo de caso, seções de Sobre, Clientes/Pressiona e Contato. Ela segue regras rígidas de qualidade: uma voz tipográfica decisiva (serifa para títulos, sem serifa para corpo ou vice-versa), nomes e funções reais nos projetos, placeholders honestos para imagens e a proibição de carrosséis, parallax e vídeos automáticos. É útil para desenvolvedores e designers que desejam construir rapidamente um portfólio profissional e direto, sem firulas técnicas. A habilidade é compatível com agentes de IA como Claude, Cursor ou Codex, gerando código limpo e semântico, com foco em usabilidade e contar histórias visuais autênticas. O resumo detalhado orienta o agente a evitar padding artificial com projetos falsos, usando espaços reservados como '[Imagem de capa — substituir por hero shot]' para manter a honestidade do design.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jhd3197/AgentSite/tree/HEAD/agentsite/skills/portfolio

Perguntar na sua IA favorita

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

Documentação

Site de portfólio

Um site pessoal ou de estúdio cujo trabalho é fazer o visitante dizer "Quero trabalhar com essa pessoa."

Superfícies necessárias

  1. Nav enxuta — nome/marca nominativa, 3-4 links (Trabalho / Sobre / Escrita / Contato).
  2. Introdução — declaração tipográfica grande (tamanho de exibição clamp()). Uma frase sobre quem-o-que-para, com uma fina faixa de metadados (localização, disponibilidade, cargo atual).
  3. Grade de projetos — 4-9 cards de estudo de caso. Cada card: imagem de capa / bloco colorido, título do projeto, função em uma linha, ano. O estado de hover sobe sutilmente. O clique vai para uma URL de estudo de caso (simulada).
  4. Sobre — breve parágrafo biográfico + foto OU marca de assinatura.
  5. Clientes selecionados / Imprensa — faixa de logotipos contida OU lista. Pule a seção completamente se não houver material real.
  6. Contato — e-mail (mailto), talvez Twitter/LinkedIn, link de agendamento de calendário.

Regras de qualidade

  • Uma voz tipográfica decisiva. Se a exibição for serifada, o corpo é sem serifa (ou vice-versa).
  • Cards de projeto: nomes + funções reais. Use placeholders rotulados ("[Imagem de capa — substituir por hero shot]") não títulos Lorem ipsum.
  • Sem carrosséis. Sem parallax. Sem vídeo de reprodução automática.
  • Estados vazios / "mais em breve" são honestos. Não preencha a grade com projetos falsos.

Habilidades Relacionadas