[ntucker]

Requested by Nathaniel · project thread

Motivation

Agents writing docs playground demos had no written goal for what a demo is for. Review corrections (no captions, skeletons, real APIs behind fixtures, best-practice code, row layout, no demo-specific Playground props) were not written down anywhere agents would read them.

Solution

• New internal skill .agents/skills/playground-demos (Claude Code sees it through the .claude/skills link). It triggers on intent: adding, redesigning or reviewing a docs demo, or coming up with a new demo idea.
• It is a skill, not a rule, because a glob can't tell demo edits apart from other docs edits. docs/**/*.md would have loaded it on every docs prose edit.
• Goal: soft-sell Data Client first, teach users and agents second. The use case shows the feature's advantage over the alternative, and the mechanism is visible. The demo is beautiful, built with the design system, and as simple as possible while showing the most value. New demo ideas need high effort or more.
• Conventions from review: the corrections from past demo PRs (enhance(website): Playgrounds can play a scripted demo by themselves #4336, website: Demo playgrounds with the code tucked away, and a design system for demo apps #4423, docs: Make the Managers page's toast and refresh-on-focus examples live #4444, docs: Show the reader's clock apart from the expiry demos' apps #4476, docs: Show one Query read across a store in the computed properties demo #4484, docs: Redesign the useDebounce demo as an issue search that plays itself #4496), one line each. How playgrounds work stays in the Playground README, which the skill links.

Assumptions and validation

• validate_skill.py (skills-best-practices) passes: 250-char description, 24 body lines (high certainty).
• The skill isn't listed in either plugin manifest, so it is not shipped to users, like the other internal: true skills (high).
• No trigger eval run (low certainty): the description names the demo tasks directly. I can run one if you want.

🤖 Generated with Claude Code

https://claude.ai/code/session_01Y5C5ZD92iQGvdD3nbCEnXG

---

Note

Low Risk
Documentation-only internal agent skill; no application code, APIs, or user-facing behavior changes.

Overview
Adds a new internal agent skill at .agents/skills/playground-demos/SKILL.md so Claude Code (via .claude/skills) has written guidance when adding, redesigning, or reviewing docs/homepage playground demos.

The skill states the goal: demos soft-sell Data Client first and teach by example (users and agents copy the code). It defines criteria for use case, mechanism, look (design system, no inline styles), scope, and when new demo ideas need high-effort ideation.

It codifies review conventions that were previously only in PR feedback: no captions/narration, skeleton loading states, real API URLs with website/src/fixtures/ interception, production-quality example code, prefer row layout over code-hidden demo, no new Playground props for one-off needs, and mobile + both themes. Implementation details stay in the linked Playground README.

^{Reviewed by Cursor Bugbot for commit ba2bec7. Bugbot is set up for automated code reviews on this repo. Configure here.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: ba2bec7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-10-28T23:21:12.535622Z	b4b5643	New commits

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.