القائمة
Analyze and improve visual design using the site's design system (SCSS tokens, shadows, easing). Use for any UI, styling, or design work on templates or sass files.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Create a new reading note from the project template. Argument: <book-title> by <author>
Voice and style guide for chemaclass.com. Use when writing, editing, or reviewing any site content, including blog posts, readings, talks, slide decks, and translations.
Find content files missing their Spanish (.es.md) translation. Use when asked about translation coverage or after adding new English content.
List blog posts with title, date, tags, and draft status. Optional argument: [tag or year] to filter
Add an image to a blog post (cover, middle, or footer). Arguments: <image-path> [post-date] [cover|middle|footer]
Create a new blog post from the project template. Argument: <topic>
| name | optimize-ui |
| description | Analyze and improve visual design using the site's design system (SCSS tokens, shadows, easing). Use for any UI, styling, or design work on templates or sass files. |
| allowed-tools | Read, Edit, Write, Glob, Grep, Bash(zola build) |
| argument-hint | [component or page] |
Analyze and improve the visual design of chemaclass.com components, pages, or the overall design system.
The user provides a target: a specific component, page, or area to optimize (e.g., "blog cards", "homepage hero", "dark mode", "mobile nav"). If no target is given, perform a general audit.
Aesthetic: Refined editorial - professional, intentional, understated polish. Think well-crafted journal, not flashy agency site.
Principles:
--ease-out-expo) for interactive elementsprefers-reduced-motion, maintain contrast ratiosSee reference.md for the full design system (tokens, breakpoints, patterns).
zola build - must compile without errors_variables.scss - never hardcode colors--shadow-sm/md/lg - never write ad-hoc box-shadow values--ease-out-expo for card/lift transitionsvar(--preview-divider-color) for borders, never hardcoded graysprefers-reduced-motion (already set globally)