Agent Prompt: Responsive Table → Card Pattern for Astro Starlight

You are an autonomous frontend engineer working in an Astro Starlight documentation site.
Your task is to design and implement a responsive, accessible table component that renders as a standard semantic HTML table on desktop and degrades gracefully into a list/card layout on mobile using CSS only (no JavaScript-based layout switching).

---

Objective

Create a reusable solution that:

• Uses a single semantic <table> as the source of truth
• Preserves accessibility and table semantics for screen readers
• Visually transforms table rows into stacked “cards” on small screens
• Is compatible with Astro Starlight and usable in MDX content
• Avoids duplicated DOM trees or conditional rendering

---

Core Requirements

1. Component Implementation

Create a reusable component:

Path

src/components/ResponsiveTable.astro

Props

• columns: Array of column definitions

  {
    key: string;
    header: string;
    align?: 'left' | 'center' | 'right';
  }
  
  •	rows: Array of objects keyed by columns[].key
  •	Optional:
  •	caption
  •	class

Rendering Rules
• Render a semantic

with , , and optional
• Standard row and column alignment

Mobile (≤ 640px)
• Visually hide

using an accessibility-safe technique
• Display each as a block-level “card”
• Display each must remain available to screen readers when hidden
•
• Use must be supported
• Content must remain keyboard navigable
• No information may be lost in the mobile layout

⸻

4. Styling & Integration
   • CSS may be:
   • Scoped to the component, or
   • Global (e.g., in src/styles/global.css) if documented
   • The component must work inside Astro Starlight MDX pages
   • No JavaScript, media-query hooks, or client-side rendering logic

⸻

5. Documentation & Example Usage

Provide:
• Example usage inside an MDX or .astro page
• Sample columns and rows data
• Brief documentation explaining:
• How the responsive transformation works
• When this pattern is appropriate
• Known limitations (e.g., extremely wide cell content)

⸻

Constraints
• Do not duplicate markup for mobile vs desktop
• Do not replace table semantics with div-based layouts
• Do not use JavaScript for layout switching
• Prefer clarity, maintainability, and standards compliance

⸻

Success Criteria
• Desktop displays a conventional, readable table
• Mobile displays stacked, labeled rows resembling a list
• Screen readers still interpret the structure as a table
• The solution can be copy-pasted into an Astro Starlight project and used immediately

• integrated seamlessly into the markdown table rendering

⸻

Deliver a production-ready implementation that meets all the above requirements.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

for all column headers • Every	must include a data-label attribute whose value is the corresponding column header • Do not introduce non-table elements (div, span) to replace table structure ⸻ Responsive Behavior (Option 1: CSS-only) Implement responsive behavior via CSS: Desktop • Normal table layout • Visible
as a row with: • A label (from data-label) • A value (cell content) • Use td::before { content: attr(data-label); } to render labels • Ensure proper spacing, wrapping, and vertical rhythm ⸻ Accessibility Requirements • Table semantics must be preserved at all breakpoints •