القائمة
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