{"id":8419,"plugin_id":"plugin_asdk_app_6a610f58f8348191bf98761a288c1f03","kind":"skill","collection_source":null,"comparison_source":null,"observed_at":"2026-09-30T22:52:45.646Z","digest":"297d18bb1cac1d187f57b2dce463f0a00e84d10d443d41f3f13b007c2fee7d52","against":null,"payload":{"name":"brand-gradient-kit","description":"Create a role-based brand gradient kit from a brand brief, mood, and optional hex palette, then display it with the Gradient Picker. Use when users ask for a branded gradient system, reusable brand gradients, or coordinated gradients for hero, accent, surface, promotional, and dark roles. Do not use for logo design, image palette extraction, or verified accessibility auditing.","included_files":[],"skill_md_contents":"---\nname: brand-gradient-kit\ndescription: Create a role-based brand gradient kit from a brand brief, mood, and optional hex palette, then display it with the Gradient Picker. Use when users ask for a branded gradient system, reusable brand gradients, or coordinated gradients for hero, accent, surface, promotional, and dark roles. Do not use for logo design, image palette extraction, or verified accessibility auditing.\n---\n\n# Brand Gradient Kit\n\nBuild a coordinated gradient system for distinct brand roles rather than a set of unrelated color experiments.\n\n## Gather inputs\n\nIdentify:\n\n- the brand traits, audience, and product context;\n- required and forbidden colors, expressed as hex when provided;\n- the surfaces or roles the kit must cover;\n- the requested mood, intensity, and number of options.\n\nAsk one focused question only when a missing brand color or required role would materially change the kit. Otherwise, make restrained assumptions and state them briefly.\n\n## Build the kit\n\n1. Treat supplied brand colors and prohibitions as hard constraints unless the user explicitly permits variations.\n2. Choose one to eight useful roles. Prefer a compact set such as hero, accent, surface, promotional, and dark over near-duplicate options.\n3. Establish cohesion with shared anchor colors, deliberate angle relationships, and consistent stop-position logic.\n4. Give every gradient a concise semantic name that identifies its intended role.\n5. Order the collection from the most prominent brand use to the most specialized use.\n6. Call `display-gradients` once with the complete proposed collection and a concise `reason`.\n\nFor `display-gradients`, provide one to eight gradients. Give each gradient a name of at most 80 characters, an integer angle from 0 through 359, and two to eight stops. Give every stop a three- or six-digit hex color and a position from 0 through 100.\n\n## Deliver the result\n\nAfter rendering the widget:\n\n- provide a compact role-to-gradient usage map;\n- explain the shared design logic in no more than a few sentences;\n- invite the user to adjust names, angles, colors, or stops in the widget;\n- point to the widget's Names, CSS variables, Tailwind classes, and swatch-image exports when implementation assets are wanted.\n\nWhen valid current gradients are available in model-visible widget state, treat them as the current collection during follow-up discussion. Never rely on private widget state.\n\n## Boundaries\n\n- Create linear gradients with opaque hex colors only.\n- Do not claim to sample colors from an image or external brand site.\n- Do not claim that a gradient passes accessibility requirements. Recommend testing it with its actual text and layout when accessibility matters.\n- Do not claim to save a persistent brand library or modify the user's codebase.\n"},"changes":[],"summary":"First saved snapshot. No earlier version is available for comparison.","summary_kind":"deterministic","summary_metadata":{}}