Sky UI IntelliSense

Autocomplete for Sky UI utility classes in class and className attributes.

Features

Completions inside class="..." and className="..." in HTML, JSX/TSX, Vue, and Svelte.
Suggests base utility classes (e.g. p-4, bg-red-500, rounded-lg) and variant-prefixed classes (e.g. hover:bg-red-500, sm:flex).
Suggests variant prefixes (e.g. hover:, sm:, dark:) when you start typing.

Requirements

The workspace must contain the Sky UI suggestion engine so the extension can load it:
- Development: Open the sky-ui-utils repo (or any project that has src/suggestion-engine/index.js).
- Other projects: Add @sky-ui/utils and ensure the package exports the suggestion engine (see main package exports["./suggestion-engine"]).

Installation

From the marketplace (VS Code)

Install Sky UI IntelliSense from the VS Code Marketplace.

In Cursor (without Eclipse / Open VSX)

Cursor uses a different marketplace (Open VSX). You can still use this extension in Cursor without it being listed there:

Download the .vsix
- From the VS Code Marketplace: open the page → click Download Extension (under the version on the right).
- Or from a GitHub Release if you attach a .vsix there.
Install in Cursor
- Open Cursor → Extensions (Ctrl+Shift+X / Cmd+Shift+X).
- Drag the downloaded .vsix file into the Extensions panel, or run Extensions: Install from VSIX... from the Command Palette (Ctrl+Shift+P) and choose the file.

The extension will work the same; it just won’t appear in Cursor’s marketplace search until it’s also published to Open VSX (which requires a one-time Eclipse account setup).

From source (development)

Open this repo in VS Code or Cursor.
Open the Extensions view, run Developer: Install Extension from Location..., and choose extensions/sky-ui-intellisense.
Reload the window if prompted.

Or copy the folder into your .vscode/extensions directory for local use.

Configuration

Setting	Default	Description
`skyUiIntellisense.enable`	`true`	Enable Sky UI class completions.
`skyUiIntellisense.includeVariants`	`true`	Include variant prefixes (hover:, sm:, etc.) in suggestions.

How it works

The extension registers a completion provider for HTML and JS/TS/React/Vue/Svelte. When the cursor is inside a class or className attribute, it loads the suggestion engine from the workspace and calls getCompletions(partial) with the current word. Results are shown in the completion list with optional detail (e.g. "Spacing", "Background").