CommunityImagemgithub.com

KoBa-beep/ClaudeCode-Skill

Crie ícones de dispositivos realistas para o Fibaro Home Center 3 / Yubii Home — ilustração realista do dispositivo em fundo transparente com um pequeno emblema de estado redondo, um PNG 128×128 (+ SVG) por estado, legível nos modos claro e escuro — e faça upload/aplique-os no HC3 (POST /api/icons, icon0…icon100, deviceIcon). Use esta habilidade sempre que o usuário quiser ícones para um QuickApp, um módulo Z-Wave, dispositivos filhos, persianas (11 posições), sensores, ou perguntar por que um ícone não muda com o estado, mesmo que apenas diga "deixe mais bonito" ou "uma imagem para meu dispositivo".

O que é ClaudeCode-Skill?

Esta habilidade (skill) permite criar e aplicar ícones de dispositivos personalizados e realistas para o Fibaro Home Center 3 (HC3) / Yubii Home, usando um kit de ferramentas baseado em Python. O objetivo é gerar ilustrações fiéis dos dispositivos reais (com base em fotos fornecidas pelo usuário), com fundo transparente, um pequeno emblema de estado redondo no canto inferior direito, e um arquivo PNG (128×128) por estado, também gerando SVG. A habilidade suporta todos os tipos de dispositivos do HC3: binários (2 imagens: inativo/ativo), multinível (11 imagens: 0 a 100), e dispositivos de estado único. O fluxo de trabalho inclui: listar os dispositivos e seus tipos, solicitar fotos dos modelos reais, escrever funções de desenho personalizadas no script `icon_kit.py`, gerar os ícones, visualizar o preview, e fazer upload via API REST (`POST /api/icons`) ou via arquivo de configuração `qa.json`. Também orienta sobre como aplicar os ícones programaticamente via Lua (`self:updateProperty`) e como gerenciar a exclusão. A habilidade é ideal para desenvolvedores de QuickApps e integradores que desejam uma interface visual mais profissional e informativa, resolvendo o problema de ícones que não mudam com o estado do dispositivo.

Funciona com✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/KoBa-beep/ClaudeCode-Skill/tree/HEAD/fibaro-hc3/hc3-icons

Installed? Explore more Imagem skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

Ícones de dispositivo HC3

Responda no idioma do usuário. Gere ícones com scripts/icon_kit.py (Python, pip install cairosvg pillow): ele contém os auxiliares de estilo (gradientes, sombra suave, emblema, ~35 glifos de emblema), um desenho de dispositivo de exemplo (janela de telhado com persiana, 11 posições) e o gerador de pré-visualização.

Estilo (o que torna esses ícones adequados à interface do HC3)

  • Desenho realista do dispositivo real (forma, cores, materiais, ângulo de visão). Peça ao usuário uma foto do modelo exato e reproduza-a; nunca trace uma foto ou copie um logotipo/marca registrada do fabricante (também mantém os ícones compartilháveis). Se o usuário quiser explicitamente um logotipo de marca para uso privado, mantenha esse ícone fora de qualquer coisa publicada.
  • Fundo transparente, um arquivo por estado — sem variantes claro/escuro. Para permanecer legível em ambos os temas, dê a dispositivos escuros uma borda clara (stroke="#FFFFFF" 1–2 px ou um bisel mais claro) e nunca pinte uma placa de fundo.
  • Pequeno emblema redondo, canto inferior direito (centro 100,100, raio ~22, anel branco): o estado (verde ligado, cinza inativo / desligado, vermelho alarme, laranja aviso, azul aberto/nível, roxo automático…) ou a grandeza medida (termômetro, gota, CO₂, vento…). O desenho do dispositivo mantém esse canto livre.
  • 128 × 128 viewBox, desenho dentro de ~10–118 px, sombra elíptica suave sob dispositivos de chão.
  • Verifique a pré-visualização (preview.png: cada ícone uma vez em um fundo diagonal claro/escuro) antes de entregar.

Quantas imagens por dispositivo (regras do HC3)

Tipo de dispositivoImagens em um conjunto de íconesCampos de upload
Binário (switch, binarySensor, door/window, motion, smoke…)2: inativo / ativoicon0, icon100
Multinível (dimmer, persiana, válvula de nível)11: 0, 10 … 100icon0 … icon100
deviceController, a maioria dos pais QuickApp, multilevelSensor / temperatura…1icon0
Um tipo de imagem única não pode mudar sua figura sozinho. Para um ícone de QA dependente de estado (OK / aviso / alarme, ou um modo),
faça upload de um conjunto por estado e alterne via Lua: self:updateProperty("deviceIcon", tonumber(self:optionalVariable("iconAlarm")))
(ids colados em variáveis; padrão na habilidade hc3-quickapp, references/patterns.md §5).
Faça um ícone por estado útil e ícones para cada dispositivo que um QuickApp cria (pai e filhos).

Fluxo de trabalho

  1. Liste os dispositivos (pai, cada filho, cada sub-dispositivo Z-Wave) e seus type exatos (api.get("/devices/<id>"), ex.: com.fibaro.FGR224 para um módulo de persiana Fibaro, com.fibaro.rollerShutter para um filho de QA).
  2. Peça fotos dos modelos reais; concorde com os estados e significados dos emblemas.
  3. Copie scripts/icon_kit.py, escreva uma função de desenho por dispositivo (fragmento SVG na caixa 128, veja roof_window(pct)), adicione linhas (name, title, body) a ICONS — uma por estado — e execute python3 icon_kit.py --out icons/. Nomenclatura: <device>-<state> (shutter-000…shutter-100, boiler-on, boiler-off), para que uma tabela README possa dizer qual ícone vai para onde.
  4. Mostre preview.png; itere sobre as observações do usuário (forma, cor, clareza do emblema tipo emoji).
  5. Upload: liste os conjuntos na seção icons do qa.json do QA e deixe build_fqa.py (habilidade hc3-packaging) gerar <qa>-icons.sh, ou faça upload manualmente: Configurações → Dispositivos → dispositivo → ícone → Adicionar.

API de upload (observada na 5.2xx)

POST /api/icons, multipart/form-data: type=device, deviceTemplate=<tipo de dispositivo exato>, um arquivo por estado (icon0, icon100 ou icon0…icon100), fileExtension=png (svg aceito). Resposta 201 {"id": 1055, "iconSetName": "User1055", "fileExtension": "png"}. Aplicar: PUT /api/devices/<id> {"properties": {"deviceIcon": 1055}} (de fora — nunca no próprio id de um QA de dentro do QA, isso reinicia; use self:updateProperty). Excluir: DELETE /api/icons?id=&type=device&name=&fileExtension=png. Ids de ícone de usuário começam em torno de 1000. GET /api/icons lista-os (duas formas de resposta existem entre firmwares: aceite ambas). Ícones de sala e cena também existem (type=room / type=scene provável [V]).

references/badges.md lista as cores de emblema e glifos disponíveis no kit.

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

KoBa-beep/ClaudeCode-Skill

Write and debug Lua scenes for the Fibaro Home Center 3 / Yubii Home (HC3, firmware 5.x) — declarations (triggers and conditions — device, cron, sunrise/sunset, global variables, custom events, central scene buttons), actions code, sourceTrigger, scene variables, restart option, and the choice between a scene and a QuickApp. Use this skill whenever the user wants an automation, a rule, a "when X then Y" on an HC3, converts a block scene to Lua, asks why a scene does not start, or mentions fibaro scenes, even without the word "Lua".

KoBa-beep/ClaudeCode-Skill

Create, modify, review and debug drivers for the NEEO remote through the meta engine (jac459/meta) - JSON device files with buttons, labels, sliders, switches, images, directories, listeners, discovery and registration - plus their companion services (Node-RED flows over MQTT, small local REST bridges). Use whenever the user mentions NEEO, the NEEO Brain, meta / metaCore / metadriver, a NEEO driver or device file, or wants to control a device (TV, AV receiver, media player, lights...) from a NEEO remote, or shares meta, Mosquitto or Brain logs or a Brain JSON dump to diagnose.

Habilidades Relacionadas

steipete/songsee

Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.

community

affaan-m/frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

community

mattpocock/improve-codebase-architecture

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

community

lobehub/add-provider-doc

Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.

community

addyosmani/browser-testing-with-devtools

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.

community

bytedance/chart-visualization

This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.

community
← More Imagem skills