jpskill.com
🛠️ 開発・MCP コミュニティ

xano

Xanoは、サーバーコードを書かずにAPIやデータベースを構築できるノーコード/ローコードのバックエンドプラットフォームで、API作成やデータ管理、フロントエンド連携を支援するSkill。

📜 元の英語説明(参考)

Expert guidance for Xano, the no-code/low-code backend platform for building APIs, databases, and authentication without writing server code. Helps developers and non-technical builders create production-ready REST APIs with visual function stacks, manage data models, and integrate with frontend frameworks.

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

一言でいうと

Xanoは、サーバーコードを書かずにAPIやデータベースを構築できるノーコード/ローコードのバックエンドプラットフォームで、API作成やデータ管理、フロントエンド連携を支援するSkill。

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

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

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

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

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

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して xano.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → xano フォルダができる
  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 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Xano — No-Code バックエンドビルダー

概要

Xano は、サーバーコードを書かずに API、データベース、認証を構築するための、ノーコード/ローコードのバックエンドプラットフォームです。開発者や非技術系のビルダーが、視覚的な関数スタックで本番環境に対応できる REST API を作成し、データモデルを管理し、フロントエンドフレームワークと統合するのに役立ちます。

手順

データベーススキーマ

## Xano でのデータモデリング
Xano ダッシュボードでテーブルを視覚的に作成します。

### Users テーブル
| Field        | Type      | Properties                    |
|-------------|-----------|-------------------------------|
| id          | integer   | Primary key, auto-increment   |
| email       | text      | Unique, indexed               |
| name        | text      | Required                      |
| password    | password  | Hashed automatically          |
| plan        | enum      | free, pro, enterprise         |
| avatar_url  | text      | Nullable                      |
| metadata    | json      | Flexible key-value data       |
| created_at  | timestamp | Auto-set on create            |

### Posts テーブル
| Field        | Type       | Properties                   |
|-------------|------------|------------------------------|
| id          | integer    | Primary key                  |
| user_id     | integer    | Foreign key → Users          |
| title       | text       | Required, max 200 chars      |
| content     | text       | Required                     |
| published   | boolean    | Default: false               |
| tags        | list[text] | Array of strings             |
| created_at  | timestamp  | Auto-set on create           |

Xano は、各テーブルに対して CRUD エンドポイントを自動生成します。

API エンドポイント (関数スタック)

## 視覚的な API ビルダー
Xano は "Function Stacks" — 視覚的な、ステップバイステップの API ロジックを使用します。

### POST /api/posts — 投稿の作成
1. **Precondition**: 認証の検証 (JWT トークンが有効)
2. **Input**: title (text, required), content (text, required), tags (list)
3. **Create Variable**: 認証トークンから `user_id` を作成
4. **Conditional**: ユーザープランの確認
   - If plan == "free" AND post_count >= 5 → エラー "Free plan limited to 5 posts" を返す
5. **Database Query**: `posts` テーブルにレコードを追加
   - title: input.title
   - content: input.content
   - tags: input.tags
   - user_id: user_id
   - published: false
6. **Return**: { id, title, created_at }

### GET /api/posts — 公開された投稿のリスト
1. **Input**: page (int, default 1), per_page (int, default 20)
2. **Database Query**: `posts` テーブルをクエリ
   - Filter: published = true
   - Sort: created_at DESC
   - Pagination: page, per_page
   - Join: users (作成者情報用)
3. **Return**: { items: [...], total, page, pages }

認証

// Xano は組み込みの認証エンドポイントを提供します。

// Sign up: POST /auth/signup
const signUp = async (email: string, password: string, name: string) => {
  const response = await fetch("https://your-instance.xano.io/api:auth/auth/signup", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ email, password, name }),
  });
  const { authToken } = await response.json();
  return authToken;   // JWT token
};

// Login: POST /auth/login
const login = async (email: string, password: string) => {
  const response = await fetch("https://your-instance.xano.io/api:auth/auth/login", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ email, password }),
  });
  const { authToken } = await response.json();
  return authToken;
};

// Authenticated request
const getPosts = async (token: string) => {
  const response = await fetch("https://your-instance.xano.io/api:main/posts", {
    headers: { Authorization: `Bearer ${token}` },
  });
  return response.json();
};

// Get current user: GET /auth/me
const getMe = async (token: string) => {
  const response = await fetch("https://your-instance.xano.io/api:auth/auth/me", {
    headers: { Authorization: `Bearer ${token}` },
  });
  return response.json();
};

外部 API 連携

## 関数スタックから外部 API を呼び出す

### 例: Stripe 経由で支払いを処理する
1. **External API Request**: POST https://api.stripe.com/v1/charges
   - Headers: Authorization: Bearer sk_live_xxx
   - Body:
     - amount: input.amount * 100
     - currency: "usd"
     - source: input.payment_token
2. **Conditional**: レスポンスステータスを確認
   - If status != 200 → Stripe メッセージとともにエラーを返す
3. **Database Query**: 注文ステータスを "paid" に更新
4. **External API Request**: webhook への POST (フルフィルメントを通知)
5. **Return**: { success: true, charge_id }

### 例: Resend 経由でメールを送信する
1. **External API Request**: POST https://api.resend.com/emails
   - Headers: Authorization: Bearer re_xxx
   - Body:
     - from: "app@myapp.com"
     - to: user.email
     - subject: "Order Confirmed"
     - html: 注文詳細を含むテンプレート

Webhook とスケジュールされたタスク

## Webhook (受信)
Xano は外部サービスから webhook を受信できます。
- Stripe 支払いイベント → 注文ステータスを更新
- GitHub push イベント → ビルドをトリガー
- カスタム webhook → 受信するデータを処理

## スケジュールされたタスク (Cron)
関数スタックをスケジュールに従って実行します。
- 毎時: 外部 API からデータを同期
- 毎日午前0時: レポートを生成
- 毎週: ダイジェストメールを送信

例 1: Xano を新しいプロジェクトに追加する

ユーザーリクエスト:

Next.js で SaaS アプリを構築しています。データベーススキーマ機能のために Xano を統合してください。

エージェントは Xano SDK をインストールし、接続 (API キー、環境変数) を構成し、適切なエラー処理を含む初期統合コードを作成し、データベーススキーマ機能をエンドツーエンドで示す動作する例を記述します。

例 2: Xano で高度な構成を構築する

ユーザーリクエスト:

アプリに高度な構成を実装する必要があります。Xano でそれを行う方法を教えてください。

エージェントは proj

(原文がここで切り詰められています)

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Xano — No-Code Backend Builder

Overview

Xano, the no-code/low-code backend platform for building APIs, databases, and authentication without writing server code. Helps developers and non-technical builders create production-ready REST APIs with visual function stacks, manage data models, and integrate with frontend frameworks.

Instructions

Database Schema

## Data Modeling in Xano
Create tables visually in the Xano dashboard:

### Users Table
| Field        | Type      | Properties                    |
|-------------|-----------|-------------------------------|
| id          | integer   | Primary key, auto-increment   |
| email       | text      | Unique, indexed               |
| name        | text      | Required                      |
| password    | password  | Hashed automatically          |
| plan        | enum      | free, pro, enterprise         |
| avatar_url  | text      | Nullable                      |
| metadata    | json      | Flexible key-value data       |
| created_at  | timestamp | Auto-set on create            |

### Posts Table
| Field        | Type       | Properties                   |
|-------------|------------|------------------------------|
| id          | integer    | Primary key                  |
| user_id     | integer    | Foreign key → Users          |
| title       | text       | Required, max 200 chars      |
| content     | text       | Required                     |
| published   | boolean    | Default: false               |
| tags        | list[text] | Array of strings             |
| created_at  | timestamp  | Auto-set on create           |

Xano auto-generates CRUD endpoints for each table.

API Endpoints (Function Stacks)

## Visual API Builder
Xano uses "Function Stacks" — visual, step-by-step API logic:

### POST /api/posts — Create a Post
1. **Precondition**: Verify authentication (JWT token valid)
2. **Input**: title (text, required), content (text, required), tags (list)
3. **Create Variable**: `user_id` from auth token
4. **Conditional**: Check user plan
   - If plan == "free" AND post_count >= 5 → Return error "Free plan limited to 5 posts"
5. **Database Query**: Add record to `posts` table
   - title: input.title
   - content: input.content
   - tags: input.tags
   - user_id: user_id
   - published: false
6. **Return**: { id, title, created_at }

### GET /api/posts — List Published Posts
1. **Input**: page (int, default 1), per_page (int, default 20)
2. **Database Query**: Query `posts` table
   - Filter: published = true
   - Sort: created_at DESC
   - Pagination: page, per_page
   - Join: users (for author info)
3. **Return**: { items: [...], total, page, pages }

Authentication

// Xano provides built-in auth endpoints:

// Sign up: POST /auth/signup
const signUp = async (email: string, password: string, name: string) => {
  const response = await fetch("https://your-instance.xano.io/api:auth/auth/signup", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ email, password, name }),
  });
  const { authToken } = await response.json();
  return authToken;   // JWT token
};

// Login: POST /auth/login
const login = async (email: string, password: string) => {
  const response = await fetch("https://your-instance.xano.io/api:auth/auth/login", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ email, password }),
  });
  const { authToken } = await response.json();
  return authToken;
};

// Authenticated request
const getPosts = async (token: string) => {
  const response = await fetch("https://your-instance.xano.io/api:main/posts", {
    headers: { Authorization: `Bearer ${token}` },
  });
  return response.json();
};

// Get current user: GET /auth/me
const getMe = async (token: string) => {
  const response = await fetch("https://your-instance.xano.io/api:auth/auth/me", {
    headers: { Authorization: `Bearer ${token}` },
  });
  return response.json();
};

External API Integration

## Calling External APIs from Function Stacks

### Example: Process payment via Stripe
1. **External API Request**: POST https://api.stripe.com/v1/charges
   - Headers: Authorization: Bearer sk_live_xxx
   - Body:
     - amount: input.amount * 100
     - currency: "usd"
     - source: input.payment_token
2. **Conditional**: Check response status
   - If status != 200 → Return error with Stripe message
3. **Database Query**: Update order status to "paid"
4. **External API Request**: POST to webhook (notify fulfillment)
5. **Return**: { success: true, charge_id }

### Example: Send email via Resend
1. **External API Request**: POST https://api.resend.com/emails
   - Headers: Authorization: Bearer re_xxx
   - Body:
     - from: "app@myapp.com"
     - to: user.email
     - subject: "Order Confirmed"
     - html: template with order details

Webhooks and Scheduled Tasks

## Webhooks (incoming)
Xano can receive webhooks from external services:
- Stripe payment events → Update order status
- GitHub push events → Trigger build
- Custom webhooks → Process any incoming data

## Scheduled Tasks (Cron)
Run function stacks on a schedule:
- Every hour: Sync data from external API
- Daily at midnight: Generate reports
- Weekly: Send digest emails

Examples

Example 1: Adding Xano to a new project

User request:

I'm building a SaaS app with Next.js. Integrate Xano for the database schema functionality.

The agent installs the Xano SDK, configures the connection (API keys, environment variables), creates the initial integration code with proper error handling, and writes a working example that demonstrates the database schema feature end-to-end.

Example 2: Building advanced configuration with Xano

User request:

I need to implement advanced configuration in my app. Show me how to do it with Xano.

The agent reads the project structure, identifies the right integration points, implements the advanced configuration feature using Xano's API, handles edge cases (authentication, error states, loading), and adds tests to verify the integration works correctly.

Guidelines

  1. Start with the data model — Design your tables and relationships first; Xano generates CRUD endpoints automatically
  2. Use function stacks for logic — Keep business logic in Xano's visual builder; don't put it in the frontend
  3. Authentication built-in — Use Xano's auth system (JWT-based); don't build your own
  4. Pagination on all list endpoints — Always add page/per_page inputs; unbounded queries kill performance
  5. Validate inputs — Add input validation (required, type, min/max) on every endpoint
  6. Use addons for complex queries — Xano supports raw SQL for complex aggregations and joins beyond the visual builder
  7. API groups for organization — Group related endpoints (auth, posts, payments) into separate API groups
  8. Rate limiting — Enable rate limiting on public endpoints to prevent abuse