菜单
Color theme selection and application for website branding. Use when user wants to change colors, theme, accent, branding, or visual style.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
WCAG 2.1 AA compliance validation for static websites. Checks semantic HTML, ARIA labels, heading hierarchy, color contrast, keyboard navigation, and alt text. Use when user says "check accessibility", "a11y", "WCAG", or "screen reader".
SEO and meta tag validation for search engine optimization and social sharing. Checks title, meta description, Open Graph tags, Twitter Cards, favicon, canonical URLs, and structured data. Use when user says "check SEO", "validate meta tags", or "search engine".
Visual and responsive design validation across mobile, tablet, and desktop viewports. Checks layout consistency, typography, navigation behavior, tap targets, and image responsiveness. Use when user says "visual test", "responsive", "check mobile", or "cross-browser".
SiteGround deployment setup including SSH keys and GitHub secrets. Use when user wants to deploy, go live, publish, or set up hosting.
Interactive website customization wizard. Gathers user information and configures template files. Use when user says "set up", "configure", "get started", "customize", or wants to personalize the template.
| name | color-theming |
| description | Color theme selection and application for website branding. Use when user wants to change colors, theme, accent, branding, or visual style. |
| allowed-tools | Read, Write, Edit, AskUserQuestion |
Help users select and apply color themes to their website.
| Theme | Hex Code | Character |
|---|---|---|
| Blue | #2563eb | Professional, trustworthy, corporate |
| Purple | #7c3aed | Creative, innovative, artistic |
| Teal | #0d9488 | Fresh, modern, tech-forward |
| Amber | #d97706 | Warm, energetic, friendly |
| Rose | #e11d48 | Bold, passionate, attention-grabbing |
If user hasn't specified a color, use AskUserQuestion:
"Which color theme would you like for your website?"
- Blue (#2563eb) - Professional, trustworthy
- Purple (#7c3aed) - Creative, innovative
- Teal (#0d9488) - Fresh, modern
- Amber (#d97706) - Warm, energetic
- Rose (#e11d48) - Bold, passionate
- Custom (provide hex code)
If user provides a custom hex code:
#RRGGBB or #RGB)#0a0e14):
Update styles/variables.css:
:root {
/* ... other variables ... */
/* Accent - Updated by color-theming */
--color-accent: {selected_color};
}
Suggest running preview:
Color updated! Run
/previeworjust serveto see the changes.
For dark backgrounds (#0a0e14), these colors meet WCAG AA:
| Color | Contrast Ratio | Status |
|---|---|---|
| Blue #2563eb | 4.6:1 | Pass |
| Purple #7c3aed | 4.8:1 | Pass |
| Teal #0d9488 | 4.5:1 | Pass |
| Amber #d97706 | 4.7:1 | Pass |
| Rose #e11d48 | 4.5:1 | Pass |
For --color-accent-secondary, you can:
#7c3aed (purple) for most themes