本文へ移動
cccskills
無料GitHub で公開日本語紹介

essentials

BunやTypeScript、データ取得、状態管理などの実装ルールを示し、プロジェクト内のコード変更を一貫した方法で進めるためのスキルです。

原文原文の説明を見る

Critical rules that must always be followed

trycompai/compスター 2,058(GitHub 2,058 + cccskills 0)

実行スコア 未検証

インストール方法を見る

こんなときに便利

  • TypeScript機能を既存ルールで追加したいとき
  • 外部データを型安全に扱いたいとき
  • データ取得や状態管理の方法を確認したいとき

日本語での紹介

できること

TypeScriptコードを変更するときに、パッケージ管理、画面部品、型安全性、データ取得、状態管理の基本ルールを示します。パッケージ操作にはbunを使い、UI部品は@trycompai/design-systemを優先します。外部データはzodなどで検証し、anyや安全性を確認しない型アサーションを避けます。組織IDはURLパラメーターから取得し、サーバー側で取得したデータをクライアント側に渡す方法や、UI状態とURL状態の扱いも定めています。

こんなときに便利

既存プロジェクトにTypeScriptの機能を追加するときや、コードの書き方に迷ったときに使えます。データ取得や状態管理の方法をそろえ、型の不整合を避けながら変更を進めたい場面にも向いています。

使い方の例

  • 「この画面に組織ごとのデータ取得を追加して」
  • 「外部APIのレスポンスを安全に検証して」
  • 「このUI状態をプロジェクトのルールに沿って管理して」

注意点

パッケージ操作にはbunを使います。コード変更後はbun run typecheckとbun run lintを実行するルールです。

この紹介文は、公開されている SKILL.md をもとに AI(OpenAI Codex)が作成しました。正確な仕様は下の原文を確認してください。

含まれるファイル(1)

  • SKILL.md2.3 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Source Cursor rule: .cursor/rules/essentials.mdc. Original file scope: **/*.{ts,tsx}. Original Cursor alwaysApply: true.

Essentials

Package Manager

Use bun, never npm/yarn/pnpm.

bun install          # Install deps
bun add <pkg>        # Add package
bun run <script>     # Run script
bunx <cmd>           # Execute binary

Components

Use @trycompai/design-system first, @trycompai/ui only as fallback.

// ✅ Design system
import { Button, Card, Input, Select } from '@trycompai/design-system';
import { Add, Close } from '@trycompai/design-system/icons';

// ❌ Don't use when DS has the component
import { Button } from '@trycompai/ui/button';
import { Plus } from 'lucide-react';

No className on DS components - use variants and props only.

// ✅ Use variants
<Button variant="destructive" size="sm">Delete</Button>

// ❌ No className overrides
<Button className="bg-red-500">Delete</Button>

TypeScript

No any. No unsafe type assertions.

// ✅ Validate external data with zod
const TaskSchema = z.object({ id: z.string(), title: z.string() });
const task = TaskSchema.parse(response.data);

// ❌ Never
const data: any = fetchData();
const task = response as Task;

Data Fetching

Get organizationId from URL params, not session.

// ✅ From params
export default async function Page({ params }: { params: Promise<{ orgId: string }> }) {
  const { orgId } = await params;
}

// ❌ Not from session
const session = await auth.api.getSession();
const orgId = session?.session?.activeOrganizationId;

Server components fetch, pass to client with SWR fallbackData.

// Server page
const data = await fetchData(orgId);
return <ClientComponent initialData={data} />;

// Client component
const { data } = useSWR(key, fetcher, { fallbackData: initialData });

State Management

No nuqs - use React useState for UI state, Next.js for URL state.

// ✅ React state for UI
const [isOpen, setIsOpen] = useState(false);

// ❌ No nuqs
import { useQueryState } from 'nuqs';

After Changes

Always run checks after code changes:

bun run typecheck
bun run lint

Fix all errors before committing.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

api-endpoint-contract

無料概要あり

APIエンドポイントの追加・変更で、DTO、入力検証、OpenAPI仕様、MCPツールの説明や公開範囲を揃え、エージェントからも扱いやすいAPIに整えます。

  • APIエンドポイントを追加したいとき
  • DTOと入力検証を整えたいとき
  • MCPツールとしてAPIを公開したいとき
trycompai/comp2,0582026年10月24日 更新

audit-design-system

無料概要あり

既存コードのデザインシステム利用状況を調べ、旧UI部品やlucide-reactのアイコンを@trycompai/design-systemの部品・Carbonアイコンへ置き換えるスキルです。

  • 旧UI部品を移行したいとき
  • アイコンをCarbonに置き換えたいとき
  • 画面のデザインシステム準拠を確認するとき
trycompai/comp2,0582026年10月24日 更新

audit-hooks

無料概要あり

指定されたファイルのフックやAPI利用を点検し、禁止パターンをSWRやapiClientなどの指定方式へ修正するための監査手順と実装規約をまとめています。

  • 既存コードのAPI利用を点検したいとき
  • 生のfetchをapiClientに置き換えたいとき
  • 更新処理をSWRのmutateにそろえたいとき
trycompai/comp2,0582026年10月24日 更新

audit-rbac

無料概要あり

NestJSのAPIとフロントエンドを調べ、権限チェックや監査ログのルール違反を修正するための確認項目を示します。

  • APIの権限チェックを点検したいとき
  • 画面操作の権限制御を確認したいとき
  • RBAC違反を修正したいとき
trycompai/comp2,0582026年10月24日 更新

audit-tests

無料概要あり

権限で表示や操作が変わるコンポーネントの単体テストを点検し、不足分の追加や失敗の修正を行って、管理者と閲覧専用ユーザーの動作を確かめます。

  • 権限別の単体テストを追加したいとき
  • 管理者と監査ユーザーの表示を検証したいとき
  • 失敗する権限テストを修正したいとき
trycompai/comp2,0582026年10月24日 更新

better-auth-best-practices

無料概要あり

Better Authを使ったTypeScript認証の設定を支援し、データベース接続、セッション管理、メール認証、OAuth、プラグインやセキュリティ項目を整理します。

  • Better Authで認証を導入したいとき
  • DBやORMアダプターを接続したいとき
  • セッションの保存方法を設定したいとき
trycompai/comp2,0582026年10月24日 更新

trycompai のスキルをすべて見る

このスキルの問題を報告する