Sivir skill
A skill for Svelte 5 and Tailwind 4 that loads the live Sivir UI catalog and design rules so the agent does not guess APIs
- 79 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill only steers the agent and reads documentation over the network, while the agent itself changes project code on your requests
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/sivirDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill only steers the agent and reads documentation over the network, while the agent itself changes project code on your requests
This is third-party code. Review the repository files before installing.
What it does
Sivir is a skill for an agent that builds interfaces on Svelte 5 and Tailwind CSS 4 with the Sivir UI library. The library gives 59 components, installed as the `@sivir-ui/svelte` package or copied into the project as source with the `sivir` command and edited. The skill does not let the agent invent APIs from habits of other libraries. At the start of every task it loads the `https://sivir.dev/llms.txt` index, detects the project mode: package, source copy or not installed, and reads the pages of needed components with version, dependencies, install command and examples. When sources disagree local copies win, then the installed package, then live documentation. References inside the skill help choose components and keep the design language.
Who it is for. Frontend developers on Svelte 5 and Tailwind CSS 4 who chose Sivir UI and want the agent to use its current components.
Good fit when
- You add a form from Sivir components to a Svelte 5 project and want no nonexistent props
- The project uses source copying through `sivir.json` and the agent must not switch the mode silently
- You need a chat interface or other AI states built from ready primitives
- After a package update the API diverged and the installed version must be checked against the pages
- A design review of an interface should rely on the library design language
Not a fit when
- The project is not on Svelte 5 and Tailwind CSS 4: the components target them
- You use another component library and do not plan to move to Sivir
- The agent cannot reach the network: the skill reads `llms.txt` at the start of every task
- You want the component package with no skill: the library can also be installed separately
Example request
Build a login form in this Svelte 5 project from Sivir components, checking the API against live documentationLimitations
The skill needs network access: at the start of every task it reads `https://sivir.dev/llms.txt` and component pages, and accuracy drops without that. It targets Svelte 5 and Tailwind CSS 4, and the library comes as the `@sivir-ui/svelte` package or by copying source with a `sivir.json` file. The skill does not change the project mode itself and asks before upgrading if the project version lags the live one. It does not paste syntax that appeared only in the latest version into an old installation. References sit in `skills/sivir/references/`.
How to disable. Delete the `sivir` folder from the agent skills directory. The library itself is removed with `npm uninstall @sivir-ui/svelte`, and copied components are deleted by hand per the alias in `sivir.json`.
FAQ
How do I install the Sivir skill?
Run `npx skills add aidan-neel/sivir-ui --skill sivir`. It loads the component index, the selection guide and the design language for agents that read skills.
How do package and source copy modes differ?
In package mode components are imported from `@sivir-ui/svelte`. In source copy mode the source sits in the project, with the path set by the alias in `sivir.json`, `$lib/sivir` by default, and can be edited.
Where does the skill get the current API?
From `https://sivir.dev/llms.txt`: the agent goes from there to the page of the needed component with version, dependencies, install command and examples.
What if the project lags behind the release?
The skill adapts to the installed API or asks before upgrading and does not paste syntax that exists only in the latest version.
How many components does the library have?
The repository badge states 59 components on Svelte 5 and Tailwind CSS 4, including primitives for AI interfaces.
Discussion
No questions or reviews yet.
Related
Skillsshadcn-svelte skill for agents
shadcn-svelte
A shadcn-svelte skill: the agent reads components.json, adds components with the CLI and builds forms, dialogs and cards by the library's rules
Nuxt UI v4 skill: an agent builds Vue and Nuxt interfaces, picks components, sets up the theme and lays out forms and dashboards
A skill that picks and installs beUI animated React components through the public MCP or the shadcn registry instead of hand-built widgets
Preline UI skills for agents: assemble Tailwind CSS component interfaces and generate themes from tokens
shadcn-vue skill for agents
shadcn-vue skill
The shadcn-vue skill reads your project settings and teaches an agent to add components, forms and themes of the Vue port of shadcn/ui by its rules
Four official Material UI skills: styling, theming, Next.js integration and working alongside Tailwind CSS
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| Sivir (this card) | no | 79 | ||
| shadcn-svelte skill for agents | yes | 9,256 | a shadcn port for Svelte; Sivir is its own library with an llms.txt catalog, AI primitives and a skill that checks the API | |
| Svelte MCP | yes | not required | 339 | an MCP with Svelte docs; here a skill about Sivir UI components and their design language |
README in short
The README is short: a component library for Svelte 5 and Tailwind CSS 4 installed as a package or by copying source with the `sivir` command, a docs link and the agent skill install command. Details are in the `skills/sivir` files.
README badge
Original SKILL.md
--- name: sivir description: Builds and refines Svelte 5 interfaces with Sivir UI using its live llms.txt catalog, version-aware component APIs, installation workflow, AI primitives, and design language. Use when asked to "use Sivir", "build with Sivir", "add a Sivir component", "make this look like Sivir", create an AI chat or coding-agent interface with Sivir, or review existing @sivir-ui/svelte code. --- # Sivir Build Svelte interfaces from Sivir's current APIs and design system. Do not guess from generic component-library patterns. ## Step 1: Establish the Project State Inspect the project before changing code: 1. Confirm Svelte 5 and Tailwind CSS v4 are present. 2. Read the package manifest, lockfile, global CSS entry, and nearby Svelte components. 3. Detect the integration mode: - Package mode: `@sivir-ui/svelte` is a dependency and components import from it. - Source-copy mode: `sivir.json` exists and components import from its `alias` (default `$lib/sivir`). - Not installed: neither mode is present. 4. Identify the installed Sivir package version or the component versions recorded in `sivir.json`. 5. Preserve the project's package manager, import style, aliases, theme, and local component conventions. Do not silently switch an existing project between package and source-copy modes. ## Step 2: Load the Current Sivir Sources Fetch `https://sivir.dev/llms.txt` at the start of each Sivir task. Treat it as the index for the current catalog, installation guide, theming guide, changelog, and generated component references. Load documentation progressively: | Task | Read from the `llms.txt` index | | --- | --- | | First Sivir integration | Introduction, Installation, and Theming | | Choosing components | Components index, then candidate component pages | | Implementing a component | That component's Markdown page and every Sivir dependency needed for custom composition | | AI or coding-agent UI | Candidate AI component pages plus `references/component-selection.md` from this skill | | Upgrading or resolving an API mismatch | Installed version, the compiled changelog, the LLM changelog page when linked, and component pages | | Visual design or review | `references/design-language.md` from this skill | Each generated component page contains its current version, dependencies, install command, public `index.ts` API, and runnable examples. Read the exact page before using a component that is new to the project. Never invent a part, prop, event, variant, slot/snippet contract, or import path. Use this authority order when sources disagree: 1. Local source-copied components define source-copy behavior. 2. The installed package and its declarations define package behavior at the locked version.