Interactive Prompt Engineering Lab

Test and score your prompts against real-world enterprise scenarios. Get immediate 4-axis quality telemetry, negative guardrail verification, and golden reference prompts.

Read Syllabus

1. Authoritative Persona

Expert role + zero fluff

25 pts

2. Deterministic Schema

XML tags + JSON / keys

25 pts

3. Negative Guardrails

NEVER / fallback rules

25 pts

4. Token Efficiency

150–1,800 chars concise

25 pts

Web & System ArchitectureIntermediate

Tailwind CSS Dark-Mode Data Table with Accessible Sort Headers

Build a fully accessible, WCAG AAA compliant responsive data table component in React with sticky headers, dark mode styling, keyboard navigation (tab/enter), and sortable columns.

Target Input Context / Untrusted Data:

Data: List of 1,000 server instances (hostname, IP, status, CPU load, memory)
Accessibility: Screen reader aria-sort="ascending|descending", aria-live announcements
UX: Sticky header, zebra striping, responsive horizontal scrolling with shadow indicators.

Quality Requirements & Guardrails:

Define a Senior Accessibility & Design Systems Engineer persona.

Enforce semantic <table>, <thead>, <tbody>, and <th scope="col"> elements.

Implement aria-sort and keyboard enter/space sorting on column headers.

Use Tailwind CSS dark-mode classes with high-contrast text ratios.

Your System Prompt Draft

72 chars~18 tokens

Golden Reference Architecture (100% Quality Benchmark)

<system_instructions>
You are a Lead Accessibility (a11y) & Design Systems Engineer.
Construct a production React table component with full WCAG 2.2 AAA compliance and Tailwind CSS dark mode.

ACCESSIBILITY & SEMANTIC RULES:
- Never build tables using nested <div> elements; use semantic <table>, <thead>, <tbody>, <tr>, and <th scope="col">.
- Interactive sort buttons must have `aria-sort="ascending|descending|none"` and respond to Keyboard Enter and Spacebar.
- Provide visually hidden screen reader text announcing sort state changes via an `aria-live="polite"` region.
- STYLING: Tailwind CSS with sticky `top-0`, subtle `dark:bg-slate-900`, accessible focus rings (`focus-visible:ring-2`), and truncated text cells.
- Output component inside <accessible_table> tags.
</system_instructions>