Edit Prompt Suggestion

Name

Also known as (comma separated)

Brief definition Suggested prompt/action.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Label", "default": "Summarise this thread" }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#E8A020", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "variant", "type": "select", "label": "Variant", "default": "chip", "options": [ "button", "chip" ] }, { "id": "showArrow", "type": "toggle", "label": "Show trailing arrow", "default": true } ]

Templates (JSON object keyed by format) { "html": "<button type=\"button\" class=\"ps ps--{{variant}}\" style=\"--accent:{{accent}};\">\n <span class=\"ps__label\">{{label}}</span>\n {{#if showArrow}}<span class=\"ps__arrow\" aria-hidden=\"true\">→</span>{{/if}}\n</button>\n<style>\n.ps { font: 500 14px system-ui, sans-serif; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;\n background: #FAF7F2; color: #241430; }\n.ps--chip { border: 1.5px solid var(--accent); border-radius: 999px; padding: 8px 16px; }\n.ps--button { border: none; border-radius: 8px; padding: 10px 18px; background: var(--accent); }\n.ps:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n.ps:hover { filter: brightness(0.97); }\n.ps:hover .ps__arrow { transform: translateX(2px); }\n@media (prefers-reduced-motion: no-preference) {\n .ps__arrow { transition: transform .15s ease; }\n}\n</style>", "tailwind": "<button type=\"button\" class=\"ps-tw ps-tw--{{variant}} inline-flex items-center gap-2 font-medium text-sm cursor-pointer bg-[#FAF7F2] text-[#241430]\" style=\"--accent:{{accent}};\">\n <span>{{label}}</span>\n {{#if showArrow}}<span aria-hidden=\"true\" class=\"ps-tw__arrow\">→</span>{{/if}}\n</button>\n<style>\n.ps-tw--chip { border: 1.5px solid var(--accent); border-radius: 999px; padding: 8px 16px; }\n.ps-tw--button { border: none; border-radius: 8px; padding: 10px 18px; background: var(--accent); }\n.ps-tw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n.ps-tw:hover .ps-tw__arrow { transform: translateX(2px); }\n.ps-tw__arrow { display: inline-block; }\n@media (prefers-reduced-motion: no-preference) {\n .ps-tw__arrow { transition: transform .15s ease; }\n}\n</style>", "react": "export function PromptSuggestion({\n label = \"{{label}}\",\n accent = \"{{accent}}\",\n variant = \"{{variant}}\",\n showArrow = {{showArrow}},\n}) {\n const shapeStyle = variant === \"chip\"\n ? { border: `1.5px solid ${accent}`, borderRadius: 999, padding: \"8px 16px\", background: \"#FAF7F2\" }\n : { border: \"none\", borderRadius: 8, padding: \"10px 18px\", background: accent };\n return (\n <button type=\"button\" style={{ display: \"inline-flex\", alignItems: \"center\", gap: 8, cursor: \"pointer\",\n font: \"500 14px system-ui, sans-serif\", color: \"#241430\", ...shapeStyle }}>\n <span>{label}</span>\n {showArrow && <span aria-hidden=\"true\">→</span>}\n </button>\n );\n}" }