Back to Details

expo-design-system-scaffolder

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Expo Design System Scaffolder

Expo Design System 脚手架

Parameterized templates that generate Expo / React Native design system components which start correct instead of being retrofitted. Every template uses Unistyles v3 variants (never a 
style
escape hatch), 
ref
-as-prop, design tokens, built-in accessibility, and web/iOS parity (
_web
hover/focus/cursor on interactive primitives), and cites the 
expo-design-system
 rule IDs it satisfies.
可参数化的模板，用于生成Expo / React Native设计系统组件，从一开始就确保组件符合规范，无需后期改造。每个模板均采用Unistyles v3变体（绝不使用
style
逃逸方案）、
ref
-as-prop、设计令牌、内置无障碍支持，并实现Web/iOS一致性（交互式原语上的
_web
悬停/聚焦/光标效果），同时会标注其满足的
expo-design-system
规则ID。

When to Apply

适用场景

Use this skill when the user wants to:
  • Create or add a new shared component — a button, card, text, input, or other primitive
  • Scaffold a new screen that lists a domain entity (appointments, patients, notes)
  • Add a new design token group (colors, etc.) to the Unistyles theme
  • Add a Storybook story that catalogs a component's variants
  • Start a new feature and want its components to follow the design system from the first commit
  • Set up or update the design system index so agents discover and reuse existing components before building new ones
当用户有以下需求时，可使用此Skill：
  • 创建或添加新的共享组件——按钮、卡片、文本、输入框或其他原语
  • 搭建新页面，用于展示领域实体列表（如预约、患者、笔记）
  • 向Unistyles主题中添加新的设计令牌组（如颜色等）
  • 添加Storybook故事，用于分类展示组件的变体
  • 启动新功能，希望组件从第一版提交就遵循设计系统规范
  • 设置或更新设计系统索引，让Agent在构建新组件前先发现并复用现有组件

Available Templates

可用模板

To scaffold: read the template, substitute the placeholders, and write the result under the design system package (or 
app/
for the screen). Placeholders are single-brace identifier tokens (e.g., 
{ComponentName}
); literal TSX and Unistyles braces (e.g., 
{ variant }
, 
{item.title}
) stay as-is.
TemplateGeneratesPlaceholders
variant-component.tsx.template
Pressable primitive with 
variant
/
size
variants, press/disabled states, web hover/focus/cursor, accessibility, 
ref
prop
{ComponentName}
{file_path}
card-surface.tsx.template
Composite surface with 
leading
/
trailing
/children slots, 
tone
/
inset
variants, elevation token
{ComponentName}
{file_path}
text-primitive.tsx.template
Typed text component with 
variant
/
tone
, no raw style, capped font scaling
{ComponentName}
{file_path}
form-field.tsx.template
Labeled input: controlled/uncontrolled, 
ref
prop, error variant, web focus ring, accessibility
{ComponentName}
{file_path}
list-screen.tsx.template
Entity list composed from primitives: FlashList, memoized row, web row hover/cursor, safe-area insets
{ScreenName}
{Entity}
{entity}
{entity_plural}
{route_path}
{file_path}
token-group.ts.template
Raw → semantic → component token group to merge into the Unistyles theme
{token_group}
{file_path}
component-story.tsx.template
Storybook story rendering every variant side by side
{ComponentName}
{file_path}
component-index.ts.template
The design system's single public entry and inventory catalog — agents read it before styling to reuse what exists (reuse-first)
{file_path}
Common placeholders:
  • {ComponentName}
    — PascalCase component, e.g. 
    AppButton
    , 
    AppCard
    , 
    AppText
    , 
    AppTextField
  • {ScreenName}
    — PascalCase screen with a 
    Screen
    suffix, e.g. 
    AppointmentsScreen
  • {Entity}
    / 
    {entity}
    / 
    {entity_plural}
    — PascalCase, camelCase, and plural, e.g. 
    Appointment
    / 
    appointment
    / 
    appointments
  • {route_path}
    — route segment pushed for a row, e.g. 
    appointments
  • {token_group}
    — camelCase token group name, e.g. 
    statusBadge
  • {file_path}
    — the destination path, written into the header comment
搭建步骤：阅读模板，替换占位符，然后将结果写入设计系统包目录（页面模板写入
app/
目录）。占位符为单大括号标识令牌（例如
{ComponentName}
）；TSX和Unistyles的字面大括号（例如
{ variant }
、
{item.title}
）保持原样。
模板生成内容占位符
variant-component.tsx.template
带有
variant
/
size
变体、按压/禁用状态、Web悬停/聚焦/光标效果、无障碍支持、
ref
属性的可按压原语
{ComponentName}
{file_path}
card-surface.tsx.template
带有
leading
/
trailing
/子元素插槽、
tone
/
inset
变体、阴影令牌的复合容器
{ComponentName}
{file_path}
text-primitive.tsx.template
带有
variant
/
tone
的类型化文本组件，无原始样式，限制字体缩放
{ComponentName}
{file_path}
form-field.tsx.template
带标签的输入框：受控/非受控、
ref
属性、错误变体、Web聚焦环、无障碍支持
{ComponentName}
{file_path}
list-screen.tsx.template
由原语组成的实体列表：FlashList、记忆化行组件、Web行悬停/光标效果、安全区域内边距
{ScreenName}
{Entity}
{entity}
{entity_plural}
{route_path}
{file_path}
token-group.ts.template
原始→语义化→组件令牌组，可合并到Unistyles主题中
{token_group}
{file_path}
component-story.tsx.template
Storybook故事，用于并排渲染所有变体
{ComponentName}
{file_path}
component-index.ts.template
设计系统的唯一公共入口及组件清单目录——Agent在样式设计前会读取此文件，优先复用现有组件（复用优先原则）
{file_path}
通用占位符说明：
  • {ComponentName}
    — 大驼峰命名的组件，例如
    AppButton
    、
    AppCard
    、
    AppText
    、
    AppTextField
  • {ScreenName}
    — 大驼峰命名的页面，后缀为
    Screen
    ，例如
    AppointmentsScreen
  • {Entity}
    / 
    {entity}
    / 
    {entity_plural}
    — 大驼峰、小驼峰及复数形式，例如
    Appointment
    / 
    appointment
    / 
    appointments
  • {route_path}
    — 点击行时跳转的路由段，例如
    appointments
  • {token_group}
    — 小驼峰命名的令牌组名称，例如
    statusBadge
  • {file_path}
    — 目标文件路径，会写入头部注释

How to Use

使用方法

  1. Pick the template for what you are building.
  2. Choose values for its placeholders (see the table and each template's header comment).
  3. Substitute the tokens and write the file under 
    design_system_dir
    (or 
    app_dir
    for the screen).
  4. Generate a matching story with 
    component-story.tsx.template
    so the variants are cataloged.
  5. Append the new component to the design system index (
    component-index.ts.template
    ) — an 
    export
    plus a one-line catalog entry — so the next agent finds and reuses it instead of rebuilding it.
  6. Fill in the data layer the screen imports (
    use{Entity}List
    , the 
    domain
    type) — the scaffold owns the view; you own the data.
  7. Read references/conventions.md for the rules each template enforces and when to deviate.
  1. 选择与你要构建的内容匹配的模板。
  2. 为模板的占位符选择对应值（参考表格及每个模板的头部注释）。
  3. 替换令牌并将文件写入
    design_system_dir
    目录（页面模板写入
    app_dir
    目录）。
  4. 使用
    component-story.tsx.template
    生成对应的Storybook故事，以便分类展示变体。
  5. 将新组件添加到设计系统索引（
    component-index.ts.template
    ）中——添加一个
    export
    语句及一行清单条目——让后续Agent能够找到并复用它，而非重新构建。
  6. 填充页面导入的数据层（
    use{Entity}List
    、
    domain
    类型）——脚手架负责视图部分，你负责数据部分。
  7. 阅读references/conventions.md了解每个模板遵循的规则以及何时可以偏离规则。

Setup

设置

config.json
is optional. Override on first use if your project differs:
  • design_system_dir
    — design system package source (default 
    packages/design-system/src
    )
  • app_dir
    — Expo Router routes directory for the screen template (default 
    app
    )
config.json
为可选配置。如果你的项目结构不同，可在首次使用时覆盖以下配置：
  • design_system_dir
    — 设计系统包的源码目录（默认
    packages/design-system/src
    ）
  • app_dir
    — 用于页面模板的Expo Router路由目录（默认
    app
    ）

Related Skills

相关Skill

  • expo-design-system
     — the rule pack these templates follow; each generated file cites it.
  • expo-react-native-coder
     — feature development around the scaffolded components.
  • expo-design-system
     — 这些模板遵循的规则包；每个生成的文件都会引用它。
  • expo-react-native-coder
     — 围绕搭建好的组件进行功能开发。