スキルカード

SkillCardコンポーネントは、技術スキルや能力を魅力的に表示するためのカードコンポーネントです。スキル名、カテゴリ、説明、習熟度レベル（0-100%）をプログレスバーで視覚化します。Litとデザイントークンを使用して構築され、一貫したテーマとアクセシビリティを提供します。

機能

• バリエーション: Default、Primary、Success、Warning、Errorの5種類
• サイズ: Small、Medium、Largeの3サイズ
• 習熟度表示: 0-100%のプログレスバーで視覚化
• リッチコンテンツ: スキル名、カテゴリ、説明文
• アニメーション: スムーズなプログレスバーアニメーション
• ホバー効果: 洗練されたホバーアニメーション
• テーマ対応: ライトテーマとダークテーマの自動切り替え
• レスポンシブ: モバイルファーストのレスポンシブデザイン

使用方法

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

<kds-skill-card
  name="TypeScript"
  category="Programming Language"
  description="Typed superset of JavaScript for better code quality."
  level={85}
  variant="primary"
  theme="light"
/>

プロパティ

プロパティ	型	デフォルト	説明
name	string	""	スキルの名前
category	string	""	スキルのカテゴリ
level	number	0	習熟度レベル（0-100）
description	string	""	スキルの説明文
variant	'default' | 'primary' | 'success' | 'warning' | 'error'	'default'	カードのバリエーション
size	'sm' | 'md' | 'lg'	'md'	カードのサイズ
theme	'light' | 'dark'	'light'	コンポーネントのカラーテーマ

使用例

SkillCard Component

Dynamic card component for displaying skills with proficiency levels and visual progress indicators.

Variants

Default

Primary

Success

Proficiency Levels

Beginner (30%)

Intermediate (60%)

Advanced (90%)

Sizes

Small

Medium

Large

Themes

Light Theme

Dark Theme

Usage Examples

Frontend Skills

Backend Skills

バリエーション

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

• default: 標準的なスキルカード
• primary: メインスキル用の強調カード
• success: 熟練スキル用の成功カード
• warning: 学習中スキル用の警告カード
• error: 弱点スキル用のエラーカード

<!-- デフォルト -->
<kds-skill-card name="JavaScript" level={90} variant="default" theme="light" />

<!-- プライマリ -->
<kds-skill-card name="TypeScript" level={85} variant="primary" theme="light" />

<!-- 成功 -->
<kds-skill-card name="React" level={95} variant="success" theme="light" />

<!-- 警告 -->
<kds-skill-card name="Rust" level={30} variant="warning" theme="light" />

<!-- エラー -->
<kds-skill-card name="Assembly" level={10} variant="error" theme="light" />

サイズバリエーション

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

• sm: コンパクトな小型カード
• md: 標準的な中型カード
• lg: 詳細表示用の大型カード

<!-- 小さなサイズ -->
<kds-skill-card name="HTML5" level={100} size="sm" variant="success" theme="light" />

<!-- 標準サイズ -->
<kds-skill-card name="CSS3" level={95} size="md" variant="success" theme="light" />

<!-- 大きなサイズ -->
<kds-skill-card name="Git" level={88} size="lg" variant="primary" theme="light" />

使用ケース

フロントエンドスキルセット

<kds-skill-card
  name="React"
  category="Library"
  description="Building interactive UIs with component-based architecture."
  level={95}
  variant="success"
  theme="light"
/>

<kds-skill-card
  name="Vue.js"
  category="Framework"
  description="Progressive framework for building user interfaces."
  level={80}
  variant="primary"
  theme="light"
/>

バックエンドスキルセット

<kds-skill-card
  name="Node.js"
  category="Runtime"
  description="JavaScript runtime for server-side development."
  level={90}
  variant="success"
  theme="light"
/>

<kds-skill-card
  name="PostgreSQL"
  category="Database"
  description="Powerful, open-source relational database system."
  level={85}
  variant="success"
  theme="light"
/>

学習中のスキル

<kds-skill-card
  name="Rust"
  category="Systems Programming"
  description="Memory-safe systems programming language."
  level={30}
  variant="warning"
  theme="light"
/>

<kds-skill-card
  name="WebAssembly"
  category="Low-level"
  description="Binary instruction format for web applications."
  level={25}
  variant="warning"
  theme="light"
/>

習熟度レベルガイド

習熟度レベルの一般的な解釈：

• 0-25%: 初心者 - 基本的な理解
• 26-50%: 見習い - 基本的なタスクを実行可能
• 51-75%: 中級者 - 独立して作業可能
• 76-90%: 上級者 - 複雑な問題を解決可能
• 91-100%: エキスパート - 深い専門知識

プログレスバー

プログレスバーは習熟度を視覚的に表現します：

• スムーズなアニメーション効果
• バリエーションに応じた色変更
• パーセンテージ表示
• レスポンシブな幅調整

スタイリング

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

• タイポグラフィ: sansJPフォントファミリーと適切なサイズ・重み
• カラー: ライト/ダークテーマに対応したカラートークン
• スペーシング: デザインシステムのスペーシングトークン
• レスポンシブ: モバイルファーストのレスポンシブデザイン
• アニメーション: 洗練されたホバーとプログレス効果

アクセシビリティ

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

• セマンティックHTMLの構造
• 高コントラスト比による視認性の確保
• スクリーンリーダー対応のラベル
• キーボードナビゲーションサポート
• 明確な情報階層

ベストプラクティス

1. 正直な評価で習熟度レベルを設定する
2. 明確な説明を書いてスキルの範囲を伝える
3. 適切なカテゴリを選択してスキルを分類する
4. 一貫したバリエーションを使用してスキルレベルを表現する
5. グループ化して関連スキルをまとめる
6. 定期的な更新でスキルレベルを最新に保つ
7. 両方のテーマでテストして良好なコントラストと可読性を確保する

レスポンシブデザイン

SkillCardコンポーネントはモバイルファーストで設計されています：

• タブレット/デスクトップでは横並びグリッド表示
• モバイルでは縦並びスタック表示
• プログレスバーは画面幅に応じて調整
• テキストは適切な折り返しで表示

ブラウザサポート

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

• CSS Custom Properties
• Web Components (Lit)
• CSS Flexbox
• CSS Transforms and Transitions
• CSS Animations