VibeRPGSimulator

Builds accessible, responsive interface changes and checks them against WCAG.

How it works

Foe: Blank Mimic, an empty screen or canvas that needs a design.

Foes

  • Blank Mimic

Party · Context

  • IllusionistYour agent100/100

  1. Blank Mimic

    The Blank Mimic blocks the way.

    What really happensIt stands for an empty screen or canvas that needs a design.

    Illusionist: Context 100/100.

  2. Blank stare

    The blank page stares back and drains the hero.

    What really happensStarting a screen from nothing costs time and context.

    Illusionist takes 9. Illusionist: Context 91/100.

  3. Addy Osmani Frontend UI Engineering

    The hero opens the UI scroll over the empty screen.

    What really happensThe agent loads frontend-ui-engineering when building or changing a user-facing page or component.

    Blank Mimic takes 19.

  4. Addy Osmani Frontend UI Engineering

    Existing tokens are read before any new look is chosen.

    What really happensSpacing, color, and type come from the project's design system. Text contrast target is 4.5:1, and 3:1 for large text.

    Blank Mimic takes 16.

  5. Blank stare

    The Blank Mimic uses Blank stare.

    Illusionist takes 9. Illusionist: Context 82/100.

  6. Addy Osmani Frontend UI Engineering

    Small components are forged, with empty and error states.

    What really happensIt colocates the component, test, and hook, prefers composition, and handles loading, empty, and error states.

    Blank Mimic takes 24.

  7. Addy Osmani Frontend UI Engineering

    A ward checks keyboard, names, and focus before the mimic settles.

    What really happensWCAG 2.1 AA: keyboard access, labels, focus moves, and heading order. Check widths 320, 768, 1024, and 1440.

    Blank Mimic takes 10. Illusionist: Ward.

  8. Addy Osmani Frontend UI Engineering

    The blank mimic wears the project's own face.

    What really happensYou get a responsive component on the design system, with keyboard access and named controls.

    Blank Mimic takes 31. Blank Mimic falls.

  9. Victory

    The Blank Mimic falls.

Learn this spell

Claude Code and Codex

npx skills add addyosmani/agent-skills --skill frontend-ui-engineering

Notes

For new or changed UI. Use the project's design system, not a default purple-gradient look. WCAG 2.1 AA: keyboard access, labels, focus management, 4.5:1 contrast for normal text and 3:1 for large text. Check 320, 768, 1024, and 1440 px. The skill points at repo-root references/accessibility-checklist.md, which a per-skill install does not copy. Clone the repo or copy that file in. All 25 skills: npx skills add addyosmani/agent-skills.

Proving Grounds record

Controlled quest results, separate from recorded usage. Each setup pools runs across its quests. The per-quest table below has casts, cast time, mana, incantation and runes; medians are not pooled.

Hero: Claude Code 2.1.305; weapon (model): claude-haiku-5-5; charge (effort): low; arena: sealed; invoked cast (the prompt named the skill). macOS 27.0.1, arm64. Curator.

Clear rate33%2 of 6 runs passed every check; Unarmed: 2 of 6 (matched quests)
Steadiness10%reliability: Wilson 95% lower bound
Buff+0 ppvs Unarmed, only matched quests (6 equipped runs; 6 control runs)
Instant casts0 of 6runs cleared on the first prompt; Unarmed: 0 of 6 (matched quests)
Attunement100%6 of 6 runs opened an equipped skill
Upkeep-5% manaextra mana per run vs Unarmed, median of 2 quests
IncantationNot measuredoutput tokens per run vs Unarmed
Runes+6%lines added per run vs Unarmed, median of 2 quests

Hero: Claude Code 2.1.305; weapon (model): claude-opus-5-5; charge (effort): high; arena: sealed; invoked cast (the prompt named the skill). macOS 27.0.1, arm64. Curator.

Clear rate44%4 of 9 runs passed every check; Unarmed: 3 of 9 (matched quests)
Steadiness19%reliability: Wilson 95% lower bound
Buff+11 ppvs Unarmed, only matched quests (9 equipped runs; 9 control runs)
Instant casts4 of 9runs cleared on the first prompt; Unarmed: 3 of 9 (matched quests)
Attunement100%9 of 9 runs opened an equipped skill
Upkeep+4% manaextra mana per run vs Unarmed, median of 2 quests
IncantationNot measuredoutput tokens per run vs Unarmed
Runes-6%lines added per run vs Unarmed, median of 2 quests

Hero: Claude Code 2.1.305; weapon (model): claude-sonnet-5-5; charge (effort): medium; arena: sealed; invoked cast (the prompt named the skill). macOS 27.0.1, arm64. Curator.

Clear rate90%9 of 10 runs passed every check; Unarmed: 22 of 32 (matched quests)
Steadiness60%reliability: Wilson 95% lower bound
Buff+21 ppvs Unarmed, only matched quests (10 equipped runs; 32 control runs)
Instant casts4 of 10runs cleared on the first prompt; Unarmed: 9 of 32 (matched quests)
Attunement100%10 of 10 runs opened an equipped skill
Upkeep+12% manaextra mana per run vs Unarmed, median of 2 quests
IncantationNot measuredoutput tokens per run vs Unarmed
Runes-7%lines added per run vs Unarmed, median of 2 quests

Hero: OMP 18.8.3; weapon (model): anthropic/claude-sonnet-5-5; charge (effort): medium; arena: warded; invoked cast (the prompt named the skill). macOS 27.0.1, arm64. Curator.

Clear rate83%5 of 6 runs passed every check; Unarmed: 4 of 9 (matched quests)
Steadiness44%reliability: Wilson 95% lower bound
Buff+39 ppvs Unarmed, only matched quests (6 equipped runs; 9 control runs)
Instant casts2 of 6runs cleared on the first prompt; Unarmed: 1 of 9 (matched quests)
Attunement100%6 of 6 runs opened an equipped skill
Upkeep+32% manaextra mana per run vs Unarmed, median of 2 quests
IncantationNot measuredoutput tokens per run vs Unarmed
Runes+35%lines added per run vs Unarmed, median of 2 quests

Hero: Claude Code 2.1.305; weapon (model): claude-sonnet-5-5; charge (effort): medium; arena: sealed; ambient cast (the agent chose). macOS 27.0.1, arm64. Curator.

Clear rate75%3 of 4 runs passed every check; Unarmed: 22 of 32 (matched quests)
Steadiness30%reliability: Wilson 95% lower bound
Buff+6 ppvs Unarmed, only matched quests (4 equipped runs; 32 control runs)
Instant casts1 of 4runs cleared on the first prompt; Unarmed: 9 of 32 (matched quests)
Attunement0%0 of 4 runs opened an equipped skill
Upkeep+4% manaextra mana per run vs Unarmed, median of 2 quests
IncantationNot measuredoutput tokens per run vs Unarmed
Runes+0%lines added per run vs Unarmed, median of 2 quests
Per-quest Proving Grounds record
QuestFixed taskClear ratePassed runsSteadinessReliability lower boundBuffClear-rate points vs UnarmedInstant castsFirst-prompt clearsCastsPrompts to clearCast timeAgent runtimeManaCost at API list pricesIncantationOutput tokensRunesLines added / removedAttunementSkills openedSetupApp, model, effort and sandbox
Illusionist: pricing plan switcherQuest v80%0 of 3Unarmed: 0% (0 of 3)0%+0 ppvs Unarmed0 of 30%Unarmed: 0 of 3Not reported2m 0sUnarmed: 2m 24s248 Unarmed: 278Not reportedUnarmed: Not reported+516 / -4Unarmed: +508 / -3100%Hero: Claude Code 2.1.305; weapon (model): claude-haiku-5-5; charge (effort): low; arena: sealed; invoked cast (the prompt named the skill).
macOS 27.0.1, arm64. Curator.0 mishaps excluded. 2026-10-21 to 2026-10-21.Scrying (screenshot)
Try this loadout
node "<spell-report-skill-directory>/scripts/spell-report.mjs" trial --spell addy-frontend-ui-engineering --quest illusionist-pricing-tabs --hero claude-code --weapon 'claude-haiku-5-5' --charge low --cast invoked --control

Recorded with quest v8 and spell commits addy-frontend-ui-engineering@aeac41d4d005999432bb7312f7ff06383a91d59d. How to run it

Illusionist: pricing plan switcherQuest v817%1 of 6Unarmed: 33% (2 of 6)3%-17 pp debuffvs Unarmed1 of 617%Unarmed: 2 of 615m 29sUnarmed: 4m 38s12,065 Unarmed: 9,828Not reportedUnarmed: Not reported+717 / -3Unarmed: +730 / -2100%Hero: Claude Code 2.1.305; weapon (model): claude-opus-5-5; charge (effort): high; arena: sealed; invoked cast (the prompt named the skill).
macOS 27.0.1, arm64. Curator.0 mishaps excluded. 2026-10-21 to 2026-10-21.Scrying (screenshot)
Try this loadout
node "<spell-report-skill-directory>/scripts/spell-report.mjs" trial --spell addy-frontend-ui-engineering --quest illusionist-pricing-tabs --hero claude-code --weapon 'claude-opus-5-5' --charge high --cast invoked --control

Recorded with quest v8 and spell commits addy-frontend-ui-engineering@aeac41d4d005999432bb7312f7ff06383a91d59d. How to run it

Illusionist: pricing plan switcherQuest v880%4 of 5Unarmed: 53% (9 of 17)38%+27 ppvs Unarmed4 of 580%Unarmed: 9 of 1711m 52sUnarmed: 1m 37s3,035 Unarmed: 2,764Not reportedUnarmed: 14.5k+365 / -3Unarmed: +394 / -3100%Hero: Claude Code 2.1.305; weapon (model): claude-sonnet-5-5; charge (effort): medium; arena: sealed; invoked cast (the prompt named the skill).
macOS 27.0.1, arm64. Curator.0 mishaps excluded. 2026-10-21 to 2026-10-21.Scrying (screenshot)
Try this loadout
node "<spell-report-skill-directory>/scripts/spell-report.mjs" trial --spell addy-frontend-ui-engineering --quest illusionist-pricing-tabs --hero claude-code --weapon 'claude-sonnet-5-5' --charge medium --cast invoked --control

Recorded with quest v8 and spell commits addy-frontend-ui-engineering@aeac41d4d005999432bb7312f7ff06383a91d59d. How to run it

Illusionist: pricing plan switcherQuest v850%1 of 2Unarmed: 53% (9 of 17)9%-3 pp debuffvs Unarmed1 of 250%Unarmed: 9 of 1711m 30sUnarmed: 1m 37s2,342 Unarmed: 2,764Not reportedUnarmed: 14.5k+358 / -3Unarmed: +394 / -30%Hero: Claude Code 2.1.305; weapon (model): claude-sonnet-5-5; charge (effort): medium; arena: sealed; ambient cast (the agent chose).
macOS 27.0.1, arm64. Curator.0 mishaps excluded. 2026-10-21 to 2026-10-21.Scrying (screenshot)
Try this loadout
node "<spell-report-skill-directory>/scripts/spell-report.mjs" trial --spell addy-frontend-ui-engineering --quest illusionist-pricing-tabs --hero claude-code --weapon 'claude-sonnet-5-5' --charge medium --cast ambient --control

Recorded with quest v8 and spell commits addy-frontend-ui-engineering@aeac41d4d005999432bb7312f7ff06383a91d59d. How to run it

Illusionist: pricing plan switcherQuest v867%2 of 3Unarmed: 17% (1 of 6)21%+50 ppvs Unarmed2 of 367%Unarmed: 1 of 611m 32sUnarmed: 1m 6s2,484 Unarmed: 1,541Not reportedUnarmed: 10.2k+435 / -4Unarmed: +368 / -3100%Hero: OMP 18.8.3; weapon (model): anthropic/claude-sonnet-5-5; charge (effort): medium; arena: warded; invoked cast (the prompt named the skill).
macOS 27.0.1, arm64. Curator.0 mishaps excluded. 2026-10-21 to 2026-10-21.Scrying (screenshot)
Try this loadout
node "<spell-report-skill-directory>/scripts/spell-report.mjs" trial --spell addy-frontend-ui-engineering --quest illusionist-pricing-tabs --hero omp --weapon 'anthropic/claude-sonnet-5-5' --charge medium --cast invoked --control

Recorded with quest v8 and spell commits addy-frontend-ui-engineering@aeac41d4d005999432bb7312f7ff06383a91d59d. How to run it

Illusionist: booking form repairQuest v467%2 of 3Unarmed: 67% (2 of 3)21%+0 ppvs Unarmed0 of 30%Unarmed: 0 of 322m 8sUnarmed: 2m 10s275 Unarmed: 271Not reportedUnarmed: Not reported+176 / -77Unarmed: +158 / -79100%Hero: Claude Code 2.1.305; weapon (model): claude-haiku-5-5; charge (effort): low; arena: sealed; invoked cast (the prompt named the skill).
macOS 27.0.1, arm64. Curator.0 mishaps excluded. 2026-10-21 to 2026-10-21.Scrying (screenshot)
Try this loadout
node "<spell-report-skill-directory>/scripts/spell-report.mjs" trial --spell addy-frontend-ui-engineering --quest illusionist-signup-form --hero claude-code --weapon 'claude-haiku-5-5' --charge low --cast invoked --control

Recorded with quest v4 and spell commits addy-frontend-ui-engineering@aeac41d4d005999432bb7312f7ff06383a91d59d. How to run it

Illusionist: booking form repairQuest v4100%3 of 3Unarmed: 33% (1 of 3)44%+67 ppvs Unarmed3 of 3100%Unarmed: 1 of 312m 49sUnarmed: 3m 44s7,308 Unarmed: 8,662Not reportedUnarmed: Not reported+218 / -80Unarmed: +245 / -86100%Hero: Claude Code 2.1.305; weapon (model): claude-opus-5-5; charge (effort): high; arena: sealed; invoked cast (the prompt named the skill).
macOS 27.0.1, arm64. Curator.0 mishaps excluded. 2026-10-21 to 2026-10-21.Scrying (screenshot)
Try this loadout
node "<spell-report-skill-directory>/scripts/spell-report.mjs" trial --spell addy-frontend-ui-engineering --quest illusionist-signup-form --hero claude-code --weapon 'claude-opus-5-5' --charge high --cast invoked --control

Recorded with quest v4 and spell commits addy-frontend-ui-engineering@aeac41d4d005999432bb7312f7ff06383a91d59d. How to run it

Illusionist: booking form repairQuest v4100%5 of 5Unarmed: 87% (13 of 15)57%+13 ppvs Unarmed0 of 50%Unarmed: 0 of 1521m 6sUnarmed: 1m 6s2,020 Unarmed: 1,761Not reportedUnarmed: 12.2k+107 / -57Unarmed: +114 / -61100%Hero: Claude Code 2.1.305; weapon (model): claude-sonnet-5-5; charge (effort): medium; arena: sealed; invoked cast (the prompt named the skill).
macOS 27.0.1, arm64. Curator.0 mishaps excluded. 2026-10-21 to 2026-10-21.Scrying (screenshot)
Try this loadout
node "<spell-report-skill-directory>/scripts/spell-report.mjs" trial --spell addy-frontend-ui-engineering --quest illusionist-signup-form --hero claude-code --weapon 'claude-sonnet-5-5' --charge medium --cast invoked --control

Recorded with quest v4 and spell commits addy-frontend-ui-engineering@aeac41d4d005999432bb7312f7ff06383a91d59d. How to run it

Illusionist: booking form repairQuest v4100%2 of 2Unarmed: 87% (13 of 15)34%+13 ppvs Unarmed0 of 20%Unarmed: 0 of 1521m 13sUnarmed: 1m 6s2,168 Unarmed: 1,761Not reportedUnarmed: 12.2k+124 / -60Unarmed: +114 / -610%Hero: Claude Code 2.1.305; weapon (model): claude-sonnet-5-5; charge (effort): medium; arena: sealed; ambient cast (the agent chose).
macOS 27.0.1, arm64. Curator.0 mishaps excluded. 2026-10-21 to 2026-10-21.Scrying (screenshot)
Try this loadout
node "<spell-report-skill-directory>/scripts/spell-report.mjs" trial --spell addy-frontend-ui-engineering --quest illusionist-signup-form --hero claude-code --weapon 'claude-sonnet-5-5' --charge medium --cast ambient --control

Recorded with quest v4 and spell commits addy-frontend-ui-engineering@aeac41d4d005999432bb7312f7ff06383a91d59d. How to run it

Illusionist: booking form repairQuest v4100%3 of 3Unarmed: 100% (3 of 3)44%+0 ppvs Unarmed0 of 30%Unarmed: 0 of 321m 21sUnarmed: 1m 27s2,485 Unarmed: 2,407Not reportedUnarmed: Not reported+141 / -79Unarmed: +93 / -58100%Hero: OMP 18.8.3; weapon (model): anthropic/claude-sonnet-5-5; charge (effort): medium; arena: warded; invoked cast (the prompt named the skill).
macOS 27.0.1, arm64. Curator.0 mishaps excluded. 2026-10-21 to 2026-10-21.Scrying (screenshot)
Try this loadout
node "<spell-report-skill-directory>/scripts/spell-report.mjs" trial --spell addy-frontend-ui-engineering --quest illusionist-signup-form --hero omp --weapon 'anthropic/claude-sonnet-5-5' --charge medium --cast invoked --control

Recorded with quest v4 and spell commits addy-frontend-ui-engineering@aeac41d4d005999432bb7312f7ff06383a91d59d. How to run it

Scrying (screenshots of runs)

The latest run of each setup. Local paths, names and ids are blurred; credentials are removed.

Scrying (screenshot) of a fizzled run of Illusionist: pricing plan switcher with Addy Osmani Frontend UI Engineering, Claude CodeScrying (screenshot) of a fizzled run of Illusionist: pricing plan switcher with Addy Osmani Frontend UI Engineering, Claude CodeScrying (screenshot) of a cleared run of Illusionist: pricing plan switcher with Addy Osmani Frontend UI Engineering, Claude CodeScrying (screenshot) of a cleared run of Illusionist: pricing plan switcher with Addy Osmani Frontend UI Engineering, Claude Code
Explore the quests, full results and trial method

This spell has no recorded sessions in the curator's logs. Tried it? Send a spell report.