{"id":6336,"plugin_id":"plugin_asdk_app_696e890a45388191b24c4a36d2177201","kind":"skill","collection_source":null,"comparison_source":null,"observed_at":"2026-09-30T22:48:08.795Z","digest":"8d266174905a709e6040f57c7e7d068dc2e6a9df286f7f357b09462d928bfc2f","against":null,"payload":{"name":"compose-ui-theme","description":"Compose a coherent application or website color theme from seed colors, an existing palette, a product brief, or light/dark-mode requirements. Use for UI surfaces, text hierarchy, controls, focus states, borders, and semantic feedback colors. Do not use for brand identity alone, interior spaces, or code-only token formatting without theme design.","included_files":[{"relative_path":"agents/openai.yaml","size_in_bytes":211}],"skill_md_contents":"---\nname: compose-ui-theme\ndescription: Compose a coherent application or website color theme from seed colors, an existing palette, a product brief, or light/dark-mode requirements. Use for UI surfaces, text hierarchy, controls, focus states, borders, and semantic feedback colors. Do not use for brand identity alone, interior spaces, or code-only token formatting without theme design.\n---\n\n# Compose a UI theme\n\n## Define the interface context\n\n- Determine product type, light or dark mode, density, emotional tone, seed colors, and critical components.\n- Preserve explicit brand colors, but distinguish brand expression from colors suitable for text, surfaces, and interaction states.\n\n## Compose the hierarchy\n\n1. Start with canvas, surface, elevated surface, and border values that create clear depth without excessive contrast.\n2. Assign primary, secondary, and muted text colors for readable hierarchy.\n3. Define action colors and their hover, active, disabled, and focus treatments. Do not encode state through color alone when offering implementation advice.\n4. Add success, warning, error, and informational colors only when relevant; keep them distinguishable from the main action color.\n5. For dark themes, avoid pure black expanses and over-saturated large surfaces unless the brief calls for them. For light themes, avoid borders too faint to communicate structure.\n6. Evaluate likely foreground/background pairings. Clearly label uncalculated contrast as needing verification rather than claiming compliance.\n7. Keep the visible editable palette manageable, normally eight to twelve representative colors; describe derived interaction variants separately if necessary.\n\n## Deliver\n\n- Summarize the theme direction and map every displayed color to a UI role.\n- Invoke `palette-picker` with representative uppercase `#RRGGBB` colors and a `reason` identifying mode and product context.\n- If implementation output is requested, provide semantic mappings after the palette and keep them synchronized with its values.\n\n"},"changes":[],"summary":"First saved snapshot. No earlier version is available for comparison.","summary_kind":"deterministic","summary_metadata":{}}