翻訳準備中 — 韓国語の原文を表示しています。
Home Assistant 대시보드용 부드러운 인터랙션의 191가지 커스텀 카드 스위트
中辛 の解説
스택: TypeScript, SVG 직접 렌더링 (차트 라이브러리 없음), Home Assistant Lovelace 카드
난이도: 낮음 — HACS에서 한 번의 설치로 비주얼 에디터만으로 카드를 배치할 수 있습니다. YAML도 최소한으로 지원합니다.
바로 쓸 수 있는가: 예. 기본값으로 즉시 사용 가능하며, 간단한 entity 지정만으로도 완성된 그래프 카드가 작동합니다.
데모: npm run demo로 로컬 데모 페이지(http://localhost:5050/demo/)에서 모든 카드와 상호작용을 직접 테스트할 수 있습니다(Home Assistant 불필요).
이런 레포예요
이럴 때 쓰면 좋아요
- Home Assistant 대시보드에서 온도, 습도, 에너지 소비 등 센서 데이터를 부드러운 인터랙티브 그래프로 시각화할 때
- 태양광 발전, 배터리 상태, 전력 소비 흐름 같은 에너지 데이터를 아름답게 모니터링하고 시간대별로 분석할 때
- 조명, 온도 조절, 스위치 등 다양한 Home Assistant 엔티티를 통일된 디자인의 커스텀 컨트롤 카드로 관리할 때
핵심 기능
대안 대비 차별점
Home Assistant의 기본 그래프 카드와 달리 금융 앱 수준의 상호작용(시간 스크럽, 부드러운 범위 전환)을 제공하면서도, ApexCharts 같은 무거운 라이브러리 없이 SVG 직접 렌더링으로 번들 크기를 최소화하고 191종의 통일된 컨트롤·데이터·정보 카드로 전체 대시보드 생태계를 완성합니다.
食べた人たち
実際に使ってみた人の記録です — 一言も完走の記録も、確認のうえで公開しています。
このリポジトリの作り方
はじめてですか？ むずかしくありません — 上から順にたどれば、自分の環境で動かして味見できます。
준비물
- Home Assistant 설치
- HACS(Home Assistant Community Store) 설치 (권장)
すぐ動かしてみるNode.js (npm)
ギット飯がリポジトリの構成を確認して組み立てた実行コマンドです。ターミナルに貼り付ければ、取得から実行までまとめて進みます。
git clone --depth 1 https://github.com/LeeHueeng/silk-card.git && cd silk-card && npm install
실행 명령은 README를 확인하세요.
コードは自分の環境で動きます — はじめて見るリポジトリなら、中身にひととおり目を通してから実行するのがおすすめです。
README가 안내하는 자세한 단계 보기
- HACS 커스텀 저장소에 추가합니다.
HACS → 우상단 점 3개 메뉴 → Custom repositories → https://github.com/LeeHueeng/silk-card를 Dashboard 카테고리로 추가
- Silk Card를 검색하고 설치합니다.
Silk Card 검색 → 설치 → 대시보드 새로고침
- 대시보드에 그래프 카드를 추가합니다.
type: custom:silk-card
entity: sensor.living_room_temperature
- (선택사항) 여러 엔티티를 표시하려면 다음과 같이 설정합니다.
type: custom:silk-card
name: 온도
entities:
- entity: sensor.living_room_temperature
name: 거실
- entity: sensor.bedroom_temperature
name: 침실
color: '#f0b357'
hours_to_show: 48
- (선택사항) 시간 범위와 표시 옵션을 커스터마이즈합니다.
type: custom:silk-card
entity: sensor.bathroom_humidity
y_min: 0
y_max: 100
range_selector: false
extremes: false
delta: false
ギット飯トライで味見
入れるのが面倒で少し不安だったなら — 安全スキャンからインストールまで、ターミナル一行で終わります。
ターミナルに貼り付ければ、ギット飯の安全スキャン → 隔離フォルダへ clone → インストール → 実行方法の案内まで自動です。はじめてでも大丈夫 — この一行だけです。
npx gitbap-try LeeHueeng/silk-card
Node.js さえあれば、インストールなしで動きます · ギット飯トライとは？ →
スター推移 · 7日
使いやすさ · まねしやすいか
- ゆるいライセンス
- テストあり
- サンプル集
- 最近の更新
- AGENTS.md
- llms.txt
- テンプレート
最近の更新あり · 2026 年に作成
こういうリポジトリを毎週メールで受け取りませんか？
毎週月曜の朝、選んだ一膳だけ。広告なし · いつでも解除。
自分のリポジトリですか？ README にギット飯バッジを貼る
[](https://www.gitbap.com/r/LeeHueeng/silk-card)Claude からそのまま使う — ギット飯のつなぎ方
ギット飯を Claude につなぐと、こうしたリポジトリを Claude・Cursor・Codex から直接さがして試せます。
Claude の設定 → コネクタにこのアドレスを貼り付け。
https://www.gitbap.com/api/mcpプラグインを入れると /gitbap-trending·/gitbap-try のスラッシュコマンドで、その場でリポジトリを試せます。Claude Code で下の 2 行を順に実行してください。
/plugin marketplace add jakeparkcolde/gitbap-cowork/plugin install gitbap-cowork@gitbapAI が README をもとに要約しました · 原文を見る