Skill for ensuring visual consistency and preventing layout shifts during responsive transitions.
This skill acts as a "Brand Guardian" to ensure that FlyerBoard maintains a unified look and feel across all features and development cycles.
primary-500 (#ef4444) - Use for main actions/branding.neutral-800 (#242428) - Use for primary text.neutral-500 (#71717a) - Use for secondary text.neutral-200 (#dbdbe4).Plus Jakarta Sans..container-padding and .content-max-width utility classes defined in tailwind.config.js.lucide-react.w-6 h-6).w-5 h-5).w-4 h-4).text-neutral-500) unless active or primary.Before creating a new UI component, check src/components/ui/ to see if one already exists:
CircularProgress: For determinate loading.BottomSheet: For mobile action menus.ImageDisplay: For all image rendering.StarRating: For reviews/ratings.toast.success().Header component with slot-based icons.audit-design-system.shScans for hardcoded color hex values or absolute pixel spacings that should be replaced with design tokens.
Command:
./.agent/skills/visual-consistency-auditor/scripts/audit-design-system.sh <path-to-file>
w-[123px]) unless absolutely necessary.tailwind.config.js for the full list of available brand colors and spacing tokens.