Agent Skills
Teach your coding agent to build UIs and themes with StellarAdmin.UI
StellarAdmin provides two skills for agents such as Claude Code and Codex:
- stellar-admin-ui includes setup instructions, component references, and guidance for forms, layouts, and theming in ASP.NET Core MVC and Razor Pages
.cshtmlfiles. - stellar-admin-theme writes theme files from a description, brand colours or a reference look.
Install them with Vercel's skills installer. The skills and their references live in the StellarAdmin repository.
Installation
With Node.js/npm and Git installed, open a terminal in your application's project directory and run:
npx skills add stellar-admin/stellar-admin --skill stellar-admin-uiChoose your agent in the installer. Installation is project-scoped by default. Keep the explicit --skill stellar-admin-ui selection: the repository also contains internal product-development skills.
To select an agent directly, use one of these commands:
npx skills add stellar-admin/stellar-admin --skill stellar-admin-ui --agent claude-codenpx skills add stellar-admin/stellar-admin --skill stellar-admin-ui --agent codexOther agents supported by the installer can use the same skill. Add --global if you want it available across projects. Start a fresh agent session in your application after installation.
This installs agent guidance and bundled references. It does not install the StellarAdmin NuGet package or change your application. Ask your agent to set up StellarAdmin, or follow the installation guide.
Setting up your application
Ask your agent:
Use the stellar-admin-ui skill to install StellarAdmin in this application.
The skill asks you to choose a setup scope unless you already specified one:
- Basic installation: install the package, register services and tag helpers, and add CSS and JavaScript references. Preserve the current layout structure and Bootstrap.
- Installation with layout conversion: also adapt the default layout to StellarAdmin and remove Bootstrap where it is no longer needed. Check remaining dependencies before removing shared assets.
The agent should offer a picker when its interface supports one, or ask a text question otherwise. Keeping Bootstrap can cause styling conflicts; basic installation does not guarantee that adding the StellarAdmin stylesheet leaves every existing element's appearance unchanged.
What's included
One skill includes these references, which the agent reads as needed:
| Area | Guidance |
|---|---|
| Setup and components | Package setup, tag names, attributes, enum values, composition rules, icons, JavaScript, and templated views. |
| Forms | Fields, validation, model binding, input groups, and choice cards. |
| Layout | Sidebars, app headers, page headers, spacing, and cards. |
| Theming | Linking a theme file, fonts, dark mode, design tokens, and menu appearance. |
For later tasks, ask the agent to use stellar-admin-ui to build a form or add navigation. Automatic skill selection depends on the agent and task.
Creating a theme
Install the theme skill the same way, alongside the UI skill:
npx skills add stellar-admin/stellar-admin --skill stellar-admin-themeThen ask for the look you want:
Use the stellar-admin-theme skill to give this app a warm, editorial, dense theme with a green accent.
The agent writes a theme file of CSS variables, links it, loads its fonts, and gives you a theme builder link to preview and fine-tune it. The skill includes the theme variable reference, guidance for turning descriptions into variable values, and worked examples.
Compatibility and updates
The skills are maintained alongside StellarAdmin. Their references follow the repository's default branch and may include changes newer than your installed NuGet package. The agent should check your installed version before applying API examples. Installing or updating a skill does not update your NuGet packages.
The StellarAdmin admin panel is a separate product still in development and does not yet have an installable skill. This skill covers the StellarAdmin.UI library, not admin panel configuration or resource workflows.