mirror of https://github.com/affaan-m/everything-claude-code.git synced 2026-05-18 23:03:06 +08:00

Files

Claude ec9ace9c54 docs: add native Japanese translation of ECC documentation (ja-JP)

Translate everything-claude-code repository to Japanese including:
- 17 root documentation files
- 60 agent documentation files
- 80 command documentation files
- 99 rule files across 18 language directories (common, angular, arkts, cpp, csharp, dart, fsharp, golang, java, kotlin, perl, php, python, ruby, rust, swift, typescript, web)
- 199 skill documentation files

Total: 455 files translated to Japanese with:
- Consistent terminology glossary applied throughout
- YAML field names preserved in English (name, description, etc.)
- Code blocks and examples untouched (comments translated)
- Markdown structure and relative links preserved
- Professional translation maintaining technical accuracy

This translation expands ECC accessibility to Japanese-speaking developers and teams.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

2026-05-17 02:31:40 -04:00

2.5 KiB

Raw Blame History

このファイルは common/coding-style.md を Web 固有のフロントエンドコンテンツで拡張します。

Web コーディングスタイル

ファイル構成

ファイルタイプではなく、機能またはサーフェスエリアごとに整理する:

src/
├── components/
│   ├── hero/
│   │   ├── Hero.tsx
│   │   ├── HeroVisual.tsx
│   │   └── hero.css
│   ├── scrolly-section/
│   │   ├── ScrollySection.tsx
│   │   ├── StickyVisual.tsx
│   │   └── scrolly.css
│   └── ui/
│       ├── Button.tsx
│       ├── SurfaceCard.tsx
│       └── AnimatedText.tsx
├── hooks/
│   ├── useReducedMotion.ts
│   └── useScrollProgress.ts
├── lib/
│   ├── animation.ts
│   └── color.ts
└── styles/
    ├── tokens.css
    ├── typography.css
    └── global.css

CSS カスタムプロパティ

デザイントークンを変数として定義する。パレット、タイポグラフィ、スペーシングを繰り返しハードコードしない:

:root {
  --color-surface: oklch(98% 0 0);
  --color-text: oklch(18% 0 0);
  --color-accent: oklch(68% 0.21 250);

  --text-base: clamp(1rem, 0.92rem + 0.4vw, 1.125rem);
  --text-hero: clamp(3rem, 1rem + 7vw, 8rem);

  --space-section: clamp(4rem, 3rem + 5vw, 10rem);

  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

アニメーション専用プロパティ

コンポジタフレンドリーなモーションを優先する:

transform
opacity
clip-path
filter（控えめに）

レイアウトに紐づくプロパティのアニメーションを避ける:

width
height
top
left
margin
padding
border
font-size

セマンティック HTML ファースト

<header>
  <nav aria-label="Main navigation">...</nav>
</header>
<main>
  <section aria-labelledby="hero-heading">
    <h1 id="hero-heading">...</h1>
  </section>
</main>
<footer>...</footer>

セマンティック要素が存在するときに、汎用的な div ラッパースタックに頼らない。

命名

コンポーネント: PascalCase（ScrollySection、SurfaceCard）
フック: use プレフィックス（useReducedMotion）
CSS クラス: kebab-case またはユーティリティクラス
アニメーションタイムライン: 意図を含む camelCase（heroRevealTl）

2.5 KiB Raw Blame History Unescape Escape