adapt

概览

什么是 adapt 技能？

adapt 技能帮助前端开发者将现有设计转换为适用于不同屏幕尺寸、设备和使用场景的界面。它专注于实现断点、流式布局和触控目标，是响应式设计和跨设备兼容性的关键工具。

谁适合使用 adapt？

该技能适合前端开发者、UI 工程师及团队，需要为移动端、平板、桌面或其他平台调整网页或应用界面。如果项目要求在多设备间保持一致的可用性和外观，adapt 提供了结构化的工作流程来指导适配过程。

解决的问题

• 确保设计在任何设备或屏幕尺寸上都能良好使用
• 帮助识别并解决布局、输入和性能相关的挑战
• 提供可复用的响应式适配流程

使用方法

安装步骤

1. 通过以下命令安装 adapt 技能：

   npx skills add https://github.com/pbakaus/impeccable --skill adapt

2. 首先查看 SKILL.md 文件，了解核心工作流程和需求。

初始设置与准备

• 适配前，先调用 $frontend-design 技能收集设计原则和上下文。如果没有设计上下文，先运行 $teach-impeccable。
• 收集目标平台、设备和用户场景的信息。

工作流程概览

• 评估适配挑战：
  • 确认原始设计的使用环境（如桌面网页、移动应用）。
  • 理解目标环境：设备类型、输入方式、屏幕限制、网络状况和用户期望。
  • 找出适配难点，如布局问题、输入差异或内容溢出。
• 规划适配策略：
  • 确定断点、流式网格和触控目标尺寸。
  • 为每种环境优先安排功能和内容。
• 实施与测试：
  • 应用响应式 CSS、灵活布局和自适应资源。
  • 在多设备上测试并根据反馈调整。

关键文件参考

• SKILL.md — 主要工作流程和适配步骤
• README.md、AGENTS.md、metadata.json — 如有，提供额外背景和参考资料

常见问题

什么时候应该使用 adapt 技能？

当需要让界面适配多种设备或屏幕尺寸，或用户提到响应式设计、移动布局、跨设备兼容时，使用 adapt。

使用 adapt 前需要做哪些准备？

必须先通过 $frontend-design 收集设计上下文，必要时运行 $teach-impeccable。同时收集目标设备、平台和用户场景的详细信息。

哪里可以找到支持脚本或参考资料？

请查看仓库的 Files 标签页，查找与 adapt 相关的额外资源、辅助脚本或嵌套引用。

adapt 适合纯视觉设计任务吗？

不适合。adapt 专注于响应式和自适应界面的前端实现，强调实用性，而非单纯视觉设计。