Communitygithub.com

Presentación de Portafolio

Selecciona y presenta trabajos creativos/técnicos para máximo impacto. Estructura casos de estudio, crea narrativas de proyectos y optimiza para diferentes audiencias (responsables de contratación, clientes, colaboradores). Funciona con sitios web de portafolio, presentaciones PDF y formatos de diapositivas.

¿Qué es Presentación de Portafolio?

Esta habilidad ayuda a un agente de IA o a un usuario a transformar una colección dispersa de proyectos en una narrativa profesional convincente. Está diseñada para desarrolladores, diseñadores y cualquier profesional técnico que necesite presentar su trabajo para una entrevista, una propuesta de cliente o una oportunidad de colaboración. La habilidad guía el proceso de curación, estructuración y redacción de proyectos, ofreciendo marcos como 'Regla 3-5-7' para la selección de proyectos y la 'Plantilla de Caso de Estudio' para presentaciones detalladas. El enfoque principal es adaptar el portafolio a audiencias específicas (gerentes de contratación, líderes técnicos) enfatizando resultados cuantificables y una narrativa clara. Proporciona pautas para diferentes formatos de salida (sitio web, PDF, presentación) y patrones narrativos como 'Arco de Transformación'. Funciona mejor como una guía de contenido, no como una herramienta de diseño, y se integra bien con habilidades complementarias como la creación de currículums y la preparación para entrevistas.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/4444J99/a-i--skills/tree/HEAD/skills/professional/portfolio-presentation
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

¿Qué hace Presentación de Portafolio?

Transforma el trabajo disperso en una narrativa profesional convincente.

Principio Fundamental

Un portafolio no es una lista de proyectos, es una historia sobre quién eres y qué puedes hacer por la persona que lo ve.

Análisis de la Audiencia

Antes de seleccionar, identifica al espectador:

AudienciaInterés PrincipalTiempo DisponibleCriterios de Decisión
Gerente de Contratación¿Puedes hacer el trabajo?30-90 segundos inicialHabilidades relevantes, crecimiento
Líder Técnico¿Cómo piensas?2-5 minutos de profundidadResolución de problemas, calidad del código
Cliente¿Puedes resolver mi problema?1-2 minutosTrabajo similar, resultados
Colaborador¿Disfrutaría trabajando contigo?VariableProceso, comunicación
Académico¿Cuál es tu contribución?Revisión exhaustivaRigor, originalidad

Estructura del Portafolio

Página de Inicio/Landing

[Hero: Tu declaración de posicionamiento]
[Trabajo Destacado: 3-4 mejores piezas]
[Breve Acerca de]
[Contacto/CTA]

Fórmula de Declaración de Posicionamiento:

Soy un [rol] que [enfoque/especialidad única].
Ayudo a [audiencia] a lograr [resultado] mediante [método].

Selección de Proyectos

La Regla 3-5-7:

  • Mínimo 3 proyectos (muestra variedad)
  • 5 proyectos óptimo (profundidad + amplitud)
  • Máximo 7 proyectos (evita abrumar)

Criterios de Selección:

CriterioPesoPregunta
Relevancia30%¿Coincide con la oportunidad objetivo?
Impacto25%¿Puedo cuantificar los resultados?
Artesanía20%¿Muestra mi mejor trabajo?
Actualidad15%¿Es suficientemente reciente?
Historia10%¿Hay una narrativa convincente?

Orden de Proyectos

  1. Empieza con el mejor ajuste (no necesariamente el mejor trabajo)
  2. Segundo más fuerte (capta la atención)
  3. Muestra variedad (diferente tipo/escala)
  4. Proyecto personal/apasionante (muestra personalidad)
  5. Pieza de aspiracional (dirección aspiracional)

Marco de Caso de Estudio

Formato Rápido (Tarjeta de Portafolio)

## [Nombre del Proyecto]

**Rol**: [Tu rol específico]
**Cronograma**: [Duración]
**Equipo**: [Tamaño/composición]

[Una imagen convincente]

[Resumen de 2-3 oraciones: Problema → Solución → Resultado]

**Resultado Clave**: [Un resultado cuantificado]

Formato Estándar (Página de Proyecto)

# [Nombre del Proyecto]

## Resumen
[Discurso de ascensor: ¿Qué es? ¿Para quién es? ¿Por qué importa?]

## El Desafío
[Declaración del problema con contexto y consecuencias]

## Mi Rol
[Responsabilidades y contribuciones específicas]

## Proceso
[Fases clave con imágenes]
1. Descubrimiento/Investigación
2. Ideación/Estrategia
3. Ejecución/Implementación
4. Iteración/Refinamiento

## Solución
[Lo que se construyó/creó con imágenes]

## Resultados
[Resultados cuantificados]
- [Métrica]: [Antes] → [Después]
- [Métrica]: [Mejora]

## Reflexión
[Lo que aprendí, lo que haría diferente]

Formato de Inmersión Profunda (Caso de Estudio Completo)

Ver references/case-study-template.md

Patrones Narrativos

El Arco de Transformación

Estado Actual → Disrupción → Lucha → Perspectiva → Resolución → Nuevo Normal

El Problema-Solución-Impacto

[Usuario] estaba luchando con [problema]
Descubrimos [perspectiva]
Así que construimos [solución]
Lo que resultó en [impacto]

La Historia del Proceso

Empezamos por [investigación/descubrimiento]
Lo que reveló [perspectiva clave]
Llevándonos a [decisión de diseño]
Mediante [iteración], llegamos a [solución]

La Historia de Restricciones

Dado [restricciones: tiempo/presupuesto/tecnología]
Tuvimos que [enfoque creativo]
Lo que nos enseñó [lección]
Y entregó [resultado a pesar de las restricciones]

Presentación Visual

Requisitos de Imagen

TipoPropósitoEspecificaciones
HeroPrimera impresión16:9 o 4:3, alta resolución
ProcesoMostrar pensamientoAnotado, claro
DetalleCalidad de artesaníaRecortado, enfocado
Antes/DespuésMostrar impactoLado a lado
ContextoUso en el mundo realFotos in situ

Mejores Prácticas para Capturas de Pantalla

  • Muestra datos reales (anonimizados si es necesario)
  • Navegador cromado opcional (limpio vs. contexto)
  • Destaca interacciones clave
  • Incluye vistas móviles si es responsivo
  • Muestra estados: vacío, cargando, poblado, error

Video/Animación

Cuándo usar:

  • Interacciones complejas
  • Experiencias basadas en el tiempo
  • Transformaciones antes/después
  • Documentación de proceso

Mantener bajo 60 segundos para contexto de portafolio.

Directrices de Redacción

Titulares

❌ "Rediseño de Sitio Web de Comercio Electrónico" ✅ "Aumentando la Conversión en un 40% Mediante la Simplificación del Checkout"

Descripciones

❌ "Diseñé la interfaz de usuario e implementé el frontend" ✅ "Lideré el diseño y desarrollo del flujo de checkout que redujo el abandono del carrito del 68% al 41%"

Cuantificación

DébilFuerte
Rendimiento mejoradoTiempo de carga reducido de 4.2s a 0.8s
Compromiso aumentadoUsuarios activos diarios crecieron 3x en 6 meses
Mejor experiencia de usuarioNPS mejoró de 32 a 67

Voz

  • Primera persona para sitios personales ("Diseñé...")
  • Primera persona plural para trabajo en equipo ("Descubrimos...")
  • Voz activa siempre
  • Tiempo presente para trabajo en vivo, pasado para completado

Orientación Específica por Formato

Sitio Web de Portafolio

Ver references/website-structure.md

Portafolio en PDF

Ver references/pdf-portfolio.md

Presentación de Diapositivas

Ver references/deck-structure.md

Lista de Verificación de Revisión

Contenido

  • La declaración de posicionamiento es clara
  • Los proyectos coinciden con la audiencia objetivo
  • Cada proyecto tiene resultados cuantificados
  • El arco narrativo es convincente
  • El rol/contribución es explícito

Visual

  • Las imágenes son de alta calidad
  • Estilo visual consistente
  • Amigable para móviles (si es web)
  • Tiempo de carga aceptable

Técnico

  • Todos los enlaces funcionan
  • Información de contacto actualizada
  • Conceptos básicos de SEO cubiertos (si es web)
  • Analítica instalada (si es web)

Pulido

  • Revisado para errores
  • Formato consistente
  • Revisión por ojos frescos

Habilidades Relacionadas

Habilidades Complementarias (Usar Juntas)

Habilidades Alternativas (Propósito Similar)

  • Ninguna - esta es la habilidad principal de presentación de portafolio

Habilidades Prerrequisito (Aprender Primero)

  • Ninguna requerida - esta es una habilidad profesional independiente

Referencias

  • references/case-study-template.md - Formato completo de caso de estudio
  • references/website-structure.md - Arquitectura de sitio web de portafolio
  • references/pdf-portfolio.md - Mejores prácticas para portafolio en PDF
  • references/deck-structure.md - Formato de presentación de diapositivas

Skills relacionados

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community