Autocomplete for Sky UI utility classes in class and className attributes, similar to Tailwind CSS IntelliSense.
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
Open this repo in VS Code.
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").
