claude-skills/

Anthropic公式スキル・プラグインの日本語ディレクトリ

last sync 22h ago
スキルOfficialdevelopment

🎨output-dev-code-style

プラグイン
outputai

説明

Output SDK ワークフロープロジェクトにおけるコードスタイル規約です。 次のような場合に使用: TypeScript/JavaScript のコードを記述またはレビューする際。 まずプロジェクト独自のリントルールを検出し、リンターが設定されていない場合は Output SDK の規約にフォールバックします。

原文を表示

Code style conventions for Output SDK workflow projects. Use when writing or reviewing any TypeScript/JavaScript code. Discovers the project's own linting rules first; falls back to Output SDK conventions when no linter is configured.

ユースケース

  • TypeScript/JavaScriptのコードを記述するとき
  • コードをレビューするとき

本文(日本語訳)

コードスタイル規約

概要

生成されたコードは、そのプロジェクトのスタイルに合わせる必要があります。 多くのプロジェクトでは、Output のデフォルトとは異なるルールセットを持つ独自の linter や formatter(ESLint、Prettier、Biome など)を使用しています。 まずプロジェクトのルールを確認し、それに従ってください。 プロジェクトに linter や formatter が設定されていない場合にのみ、以下の Output SDK の規約にフォールバックしてください。

このスキルを使用するタイミング

  • ワークフロープロジェクトで TypeScript または JavaScript のコードを記述する場合
  • 納品前に生成されたコードをレビューする場合
  • 生成後に lint エラーを修正する場合

ルールの確認(最初に行う)

コードの記述またはレビューを行う前に、プロジェクトのスタイルルールを確認してください。

  1. linter の設定を確認する。 プロジェクトルートに eslint.config.js.eslintrc.*biome.jsondeno.json などが存在するかを確認します。
  2. formatter の設定を確認する。 .prettierrc*.editorconfig、または package.json 内の formatter 設定を確認します。
  3. lint/format スクリプトを確認する。 package.json 内に lintlint:fixformat などのスクリプトが存在するかを確認します。
  4. 既存のソースファイルを読む。 設定が存在しない場合は、既存のコード(カンマスタイル、クォートスタイル、インデント、セミコロン、スペース)から規約を推測します。

プロジェクトに linter または formatter がある場合

  • そのルールに従ってください。Output SDK の規約と競合するものは適用しないでください。
  • コード生成後は、プロジェクトの lint/format コマンドを実行してください。
  • ルールが曖昧な場合は、既存のソースファイルのパターンに合わせてください。

プロジェクトに linter や formatter がない場合

  • 以下の Output SDK デフォルト規約を適用してください。
  • 既存のソースファイルに既に存在する規約に合わせてください。リポジトリとの一貫性は、以下のデフォルトよりも優先されます。

Output SDK デフォルト規約

以下のルールは Output SDK 独自の ESLint 設定を反映したものです。 プロジェクトに linter が設定されておらず、既存のコードに競合する規約が見られない場合にのみ適用してください。

末尾カンマの禁止

オブジェクト、配列、関数のパラメータ、型定義において、末尾カンマは使用しないでください。

// 正しい
const config = {
  name: 'workflow',
  timeout: 30000
};

const items = [ 'a', 'b', 'c' ];

export const myStep = step( {
  name: 'myStep',
  inputSchema: MyInputSchema,
  outputSchema: MyOutputSchema,
  fn: async input => {
    return { result: input.value };
  }
} );
// 誤り - 末尾カンマあり
const config = {
  name: 'workflow',
  timeout: 30000,  // <-- 不可
}

const items = [ 'a', 'b', 'c', ]  // <-- 不可

let 宣言の禁止

let は使用禁止です。const のみを使用してください。 値に条件分岐が必要な場合は、三項演算子、IIFE(即時実行関数式)を使用するか、ロジックを再構成してください。

// 正しい - 三項演算子
const label = count > 1 ? 'items' : 'item';

// 正しい - 複雑なケースには名前付きヘルパーを使用
const fetchWithFallback = async url => {
  try {
    return await fetchContent( url );
  } catch {
    return '[Content unavailable]';
  }
};
const content = await fetchWithFallback( url );

// 正しい - 関数内での早期リターン
function resolve( input ) {
  if ( input.mode === 'fast' ) {
    return fastPath( input );
  }
  return standardPath( input );
}
// 誤り
let content;  // <-- 使用禁止
try {
  content = await fetchContent( url );
} catch {
  content = '[Content unavailable]';
}

let label;  // <-- 使用禁止
if ( count > 1 ) {
  label = 'items';
} else {
  label = 'item';
}

アロー関数のカッコは必要な場合のみ

パラメータが1つのアロー関数には括弧を付けないでください。 括弧が必要なのは、パラメータが0個・複数・分割代入の場合、または TypeScript の戻り値型アノテーションがある場合のみです。

// 正しい
items.map( item => item.id )
items.filter( s => s.url )
items.forEach( x => console.log( x ) )
fn: async input => { ... }

// 以下の場合は括弧が必要:
items.reduce( ( acc, item ) => acc + item, 0 )
const run = ( { name, id } ) => `${name}-${id}`;
const noop = () => {};
fn: async ( input ): Promise<WorkflowOutput> => { ... }  // 戻り値型アノテーションあり
// 誤り - 1パラメータに不要な括弧
items.map( ( item ) => item.id )
items.filter( ( s ) => s.url )
fn: async ( input ) => { ... }

prefer-const

常に const を使用してください。 再代入が行われないバインディングは必ず const にしなければなりません。

演算子の改行は後置き

式が複数行にまたがる場合、演算子は1行目の末尾に置いてください。

// 正しい
const result = longExpression +
  anotherExpression;

const isValid = conditionA &&
  conditionB &&
  conditionC;

const value = condition ?
  trueResult :
  falseResult;
// 誤り - 演算子が次の行の先頭
const result = longExpression
  + anotherExpression;

スペーシング

  • 括弧内のスペース: fn( x )fn(x) は不可)。ただし空の括弧は fn() とする
  • 角括弧内のスペース: [ 'a', 'b' ]['a', 'b'] は不可)
  • 波括弧内のスペース: { key: value }{key: value} は不可)
  • インデント: スペース2つ
  • クォート: シングルクォート
  • セミコロン: 常に付ける

ファイル・フォルダの命名

  • すべてのファイル名: snake_case(例: fetch_data.tshtml_renderer.ts
  • すべてのフォルダ名: snake_case(例: ai_hn_digestshared_utils
  • 例外: 設定ファイル(vitest.config.jseslint.config.js

クイックリファレンス(Output SDK デフォルト)

ルール 正しい 誤り
末尾カンマ { a: 1 } { a: 1, }
変数宣言 const x = 1 let x = 1
1パラメータのアロー関数 x => x.id ( x ) => x.id
演算子の改行 a +\n b a\n + b
括弧内のスペース fn( x ) fn(x)

検証

  1. プロジェクトに lint コマンド(npm run lintnpx eslint など)がある場合は実行し、違反があれば修正してください。
  2. プロジェクトに format コマンド(npm run formatnpx prettier --write など)がある場合は実行してください。
  3. どちらも存在しない場合は、生成されたコードをリポジトリ内の既存ソースファイルと照らし合わせて一貫性を確認してください。
原文(English)を表示

Code Style Conventions

Overview

Generated code must match the style of the project it lives in. Many projects use their own linter or formatter (ESLint, Prettier, Biome, etc.) with rule sets that differ from Output's defaults. Always discover and follow the project's rules first. Only fall back to the Output SDK conventions below when the project has no linter or formatter configured.

When to Use This Skill

  • Writing any TypeScript or JavaScript code in a workflow project
  • Reviewing generated code before delivery
  • Fixing lint errors after generation

Rules Discovery (do this first)

Before writing or reviewing code, determine the project's style rules:

  1. Check for a linter config. Look for eslint.config.js, .eslintrc.*, biome.json, deno.json, or similar in the project root.
  2. Check for a formatter config. Look for .prettierrc*, .editorconfig, or formatter settings in package.json.
  3. Check for lint/format scripts. Look in package.json for lint, lint:fix, format, or similar scripts.
  4. Read existing source files. If no config exists, infer conventions from the existing code (comma style, quote style, indentation, semicolons, spacing).

If the project has a linter or formatter

  • Follow its rules. Do not apply Output SDK conventions that conflict.
  • Run the project's lint/format command after generating code.
  • If a rule is ambiguous, match the patterns in existing source files.

If the project has no linter or formatter

  • Apply the Output SDK Default Conventions below.
  • Match any conventions already present in existing source files -- consistency with the repo takes priority over the defaults below.

Output SDK Default Conventions

These rules reflect the Output SDK's own ESLint config. Apply them only when the project has no linter configured and no conflicting conventions are evident in existing code.

No Trailing Commas

Never use trailing commas in objects, arrays, function parameters, or type definitions.

// CORRECT
const config = {
  name: 'workflow',
  timeout: 30000
};

const items = [ 'a', 'b', 'c' ];

export const myStep = step( {
  name: 'myStep',
  inputSchema: MyInputSchema,
  outputSchema: MyOutputSchema,
  fn: async input => {
    return { result: input.value };
  }
} );
// WRONG - trailing commas
const config = {
  name: 'workflow',
  timeout: 30000,  // <-- not allowed
}

const items = [ 'a', 'b', 'c', ]  // <-- not allowed

No let Declarations

let is banned. Use const exclusively. When a value needs conditional assignment, use a ternary, an IIFE, or restructure the logic.

// CORRECT - ternary
const label = count > 1 ? 'items' : 'item';

// CORRECT - named helper for complex cases
const fetchWithFallback = async url => {
  try {
    return await fetchContent( url );
  } catch {
    return '[Content unavailable]';
  }
};
const content = await fetchWithFallback( url );

// CORRECT - early return in a function
function resolve( input ) {
  if ( input.mode === 'fast' ) {
    return fastPath( input );
  }
  return standardPath( input );
}
// WRONG
let content;  // <-- banned
try {
  content = await fetchContent( url );
} catch {
  content = '[Content unavailable]';
}

let label;  // <-- banned
if ( count > 1 ) {
  label = 'items';
} else {
  label = 'item';
}

Arrow Parens Only When Needed

Single-parameter arrow functions must not have parentheses. Use parens only for zero, multiple, destructured parameters, or when a TypeScript return type annotation is present.

// CORRECT
items.map( item => item.id )
items.filter( s => s.url )
items.forEach( x => console.log( x ) )
fn: async input => { ... }

// Parens required for these cases:
items.reduce( ( acc, item ) => acc + item, 0 )
const run = ( { name, id } ) => `${name}-${id}`;
const noop = () => {};
fn: async ( input ): Promise<WorkflowOutput> => { ... }  // return type annotation
// WRONG - unnecessary parens on single param
items.map( ( item ) => item.id )
items.filter( ( s ) => s.url )
fn: async ( input ) => { ... }

prefer-const

Always use const. If a binding is never reassigned, it must be const.

Operator Linebreak After

When an expression spans multiple lines, the operator stays on the first line.

// CORRECT
const result = longExpression +
  anotherExpression;

const isValid = conditionA &&
  conditionB &&
  conditionC;

const value = condition ?
  trueResult :
  falseResult;
// WRONG - operator on next line
const result = longExpression
  + anotherExpression;

Spacing

  • Space in parens: fn( x ) not fn(x), except empty parens fn()
  • Space in brackets: [ 'a', 'b' ] not ['a', 'b']
  • Space in braces: { key: value } not {key: value}
  • Indent: 2 spaces
  • Quotes: single quotes
  • Semicolons: always

File and Folder Naming

  • All file names: snake_case (e.g., fetch_data.ts, html_renderer.ts)
  • All folder names: snake_case (e.g., ai_hn_digest, shared_utils)
  • Exceptions: config files (vitest.config.js, eslint.config.js)

Quick Reference (Output SDK defaults)

Rule Correct Wrong
Trailing comma { a: 1 } { a: 1, }
Variable declaration const x = 1 let x = 1
Single-param arrow x => x.id ( x ) => x.id
Operator linebreak a +\n b a\n + b
Parens spacing fn( x ) fn(x)

Verification

  1. If the project has a lint command (npm run lint, npx eslint, etc.), run it and fix any violations.
  2. If the project has a format command (npm run format, npx prettier --write, etc.), run it.
  3. If neither exists, review the generated code against existing source files in the repo for consistency.

原文・著作権は Anthropic および各プラグイン作者に帰属します。日本語訳は Claude API による自動翻訳です。