Communitygithub.com

个人作品集预览阅读器

添加或审查一个可访问的作品集项目预览阅读器,用于有序的长图、文档页面或分阶段的可视化模块。

个人作品集预览阅读器 是什么?

该技能用于在作品集网站中实现一个项目预览阅读器,允许用户在不中断浏览流程的情况下查看长图、文档页面或模块化视觉内容。其核心价值在于优化用户体验:通过保持源顺序并提供可访问的本地化标签,确保预览内容的有序性和可用性。该技能要求开发者先检查项目现有的弹窗状态模型、文档阅读路径、项目注册表、资源顺序和移动端样式,避免过度抽象。实现时需注意:使用垂直阅读容器防止布局溢出,保留弹窗的关闭、Escape键、焦点恢复、滚动锁定等键盘行为,仅在有可发布的详情页时进行路由。验证步骤包括检查资源加载、标签显示、预览开关功能以及桌面和移动端的水平溢出问题,并通过类型检查、lint和构建测试。该技能适用于Claude Code、Cursor、Codex等AI编码代理,帮助他们为作品集项目添加标准化、可访问的预览功能。

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

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

个人作品集项目预览阅读器

在现有存档预览中展示已批准的长格式项目视觉效果,而不破坏周围的浏览流程。

实施前

检查存档/弹窗状态模型、现有文档阅读器路径、项目注册表、资源顺序和移动端样式。仅对实际重复的行为进行泛化;当没有合理的抽象时,将一次性项目的规则保留在本地。

要求

  • 保持声明的源顺序,并为每个页面或模块提供可访问的本地化标签。
  • 使用包含的垂直阅读表面;不要意外展开页面或引入水平溢出。
  • 保留预览弹窗已经提供的关闭、Escape键、焦点恢复、滚动锁定和键盘行为。
  • 仅在详情页可发布时路由到该页面;不要暴露损坏或语义重复的目的地。

验证

检查所有资源加载、有序标签存在、预览打开/关闭功能正常,以及阅读器宽度在桌面和移动端没有水平溢出。代码更改后运行类型检查、lint和生产构建检查。

Individual skills in this repo

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

相关技能