devup-ui

devup-ui — ルーティングファーストのゼロランタイム CSS-in-JS 導入

キーワード：devup-ui · @devup-ui/react · zero runtime · build-time CSS extraction · devup.json

Devup UI は Rust 製のプリプロセッサを使って、すべてのスタイルをビルド時に処理します。 ランタイムのスタイルエンジンはありません。まず適切なバンドラープラグインを選び、 その後スタイルを記述してください。ほかの機能は、このプラグインによって動作します。

Devup UI は、コンパイル時にスタイルを抽出することで、従来の CSS-in-JS における開発者体験とパフォーマンスのトレードオフを解消します。

• ゼロランタイム — ランタイムにスタイリング用の JavaScript は実行されません
• ゼロ設定／ゼロ FOUC — クライアント Provider は不要で、スタイルのちらつきもありません
• 完全な構文カバレッジ — 変数、条件分岐、レスポンシブ配列、疑似セレクターに対応
• 使い慣れた API — styled() は styled-components／Emotion のパターンと互換性があります
• 最小のバンドル — base-37 のクラス名（a、b、…、aa、ab）。動的な値は CSS 変数になります
• RSC 対応 — React Server Components 内で動作します

このスキルを使う場面

• ユーザーがプロジェクトに Devup UI を追加したいと考えており、適切なバンドラープラグインの設定が必要な場合
• Next.js／Vite／Rsbuild／Webpack／Bun の連携方法を選んでいる場合
• ユーザーが Box／css props または styled() API を使ってスタイルを記述したいものの、短縮 props（bg、px、レスポンシブ配列、_hover）の対応関係がわからない場合
• ユーザーが devup.json で型安全なテーマ設定（色、タイポグラフィ、CSS 変数を使った動的なテーマ切り替え）を行いたい場合
• ユーザーが styled-components／Emotion／Tailwind／Panda／vanilla-extract からゼロランタイム構成へ移行したい場合
• ユーザーがランタイム CSS-in-JS の Provider を使おうとしているが、Devup UI では不要であり、RSC に悪影響があることを知る必要がある場合

本来のニーズがスタイルの仕組みを超える場合は、適切なスキルに案内してください。トークン／ビジュアル言語のガバナンス → design-system；再利用可能なコンポーネントの API／構造 → design-system；レイアウト／ブレークポイント戦略 → responsive-design；アクセシビリティ → web-accessibility；スタイリング以外のバンドル／RSC／再レンダリングのパフォーマンス → react-best-practices。

手順

ステップ 1 — 設定を編集する前に、必要な情報をまとめて確認する

一度に次の情報を集めます。

1. バンドラー — Next.js、Vite、Rsbuild、Webpack、Bun（これによりプラグインのパッケージが決まります）
2. React モード — App Router／RSC か、クライアントのみか（RSC では Provider は不要です。追加しないでください）
3. テーマ設定 — devup.json のトークンと動的テーマ（例：ダークテーマ）が必要か
4. 導入経緯 — 新規導入か、styled-components／Emotion／Tailwind／Panda／vanilla-extract からの移行か
5. パッケージマネージャー — npm／pnpm／yarn／bun

ステップ 2 — コアパッケージと適切なバンドラープラグインをインストールする

npm install @devup-ui/react
# then exactly ONE bundler plugin:
npm install @devup-ui/next-plugin     # Next.js
npm install @devup-ui/vite-plugin     # Vite
npm install @devup-ui/rsbuild-plugin  # Rsbuild
npm install @devup-ui/webpack-plugin  # Webpack
npm install @devup-ui/bun-plugin      # Bun

ヘルパーを使うこともできます。スキルをプラグインとしてインストールし、 対象プロジェクトに選択したバンドラーのひな形も作成できます。

bash scripts/install.sh                                   # install the skill only
BUNDLER=next PROJECT=/path/to/app bash scripts/install.sh # + npm packages for Next.js
BUNDLER=vite PKG_MANAGER=pnpm PROJECT=. bash scripts/install.sh
GLOBAL=1 bash scripts/install.sh                          # install the skill globally

ステップ 3 — ビルド時プラグインを設定する（最も重要な手順）

// next.config.js  (Next.js)
import { DevupUI } from '@devup-ui/next-plugin'
export default DevupUI({})

// vite.config.ts  (Vite)
import { DevupUI } from '@devup-ui/vite-plugin'
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
export default defineConfig({ plugins: [react(), DevupUI()] })

Rsbuild では DevupUIRsbuildPlugin()、Webpack では new DevupUIWebpackPlugin() を使い、 Bun では @devup-ui/bun-plugin をインポートします。完全な例については、 references/installation-and-plugins.md を参照してください。

ステップ 4 — スタイルを記述する

import { Box, css, styled } from '@devup-ui/react'

// Prop-based styling with shorthands and responsive arrays
const view = (
  <Box bg="white" p={4} borderRadius="8px" _hover={{ bg: 'gray.100' }}>
    <Box fontSize={[14, 16, 20]} color="primary">Responsive text</Box>
  </Box>
)

// styled-components / Emotion compatible API
const Card = styled('div', {
  bg: 'white',
  p: 4,            // 4 * 4 = 16px spacing scale
  borderRadius: '8px',
  boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
  _hover: { boxShadow: '0 10px 15px rgba(0,0,0,0.1)' },
})

数値のスペーシング props は 4px 倍されます。配列の値はブレークポイントに応じて変化します。 _hover、_focus などは疑似セレクターです。動的な値は CSS 変数にコンパイルされるため、 ランタイムでスタイルが再計算されることはありません。詳細については、 references/styling-api.md を参照してください。

ステップ 5 — devup.json でテーマを設定する（必要な場合のみ）

{
  "theme": {
    "colors": {
      "default": { "primary": "#0070f3", "text": "#000" },
      "dark":    { "primary": "#3291ff", "text": "#fff" }
    },
    "typography": {
      "heading": { "fontFamily": "Pretendard", "fontSize": "24px", "fontWeight": 700, "lineHeight": 1.3 }
    }
  }
}

テーマトークンは型安全で、CSS 変数を使ったテーマの切り替えにコストはかかりません。 RSC は Provider なしで動作します。テーマ設定にクライアント Provider を 追加しないでください。移行手順と適切な案内先については、 references/theming-and-migration.md を参照してください。

他の項目への振り分け（スタイルについて過度な約束をしないでください）

• トークンのガバナンス、命名、ビジュアル言語の方針 → design-system
• 再利用可能なコンポーネントの API ／スロットの構造／制御の責任範囲 → design-system
• ページシェル／ブレークポイント／リフローの方針 → responsive-design
• アクセシビリティのセマンティクス、フォーカス、ラベル、リフロー → web-accessibility
• ウォーターフォール、バンドルサイズ、RSC の境界、再レンダリングの頻発 → react-best-practices

プラグインとしてインストールする

npx skills add https://github.com/akillness/jeo-skills --skill devup-ui