스킬 design-component

🎨

design-component

Name: design-component
Author: Acurioustractor

안전 ⚙️ 외부 명령어🌐 네트워크 접근📁 파일 시스템 액세스

文化的配慮のあるUIコンポーネントを設計する

適切なデータマッピング、文化的指標、AIによる拡充を備えたアクセシブルなストーリーテラー/ストーリーカードを構築します。このスキルは、先住民のストーリーテリング向けプラットフォームのためのデザインシステムパターンとコンポーネントガイドラインを提供します。

지원: Claude Codex Code(CC)

📊 69 적절함

스킬 ZIP 다운로드

Claude에서 업로드

설정 → 기능 → 스킬 → 스킬 업로드로 이동

토글을 켜고 사용 시작

테스트해 보기

"design-component" 사용 중입니다. Design a featured storyteller card with AI insights

예상 결과:

カードは大きなアバターにエルダーと注目のバッジを表示
ストーリー帰属付きの注目引用ブロック
深度指標付きのテーマ専門性バッジ
最終更新タイムスタンプ付きのAI Enhancedインジケーター
アクションボタン: View Profile, Read Stories, Connect

"design-component" 사용 중입니다. Create a compact card variant for sidebar use

예상 결과:

横並びインラインレイアウトで幅280px固定
イニシャルのフォールバック付き48pxアバター
右側にストーリー数バッジを添えた名前のみ表示
ホバー状態で文化的背景を全表示
クリックでフルプロフィールページへ遷移

보안 감사

안전

v5 • 1/16/2026

Pure documentation skill containing only markdown files with design guidelines and code examples. The static analyzer incorrectly flagged documentation as executable code. Backticks in markdown are for code block syntax, not shell execution. SQL examples are database schema documentation, not system reconnaissance. Interface field names containing words like 'connection' were misidentified as cryptographic algorithms. This skill has no executable code, network calls, filesystem operations, or environment access.

스캔된 파일

1,937

분석된 줄 수

발견 사항

총 감사 수

위험 요인

⚙️ 외부 명령어 (226)

🌐 네트워크 접근 (2)

skill-report.json:6 SKILL.md:325

📁 파일 시스템 액세스 (1)

skill-report.json:6

감사자: claude 감사 이력 보기 →

품질 점수

아키텍처

100

유지보수성

콘텐츠

커뮤니티

100

보안

사양 준수

만들 수 있는 것

ストーリーテラーカードを作成

文化的指標とAIインサイトを備えたストーリーテラープロフィールを表示するカードコンポーネントを作成します。

デザインシステムのガイドライン

カラーパレット、アクセシビリティ基準、文化的配慮のパターンをコンポーネント設計に適用します。

コンポーネント標準

ストーリーテリングプラットフォームにおけるAIで拡充されたコンテンツと同意管理インターフェースのデザインパターンを確立します。

이 프롬프트를 사용해 보세요

ストーリーテラーカードを作成

Design a StorytellerCard component that displays cultural background, elder status, story count, and specialties with proper fallbacks for missing data.

AIによる拡充を追加

Show me how to implement AI enrichment for storyteller profiles including quote extraction, theme expertise, and connection suggestions.

文化的指標

How should I display traditional territory, cultural affiliations, and language skills on a storyteller profile card?

同意ダッシュボード

Design a consent management dashboard with consent status badges, revocation workflows, and cultural permission indicators.

모범 사례

伝統的領域の承認を伴う文化的背景を常に表示する
AI生成コンテンツは視覚的指標で明確に示す
アバター、自己紹介、専門分野データが欠けた場合のフォールバック状態を用意する
すべての色に対して意味的なCSS変数を使ってダークモードを実装する

피하기

CSS変数を使わずに色をハードコードする
AI生成コンテンツの出自を示さずに表示する
ストーリーテラーカードからエルダーステータスや文化的文脈を省く
ステータスバッジやインタラクティブ要素にアクセシビリティラベルがない

자주 묻는 질문

このスキルはどのプラットフォームに対応していますか？

コンポーネント設計とドキュメント作成のタスクでClaude、Codex、Claude Codeに対応します。

ストーリーテラーカードに必要なデータフィールドは何ですか？

必須: display_name, cultural_background, avatar_url。推奨: story_count, specialties, elder/featured status。

外部のデザインシステムと統合できますか？

はい。パターンはTailwind CSSの慣習を使用しますが、CSS変数のマッピングを行えばどのデザインシステムにも適応できます。

AIエンリッチメントでユーザーデータは安全ですか？

AIコンテンツは視覚的に示されます。ストーリーテラーは提案を上書きできます。聖なるコンテンツは抽出から除外されます。

ダークモードでカードの見た目が違うのはなぜですか？

適切なテーマ対応のために、ハードコードした16進数ではなく --background, --card, --foreground などの意味的な色を使用してください。

汎用的なカードコンポーネントと比べてどう違いますか？

文化的配慮のレイヤー、AIエンリッチメントの指標、プラットフォーム固有の先住民ストーリーテリング文脈を追加します。

개발자 세부 정보

작성자

Acurioustractor

라이선스

MIT

리포지토리

https://github.com/Acurioustractor/empathy-ledger-v2/tree/main/.claude/skills/local/design-component

참조

main

파일 구조

📄 ai-enrichment.md

📄 CARD_AUDIT_REPORT.md

📄 card-variants.md

📄 SKILL.md