메뉴
Design and implementation guidelines for dark mode. Covers common pitfalls, color palette, Tailwind replacement patterns. Use when implementing dark mode, designing dark themes, or reviewing dark mode implementations.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
回答 PetConnect 生态任务的设计规范、完成进度时间轴、交付验证。当用户问设计规格、spec、验收标准、进度、时间轴、交付情况、任务状态、认领情况时使用。按统一模板凝练输出，数据来自 tasks/、docs/demand/。
Guides AI agent features in petconnect-app including LLM providers (DeepSeek, Doubao, Gemini), anti-abuse constraints, prompt design, and keyword-based human simulation. Use when adding AI agents, changing LLM providers, adjusting rate limits, or modifying agent prompts.
Guides Vercel deployment and PWA setup for petconnect-app. Use when deploying to Vercel, configuring PWA, adding to home screen, or troubleshooting deployment/auth/AI issues.
Analyzes staged and modified files, groups them by feature, and guides batch commits. Use when the user says "提交到Github", "提交到 GitHub", "push to GitHub", or has many staged files from multiple features and wants to commit by feature.
按需开启/关闭 MCP 服务。当用户说"开启 xxx MCP"、"关闭 yyy MCP"、"MCP 太多了"、"管理 MCP"、"禁用 MCP"时触发。
将大型需求拆分为多阶段任务文档并分步交付。当用户说「拆分任务」「分阶段执行」「按需求文档实现」「分部交付」，或提供分析报告要求逐步实现时使用。自动在 docs/demand/<主题>/ 下建立 phases/ 目录，生成带状态标注的阶段文档，每阶段完成后更新状态、提供后续步骤，并询问是否 push。
| name | dark-mode-design |
| description | Design and implementation guidelines for dark mode. Covers common pitfalls, color palette, Tailwind replacement patterns. Use when implementing dark mode, designing dark themes, or reviewing dark mode implementations. |
触发词：暗色模式、dark mode、深色主题、暗色主题、主题切换、prefers-color-scheme
| 坑点 | 规避策略 |
|---|---|
| 纯黑 (#000) + 纯白 (#fff) | 使用深灰背景 (#18181b, #27272a) 和浅灰文字 (#e4e4e7)，避免极端对比 |
| 阴影在暗色下失效 | 用边框 + 轻微提亮背景色表现层级，而非依赖 shadow |
| 高饱和色在暗底上刺眼 | 暗色模式下 primary 适当降饱和或提高明度 |
| 细灰分割线消失 | 使用 border-zinc-700/600 替代 border-gray-100/200 |
| 模态遮罩不可见 | 暗色下用 bg-black/60 或 bg-white/5，保证与背景区分 |
| 浮层/卡片融入背景 | 卡片用 bg-zinc-800 等略浅于背景，形成层级 |
| 字重问题 | 避免过细字体；粗体在暗底上略减重或提高对比度 |
| 图片/图形白底暴露 | 占位图、图标优先用透明背景 (SVG/PNG) |
| 用户无选择权 | 默认跟随系统，并在设置中提供「浅色 / 深色 / 跟随系统」 |
#18181b (zinc-900)#27272a (zinc-800)#3f3f46 (zinc-700)#3f3f46 / #52525b (zinc-700/600)text-zinc-900 或 text-black 保持可读性#a1a1aa (zinc-400)禁止：纯黑 #000、纯白 #fff 作为大面积背景或文字。
| 浅色类名 | 暗色变体 |
|---|---|
bg-white | dark:bg-zinc-800 |
bg-gray-50 | dark:bg-zinc-900 |
bg-gray-100 | dark:bg-zinc-800 |
text-gray-900 | dark:text-zinc-100 |
text-gray-500 / text-gray-400 | dark:text-zinc-400 / dark:text-zinc-500 |
border-gray-100 / border-gray-200 | dark:border-zinc-700 / dark:border-zinc-600 |
bg-black/50（遮罩） | dark:bg-black/60 |
hover:bg-gray-50 | dark:hover:bg-zinc-700 |
prefers-color-schemeindex.html 的 <head> 最前面加入内联脚本，首帧渲染前根据 localStorage 和 prefers-color-scheme 设置 html 的 dark class实现前：
darkMode: 'class'实现后：