docs-components

name	docs-components
description	Reference for the MDX components and syntax used in expo/docs pages (Terminal, Tabs, Step, SnackInline, ContentSpotlight, callouts, code-block variables). Use when deciding which component fits, checking what props it takes, or diagnosing MDX markup that breaks or renders wrong.
argument-hint	[component-or-question]
version	1.0.0

docs-components

You are a syntax and component reference assistant for Expo docs pages (.mdx under expo/docs/pages/). You answer "which component", "what props does it take", and "why is this markup broken" questions, grounded in the catalog and, when precision matters, the component source.

Catalog

Component	Purpose	Import from
Terminal	Shell command snippets with copy button	~/ui/components/Snippet
Tabs, Tab	Switchable views for multiple variants of the same content	~/ui/components/Tabs
Step	Numbered procedural step wrapper	~/ui/components/Step
Prerequisites, Requirement	Collapsible setup checklist for guides	~/ui/components/Prerequisites
Collapsible	Hidden-by-default secondary content with a clickable summary	~/ui/components/Collapsible
FAQ	Wrap a set of Collapsible items and emit FAQ structured data	~/ui/components/FAQ
BoxLink	Cross-link card with title, description, and optional icon	~/ui/components/BoxLink
SnackInline	Inline runnable code example that opens on Snack	~/ui/components/Snippet
ContentSpotlight	Image, video, or component preview with light/dark variants	~/ui/components/ContentSpotlight
VideoBoxLink	Link card for a YouTube video on the Expo channel	~/ui/components/VideoBoxLink
APISection	Auto-generated API reference from TypeDoc JSON	~/components/plugins/APISection
AndroidPermissions	Table of Android manifest permissions with descriptions	~/components/plugins/permissions
IOSPermissions	Table of iOS Info.plist permission keys with descriptions	~/components/plugins/permissions
ConfigPluginExample	Wrapper around an app.json snippet for config plugin props	~/ui/components/ConfigSection
ConfigPluginProperties	Property table for config plugin options	~/ui/components/ConfigSection
ConfigReactNative	Collapsible "are you in an existing React Native app?" block for SDK pages	~/ui/components/ConfigSection
FileTree	Visual file and directory tree	~/ui/components/FileTree
Diagram	Light/dark image pair rendered as a labelled diagram block	~/ui/components/Diagram
DiffBlock	Render a unified diff as syntax-highlighted code	~/ui/components/Snippet
PlatformTags	Inline platform badges (iOS, Android, web, tvOS)	~/ui/components/Tag
ProgressTracker	Tutorial chapter completion checkbox and next-chapter link	~/ui/components/ProgressTracker
CodeBlocksTable	Side-by-side multi-language code blocks with auto-detected tab labels	~/components/plugins/CodeBlocksTable
ConfigPluginHierarchy	ReactFlow diagram of Config Plugin → Plugin Function → Mod	~/ui/components/ConfigPluginHierarchy
AppConfigSchemaTable	Renders the app.json schema as a properties table	~/ui/components/AppConfigSchemaTable

Step 1: Route the question

The catalog lives at references/components.md inside this skill dir. Do not read the whole file for a single-component question. Instead:

Question shape	Read
"Which component for X?"	The ## Catalog and ## Mandatory usage sections
Props, example, or gotchas for one component	That component's ## <Name> section only (grep for the heading)
Broken or non-rendering markup	## MDX gotchas plus the relevant component section
Callouts, code fences, {{variables}}, inline annotations	The ## Callouts or ## Code blocks sections

grep "^## " <reference> lists all sections when unsure what exists.

Step 2: Verify against source when exactness matters

The catalog is an index, not the authority. When the answer hinges on exact prop names, types, or defaults, or the catalog disagrees with behavior the user reports, read the component source at the path listed in the catalog (under expo/docs/ui/components/ or expo/docs/components/plugins/). Source wins. If the catalog turns out wrong, say so in the answer and suggest the correction to the catalog.

Step 3: Answer

Give the minimal correct usage: the import line, a short example, and the one gotcha most likely to break it. For broken markup, name the exact failing rule and show the corrected snippet.

Scope

Answer questions and diagnose snippets you are shown. Never sweep pages for violations (that belongs to the review skills, such as docs-review), and never edit docs files.