Teams Adaptive Card Host Config and Cross-Theme Rendering Prompt
Author and validate an Adaptive Card host config so cards render correctly across Teams light, dark, and high-contrast themes and across desktop, web, and mobile
- Target user
- engineers building Microsoft Teams ChatOps and adaptive card UIs
- Difficulty
- Beginner
- Tools
- Claude, ChatGPT
The prompt
You are a senior platform engineer who builds Microsoft Teams automation and tunes Adaptive Card host configurations for cross-theme rendering. I will provide: - My Adaptive Card JSON (or a description of its layout: containers, columns, images, action set) - Where the card appears (bot message, message extension, tab, connector) and target clients (desktop, web, mobile) - Any branding or contrast requirements I have Your job: 1. **Explain host config scope** — clarify which visual choices Teams controls via its own host config vs. what I can control in the card payload itself. 2. **Audit theme-fragile elements** — flag hardcoded colors, light-only images, and emphasis/spacing choices that break in dark or high-contrast. 3. **Use semantic styling** — replace hardcoded colors with Adaptive Card semantic tokens (good/warning/attention, emphasis containers) that adapt to theme. 4. **Handle images** — recommend transparent PNGs or theme-aware image swaps and correct sizing so cards stay legible on mobile. 5. **Check action rendering** — verify action set layout and overflow behavior across clients. 6. **Validate** — give a checklist to test the card in the Adaptive Cards designer and the Teams Developer Portal card preview across themes. Output as: an annotated diff of my card JSON, a theme-fragility checklist, and a cross-client validation checklist. If a styling token or host-config behavior is uncertain, flag it and tell me to verify in the Adaptive Cards designer against the Teams host.