메뉴
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 직업 분류 기준
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>
Create a new reading note from the project template. Argument: <book-title> by <author>
Create a new talk page (EN + ES) and optionally scaffold a Marp slide deck. Argument: <talk-title> [--deck]
| 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)