website-v3

Complete reference for the Media/Image Gallery system — architecture, singletons, cache strategy, validations, fixers, and admin scripts. Use this skill whenever making any change to image registry logic, image upload/delete/optimization flows, auto-tagging, media storage providers, image validators, or image-related admin/fixer scripts. Also activate when adding new image fields to the registry, new preset definitions, or new storage provider integrations.

How to add image fields to YML-driven section components in this codebase. Use this skill whenever you need to add, change, or understand image props in any component — including the schema.ts definition, field-editors.ts registration, and the YML data shape. Also activate when adding a laptop mockup image, background image, or an array of images to a section component. Essential reference for anyone doing the laptop/device image work in features_quad or similar components.

End-to-end workflow for creating a new section component: canvas design first, then codebase implementation following 4Geeks architecture and design system.