SkillBadge

SkillBadgeコンポーネントは、スキルの経験レベルを曖昧で柔軟な表現で表示します。数値のパーセンテージではなく、経験レベル（Familiar、Comfortable、Proficient、Expert）を使用して、より自然で理解しやすい表現を提供します。Litとデザイントークンを使用して構築され、一貫したテーマとアクセシビリティを提供します。

機能

• 経験レベル: Familiar、Comfortable、Proficient、Expertの4段階
• バリエーション: default、primary、success、warning、error
• サイズ: sm、md、lgの3サイズ
• テーマ対応: ライトテーマとダークテーマの自動切り替え
• アクセシビリティ: キーボードナビゲーションとスクリーンリーダー対応
• インタラクティブ: クリック可能な状態をサポート

使用方法

---
import { SkillBadge } from '@karan-monorepo/ui-core';
---

<kds-skill-badge
  name="React"
  level="expert"
  description="モダンなReactアプリケーション開発"
  variant="primary"
  theme="light"
/>

プロパティ

プロパティ	型	デフォルト	説明
name	string	''	スキル名
category	string	''	スキルカテゴリ
level	'familiar' | 'comfortable' | 'proficient' | 'expert'	'familiar'	経験レベル
description	string	''	スキルの説明
theme	'light' | 'dark'	'light'	コンポーネントのカラーテーマ
variant	'default' | 'primary' | 'success' | 'warning' | 'error'	'default'	コンポーネントのバリエーション
size	'sm' | 'md' | 'lg'	'md'	コンポーネントのサイズ
showLevel	boolean	true	経験レベルの表示/非表示
showDescription	boolean	true	説明の表示/非表示
clickable	boolean	false	クリック可能な状態にするかどうか

使用例

SkillBadge Component

スキルの経験レベルを曖昧で柔軟な表現で表示するコンポーネントです。数値のパーセンテージではなく、経験レベル（Familiar、Comfortable、Proficient、Expert）を使用します。

Levels

Familiar

Comfortable

Proficient

Expert

Variants

Default

Primary

Success

Warning

Error

Sizes

Small

Medium

Large

States

Default

Clickable

Without Description

Without Level

Themes

Light Theme

Dark Theme

Usage Examples

Basic Usage

With Category

Interactive Badge

経験レベル

SkillBadgeコンポーネントは4つの経験レベルをサポートします：

• familiar: 基本的な理解と使用経験
• comfortable: 日常的な使用に問題なし
• proficient: 高度な機能を活用可能
• expert: 深い理解と指導可能

<!-- Familiar -->
<kds-skill-badge name="Go" level="familiar" theme="light" />

<!-- Comfortable -->
<kds-skill-badge name="Vue.js" level="comfortable" theme="light" />

<!-- Proficient -->
<kds-skill-badge name="TypeScript" level="proficient" theme="light" />

<!-- Expert -->
<kds-skill-badge name="React" level="expert" theme="light" />

バリエーション

SkillBadgeコンポーネントは5つの視覚的バリエーションをサポートします：

• default: デフォルトのグレーカラー
• primary: プライマリブルーカラー
• success: 成功を示すグリーンカラー
• warning: 警告を示すオレンジカラー
• error: エラーを示すレッドカラー

<!-- デフォルト -->
<kds-skill-badge name="JavaScript" level="proficient" variant="default" theme="light" />

<!-- プライマリ -->
<kds-skill-badge name="React" level="expert" variant="primary" theme="light" />

<!-- 成功 -->
<kds-skill-badge name="Node.js" level="proficient" variant="success" theme="light" />

<!-- 警告 -->
<kds-skill-badge name="Docker" level="comfortable" variant="warning" theme="light" />

<!-- エラー -->
<kds-skill-badge name="Figma" level="proficient" variant="error" theme="light" />

サイズバリエーション

SkillBadgeコンポーネントは3つのサイズをサポートします：

• sm: 小さなコンポーネント
• md: 標準的なコンポーネント
• lg: 大きなコンポーネント

<!-- 小さなサイズ -->
<kds-skill-badge name="HTML" level="expert" size="sm" variant="primary" theme="light" />

<!-- 標準サイズ -->
<kds-skill-badge name="CSS" level="expert" size="md" variant="primary" theme="light" />

<!-- 大きなサイズ -->
<kds-skill-badge name="JavaScript" level="proficient" size="lg" variant="primary" theme="light" />

使用ケース

ポートフォリオサイトでのスキル表示

<kds-skill-badge
  name="React"
  category="Frontend"
  level="expert"
  description="フック、コンテキスト、パフォーマンス最適化を活用したモダンなReactアプリケーション開発"
  variant="primary"
  theme="light"
/>

インタラクティブなスキルバッジ

<kds-skill-badge
  name="TypeScript"
  level="proficient"
  description="型安全な開発とTypeScriptの高度な機能"
  variant="success"
  clickable={true}
  theme="light"
/>

シンプルなスキル表示

<kds-skill-badge
  name="Vue.js"
  level="comfortable"
  show-description={false}
  variant="warning"
  theme="light"
/>

スタイリング

SkillBadgeコンポーネントはデザイントークンを使用した一貫したスタイリングを提供します：

• タイポグラフィ: sansJPフォントファミリーと適切なサイズ・重み
• カラー: ライト/ダークテーマに対応したカラートークン
  • 経験レベル: warning（Familiar）、success（Comfortable）、link（Proficient）、primary（Expert）
  • バリエーション: secondary（Default）、link（Primary）、success（Success）、warning（Warning）、error（Error）
• スペーシング: デザインシステムのスペーシングトークン
• レスポンシブ: モバイルファーストのレスポンシブデザイン
• アニメーション: ホバー効果とスムーズなトランジション

テーマ対応

SkillBadgeコンポーネントは動的なテーマ切り替えを完全にサポートしています：

• リアルタイム切り替え: テーマボタンをクリックすると即座に色が変更される
• 属性監視: theme属性の変更を自動的に検知して再描画
• 一貫性: 他のデザインシステムコンポーネントと同じテーマ切り替え動作
• ライト/ダークテーマ: 両方のテーマで適切なコントラストと可読性を確保

アクセシビリティ

SkillBadgeコンポーネントには適切なアクセシビリティ機能が含まれています：

• セマンティックHTMLのdiv要素を使用
• キーボードナビゲーションサポート（クリック可能な場合）
• 高コントラスト比による視認性の確保
• スクリーンリーダー対応の構造
• カスタムイベントの発火（クリック時）

ベストプラクティス

1. 適切な経験レベルの選択: 実際のスキルレベルに応じて適切なレベルを選択する
2. 一貫したバリエーション: カテゴリごとに異なるバリエーションを使用して視覚的な区別を明確にする
3. 説明的な説明文: スキルの具体的な内容や経験を説明文で補足する
4. 両方のテーマでテストして良好なコントラストと可読性を確保する
5. インタラクティブな要素: 必要に応じてクリック可能な状態を活用する

ブラウザサポート

SkillBadgeコンポーネントは以下の技術をサポートするモダンブラウザで動作します：

• CSS Custom Properties
• Web Components (Lit)
• CSS Flexbox
• CSS Grid
• CSS Transitions