jpskill.com
📦 その他 コミュニティ

windsurf-rules

Windsurf AIコーディングアシスタントを、プロジェクトごとのルールやチーム共有設定でカスタマイズし、AIコーディングの基準を設けたり、Cascade AIの動作を調整したりするSkill。

📜 元の英語説明(参考)

Configure Windsurf AI coding assistant with .windsurfrules and workspace rules. Use when: customizing Windsurf for a project, setting AI coding standards, creating team-shared Windsurf configurations, or tuning Cascade AI behavior.

🇯🇵 日本人クリエイター向け解説

一言でいうと

Windsurf AIコーディングアシスタントを、プロジェクトごとのルールやチーム共有設定でカスタマイズし、AIコーディングの基準を設けたり、Cascade AIの動作を調整したりするSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o windsurf-rules.zip https://jpskill.com/download/15567.zip && unzip -o windsurf-rules.zip && rm windsurf-rules.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/15567.zip -OutFile "$d\windsurf-rules.zip"; Expand-Archive "$d\windsurf-rules.zip" -DestinationPath $d -Force; ri "$d\windsurf-rules.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して windsurf-rules.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → windsurf-rules フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Windsurf Rules

概要

Windsurf rules は、Cascade (Windsurf の AI) がプロジェクト内でどのように動作するかをカスタマイズします。ルールはグローバル (すべてのプロジェクトに適用) またはワークスペース固有 (このディレクトリのみに適用) にできます。ワークスペースルールはプロジェクトルートの .windsurfrules に保存され、チームで共有するためにバージョン管理にコミットできます。

手順

ルールスコープ

スコープ 場所 用途
グローバル Windsurf 設定 → Rules プロジェクトを跨いだ標準 (個人のスタイル、推奨ライブラリ)
ワークスペース プロジェクトルートの .windsurfrules プロジェクト固有の規約、スタックの詳細、アーキテクチャパターン

ワークスペースルールは、競合する場合、グローバルルールよりも優先されます。

ステップ 1: ワークスペースルールファイルの作成

プロジェクトルートに .windsurfrules を作成します。

touch .windsurfrules

ステップ 2: 基本構造

.windsurfrules はプレーンな Markdown ファイルです。システムプロンプトのように記述します — AI に対する明確で具体的な指示です。

# プロジェクト: My SaaS App

## 技術スタック
- フロントエンド: React 19, TypeScript, Vite, Tailwind CSS
- バックエンド: Node.js, Fastify, Prisma, PostgreSQL
- 認証: Clerk
- デプロイ: Railway

## コーディングスタイル
- TypeScript strict mode — 暗黙的な `any` は禁止
- `let` よりも `const` を優先。`var` は絶対に使用しない
- 名前付きエクスポートを使用。ページレベルのコンポーネントを除き、デフォルトエクスポートは避ける
- Promise よりも Async/await を優先 — `.then()` と `await` を混在させない
- Prettier でフォーマット (設定は `.prettierrc` に記述)

## アーキテクチャルール
- ビジネスロジックは `src/services/` に配置 — コンポーネントは薄く保つ
- データベースアクセスは `src/db/` の Prisma を通してのみ行う — 生の SQL は禁止
- API 呼び出しは `src/api/` のクライアント関数を通して行う — コンポーネント内で `fetch()` を使用しない
- すべての環境変数は `src/config/env.ts` を通してアクセスする

## テスト
- ユニットテストは Vitest、E2E は Playwright を使用
- テストファイルはソースコードの隣に配置: `Button.tsx` → `Button.test.tsx`
- 外部依存関係をモックし、内部モジュールはモックしない

ステップ 3: スタック固有の指示

Cascade に、正確なバージョンとパターンに関するコンテキストを提供します。

## React パターン
- サーバー状態管理には React Query (TanStack Query v5) を使用
- グローバルクライアント状態には Zustand を使用 — ドメインごとに 1 つのストア
- すべてのフォームに React Hook Form + Zod を使用
- サーバーコンポーネントを優先。`"use client"` は必要な場合にのみ使用

## API 規約
- REST エンドポイントは以下に従う: `GET /api/resources`, `POST /api/resources`, `PATCH /api/resources/:id`
- レスポンスの形状: 成功時は `{ data: T }`、エラー時は `{ error: string, code: string }`
- すべての入力は `src/schemas/` の Zod スキーマで検証
- すべてのパブリックエンドポイントに `src/middleware/rateLimit.ts` を介してレート制限を適用

ステップ 4: 主要なパターンの例を提供する

複雑なパターンには、散文的なルールよりも例の方が効果的です。

## ファイル構成

新しい機能を作成するときは、次の構造に従ってください。

src/features/users/ components/ # React コンポーネント UserList.tsx UserCard.tsx hooks/ # カスタムフック useUsers.ts services/ # ビジネスロジック users.service.ts schemas/ # Zod スキーマ user.schema.ts index.ts # パブリックエクスポートのみ


## コンポーネントパターン

```tsx
// ✅ 正しい
interface UserCardProps {
  userId: string;
  onSelect?: (id: string) => void;
}

export function UserCard({ userId, onSelect }: UserCardProps) {
  const { data: user } = useUser(userId);
  return <div onClick={() => onSelect?.(userId)}>{user?.name}</div>;
}

// ❌ 避ける
export default function ({ user, click }) {
  return <div onClick={click}>{user.name}</div>;
}

### ステップ 5: 制約とアンチパターンを設定する

Cascade に避けるべきことを伝えます。

```markdown
## やってはいけないこと
- データフェッチに `useEffect` を絶対に使用しない — 代わりに React Query を使用
- 会話で言及せずに新しい npm パッケージをインストールしない
- クラスコンポーネントは避ける — 関数コンポーネントのみを使用
- 本番環境のコードで `console.log` を使用しない — `src/lib/logger.ts` のロガーを使用
- API URL をハードコードしない — `src/config/env.ts` の定数を使用
- データベースのマイグレーションを手動で記述しない — `prisma migrate dev` を使用
- 2 レベルより深くプロパティをドリルダウンしない — コンテキストまたは Zustand を使用

ステップ 6: Windsurf 設定でグローバルルールを設定する

すべてのプロジェクトに適用されるルールについては、Settings → General → Rules for AI に追加します。

## 私のグローバル標準

- JavaScript ではなく TypeScript で記述する
- エクスポートされた関数に JSDoc コメントを追加する
- 問題を解決する最も単純なソリューションを提案する
- 複数のアプローチが存在する場合は、トレードオフを簡単に説明する
- セキュリティ上の懸念 (SQL インジェクション、XSS、コード内のシークレット) を事前に指摘する
- 認証、暗号化、日付には、カスタム実装よりも確立されたライブラリを優先する

ステップ 7: Memories を使用して会話ごとのルールを設定する

Windsurf Cascade は、セッション間で永続するメモリーを保存できます。自然言語でトリガーします。

"覚えておいてください: このプロジェクトでは、すべての間隔の値にピクセルではなくインチを使用します"
"コミットを提案する前に、必ずテストを実行するようにリマインドしてください"

これらは自動的に保存され、同じワークスペースでの今後の会話で参照されます。

例 1: Python FastAPI プロジェクト


# バックエンド API — Python FastAPI

## スタック
- Python 3.12, FastAPI, SQLAlchemy 2.0 async, Alembic
- すべてのスキーマに Pydantic v2 を使用
- テストには pytest + pytest-asyncio を使用
- リンティングとフォーマットには Ruff を使用

## パターン
- FastAPI `Depends()` を介した依存性注入
- リポジトリパターン: ルーターはサービスを呼び出し、サービスはリポジトリを呼び出す
- すべての DB モデルは `app/models/` に、Pydantic スキーマは `app/schemas/` に配置
- FastAPI `BackgroundTasks` または Celery を介したバックグラウンドタスク (負荷の高い作業用)

## ルール
- すべてを型付けする — `from __future__ import annotations`
- すべてのルートハンドラーと DB 操作に `async def` を使用
- `app/config.py` の Pydantic 設定クラスを使用して、起動時に環境変数を検証する
- バリデーションエラーには HTTP 422 (FastAPI のデフォルト)、ビジネスロジックエラーには 400 を返す

## 避けるべきアンチパターン
- 非同期ルートでの同期 DB 呼び出し ( `a
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Windsurf Rules

Overview

Windsurf rules customize how Cascade (Windsurf's AI) behaves in your project. Rules can be global (apply to all projects) or workspace-specific (apply only in this directory). Workspace rules are stored in .windsurfrules at the project root and can be committed to version control for team sharing.

Instructions

Rule scopes

Scope Location Use for
Global Windsurf Settings → Rules Cross-project standards (your personal style, preferred libraries)
Workspace .windsurfrules in project root Project-specific conventions, stack details, architecture patterns

Workspace rules override global rules when they conflict.

Step 1: Create the workspace rules file

Create .windsurfrules in your project root:

touch .windsurfrules

Step 2: Basic structure

.windsurfrules is a plain Markdown file. Write it like a system prompt — clear, specific instructions for the AI:

# Project: My SaaS App

## Tech Stack
- Frontend: React 19, TypeScript, Vite, Tailwind CSS
- Backend: Node.js, Fastify, Prisma, PostgreSQL
- Auth: Clerk
- Deployment: Railway

## Code Style
- TypeScript strict mode — no implicit `any`
- Prefer `const` over `let`; never use `var`
- Use named exports; avoid default exports except for page-level components
- Async/await over promises — never mix `.then()` with `await`
- Format with Prettier (config in `.prettierrc`)

## Architecture Rules
- Business logic lives in `src/services/` — keep components thin
- Database access only through Prisma in `src/db/` — no raw SQL
- API calls go through `src/api/` client functions — never fetch() in components
- All environment variables accessed through `src/config/env.ts`

## Testing
- Unit tests with Vitest, E2E with Playwright
- Test files next to source: `Button.tsx` → `Button.test.tsx`
- Mock external dependencies, not internal modules

Step 3: Stack-specific instructions

Give Cascade context about your exact versions and patterns:

## React Patterns
- Use React Query (TanStack Query v5) for server state management
- Zustand for global client state — one store per domain
- React Hook Form + Zod for all forms
- Prefer Server Components; use `"use client"` only when necessary

## API Conventions
- REST endpoints follow: `GET /api/resources`, `POST /api/resources`, `PATCH /api/resources/:id`
- Response shape: `{ data: T }` for success, `{ error: string, code: string }` for errors
- All inputs validated with Zod schemas in `src/schemas/`
- Rate limiting applied to all public endpoints via `src/middleware/rateLimit.ts`

Step 4: Provide examples for key patterns

Examples work better than prose rules for complex patterns:

## File Organization

When creating a new feature, follow this structure:

src/features/users/ components/ # React components UserList.tsx UserCard.tsx hooks/ # Custom hooks useUsers.ts services/ # Business logic users.service.ts schemas/ # Zod schemas user.schema.ts index.ts # Public exports only


## Component Pattern

```tsx
// ✅ Correct
interface UserCardProps {
  userId: string;
  onSelect?: (id: string) => void;
}

export function UserCard({ userId, onSelect }: UserCardProps) {
  const { data: user } = useUser(userId);
  return <div onClick={() => onSelect?.(userId)}>{user?.name}</div>;
}

// ❌ Avoid
export default function ({ user, click }) {
  return <div onClick={click}>{user.name}</div>;
}

### Step 5: Set constraints and anti-patterns

Tell Cascade what to avoid:

```markdown
## What NOT to Do
- Never use `useEffect` for data fetching — use React Query instead
- Don't install new npm packages without noting them in the conversation
- Avoid class components — use functional components only
- Don't use `console.log` in production code — use the logger from `src/lib/logger.ts`
- Never hardcode API URLs — use `src/config/env.ts` constants
- Don't write database migrations manually — use `prisma migrate dev`
- Avoid prop drilling more than 2 levels deep — use context or Zustand

Step 6: Global rules in Windsurf Settings

For rules that apply across all projects, add them in Settings → General → Rules for AI:

## My Global Standards

- Write TypeScript, not JavaScript
- Add JSDoc comments to exported functions
- Suggest the simplest solution that solves the problem
- When multiple approaches exist, briefly explain the tradeoffs
- Flag security concerns proactively (SQL injection, XSS, secrets in code)
- Prefer established libraries over custom implementations for auth, crypto, dates

Step 7: Per-conversation rules with Memories

Windsurf Cascade can store memories that persist across sessions. Trigger them with natural language:

"Remember: in this project we use inches not pixels for all spacing values"
"Always remind me to run tests before suggesting I commit"

These are stored automatically and referenced in future conversations in the same workspace.

Examples

Example 1: Python FastAPI project

# Backend API — Python FastAPI

## Stack
- Python 3.12, FastAPI, SQLAlchemy 2.0 async, Alembic
- Pydantic v2 for all schemas
- pytest + pytest-asyncio for tests
- Ruff for linting and formatting

## Patterns
- Dependency injection via FastAPI `Depends()`
- Repository pattern: routers call services, services call repositories
- All DB models in `app/models/`, Pydantic schemas in `app/schemas/`
- Background tasks via FastAPI `BackgroundTasks` or Celery for heavy work

## Rules
- Type everything — `from __future__ import annotations`
- Use `async def` for all route handlers and DB operations
- Validate env vars at startup with a Pydantic settings class in `app/config.py`
- Return HTTP 422 for validation errors (FastAPI default), 400 for business logic errors

## Anti-patterns to avoid
- Sync DB calls in async routes (use `await` always)
- Catching broad `Exception` — be specific with exception types
- Business logic inside Pydantic validators

Example 2: Mobile React Native project

# React Native App

## Stack
- React Native 0.74, Expo SDK 51, TypeScript
- Expo Router for navigation (file-based)
- Zustand for state, React Query for API data
- NativeWind (Tailwind for RN)

## Rules
- Use `expo-*` packages over third-party when available
- All screens in `app/` following Expo Router conventions
- StyleSheet.create() only for dynamic styles; static styles via NativeWind classes
- Test on both iOS and Android before declaring complete
- Accessibility: all interactive elements must have `accessibilityLabel`

## Performance
- Use `FlashList` instead of `FlatList` for long lists
- Memoize expensive components with `React.memo()`
- Avoid anonymous functions in `renderItem` props

Guidelines

  • Keep .windsurfrules focused — 100-300 lines is ideal; too long dilutes effectiveness
  • Be specific and actionable: "use React Query for server state" beats "manage state well"
  • Use examples liberally — Cascade learns patterns faster from code than prose
  • Commit .windsurfrules to git so all team members share the same AI behavior
  • Update rules when you make architecture decisions — treat it like living documentation
  • Global rules for your personal style; workspace rules for project-specific patterns
  • Avoid contradicting yourself — conflicting rules confuse the AI
  • Review and prune outdated rules when the project evolves