Preline UI Agent Skills

What are Agent Skills?

Agent Skills are a way to extend agentic coding tools such as IDEs and CLIs. They package reusable tooling that helps automate and standardise common steps in the development workflow.

Agent Skills are folder based bundles of instructions, scripts, and supporting resources that agents can discover and run, so they can complete tasks more accurately and efficiently.

Learn more about Agent Skills.

Preline UI Agent Skills

At the moment, Preline UI includes Agent Skills that enable automated theme generation in agentic coding tools (e.g. IDEs, CLIs), helping teams accelerate setup and iteration. Learn more at Themes page about Preline Theme Skills.

How to set up Agent Skills

There are two ways to set up Agent Skills: using the terminal or manual installation.

Option 1: Install via CLI using skills.sh (recommended)

Run the following command:

                  
                    npx skills add htmlstreamofficial/preline
                  
                

Option 2: Manually

Simply copy the skills folder from ./node_modules/preline/skills/ to your project root folder inside a skills/ directory. Most agentic tools will automatically detect the skills folder and make it available to the agent but adding into the tool's skills directory is a more reliable solution.

To make the skills available globally for a specific agentic tool, copy them into that tool's skills directory. Below are examples of common agentic tools and their project level and global skills directories.

Example project structure:

This is an example project structure. Actual setups may vary depending on the project and agentic tools in use.