mcpField
U
ui-components

ui-components

github.com/elie222デザイン・UI12.9k94 回インストール1 日前に更新
リポジトリ

ui-components について

Shadcn UI、Tailwind CSS、SWR、一般的なローディングおよびフォームコンポーネントの実装規約を示すスキルです。レスポンシブな画面やAPIデータ取得を実装する開発者向けです。

主な機能

  1. 01Shadcn UIとTailwindのスタイル指針
  2. 02モバイルファーストのレスポンシブ設計
  3. 03SWRによるAPI GETリクエストの例
  4. 04ローディング状態コンポーネントの指針
  5. 05フォーム入力の例

活用シーン

  1. 01レスポンシブなUIコンポーネントの構築
  2. 02ページ分割されたAPIデータの取得
  3. 03ローディング状態とフォームの実装

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/elie222/inbox-zero --skill ui-components

インストール後、Claude Code で/ui-componentsを入力して読み込まれたか確認します。

詳細

UI コンポーネントとスタイリング

UI フレームワーク

  • コンポーネントとスタイリングには Shadcn UI と Tailwind を使用します
  • モバイルファーストのアプローチで Tailwind CSS を使用してレスポンシブデザインを実装します
  • 画像には next/image パッケージを使用します

Shadcn コンポーネントの新規インストール

pnpm dlx shadcn@latest add COMPONENT

例：

pnpm dlx shadcn@latest add progress

SWR によるデータ取得

サーバーへの API GET リクエストには swr パッケージを使用します。

const searchParams = useSearchParams();
const page = searchParams.get("page") || "1";
const { data, isLoading, error } = useSWR<PlanHistoryResponse>(
  `/api/user/planned/history?page=${page}`
);

ローディングコンポーネント

ローディング状態を処理するには LoadingContent コンポーネントを使用します。

<Card>
  <LoadingContent loading={isLoading} error={error}>
    {data && <MyComponent data={data} />}
  </LoadingContent>
</Card>

フォームコンポーネント

テキスト入力
<Input
  type="email"
  name="email"
  label="Email"
  registerProps={register("email", { required: true })}
  error={errors.email}
/>
テキストエリア
<Input
  type="text"
  autosizeTextarea
  rows={3}
  name="message"
  placeholder="Paste in email content"
  registerProps={register("message", { required: true })}
  error={errors.message}
/>

コメント

Markdown 対応