Bidirectional design token translation between Style Dictionary JSON and _variables.scss for the Genesis Semantic Design System. Converts tokens to SCSS variables and parses existing SCSS back into structured token JSON.
Apply advanced glassmorphism, neon glows, quantum gradients, and consciousness animations using Genesis Ontological mixins. Implement futuristic visual effects while maintaining semantic purity. Use when enhancing visual aesthetics, creating immersive experiences, or implementing advanced UI effects from v2.0+ enhancements.
Migrate legacy CSS and SCSS to Genesis Ontological mixins. Convert raw CSS properties to semantic ontological patterns, ensure zero-CSS compliance in subdomain files, and maintain the three-tier architecture. Use when refactoring existing stylesheets to adopt the ontology system or auditing subdomain SCSS for semantic purity.
Validates SCSS unit compatibility to prevent Sass compilation errors from mixing incompatible units like vw and rem
Manage bidirectional synchronization between _design/ JSON blueprints and Jekyll _includes/_layouts code. _design/ is the single source of truth for both Jekyll and Figma. Forward-syncs blueprints to _data/design/ for Jekyll. Reverse-extracts structural changes from HTML back to blueprints. Keeps genesis-core.scss selectors in step with layout-variants. Enriches blueprints with figmaStyles for Blueprint2Code import.
Author and validate JSON blueprints in _design/ that represent the skeletal structural intent of UI components and page layouts, entirely decoupled from visual styling or framework-specific code.
Create semantic HTML5 templates with accessibility-first principles for Genesis Ontological Design System. Ensure proper landmark elements, meaningful class names, WCAG compliance, and BEM-style naming. Includes ready-to-use component patterns for navigation, forms, cards, modals, and more. Use when building Jekyll templates, includes, or auditing HTML structure for semantic correctness.
Implement Motion.dev (WAAPI) animations with Genesis token-driven spring physics, scroll reveals, and gesture support while respecting prefers-reduced-motion. Use when adding transitions, entrance animations, or gesture-driven motion to Genesis theme components.