chore(studio): use sentence case for Data API access label (#47353)

## What kind of change does this PR introduce?

UI copy + agent guidance.

## What is the current behavior?

- The Table Editor labels the Data API setting as "Data API Access"
(title case).
-  Agents have no scoped pointer to our copywriting rules

## What is the new behavior?

- Label uses sentence case: "Data API access" (e2e and test docs
updated).
- Agents are pointed at
`apps/design-system/content/docs/copywriting.mdx` via
`studio-copy.instructions.md` and `studio-ui-patterns` skill.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Standardized the **“Data API access”** label casing across the Studio
UI.
  * Updated end-to-end tests to assert the corrected label text.
* **Documentation**
* Updated Studio E2E test review instructions and examples to use
**“Data API access”**.
* Added/expanded Studio UI copywriting guidance, including where to
source copy and how to apply consistent casing.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

.claude/skills/studio-e2e-tests/SKILL.md

@@ -88,7 +88,7 @@ test.describe.configure({ mode: 'serial' })
 3. **`getByText` with exact match** - Good for unique text
 
    ```typescript
-   page.getByText('Data API Access', { exact: true })
+   page.getByText('Data API access', { exact: true })
    ```
 
 4. **`locator` with CSS** - Use sparingly, more fragile

.claude/skills/studio-ui-patterns/SKILL.md

@@ -125,3 +125,9 @@ Forms in sheets:
 
 - `layout="horizontal"` for wider sheets
 - `layout="vertical"` for narrow sheets (`size="sm"` or below)
+
+## Copy
+
+Source of truth: `apps/design-system/content/docs/copywriting.mdx` — sentence case, title case, proper nouns, voice and tone.
+
+When changing visible copy, grep `e2e/studio/` for the old string.

.github/copilot-instructions.md

@@ -54,6 +54,7 @@ Path-specific rules in `.github/instructions/`:
 - **Error Handling**: `studio-error-handling.instructions.md` — error classification, `ErrorMatcher` usage
 - **E2E Tests**: `studio-e2e-tests.instructions.md` — selector priority, anti-patterns (`waitForTimeout`, `force: true`)
 - **Composition Patterns**: `studio-composition-patterns.instructions.md` — avoid boolean props, use compound components
+- **UI Copy**: `studio-copy.instructions.md` → `apps/design-system/content/docs/copywriting.mdx`
 - **shadcn/Radix Components**: `studio-shadcn-components.instructions.md` — accessibility handled by primitives, do not flag
 - **Keyboard Shortcuts**: `studio-shortcuts.instructions.md` — shortcut registry pattern, search-input escape handler, when to flag missing coverage
 

.github/instructions/studio-copy.instructions.md

@@ -0,0 +1,13 @@
+---
+applyTo: 'apps/studio/**'
+---
+
+# Studio UI Copy
+
+All comments are **advisory**.
+
+**Source of truth:** `apps/design-system/content/docs/copywriting.mdx` — read it before writing or reviewing user-facing Studio strings.
+
+## Agent checklist (not in the design doc)
+
+- When changing visible copy, grep `e2e/studio/` and `.github/instructions/` for the old string.

.github/instructions/studio-e2e-tests.instructions.md

@@ -23,7 +23,7 @@ All comments are **advisory**.
 3. **`getByText` with exact match** — good for unique text
 
    ```typescript
-   page.getByText('Data API Access', { exact: true })
+   page.getByText('Data API access', { exact: true })
    ```
 
 4. **`locator` with CSS** — use sparingly, more fragile

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ApiAccessToggle.tsx

@@ -320,7 +320,7 @@ export const ApiAccessToggle = ({
       <div className="space-y-3">
         <div className="flex items-center justify-between gap-3">
           <div>
-            <h5>Data API Access</h5>
+            <h5>Data API access</h5>
             <p className="text-sm text-foreground-lighter">
               Allow this table to be queried via Supabase client libraries or the API directly
             </p>

e2e/studio/features/api-access-toggle.spec.ts

@@ -57,14 +57,14 @@ async function verifyTablePrivileges(
 }
 
 /**
- * Locates the API access toggle switch for Data API Access.
+ * Locates the API access toggle switch for Data API access.
  * Only present when creating or duplicating a table (not when editing).
  */
 function getApiAccessSwitch(page: Page) {
   const sidePanel = page.getByTestId('table-editor-side-panel')
   const dataApiSection = sidePanel
     .locator('div')
-    .filter({ hasText: 'Data API Access' })
+    .filter({ hasText: 'Data API access' })
     .filter({ has: page.getByRole('switch') })
   return dataApiSection.getByRole('switch')
 }
@@ -239,10 +239,10 @@ test.describe('API Access Toggle', () => {
     await page.getByRole('menuitem', { name: 'Edit table' }).click()
     await expect(page.getByTestId('table-editor-side-panel')).toBeVisible()
 
-    // Data API Access section is visible
+    // Data API access section is visible
     await expect(
-      page.getByText('Data API Access'),
-      'Data API Access label should be visible in edit mode'
+      page.getByText('Data API access'),
+      'Data API access label should be visible in edit mode'
     ).toBeVisible()
 
     // In edit mode the panel shows a "Manage access" link instead of a toggle switch