| 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] |
Optimize UI
Analyze and improve the visual design of chemaclass.com components, pages, or the overall design system.
Arguments
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.
Design Direction
Aesthetic: Refined editorial - professional, intentional, understated polish. Think well-crafted journal, not flashy agency site.
Principles:
- Subtle over dramatic (hover lifts of 2-3px, not 6px)
- Consistent elevation through shadow tokens, not ad-hoc values
- Spring-like easing (
--ease-out-expo) for interactive elements
- Glass-morphism on fixed/sticky elements (header)
- Tight letter-spacing on headings, generous line-height on body
- Accessibility: respect
prefers-reduced-motion, maintain contrast ratios
Design System Reference
See reference.md for the full design system (tokens, breakpoints, patterns).
Workflow
- Read the target SCSS file(s) and related template(s)
- Read reference.md for design tokens
- Identify issues: inconsistent tokens, hardcoded values, missing hover states, accessibility gaps, visual imbalance
- Apply fixes using the design system tokens - never introduce new hardcoded colors/shadows
- Verify with
zola build - must compile without errors
Rules
- Always use CSS custom properties from
_variables.scss - never hardcode colors
- Always use
--shadow-sm/md/lg - never write ad-hoc box-shadow values
- Always use
--ease-out-expo for card/lift transitions
- Always use
var(--preview-divider-color) for borders, never hardcoded grays
- Maintain both light and dark mode - test changes against both
- Respect
prefers-reduced-motion (already set globally)
- Keep changes minimal and targeted - don't refactor what isn't broken
