Agent skill

Develop Big Slider Card

by nicufarmache in nicufarmache/lovelace-big-slider-card

Implement, fix, extend, or review the Big Slider Card Home Assistant custom card.

MITAuto-check passedFrontend & Design

Install Develop Big Slider Card

skills CLI
$ npx skills add nicufarmache/lovelace-big-slider-card --skill develop-big-slider-card -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install nicufarmache/lovelace-big-slider-card develop-big-slider-card --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/nicufarmache/lovelace-big-slider-card.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/develop-big-slider-card .claude/skills/develop-big-slider-card && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
develop-big-slider-card
GitHub stars
104
Token cost
~1.4k tokens
SKILL.md length
631 words
Files
2
Skills in repo
1
Repo updated
First seen
Licence
MIT

At a glance

Implement, fix, extend, or review the Big Slider Card Home Assistant custom card.

  • Works in 4 steps: Convert the request into observable… → Inspect git status --short and preserve… → Read the relevant implementation and its… → …
  • Changes involving entity domains
  • SKILL.md covers Establish the task, Locate the work, Implement the change and Verify progressively, plus 2 more sections
  • Calls npm, git and npx

What it does

Develop Big Slider Card is an agent skill from nicufarmache/lovelace-big-slider-card. Implement, fix, extend, or review the Big Slider Card Home Assistant custom card. Use for changes involving entity domains, Home Assistant service calls, slider calculations, gestures and timers, configuration options or the editor schema, Lit rendering and styling, localization, tests, documentation, previews, or the generated HACS bundle.

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `agents/openai.yaml`).

It sits in Frontend & Design, covering Internationalization. It works with Home Assistant. The repository describes itself as: A card with a big slider for Home Assistant. The licence is MIT.

When your agent uses it

  • Changes involving entity domains
  • Home Assistant service calls
  • Slider calculations
  • Gestures and timers

Example prompts

  • “/develop-big-slider-card”

Requirements

  • Node.js
  • Docker

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Convert the request into observable acceptance criteria.
  2. Inspect git status --short and preserve existing changes.
  3. Read the relevant implementation and its existing tests before editing.
  4. Identify affected behavior, documentation, localization, previews, and the

What it can do on your machine

Read from SKILL.md and the folder at commit 0b9404a. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm
    • git
    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm, git and npx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Develop Big Slider Card loads about 1.4k tokens when it runs. Until then it costs about 92 tokens; SKILL.md has 631 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~92
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from nicufarmache/lovelace-big-slider-card at commit 0b9404a, republished under its MIT licence (© nicufarmache). 631 words, ~1,427 tokens.

Download SKILL.mdSave it as .claude/skills/develop-big-slider-card/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
develop-big-slider-card
description
Implement, fix, extend, or review the Big Slider Card Home Assistant custom card. Use for changes involving entity domains, Home Assistant service calls, slider calculations, gestures and timers, configuration options or the editor schema, Lit rendering and styling, localization, tests, documentation, previews, or the generated HACS bundle.

Develop Big Slider Card

Use a test-first, compatibility-preserving workflow for this repository.

Establish the task

  1. Convert the request into observable acceptance criteria.
  2. Inspect git status --short and preserve existing changes.
  3. Read the relevant implementation and its existing tests before editing.
  4. Identify affected behavior, documentation, localization, previews, and the distributed bundle.

Locate the work

Use this map to select the smallest relevant surface:

ConcernPrimary filesFocused verification
Values, ranges, configurationsrc/big-slider-card.ts, src/const.ts, src/types.tstests/calculations.test.ts
Entity services and payloadssrc/big-slider-card.tstests/service-calls.test.ts
Gestures, holds, and timerssrc/big-slider-card.tstests/actions-lifecycle.test.ts
DOM, host state, and stylingsrc/big-slider-card.tstests/rendering.test.ts and preview/
Test entities and Home Assistant mockstests/fixtures.ts, tests/setup.tsaffected test file
Editor-facing textsrc/localize/typecheck, tests, and locale-key comparison
Public configurationsource files above and README.mdREADME option/example review

Implement the change

  • Make the smallest cohesive change satisfying the acceptance criteria.
  • Preserve existing YAML behavior unless the request explicitly changes it.
  • Match established Lit, Home Assistant, and test patterns.

For a configuration option, update every applicable surface:

  • src/types.ts
  • src/const.ts when a default is needed
  • the config form in src/big-slider-card.ts
  • runtime behavior or rendering
  • regression tests
  • the README option table and examples
  • locale files for user-facing editor text

For entity or service behavior:

  • Test the exact domain, service name, and payload.
  • Cover range conversion, clamping, rounding, and entity-provided steps when applicable.
  • Check zero/off and unavailable/unknown behavior (e.g. fan and light when off).
  • Preserve explicit zero values in payloads (e.g. transition: 0) using numeric type checks rather than truthiness.

For gestures or immediate updates:

  • Treat timers, pointer cancellation, teardown, tap/hold separation, and settling as lifecycle-sensitive.
  • Reset numeric timer IDs to 0 whenever cleared or executed.
  • Ensure gesture flags (such as isHold) are reset when pointers are released or cancelled so keyboard navigation remains responsive.
  • Verify that callbacks cannot fire after cancellation or disconnection.

For rendering, styling, and lifecycle:

  • Retain Home Assistant CSS variables and user overrides.
  • Derive state before render in willUpdate(); avoid deriving state in updated().
  • Avoid forced synchronous layout reflows (do not read clientWidth/clientHeight outside active gestures, use textContent instead of innerText during drag updates).
  • Apply static config-based styles in _applyStaticStyles() rather than on every state tick.
  • Add a DOM regression test when structure, classes, attributes, or host state changes.
  • Inspect horizontal and vertical layouts in both light and dark themes when they can be affected.

For localization:

  • Treat English as the source language.
  • Keep the same key structure across locale files or deliberately preserve the established English fallback.
  • Wrap localStorage access defensively with fallbacks to support restricted storage environments (sandboxed iframes, kiosks).
Show full SKILL.md (209 more words)Show less

Verify progressively

Run the smallest relevant test during development, for example:

sh
npx vitest run tests/service-calls.test.ts

Before completion, run:

sh
npm run check
git diff --check
git status --short

npm run check must pass TypeScript, Vitest coverage thresholds, and the production build. The build generates dist/big-slider-card.js; never edit the bundle manually.

For visible changes, verify using both preview and the Home Assistant Docker suite:

  1. Vite Preview: Run npm run dev and inspect:

    • /preview/?theme=light
    • /preview/?theme=dark
    • applicable default variants and horizontal/vertical examples
  2. Home Assistant Docker Environment: Run ./ha-docker/start.sh and inspect:

    • http://localhost:8123/lovelace (interactive sandbox)
    • http://localhost:8123/test-suite (permanent YAML test suites)

If browser inspection is unavailable, say so rather than claiming visual QA.

Review the final diff

Review in this order:

  1. Home Assistant service payload correctness
  2. gesture, timer, and update lifecycle regressions
  3. backward compatibility with existing YAML
  4. range and value conversion correctness
  5. horizontal, vertical, light, and dark rendering
  6. missing tests, documentation, localization, or generated bundle changes
  7. unrelated modifications or release actions outside the request

For a review-only request, do not implement fixes. Report actionable findings with file and line references; state explicitly when there are none.

Report completion

Lead with the behavioral outcome. Summarize changed files, focused and full verification, visual checks when applicable, and remaining risks. Never claim a test or preview was run unless it was actually performed.

© nicufarmache, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in .agents/skills/develop-big-slider-card of nicufarmache/lovelace-big-slider-card.

  • SKILL.md
  • agents/openai.yaml

Open the folder on GitHubat commit 0b9404a

Compare with similar skills

Develop Big Slider Card next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Develop Big Slider Card compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Develop Big Slider Card this skillnicufarmache/lovelace-big-slider-card104—~1.4kAutomated safety check: PassMIT
Ha Frontend User Facing Texthome-assistant/frontend5.7k—~795Automated safety check: PassApache-2.0
Translationsjtenniswood/espcontrol1.1k—~2.2kAutomated safety check: PassCustom licence
Impeccablebestofjs/bestofjs3.1k26 repos~2.6kAutomated safety check: PassMIT
Chatbox i18n Translatorchatboxai/chatbox42k—~508Automated safety check: PassGPL-3.0
Internationalization Workflow with i18niOfficeAI/AionUi33k1 repos~1.9kAutomated safety check: PassApache-2.0

Similar skills

  • Ha Frontend User Facing Text

    home-assistant/frontend

    Home Assistant frontend copy, localization, terminology, and user-facing text guidance.

    5.7k GitHub stars~795 tokensUpdated today
    Frontend & DesignAuto-check passed
  • Translations

    jtenniswood/espcontrol

    Find static user-visible words shown on the physical EspControl device and integrate them into the firmware translation process.

    1.1k GitHub stars~2.2k tokensUpdated today
    Writing & ContentAuto-check passed
  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 26 repos~2.6k tokens
    Frontend & DesignAuto-check passed
  • Chatbox i18n Translator

    chatboxai/chatbox

    Translates new or changed i18n keys from a Chatbox Pro diff, staged changes or a commit range, writing the locale JSON files directly with a built-in glossary.

    42k GitHub stars~508 tokensUpdated 15 days ago
    Frontend & DesignAuto-check passed
  • Standards for keeping all user-facing text translatable: read the i18n config first, use namespaced keys, reuse shared strings and follow the key naming rules.

    33k GitHub starsUsed in 1 repo~1.9k tokens
    Frontend & DesignAuto-check passed
  • Review pending AIRI translations on Crowdin in a batch, then sync them into the repository.

    50k GitHub stars~1.5k tokensUpdated today
    Frontend & DesignAuto-check passed

Works with

Questions about Develop Big Slider Card

What does Develop Big Slider Card do?

Implement, fix, extend, or review the Big Slider Card Home Assistant custom card. Develop Big Slider Card is an agent skill from nicufarmache/lovelace-big-slider-card. Implement, fix, extend, or review the Big Slider Card Home Assistant custom card.

When should I use Develop Big Slider Card?

Develop Big Slider Card fits situations like: changes involving entity domains; home Assistant service calls; slider calculations; gestures and timers.

How do I install Develop Big Slider Card in Claude Code?

Run `npx skills add nicufarmache/lovelace-big-slider-card --skill develop-big-slider-card -a claude-code`. Or copy the skill folder (.agents/skills/develop-big-slider-card in nicufarmache/lovelace-big-slider-card) into .claude/skills/develop-big-slider-card in your project. Claude Code loads it when a task matches its description.

How do I install Develop Big Slider Card in Codex?

Run `npx skills add nicufarmache/lovelace-big-slider-card --skill develop-big-slider-card -a codex`. Or copy the skill folder (.agents/skills/develop-big-slider-card in nicufarmache/lovelace-big-slider-card) into .agents/skills/develop-big-slider-card in your project. Codex loads it when a task matches its description.

Can I use Develop Big Slider Card in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add nicufarmache/lovelace-big-slider-card --skill develop-big-slider-card -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/develop-big-slider-card, .gemini/skills/develop-big-slider-card, .github/skills/develop-big-slider-card and .opencode/skills/develop-big-slider-card in your project.

What does Develop Big Slider Card need to run?

Going by SKILL.md and its folder, Develop Big Slider Card needs the command-line tools its instructions call (npm, git and npx). Our summary lists: Node.js; Docker.

Does Develop Big Slider Card access the network?

SKILL.md contains no URLs. Its commands use npm, git and npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Develop Big Slider Card safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Develop Big Slider Card use?

Develop Big Slider Card is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Develop Big Slider Card use?

About 1.4k tokens (SKILL.md is roughly 5.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Develop Big Slider Card?

Skills that share tags, products or a category with Develop Big Slider Card: Ha Frontend User Facing Text (home-assistant/frontend, 5.7k stars), Translations (jtenniswood/espcontrol, 1.1k stars), Impeccable (bestofjs/bestofjs, 3.1k stars) and Chatbox i18n Translator (chatboxai/chatbox, 42k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Develop Big Slider Card?

nicufarmache (a GitHub user) maintains it in nicufarmache/lovelace-big-slider-card, which has 104 GitHub stars. The repository was last updated on September 3, 2026.

Source: nicufarmache/lovelace-big-slider-card on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.