Communitygithub.com

loganngarcia/framer-chatbot

Crea sitios web de portafolio con miniapp, documento y pizarra digital. Úsalo cuando te pidan un 'portafolio', 'mostrar mi trabajo', 'sitio web de portafolio', 'portafolio de diseño' o 'construir mi portafolio'.

¿Qué es framer-chatbot?

Esta habilidad permite guiar a estudiantes en la creación de un portafolio profesional utilizando las herramientas integradas de Curastem. Es ideal para desarrolladores, diseñadores y cualquier persona que desee mostrar su trabajo de forma interactiva. La habilidad combina tres herramientas clave: el editor de documentos para redactar contenido, la pizarra digital para planificar visualmente la estructura, y el constructor de miniapps para generar sitios web de portafolio funcionales. El flujo de trabajo recomendado incluye planificar con la pizarra, redactar en el documento y construir con la miniapp. El sitio generado debe incluir secciones como proyectos, acerca de, contacto y navegación, siguiendo las pautas de diseño de Curastem (fondo #141414, margen superior de 48px, etiqueta Curastem.org en la esquina inferior derecha, esquinas redondeadas de 28px y estilo neobrutalista o moderno). Se enfatiza la capacidad de iteración: los estudiantes pueden solicitar cambios en cualquier momento.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/loganngarcia/framer-chatbot/tree/HEAD/skills/create-a-portfolio

Preguntar en tu IA favorita

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

Documentación

Crear un Portafolio

Guía a los estudiantes para construir un portafolio profesional utilizando las herramientas integradas de Curastem. Curastem proporciona tres capacidades principales que debes usar: el editor de documentos (update_doc) para contenido escrito, la pizarra digital (update_whiteboard) para planificación visual, y el constructor de miniapps (create_app) para sitios de portafolio interactivos.

Herramientas de Curastem a Usar

1. Editor de Documentos (update_doc)

Úsalo para redactar el texto del portafolio, secciones 'Acerca de', descripciones de proyectos e información de contacto. El documento soporta HTML completo: encabezados, listas, enlaces, negritas, cursivas. Es perfecto para escribir y editar texto antes de pasarlo a la aplicación del portafolio.

2. Pizarra Digital (update_whiteboard)

Úsala para planificar la estructura del portafolio: mapas mentales de secciones, diagramas de flujo del recorrido del usuario, bocetos wireframe del diseño. Crea diagramas visuales que muestren el flujo: página de inicio → proyectos → acerca de → contacto. Ayuda a los estudiantes a organizarse antes de construir.

3. Constructor de Miniapps (create_app)

Úsalo para generar un sitio web de portafolio funcional. Genera un único archivo HTML con CSS y JavaScript incrustados. Debe incluir: tarjetas de proyectos, navegación, sección 'Acerca de', formulario de contacto o enlaces. Sigue las pautas de aplicaciones de Curastem: fondo #141414, margen superior de 48px, etiqueta Curastem.org en la esquina inferior derecha, esquinas redondeadas de 28px con estilo neobrutalista o moderno, IDs únicos en todos los elementos interactivos.

Cuándo Aplicarlo

  • El estudiante quiere crear un portafolio para solicitudes de empleo o prácticas
  • El estudiante necesita mostrar trabajos de diseño, programación o creativos
  • El estudiante pregunta sobre estructura de portafolio, plataformas o mejores prácticas
  • El estudiante quiere retroalimentación sobre un portafolio existente o construir uno desde cero

Flujo de Trabajo

  1. Planificar — Usa la pizarra digital para mapear las secciones y la estructura del portafolio
  2. Redactar — Usa el editor de documentos para escribir el texto 'Acerca de', descripciones de proyectos e información de contacto
  3. Construir — Usa create_app para generar un sitio de portafolio interactivo que el estudiante pueda ver e iterar

Guía Clave

  • Recomienda la estructura: hero, proyectos (con descripciones), acerca de, contacto
  • Enfatiza claridad, estudios de caso de proyectos con resultados y contacto fácil
  • Para create_app: asegura un diseño adaptable a móviles, botones accesibles, enlaces que se abren en nueva pestaña
  • Itera: los estudiantes pueden solicitar cambios en la app, el documento o la pizarra a medida que refinan

Skills relacionados