Communitygithub.com

jhd3197/AgentSite

Portafolio personal o de estudio: introducción tipográfica impactante, cuadrícula de proyectos, enlaces a casos de estudio y contacto.

¿Qué es AgentSite?

AgentSite es una habilidad para crear un sitio web de portafolio personal o de estudio que busca impresionar al visitante con una presentación clara y profesional. Está diseñada para agentes de IA como Claude Code, Cursor o Codex, y se centra en generar una página web con una introducción tipográfica llamativa, una cuadrícula de proyectos detallados y secciones esenciales como 'Acerca de' y 'Contacto'. La habilidad especifica componentes obligatorios, como una barra de navegación minimalista, una declaración introductoria con tamaño de fuente dinámico, tarjetas de proyecto con imágenes reales o marcadores de posición, y una sección de clientes opcional. Incluye reglas de calidad estrictas, como evitar carruseles, parallax o videos automáticos, y usar solo contenido real o marcado explícitamente como provisional. Esto garantiza un portafolio limpio, honesto y visualmente impactante, ideal para freelancers o estudios creativos.

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

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Sitio de portafolio

Un sitio personal o de estudio cuyo objetivo es que el visitante diga "Quiero trabajar con esta persona".

Superficies requeridas

  1. Barra de navegación delgada — nombre/marca, 3-4 enlaces (Trabajo / Acerca de / Escritos / Contacto).
  2. Introducción — declaración tipográfica grande (tamaño de visualización con clamp()). Una frase de quién-qué-para qué, más una fina tira de metadatos (ubicación, disponibilidad, rol actual).
  3. Cuadrícula de proyectos — 4-9 tarjetas de casos de estudio. Cada tarjeta: imagen de portada / bloque de color, título del proyecto, rol en una línea, año. El estado de hover se eleva ligeramente. Hacer clic va a una URL de caso de estudio (simulada).
  4. Acerca de — párrafo biográfico corto + foto O marca de firma.
  5. Clientes seleccionados / prensa — tira de logotipos discreta O lista. Omitir la sección por completo si no hay material real.
  6. Contacto — correo electrónico (mailto), tal vez Twitter/LinkedIn, enlace de reserva de calendario.

Reglas de calidad

  • Una voz tipográfica decisiva. Si la visualización es serif, el cuerpo es sans (o viceversa).
  • Tarjetas de proyecto: nombres reales + roles. Usar marcadores de posición etiquetados ("[Imagen de portada — reemplazar con foto principal]"), no títulos de Lorem ipsum.
  • Sin carruseles. Sin parallax. Sin video de reproducción automática.
  • Los estados vacíos / "próximamente" son honestos. No llenar la cuadrícula con proyectos falsos.

Skills relacionados