Communitygithub.com

husheng-web/personal-website-skills

Agregar o revisar un lector accesible de vista previa de proyectos de portafolio para imágenes largas ordenadas, páginas de documentos o módulos visuales por etapas.

¿Qué es personal-website-skills?

Esta habilidad proporciona un lector de vista previa de proyectos de portafolio que permite presentar imágenes largas, páginas de documentos o módulos visuales de forma ordenada y accesible dentro de un cuadro de diálogo de archivo existente, sin interrumpir el flujo de navegación circundante. Es útil para desarrolladores que construyen portafolios web y necesitan una forma estandarizada de mostrar contenido visual extenso manteniendo la accesibilidad y una experiencia de usuario fluida. La habilidad se basa en principios de diseño web accesible y gestión de estado de componentes, y es aplicable a proyectos que utilicen componentes de diálogo o vista previa. Antes de implementar, se debe inspeccionar el modelo de estado del archivo/diálogo, las rutas de lectura de documentos existentes, el registro de proyectos, el orden de los activos fuente y los estilos móviles, generalizando solo comportamientos repetidos reales y manteniendo reglas locales para proyectos únicos cuando no se justifique una abstracción reutilizable.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/husheng-web/personal-website-skills/tree/HEAD/skills/portfolio-project-preview-reader

Preguntar en tu IA favorita

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

Documentación

Lector de Vista Previa de Proyectos de Portafolio

Presente visuales de proyectos largos aprobados dentro de una vista previa de archivo existente sin interrumpir el flujo de navegación circundante.

Antes de la implementación

Inspeccione el modelo de estado del archivo/diálogo, las rutas de lectura de documentos existentes, el registro de proyectos, el orden de los activos fuente y los estilos móviles. Generalice solo un comportamiento repetido real; mantenga reglas locales de proyecto único cuando no se justifique una abstracción reutilizable.

Requisitos

  • Preserve el orden de fuente declarado y asigne a cada página o módulo una etiqueta localizada accesible.
  • Use una superficie de lectura vertical contenida; no expanda la página inesperadamente ni introduzca desbordamiento horizontal.
  • Preserve el cierre, Escape, restauración de enfoque, bloqueo de desplazamiento y comportamiento de teclado ya proporcionados por el diálogo de vista previa.
  • Enrute a una página de detalle solo cuando sea publicable; no exponga un destino roto o semánticamente duplicado.

Validación

Verifique que todos los activos se carguen, las etiquetas ordenadas estén presentes, la apertura/cierre de la vista previa funcione y el ancho del lector no tenga desbordamiento horizontal en tamaños de escritorio y móvil. Ejecute verificaciones de tipo, lint y compilación de producción después de los cambios de código.

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

Skills relacionados