coreeb-fullstack

Name: coreeb-fullstack
Author: core-steven

github.com/core-steven開発040 回インストール9 週間前に更新

リポジトリ

coreeb-fullstack について

coreeb-fullstackは、Next.jsとcoreeb UIライブラリを使ったフルスタック開発の規約を定めるスキルです。プロジェクト構成、コンポーネントとフックの責務、APIサービスの境界、依存関係の管理方法を示します。

主な機能

01Next.js App Routerの指定
024層のモジュール構成
03coreeb UIコンポーネント限定
04アプリケーションロジックをフックに集約
05API呼び出しをサービスに集約
06pnpmによる依存関係管理

活用シーン

01Next.jsアプリの構成
02coreebコンポーネントでの画面構築
03フックと描画コンポーネントの分離
04実バックエンド向けAPIサービスの準備

インストール

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

$npx skills add https://github.com/core-steven/coreeb-skills --skill coreeb-fullstack

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

詳細

COREEB — スキル

優先順位

シンプルさ > 読みやすさ > 保守性 > 再利用性 > 一貫性。 最もシンプルな解決策が、ほとんどの場合、正解です。

最優先指令

フロントエンド： Next.js（App Router）。
アーキテクチャ： 4 層（Routing、Modules、Global UI、Infrastructure）で構成されたモジュール型構造。
UI： coreeb ライブラリのみを使用します。コンポーネントを作成する前に、必ず coreeb を確認してください。このライブラリには Tailwind CSS がすでに含まれています。
パッケージ： pnpm のみを使用します。npm と yarn は使用しないでください。
事前の依存関係確認： コードファイルの作成を始める前に、エージェントはルートの package.json を必ず確認しなければなりません。必須の依存関係（coreeb、sonner、tw-animate-css、axios）が含まれていない場合、エージェントはほかの作業を行う前に pnpm add で自動的にインストールしなければなりません。
ページのスタイルに関する必須ルール： すべてのページ、ビュー、フォーム、サブコンポーネントは coreeb のコンポーネントで構築しなければなりません。ほかの UI ライブラリやインラインスタイルの使用は禁止です。

重要

UI ルール：

まず coreeb を確認し、coreeb のみを使う — 必要な機能を備えたコンポーネントが coreeb に存在する場合、必ずそれを使用してください。このライブラリには Tailwind CSS がすでに含まれています。

カスタム CSS は最終手段としてのみ使用 — coreeb で対応できない例外的なケース（例：.custom-scrollbar）に限ります。

開発ルール

アーキテクチャ

既存のプロジェクト構成に厳密に従ってください。
新しいフォルダーを独自に作成したり、プロジェクトの構成を変更したりしないでください。
すでに使用されているもの以外のデザインパターンを導入しないでください。
新しいものを作成する前に、再利用できるものがすでに存在するか確認してください。

コンポーネント

コンポーネントはレンダリングのみを担当します。コンポーネント内にビジネスロジックを一切含めないでください。
コンポーネントは小さく、読みやすく、保守しやすいものにしてください。
コンポーネント内のロジックが増え始めたら、すぐにフックへ移してください。

フック

各コンポーネントに専用のフックを用意します。
ロジック（状態、ハンドラー、エフェクト、計算、派生値、サービス呼び出し）はすべてフック内に記述します。
フックはシンプルに保ってください。大きくなりすぎた場合は、責務を分割してください。
すべてのフックは、実際のバックエンドと連携できる状態にしておく必要があります。

サービス

すべてのデータはサービス（モジュールの lib/api/ またはグローバルな src/lib/api/）を通じて取得します。
コンポーネントやフックから HTTP リクエストを直接実行しないでください。
サービスの責務は、API の利用、データの取得・送信、レスポンスの変換です。
当初はモックデータを使用する場合でも、実際のバックエンドに対応できる構成にしてください。

型

各型は types/ フォルダー内の index.ts ファイルに記述します。
モジュール内でのみ使用する型は src/modules/[module]/[action]/lib/types/index.ts に記述します。
グローバルに共有する型は src/lib/types/index.ts に記述します。

コード

「賢さ」より明示性を優先します。
関数とファイルは小さくし、わかりやすい名前を付けてください。
汎用性が高すぎる関数、不要な抽象化、時期尚早な最適化は避けてください。

再利用

新しいものを作成する前に、既存のものがないか確認してください。特に以下を確認します。ボタン、テーブル、入力欄、セレクト、モーダル、カード、バッジ、ページネーション、ダイアログ、空の状態、ローダー、アラート、共有コンポーネント。 必ず作成前に再利用を検討してください。

モジュールの分離

依頼された対象以外のモジュールは変更しないでください。
依頼されたモジュール内でのみ作業してください。
タスクの範囲外のリファクタリングは行わないでください。

バックエンド対応

サービスでは、モックデータを実際の API 呼び出しに簡単に置き換えられるようにしてください。
UI がハードコードされたデータに依存しないようにしてください。

ライブラリ

既存のライブラリを使用します：Axios（apiClient.ts 経由）、date-fns。
厳密に必要で、許可されている場合を除き、新しい依存関係をインストールしないでください。
パッケージは必ず pnpm で管理してください。

言語

コードはすべて英語で記述してください：変数、関数、インターフェース、types、enums、コンポーネント、hooks、サービス、フォルダー、ファイル。ユーザーに表示されるテキストは、プロジェクトの言語に合わせてかまいません。

コメントは書かないでください。 適切な命名と構成により、コードを自己説明的にしてください。

✅ コード生成前のチェックリスト

回答が「いいえ」の項目がある場合は、コードを生成する前に修正してください。

📦 インストールと依存関係

pnpm add coreeb@latest

重要

必ず pnpm を使用してください。 npm install や yarn add は使用しないでください。

ディレクトリ構成（必須）

これがプロジェクトの正確な構成です。フォルダーの追加、名前変更、再編成はしないでください。

POINT-FRONT-V1/
├── pnpm-workspace.yaml          # pnpm v11 config
├── next.config.ts
├── tsconfig.json                # Path alias @/* → ./src/*
├── postcss.config.mjs
└── src/
    ├── app/                     # ── LEVEL 1: Routing (App Router)
    │   ├── globals.css          # Global styles and design tokens
    │   ├── layout.tsx           # Root HTML shell
    │   ├── page.tsx             # Initial redirect to /dashboard
    │   └── (pages)/             # Authenticated route group
    │       ├── layout.tsx       # Sidebar + Header + <main>
    │       ├── dashboard/page.tsx
    │       ├── campanas/
    │       │   ├── page.tsx
    │       │   ├── create/page.tsx
    │       │   └── [id]/
    │       │       ├── page.tsx
    │       │       └── edit/page.tsx
    │       ├── mi-cuenta/
    │       │   ├── page.tsx
    │       │   ├── create/page.tsx
    │       │   └── [id]/page.tsx
    │       ├── monitoreo-bdd/page.tsx
    │       ├── planner/
    │       │   ├── page.tsx
    │       │   └── create/page.tsx
    │       ├── visual-senalizacion/
    │       │   ├── page.tsx
    │       │   ├── create/page.tsx
    │       │   └── [id]/page.tsx
    │       ├── software-pdv/page.tsx
    │       ├── experiencia-cliente/page.tsx
    │       └── administracion/page.tsx
    │
    ├── modules/                 # ── LEVEL 2: Business Logic per Module
    │   │   # Patrón uniforme en cada acción CRUD (list · create · detail · edit):
    │   │   ├── screens/         # Full view (imported by page.tsx)
    │   │   ├── components/      # Local components of the action
    │   │   ├── hooks/           # Data fetching and local state
    │   │   ├── helpers/         # Pure functions and formatters
    │   │   └── lib/
    │   │       ├── api/         # HTTP client and data requests
    │   │       └── types/       # Domain TypeScript types (index.ts)
    │   │
    │   ├── campanas/{list,create,detail,edit}/
    │   ├── mi-cuenta/{list,create,detail}/
    │   ├── monitoreo-bdd/list/
    │   ├── planner/{list,create}/
    │   ├── visual-senalizacion/{list,create,detail}/
    │   ├── software-pdv/list/
    │   ├── experiencia-cliente/list/
    │   └── administracion/list/
    │
    ├── components/              # ── LEVEL 3: Global Shared UI
    │   ├── Sidebar.tsx          # Side navigation bar
    │   └── Header.tsx           # Top bar (profile, notifications)
    │
    └── lib/                     # ── LEVEL 4: Infrastructure & Utilities
        ├── api/                 # HTTP client and data requests
        └── types/               # Global TypeScript types (index.ts)

絶対に守るルール

LEVEL 1 — ルーティング（src/app/）：page.tsx と layout.tsx のみを配置します。各 page.tsx は、LEVEL 2 の Screen をインポートしてレンダリングする薄いコンテナーです。ここにロジックは一切置きません。
LEVEL 2 — モジュール（src/modules/）：ビジネスロジック、hooks、helpers、サブコンポーネントはすべて、モジュールとアクションごとに整理します。各アクションには screens/、components/、hooks/、helpers/、lib/{api,types} を配置します。
LEVEL 3 — グローバル UI（src/components/）：グローバルに共有される UI コンポーネント（Sidebar.tsx、Header.tsx）のみを配置します。
LEVEL 4 — インフラストラクチャ（src/lib/）：グローバル HTTP クライアント（src/lib/api/）とグローバル型（src/lib/types/index.ts）を配置します。
定義済みのモジュールのみ：campanas、mi-cuenta、monitoreo-bdd、planner、visual-senalizacion、software-pdv、experiencia-cliente、administracion。一覧にないモジュールは追加しないでください。

これはどこに配置しますか？

作成するもの	配置先
新しいルート／ページ	`src/app/(pages)/[modulo]/page.tsx`
アクションのメインビュー（Screen）	`src/modules/[modulo]/[action]/screens/[ScreenName].tsx`
アクションのローカルコンポーネント	`src/modules/[modulo]/[action]/components/`
アクションの hook	`src/modules/[modulo]/[action]/hooks/`
アクションの helper	`src/modules/[modulo]/[action]/helpers/`
アクションのサービス／HTTP クライアント	`src/modules/[modulo]/[action]/lib/api/`
アクションのローカル型	`src/modules/[modulo]/[action]/lib/types/index.ts`
グローバルな再利用可能コンポーネント	`src/components/`
グローバル HTTP クライアント	`src/lib/api/`
共有グローバル型	`src/lib/types/index.ts`

1. `coreeb` ライブラリ（UI）の設定

A. `next.config.ts`

const nextConfig = { transpilePackages: ['coreeb'] };
export default nextConfig;

B. `postcss.config.mjs`

const config = { plugins: { '@tailwindcss/postcss': {} } };
export default config;

C. `src/app/globals.css`

@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
@import "coreeb/styles.css";

/* Project-specific styles below */

D. `src/app/layout.tsx`

import './globals.css';
import { Toaster } from 'coreeb';

export const metadata = { title: 'App' };

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="es">
      <head>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
      </head>
      <body>
        {children}
        <Toaster position="top-right" richColors />
      </body>
    </html>
  );
}

E. `coreeb` コンポーネントカタログ

重要

UI コンポーネントを作成する前に、必ずこのカタログを確認してください。 coreeb に存在する場合は、必ず使用してください。

共通／レイアウト： Icons、Button、Badge、Separator、Skeleton、Spinner、Visually Hidden、Card、Collapsible、Scroll Area、Tabs。
フォーム： Floating Input、Floating Select、Floating Date Picker、Chip Selector、Checkbox、Form、Radio Group、Switch、Textarea、File Dropzone、Date Range Pill。
データ表示とフィードバック： Avatar、Table、Sonner (Toast)（Toaster）、Tooltip。
オーバーレイ： Command、Dialog、Dropdown Menu、Popover、Sheet。

インターフェースは、これらのコンポーネントだけで構築してください。ナビゲーションとパネルの配置には、coreeb の Tabs と Sheet を必ず使用してください。

F. デフォルトサイズ（必須）

要素	デフォルトサイズ
`Input`、`Select`	`sm`
`Button`	`small`
`Icons`	`xs`

これらのサイズはプロジェクトの標準です。明確で正当な視覚的理由がある場合に限り、変更してください。

2. プロジェクト準拠チェックリスト

Markdown 対応

ログインしてコメント

基本情報

作者: core-steven
リポジトリ: core-steven/coreeb-skills
カテゴリ: 開発
インストール数: 40
GitHub スター: 0

問題を報告