Skills

The spark skill teaches AI coding assistants how to build with Spark. It works in Claude Code, Codex, Cursor, and any other tool that reads the skills format. It covers component selection, the styling and composition rules of the design system, theming, and the full recipe for a custom block that embeds cleanly in an epilot portal.

Once installed, you describe the outcome and the assistant applies the conventions:

• "Add a contract detail card with a status badge and an edit action."
• "Build a custom block that lists the customer's meter readings."
• "Create a consumption chart with hourly usage bars and the dynamic price curve on a second axis."
• "Add an order summary block with the customer's open orders and their documents."
• "Why does my block show a scrollbar inside the portal?"

Installation

The skill is six markdown files. Copy them into your repository and your agent picks them up: no package to install, no registry to configure.

1. Create .agents/skills/spark/ in your repository, with a rules/ subfolder.
2. Copy each file below into it, keeping the same names.
3. Point your tool at it. Claude Code reads .claude/skills/, so symlink it: ln -s ../../.agents/skills/spark .claude/skills/spark. Cursor reads .cursor/skills/.

The skill activates on its own whenever the assistant works with @epilot/spark-ui, @epilot/spark-sdk, or portal blocks.

Source

Every file below is the live version from the Spark repository, rendered at build time. Use the copy button on each one.

What the skill provides

Component selection. A map from the task at hand to the right component, across the whole library: actions, forms, the Field family, overlays, feedback, navigation, energy charts, and HEMS widgets. The assistant composes existing components instead of writing custom markup that ignores the tenant theme.

Styling rules. Semantic tokens instead of raw colors, the status color idioms, Spark radius tokens, and spacing conventions. Every rule ships with an incorrect and a correct code sample, and the assistant checks its own output against them.

Composition rules. How overlays are assembled and why the Overlay part is required. The rule against hardcoded strings in multi-language portals. Full Card and Field compositions, and which component replaces which piece of custom markup.

Theming. The Theme provider, how knobs cascade, per-subtree accent overrides that stay correct in dark mode, and when a component is neutral by default.

Charts. The Spark chart language on visx: series and axis colors from theme tokens so charts survive dark mode and tenant branding, dual axes, scrolling time series with pinned axes, texture patterns for secondary series, and the leader-line legend rows.

Custom blocks. The complete guest contract: the session handshake with a graceful standalone fallback, per-installation config and entity context, data through the portal proxy, height reporting, host-rendered dialogs, and localization. Plus the three tests every block passes before shipping: seam, whitelabel, and guest manners.