-
-
-
+> **[Schelling's segregation model: ask for 30% same-color neighbors, end up with 75%](/docs/claude-science/example-gallery/soc-schelling-small)**
diff --git a/content/claude/claude-science/example-gallery/bio-drift.md b/content/claude/claude-science/example-gallery/bio-drift.md
index ac91a13ab7..fb75b9a7ab 100644
--- a/content/claude/claude-science/example-gallery/bio-drift.md
+++ b/content/claude/claude-science/example-gallery/bio-drift.md
@@ -6,13 +6,7 @@
> Simulate 107 bottles of 16 fruit flies drifting by chance alone and compare them with Peter Buri's real bottles (1956).
-
-
- 
-
- 
-
-
+
The numbers in your session might differ from this picture and from the summary in [Reference analysis](#reference-analysis).
diff --git a/content/claude/claude-science/example-gallery/chem-titration.md b/content/claude/claude-science/example-gallery/chem-titration.md
index d8a3201c22..d6da20e7f1 100644
--- a/content/claude/claude-science/example-gallery/chem-titration.md
+++ b/content/claude/claude-science/example-gallery/chem-titration.md
@@ -6,13 +6,7 @@
> Solve the full equilibrium for 25.0 mL of 0.100 M acetic acid as 0.100 M NaOH is added, without the usual shortcuts.
-
-
-
-
-
-
- 
-
- 
-
-
+
The numbers in your session might differ from this picture and from the summary in [Reference analysis](#reference-analysis).
diff --git a/content/claude/claude-science/example-gallery/clin-km.md b/content/claude/claude-science/example-gallery/clin-km.md
index c4ef7916a6..f070d8ff94 100644
--- a/content/claude/claude-science/example-gallery/clin-km.md
+++ b/content/claude/claude-science/example-gallery/clin-km.md
@@ -6,13 +6,7 @@
> Compare 6-MP against placebo with Kaplan–Meier curves from 42 remission times typed into the prompt.
-
-
-
-
-
-
- 
-
- 
-
-
+
The numbers in your session might differ from this picture and from the summary in [Reference analysis](#reference-analysis).
diff --git a/content/claude/claude-science/example-gallery/cs-pagerank-tiny.md b/content/claude/claude-science/example-gallery/cs-pagerank-tiny.md
index 0e29590798..80af841284 100644
--- a/content/claude/claude-science/example-gallery/cs-pagerank-tiny.md
+++ b/content/claude/claude-science/example-gallery/cs-pagerank-tiny.md
@@ -6,13 +6,7 @@
> Follow a random surfer on Wikipedia's 11-page example until the numbers settle, and reproduce all 11 published values to 0.1 point.
-
-
-
-
-
-
- 
-
- 
-
-
+
The numbers in your session might differ from this picture and from the summary in [Reference analysis](#reference-analysis).
diff --git a/content/claude/claude-science/example-gallery/eng-beam.md b/content/claude/claude-science/example-gallery/eng-beam.md
index a15803ee5d..a23515ae15 100644
--- a/content/claude/claude-science/example-gallery/eng-beam.md
+++ b/content/claude/claude-science/example-gallery/eng-beam.md
@@ -6,13 +6,7 @@
> Split a 300 mm steel ruler clamped at one end into 4 beam elements and check its bending under 1 N and its first 3 vibration modes against beam theory.
-
-
-
-
-
-
- 
-
- 
-
-
+
The numbers in your session might differ from this picture and from the summary in [Reference analysis](#reference-analysis).
diff --git a/content/claude/claude-science/example-gallery/mat-xrd.md b/content/claude/claude-science/example-gallery/mat-xrd.md
index f7b060d443..5801011a81 100644
--- a/content/claude/claude-science/example-gallery/mat-xrd.md
+++ b/content/claude/claude-science/example-gallery/mat-xrd.md
@@ -6,13 +6,7 @@
> Simulate the X-ray powder patterns of silicon and table salt and label every peak with Bragg's law.
-
-
-
-
-
-
- 
-
- 
-
-
+
The numbers in your session might differ from this picture and from the summary in [Reference analysis](#reference-analysis).
diff --git a/content/claude/claude-science/example-gallery/math-ulam.md b/content/claude/claude-science/example-gallery/math-ulam.md
index d43f89dd38..0abc74141f 100644
--- a/content/claude/claude-science/example-gallery/math-ulam.md
+++ b/content/claude/claude-science/example-gallery/math-ulam.md
@@ -6,13 +6,7 @@
> Compare the share of primes per diagonal on Ulam's 1963 spiral of 1 to 40,401 against as many random odd numbers.
-
-
-
-
-
-
- 
-
- 
-
-
+
The numbers in your session might differ from this picture and from the summary in [Reference analysis](#reference-analysis).
diff --git a/content/claude/claude-science/example-gallery/phys-doubleslit.md b/content/claude/claude-science/example-gallery/phys-doubleslit.md
index 49739fed57..8cfeea4b99 100644
--- a/content/claude/claude-science/example-gallery/phys-doubleslit.md
+++ b/content/claude/claude-science/example-gallery/phys-doubleslit.md
@@ -6,13 +6,7 @@
> Rebuild the picture of Tonomura's 1989 experiment with an ideal double slit: each electron lands as 1 random dot, yet fringes 10.7 µm apart build up.
-
-
-
-
-
-
- 
-
- 
-
-
+
The numbers in your session might differ from this picture and from the summary in [Reference analysis](#reference-analysis).
diff --git a/content/claude/claude-science/example-gallery/soc-schelling-small.md b/content/claude/claude-science/example-gallery/soc-schelling-small.md
index 7a0a22be3b..f7c2216b16 100644
--- a/content/claude/claude-science/example-gallery/soc-schelling-small.md
+++ b/content/claude/claude-science/example-gallery/soc-schelling-small.md
@@ -6,13 +6,7 @@
> Ask for 30% same-color neighbors, end up with about 75%: the textbook computer version of Thomas Schelling's 1971 idea.
-
-
-
-
-
-
- 
-
- 
-
-
+
The numbers in your session might differ from this picture and from the summary in [Reference analysis](#reference-analysis).
diff --git a/content/claude/claude-science/get-started.md b/content/claude/claude-science/get-started.md
index 5f756a5539..17e60114b1 100644
--- a/content/claude/claude-science/get-started.md
+++ b/content/claude/claude-science/get-started.md
@@ -10,71 +10,69 @@ Install Claude Science on your computer, sign in with your Claude account, and r
## Install
-
-
-
-
-
-
-
+
| Scope | What it covers | Access |
| :- | :- | :- |
@@ -36,8 +34,6 @@ Memory is also scoped, but differently: there is no organization-wide memory, ea
One-to-one DMs from members who have connected a Claude account run under the member's own claude.ai account. See [how DMs work in this model](/docs/claude-tag/concepts/agent-identity#direct-message-channels). A [DM from a member who hasn't connected a Claude account](/docs/claude-tag/admins/restrict-access#access-in-a-direct-message-from-a-member-without-a-claude-account) reaches bundles. A [group DM](/docs/claude-tag/admins/restrict-access#group-dms) gets the bundles on the workspace's page and on the **Slack** page.
-
-
## Choose where a bundle applies
A bundle applies nowhere until you add places to it. A place is **Slack**, a workspace, or a channel, the same three scopes, or a [group of channels matched by name](#attach-a-bundle-to-channels-by-name). You can add a place from either side:
@@ -66,7 +62,9 @@ Sharing a channel changes which bundles apply there:
* **Shared across workspaces in your Enterprise Grid**: bundles on the channel or its workspace don't apply. See [Channels shared across workspaces in your Enterprise Grid](/docs/claude-tag/admins/restrict-access#channels-shared-across-workspaces-in-your-enterprise-grid) for what Claude does there instead.
* **Shared with another company through Slack Connect**: once Claude is [turned on in the channel](/docs/claude-tag/admins/restrict-access#slack-connect-channels), bundles attached directly to the channel apply there, including ones you attached before the channel was shared. Claude can use their connectors for the other company's people in the channel too. [What access Claude has in a Slack Connect channel](/docs/claude-tag/admins/restrict-access#what-access-claude-has-in-a-slack-connect-channel) covers which bundles reach that channel and which don't.
-
+
+
+**1. Tag Claude in a channel**
+
+A user asks Claude to chart last week's signups or fix a deploy test. The task gets a session in a thread under the message.
+
+**2. The session sandbox starts**
-
+Claude does the work in an isolated environment built for this thread, reading files, writing documents, and running code. The credentials you provision are not placed in the sandbox; they stay in the credential store and are injected at the proxy.
-
-
-
+
The table lines up the two paths on the four dimensions that differ.
diff --git a/content/claude/claude-tag/concepts/data-lifecycle.md b/content/claude/claude-tag/concepts/data-lifecycle.md
index 23de0b8c1d..5546edcd9c 100644
--- a/content/claude/claude-tag/concepts/data-lifecycle.md
+++ b/content/claude/claude-tag/concepts/data-lifecycle.md
@@ -6,9 +6,9 @@
> What Claude Tag stores on Anthropic's side, how long session transcripts and memory are kept, and what disconnecting a workspace, uninstalling the app, deleting a Slack channel, removing a scope, or leaving the organization does to that data.
-export const BetaNote = () =>
-
+\# launch-week
+19 members
+
+
+
+Jordan9:02 AM\@Claude where are we on launch prep? Pull together what's still open from this channel.
+
+
+
+ClaudeAPP9:02 AMOn it. I'll go through this channel's open threads and the launch plan.
+
+Done: Read 14 open threads
+Done: Cross-checked the launch plan in Drive
+Done: Listed who each item is waiting on
+Done: Drafted the status summary
+
+
+
+Sam9:06 AMfold in the vendor quotes from last week's thread too
+
+
+
+ClaudeAPP9:08 AMDone. Full status below: eight items closed, three open. The venue contract is the oldest, waiting on legal since the 2nd.
Each of the five moments in that thread shows a piece of how Claude Tag works:
@@ -161,9 +129,7 @@ Every session, in any channel, follows the same five-step loop.
4. **The result lands in the thread.** An answer, a doc, a chart, or a pull request.
5. **A quiet period follows.** The sandbox is released while the thread persists; a new reply rebuilds it and starts the loop again.
-
- # launch-week
- 19 members
-
-
-
-
-
-
-
-
-
-
-
- Jordan9:02 AM
- @Claude where are we on launch prep? Pull together what's still open from this channel.
-
-
- 
-
-
-
-
-
-
-
-
-
- ClaudeAPP9:02 AM
- On it. I'll go through this channel's open threads and the launch plan.
- -
- Done: Read 14 open threads
- Done: Cross-checked the launch plan in Drive
- Done: Listed who each item is waiting on
- Done: Drafted the status summary
-
-
-
-
-
-
-
-
- Sam9:06 AM
- fold in the vendor quotes from last week's thread too
-
-
-
-
-
-
-
-
-
-
-
- ClaudeAPP9:08 AM
- Done. Full status below: eight items closed, three open. The venue contract is the oldest, waiting on legal since the 2nd.
-
-
-
+
Steps 1 and 2 are [starting a session](#start-a-session): a message tags Claude in, and a sandbox builds for that thread. Step 3, the working loop, is [the checklist](#how-the-checklist-updates) below. Steps 4 and 5, the result and the quiet period that follows, are covered in [What survives between replies](#what-survives-between-replies).
@@ -257,9 +223,7 @@ A thread is durable, but the sandbox behind it is not. Durable means the thread
| Someone sends [`@Claude !restart`](/docs/claude-tag/users/commands#restart-a-stuck-or-wrong-context-session) | Archives the session right away and starts a fresh one that rereads the thread |
| The session [gets stuck and fails](/docs/claude-tag/users/troubleshooting#claude-reacted-or-started-thinking-then-never-replied) | Starts the replacement when the next message arrives in the thread |
-
-
-
+
| | Survives idle periods |
| :- | :- |
@@ -288,9 +252,7 @@ To see what it holds, ask `@Claude what do you remember about this channel?`. An
The whole model so far fits in one picture, with access set at the scope, memory kept per channel, work in progress per thread, and one-to-one DMs outside all of it.
-
-
-
+
One-to-one DMs are outside this picture; they run on your own account, as covered in [Team channels and personal DMs](#team-channels-and-personal-dms). An Owner can turn off DMs for the whole organization; see [Allow or disable direct messages](/docs/claude-tag/admins/restrict-access#allow-or-disable-direct-messages).
diff --git a/content/claude/claude-tag/concepts/personal-connectors.md b/content/claude/claude-tag/concepts/personal-connectors.md
index d449d6760c..69917de72d 100644
--- a/content/claude/claude-tag/concepts/personal-connectors.md
+++ b/content/claude/claude-tag/concepts/personal-connectors.md
@@ -6,9 +6,9 @@
> Claude can use your own claude.ai connectors, called personal connectors, for your tasks in a Slack channel. See how you approve connector use, when Claude asks you to review a result before posting it, and what other people in the channel can reach.
-export const BetaNote = () =>
-
-
+
| Checkpoint | The guarantee |
| :- | :- |
@@ -55,9 +53,7 @@ This means:
In an Anthropic-hosted environment, outbound traffic from a channel session's sandbox is default-deny. Requests go only to hosts an allow layer covers, and the layers are a [credential's allowed websites](/docs/claude-tag/admins/connections/custom#fill-out-the-custom-tool-form), the [allowed domains](/docs/claude-tag/admins/add-connections#allow-a-host-without-a-credential) that apply to the channel, and the network access setting of the [environment](/docs/claude-tag/concepts/glossary#environment) the scope's sessions run on. A new environment's default level, Trusted access, already covers a [documented set of package registries and developer hosts](https://code.claude.com/docs/en/cloud-environments#default-allowed-domains). See [Agent Proxy](/docs/claude-tag/concepts/agent-identity#agent-proxy) for what happens to a request under each layer.
-
-
-
+
Because requests to any other host are blocked, data can only leave the sandbox to hosts an allow layer covers. An admin sets the allowed websites on each credential and the allowed domains. An admin sets the environment's network access level, which defaults to Trusted access, from the **Cloud environments** page in [admin settings](https://claude.ai/admin-settings). See [Set allowed websites](/docs/claude-tag/admins/add-connections#set-allowed-websites) and [Allow a host without a credential](/docs/claude-tag/admins/add-connections#allow-a-host-without-a-credential).
diff --git a/content/claude/claude-tag/concepts/settings-map.md b/content/claude/claude-tag/concepts/settings-map.md
index 923d098148..8591823efe 100644
--- a/content/claude/claude-tag/concepts/settings-map.md
+++ b/content/claude/claude-tag/concepts/settings-map.md
@@ -6,9 +6,9 @@
> Claude Tag settings map: the admin page for access and behavior, the usage page for spend limits, the in-Slack Configure link for channel instructions, and personal connectors for DMs and your own tasks in channels. Claude Managed Agents is configured separately on the Claude Platform.
-export const BetaNote = () =>
-
+Public Beta
+Tag @Claude in. Get results back in the thread.
+Anyone in a Slack channel can tag Claude into a problem and hand it work: reproduce a bug and open a pull request, turn a decision thread into a doc, assemble the state of a project. It posts a checklist in the thread as it goes, and the whole exchange stays visible to the channel.
+
+[I'm setting it up →](/docs/claude-tag/admins/setup-overview)
+[Use it in your channel ↓](#put-claude-tag-to-work)
+
+\# platform-eng
+38 members
+
+
+
+Dana2:14 PMcheckout has felt slow all morning — anyone else seeing it?
+
+
+
+Leo2:15 PMsame. @Claude can you investigate? Compare latency against this morning's deploy and find what's causing it.
+
+
+
+ClaudeAPP2:15 PMOn it. I'll compare latency before and after the deploy, track down the cause, and report back here.
+
+Done: Pulled p99 latency from Datadog
+Done: Diffed deploy 4f2c1 against main
+Done: Reproduced the slow query locally
+In progress: Opening a pull request with the fix…
## Plans that include Claude Tag
@@ -86,89 +55,43 @@ When Claude works on a task, it runs in an ephemeral sandbox, not on your comput
You extend what Claude can reach, like your repositories, ticketing systems, data warehouses, and custom tools, through [Claude Tag connectors](/docs/claude-tag/admins/add-connections), [plugins, and skills](/docs/claude-tag/admins/customize). An Owner or a [Claude Tag admin](/docs/claude-tag/admins/restrict-access#delegate-claude-tag-administration) configures these for all of Slack, for one workspace, or for one channel. Members' own claude.ai connectors are separate from that configuration; Claude can use them in a channel for the member's own requests, as [personal connectors in channels](/docs/claude-tag/concepts/personal-connectors) describes.
-
- Public Beta
-
-
- Tag @Claude in. Get results back in the thread.
-Anyone in a Slack channel can tag Claude into a problem and hand it work: reproduce a bug and open a pull request, turn a decision thread into a doc, assemble the state of a project. It posts a checklist in the thread as it goes, and the whole exchange stays visible to the channel.
- - -
-
-
- # platform-eng
- 38 members
-
-
-
-
-
-
-
-
-
-
-
- Dana2:14 PM
- checkout has felt slow all morning — anyone else seeing it?
-
-
-
-
-
-
-
- Leo2:15 PM
- same. @Claude can you investigate? Compare latency against this morning's deploy and find what's causing it.
-
-
-
-
-
-
-
-
-
-
-
- ClaudeAPP2:15 PM
- On it. I'll compare latency before and after the deploy, track down the cause, and report back here.
- -
- Done: Pulled p99 latency from Datadog
- Done: Diffed deploy 4f2c1 against main
- Done: Reproduced the slow query locally
- In progress: Opening a pull request with the fix…
-
-
-
+For administrators
+Set up Claude Tag
+
+
+
+[Open](/docs/claude-tag/admins/setup-overview)
+
+[Where do I start?
+Pair your Slack workspace, launch, and test that it works](/docs/claude-tag/admins/setup-overview)
+
+[What can Claude Tag access?
+How admins set access per channel, and where credentials are stored](/docs/claude-tag/concepts/agent-identity)
+
+[How do I connect each service?
+Credential types, allowed hosts, and what each connection lets Claude reach](/docs/claude-tag/admins/add-connections)
+
+For end users
+Put Claude Tag to work
+
+
+
+[Open](#put-claude-tag-to-work)
+
+[How do I hand Claude Tag a task?
+Mention Claude in any channel it's in, with nothing to install](/docs/claude-tag/users/getting-started)
+
+[What is Claude Tag good at?
+Use cases for coding, data, incidents, and go-to-market](/docs/claude-tag/users/use-cases)
+
+[How do I get good results?
+Good habits for scoping and reviewing work](/docs/claude-tag/users/good-habits)
+
+[What does Claude Tag remember?
+Channel memory, what's shared across the workspace, and who can see what](/docs/claude-tag/users/memory)
+
+[Can Claude Tag run tasks on a schedule?
+Scheduled jobs, channel watching, and triggers](/docs/claude-tag/users/proactivity)
## Billing and spend limits
@@ -178,7 +101,7 @@ One-to-one direct messages from members who have connected a Claude account don'
To learn what your team's usage costs, run a pilot with a spend limit set and watch the per-channel breakdown on the [usage page in your admin settings](https://claude.ai/admin-settings/usage/claude-tag). [Set a spend limit](/docs/claude-tag/admins/set-spend-limit) covers how to fund the balance on each plan, set the limit, and what happens when usage reaches it.
-
-
-
- For administrators
- Set up Claude Tag
-
-
- 
-
-
-
-
-
-
-
-
-
-
- Where do I start?
- Pair your Slack workspace, launch, and test that it works
-
-
-
-
-
- What can Claude Tag access?
- How admins set access per channel, and where credentials are stored
-
-
-
-
-
- How do I connect each service?
- Credential types, allowed hosts, and what each connection lets Claude reach
-
-
-
-
-
-
- For end users
- Put Claude Tag to work
-
-
- 
-
-
-
-
-
-
-
-
-
- How do I hand Claude Tag a task?
- Mention Claude in any channel it's in, with nothing to install
-
-
-
-
-
- What is Claude Tag good at?
- Use cases for coding, data, incidents, and go-to-market
-
-
-
-
-
- How do I get good results?
- Good habits for scoping and reviewing work
-
-
-
-
-
- What does Claude Tag remember?
- Channel memory, what's shared across the workspace, and who can see what
-
-
-
-
-
- Can Claude Tag run tasks on a schedule?
- Scheduled jobs, channel watching, and triggers
-
-
-
- For end users
+For end users
## Put Claude Tag to work
@@ -205,7 +128,7 @@ Each link opens a guide with the prompts to paste and the connections the task n
[Get started](/docs/claude-tag/users/getting-started) covers your first message, what you see while Claude works, and how to shape Claude's behavior in your channel.
-For administrators
+For administrators
## Set Claude Tag up once for everyone
@@ -220,31 +143,25 @@ Claude Tag starts with no access of its own to your external systems. After you
[Set up Claude Tag](/docs/claude-tag/admins/setup-overview) walks through setup and connecting tools, with what to have ready, what each choice means, and how to verify Claude Tag works once you launch.
-
-
+The security model, what admins can and can't restrict, audit trails, and network requirements.
## Where to start with Claude Tag
-
-
+Security review
+[Security and data handling](/docs/claude-tag/concepts/security-and-data)
- Security review
- Security and data handling -The security model, what admins can and can't restrict, audit trails, and network requirements.
-
-
-
+
Two parties are involved in this exchange: the customer's identity provider signs the assertion, and your authorization server verifies it and issues the access token. Both roles are often served by commercial identity platforms, so the distinction here is about which tenant plays which role rather than about product type. The identity provider publishes its signing keys as a JSON Web Key Set, and your authorization server fetches that key set to verify each assertion.
@@ -43,9 +41,9 @@ Before adding Enterprise Managed Auth, make sure the following are already in pl
* Your MCP server implements [MCP authorization](https://modelcontextprotocol.io/specification/draft/basic/authorization), including Protected Resource Metadata (PRM) discovery, and follows the [MCP security best practices](https://modelcontextprotocol.io/docs/tutorials/security/security_best_practices). See the [authentication guide](/docs/connectors/building/authentication) for Claude-specific requirements
* Your authorization server registers Claude using either [Anthropic-held client credentials](/docs/connectors/building/authentication#anthropic-held-client-credentials) or a [Client ID Metadata Document](/docs/connectors/building/authentication#dcr-and-cimd-details)
-
+
-
+
Inline cards have these constraints:
@@ -73,7 +73,7 @@ Inline cards have these constraints:
On mobile, inline cards render full-width within the conversation. Make every tap target at least 44pt, and adapt content to narrower viewports without horizontal scrolling.
-
+
### Inline carousel
@@ -84,7 +84,7 @@ An inline carousel shows items side by side for browsing options. Users swipe or
* Media galleries
* Any set of comparable items
-
+
Inline carousels have these constraints:
@@ -96,7 +96,7 @@ Inline carousels have these constraints:
On mobile, carousel cards are optimized for horizontal swipe. Design for thumb reach by keeping primary actions in the lower portion of cards, and let the next card peek into view to signal that the row scrolls.
-
+
### Full screen
@@ -108,9 +108,9 @@ Full screen mode gives complex interactions an immersive interface. The conversa
* Content that benefits from focused attention
* Rich tasks requiring more space than inline allows
-
+
-
+
Full screen mode has these constraints:
@@ -121,7 +121,7 @@ Full screen mode has these constraints:
On mobile, your app fills the entire screen with the chat input and navigation bar overlaid on top, so keep critical UI within the safe area. Use the full viewport width, and support both portrait and landscape where it makes sense.
-
+
## Mobile guidelines
@@ -137,7 +137,7 @@ Render the interactive portion of your app inside the safe area so the mobile na
Read `hostContext.safeAreaInsets.{top, right, bottom, left}`, which are pixel values, and apply them as padding on your root container, or as `scroll-padding` on scroll-snap containers so items come to rest inside the visible region. Safe areas aren't mobile-specific: on web and desktop the composer can overlay the bottom of an inline app, so avoid placing interactive controls flush against any edge.
-
+
#### Borderless inline content
@@ -145,7 +145,7 @@ Set `_meta.ui.prefersBorder` to `true` or `false` to control whether your conten
In borderless mode your content runs edge-to-edge with no host padding, so honoring `safeAreaInsets` becomes essential. The bordered card's built-in padding otherwise absorbs most of them. Borderless works well for carousels and other horizontally scrolling content that should bleed to the screen edges while in motion: apply `safeAreaInsets.left` and `.right` as `scroll-padding-inline` on the scroll container so items at rest sit clear of the device edges but can scroll underneath them.
-
+
### Declare supported display modes
@@ -178,7 +178,7 @@ The `frameDomains` field, for embedding third-party iframes, is restricted in Cl
* Use full-width layouts, without side margins that waste mobile screen space
* Let content reflow gracefully, and avoid fixed-width layouts
-
+
### Touch targets
@@ -187,7 +187,7 @@ The `frameDomains` field, for embedding third-party iframes, is restricted in Cl
* Larger, thumb-friendly buttons rather than small text links
* Primary actions within natural thumb reach, in the lower portion of the screen
-
+
### Scrolling and gestures
@@ -203,19 +203,19 @@ If your app needs its own vertically scrollable viewport, request fullscreen pre
* Provide a clear visual affordance for expansion, such as a fullscreen button or tap-to-expand
* Closing fullscreen returns to the conversation at the same scroll position
-
+
### Dark mode
All views must support both light and dark themes. Use the host's style tokens, which adapt automatically, and never hardcode colors. Test both modes.
-
+
### Loading states
Show skeleton screens while content loads, and match the layout structure of the final content so the swap is smooth. Avoid spinners for inline content, because skeletons feel more native.
-
+
## Visual design
@@ -225,29 +225,29 @@ MCP Apps should feel native to their environment while maintaining consistent vi
Use host tokens for all structural elements: backgrounds, text, borders, and icons. You can use your own brand colors for accents and identity, but the core UI should use the provided palette.
-
+
### Typography
Stick to the three-level size scale of heading, body, and caption, and the two weights of regular and emphasized. This creates clear hierarchy without visual noise.
-
+
-
+
### Icons
Use monochromatic, outlined icons that match the host's icon color tokens. Icons should support understanding rather than be essential to it.
-
+
### Spacing
diff --git a/content/claude/connectors/building/mcp-apps/external-links.md b/content/claude/connectors/building/mcp-apps/external-links.md
index e0162e3e4d..e55b16ab69 100644
--- a/content/claude/connectors/building/mcp-apps/external-links.md
+++ b/content/claude/connectors/building/mcp-apps/external-links.md
@@ -59,9 +59,9 @@ Claude bypasses the modal only when the `ui/open-link` request follows a real us
If your app sends `ui/open-link` without a preceding gesture, for example programmatically, on a timer, or after the browser's activation window has expired, Claude shows the modal so the user's confirmation click supplies the gesture the browser requires to open a new tab.
-