{"id":8505,"plugin_id":"plugin_asdk_app_6a610f58f8348191bf98761a288c1f03","kind":"skill","collection_source":null,"comparison_source":null,"observed_at":"2026-09-30T22:52:59.516Z","digest":"3c57983f9256d60b20bf429439ba099752a3fa04b8db03b1bd794c458c6f7aa3","against":null,"payload":{"name":"light-dark-gradient-pairs","description":"Create semantically matched light- and dark-theme linear gradient pairs and display them together in the Gradient Picker. Use when users need coordinated gradient treatments for light and dark interfaces, paired campaign assets, or theme-aware UI roles. Provide visual design guidance only; do not claim verified text contrast, automatic theme switching, or code integration.","included_files":[],"skill_md_contents":"---\nname: light-dark-gradient-pairs\ndescription: Create semantically matched light- and dark-theme linear gradient pairs and display them together in the Gradient Picker. Use when users need coordinated gradient treatments for light and dark interfaces, paired campaign assets, or theme-aware UI roles. Provide visual design guidance only; do not claim verified text contrast, automatic theme switching, or code integration.\n---\n\n# Light and Dark Gradient Pairs\n\nDesign paired gradients that feel like the same visual identity across light and dark contexts.\n\n## Gather inputs\n\nIdentify:\n\n- the brand or anchor colors;\n- the UI roles that need paired treatments;\n- the desired mood and intensity;\n- any fixed colors, angles, or stop positions;\n- likely foreground text colors when the user provides them.\n\nAsk a focused question only when the anchor palette or required roles are genuinely unclear. Limit the collection to four pairs because `display-gradients` accepts at most eight gradients.\n\n## Design the pairs\n\n1. Assign a semantic role to each pair, such as Hero, Card, or Accent.\n2. Design the light member for a light surrounding interface and the dark member for a dark surrounding interface.\n3. Preserve recognizable relationships through shared anchor hues, related angle logic, and deliberate changes in lightness and saturation.\n4. Avoid mechanically inverting colors; adjust them to preserve the intended mood.\n5. Name members consistently, for example `Hero Light` and `Hero Dark`.\n6. Place each light member immediately before its dark partner in the tool input.\n7. Call `display-gradients` once with all pairs and a concise `reason`.\n\nFor every gradient, provide a name of at most 80 characters, an integer angle from 0 through 359, and two to eight opaque hex stops positioned from 0 through 100.\n\n## Deliver the result\n\nAfter rendering:\n\n- provide a compact pair-to-role map;\n- explain how each dark member relates to its light partner;\n- label any foreground-color suggestion as preliminary;\n- invite visual adjustment in the widget and point to its exact text or swatch-image exports.\n\n## Boundaries\n\n- Do not claim WCAG compliance or verified contrast across the gradient. Recommend testing real foreground content at representative points.\n- Do not claim to implement CSS theme switching or modify application code.\n- Do not sample images, websites, or external design systems.\n- Use only linear gradients with opaque hex stops.\n"},"changes":[],"summary":"First saved snapshot. No earlier version is available for comparison.","summary_kind":"deterministic","summary_metadata":{}}