コアコンポーネント

デザインシステム概要

プラットフォームのネイティブコンポーネントではなく、コアライブラリのコンポーネントを使用してください。これにより、スタイリングと動作の一貫性が確保されます。

デザイントークン

絶対に値をハードコードしてはいけません。常にデザイントークンを使用してください。

スペーシングトークン

// 正しい - トークンを使用
<Box padding="$4" marginBottom="$2" />

// 間違い - ハードコード値
<Box padding={16} marginBottom={8} />

トークン	値
$1	4px
$2	8px
$3	12px
$4	16px
$6	24px
$8	32px

カラートークン

// 正しい - セマンティックトークン
<Text color="$textPrimary" />
<Box backgroundColor="$backgroundSecondary" />

// 間違い - ハードコード色
<Text color="#333333" />
<Box backgroundColor="rgb(245, 245, 245)" />

セマンティックトークン	用途
$textPrimary	メインテキスト
$textSecondary	サポートテキスト
$textTertiary	無効/ヒントテキスト
$primary500	ブランド/アクセントカラー
$statusError	エラー状態
$statusSuccess	成功状態

タイポグラフィトークン

<Text fontSize="$lg" fontWeight="$semibold" />

トークン	サイズ
$xs	12px
$sm	14px
$md	16px
$lg	18px
$xl	20px
$2xl	24px

コアコンポーネント

Box

トークンサポート付きの基本レイアウトコンポーネント:

<Box
  padding="$4"
  backgroundColor="$backgroundPrimary"
  borderRadius="$lg"
>
  {children}
</Box>

HStack / VStack

水平および垂直フレックスレイアウト:

<HStack gap="$3" alignItems="center">
  <Icon name="user" />
  <Text>Username</Text>
</HStack>

<VStack gap="$4" padding="$4">
  <Heading>Title</Heading>
  <Text>Content</Text>
</VStack>

Text

トークンサポート付きのタイポグラフィ:

<Text
  fontSize="$lg"
  fontWeight="$semibold"
  color="$textPrimary"
>
  Hello World
</Text>

Button

バリエーション付きのインタラクティブボタン:

<Button
  onPress={handlePress}
  variant="solid"
  size="md"
  isLoading={loading}
  isDisabled={disabled}
>
  Click Me
</Button>

バリエーション	用途
solid	プライマリアクション
outline	セカンダリアクション
ghost	ターシャリ/サブトルアクション
link	インラインアクション

Input

検証付きのフォーム入力:

<Input
  value={value}
  onChangeText={setValue}
  placeholder="Enter text"
  error={touched ? errors.field : undefined}
  label="Field Name"
/>

Card

コンテンツコンテナ:

<Card padding="$4" gap="$3">
  <CardHeader>
    <Heading size="sm">Card Title</Heading>
  </CardHeader>
  <CardBody>
    <Text>Card content</Text>
  </CardBody>
</Card>

レイアウトパターン

スクリーンレイアウト

const MyScreen = () => (
  <Screen>
    <ScreenHeader title="Page Title" />
    <ScreenContent padding="$4">
      {/* Content */}
    </ScreenContent>
  </Screen>
);

フォームレイアウト

<VStack gap="$4" padding="$4">
  <Input label="Name" {...nameProps} />
  <Input label="Email" {...emailProps} />
  <Button isLoading={loading}>Submit</Button>
</VStack>

リストアイテムレイアウト

<HStack
  padding="$4"
  gap="$3"
  alignItems="center"
  borderBottomWidth={1}
  borderColor="$borderLight"
>
  <Avatar source={{ uri: imageUrl }} size="md" />
  <VStack flex={1}>
    <Text fontWeight="$semibold">{title}</Text>
    <Text color="$textSecondary" fontSize="$sm">{subtitle}</Text>
  </VStack>
  <Icon name="chevron-right" color="$textTertiary" />
</HStack>

アンチパターン

// 間違い - ハードコード値
<View style={{ padding: 16, backgroundColor: '#fff' }}>

// 正しい - デザイントークン
<Box padding="$4" backgroundColor="$backgroundPrimary">


// 間違い - プラットフォームネイティブコンポーネント
import { View, Text } from 'react-native';

// 正しい - コアコンポーネント
import { Box, Text } from 'components/core';


// 間違い - インラインスタイル
<Text style={{ fontSize: 18, fontWeight: '600' }}>

// 正しい - トークンプロップ
<Text fontSize="$lg" fontWeight="$semibold">

コンポーネントプロップパターン

コンポーネントを作成する場合は、トークンベースのプロップを使用してください:

interface CardProps {
  padding?: '$2' | '$4' | '$6';
  variant?: 'elevated' | 'outlined' | 'filled';
  children: React.ReactNode;
}

const Card = ({ padding = '$4', variant = 'elevated', children }: CardProps) => (
  <Box
    padding={padding}
    backgroundColor="$backgroundPrimary"
    borderRadius="$lg"
    {...variantStyles[variant]}
  >
    {children}
  </Box>
);

他のスキルとの統合

• react-ui-patterns: UI状態にコアコンポーネントを使用
• testing-patterns: テストでコアコンポーネントをモック化
• storybook: コンポーネントバリエーションをドキュメント化

使用時期

このスキルは、概要で説明されているワークフローまたはアクションを実行する際に適用できます。

制限事項

• このスキルは、上記で説明されたスコープと明確に一致するタスクの場合にのみ使用してください。
• 出力を環境固有の検証、テスト、または専門家レビューの代替と見なさないでください。
• 必要な入力、権限、安全境界、または成功基準が不足している場合は、中断して明確化を求めてください。