MDX Callout and Code Components
Specify a small MDX component map: a callout, a code block with a title, and a link that refuses javascript: URLs. STACK [NEXT.JS MDX | ASTRO MDX | CONTENTLAYER] Authors are: [STAFF | ALSO OUTSIDE CONTRIBUTORS] DELIVER 1) The component signatures and the markdown the author writes. Keep the author syntax boring. 2) The callout kinds: note, warning. Not twelve colors. The warning is not only color; it has a text label. 3) The link component: allow http, https, and relative URLs; reject javascript and data URLs if contributors are not fully trusted. Show the check. 4) Code blocks: a title prop, overflow scroll, and no client-side highlighter on every page if a build-time one exists. Say which we use. 5) How unknown components fail the build rather than rendering a mystery tag. Do not allow raw HTML from outside contributors unless I said we trust them, and if I did, say what we still strip (script, iframe).
🌟 Example Output / Preview
Prompt Metadata
Primary Use Cases:
- •Legacy code modernization & technical refactoring
- •Full-stack layout generation & component structuring
- •CI/CD workflow automation & unit/E2E testing suites
Associated Tags:
💡 Pro Tips & Advice
1. Use bracketed items: Be sure to fill out all [PLACEHOLDER] elements with specific details before sending the prompt to the AI model.
2. Adjust temperature: For creative tasks, set AI temperature higher (e.g., 0.8), or lower (e.g., 0.2) for strict coding/technical tasks.
🔗 Related AI Prompts
Full SaaS Landing Page Build Spec (SEO + Conversion)
You are a Staff Product Designer + Frontend Engineer + SEO strategist. Build a complete, production-ready marketing landing page f...
SaaS Analytics Dashboard Full Build Spec
You are a Principal Product Designer + Frontend Lead. Design and specify a complete [LIGHT | DARK] analytics dashboard for [PRODUC...
SaaS Admin Panel Dashboard Build Spec
Design a full internal Admin Dashboard for [PRODUCT_NAME] used by [ADMIN_ROLE: support | ops | super-admin]. --- 🎯 CONTEXT Adm...