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

Preline UI includes a growing collection of Agent Skills for agentic coding tools such as IDEs and CLIs. Each skill provides focused instructions and workflows that help agents use Preline UI more accurately and speed up setup, implementation, customization, and iteration.

• preline-theme-generator. Generate custom Tailwind CSS themes from brand colors or a visual direction. Learn more about Preline Theme Skills.
• preline-mcp. Discover and integrate Preline UI components and blocks through Preline MCP. Learn more about Preline MCP.

How to set up Agent Skills

There are three ways to set up Agent Skills: using the terminal, prompting your agentic coding tool, or manual installation.

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

Run the following command:

                      
                        npx skills add htmlstreamofficial/preline
                      
                    

Option 2: Prompt

Paste the following prompt into your agentic coding tool:

                      
                        Use the skills in "https://github.com/htmlstreamofficial/preline" that are relevant to the current task. Run `npx skills add "https://github.com/htmlstreamofficial/preline"` and select the relevant skills, then follow their instructions.
                      
                    

Option 3: Manually

Copy the ./node_modules/preline/skills/ folder into the .agents/ directory at your project root. The resulting path should be .agents/skills/. Most agentic tools can discover skills from this shared location, but using each tool's own skills directory provides more reliable detection.

To install the skills for a specific agentic tool, copy the individual skill folders into that tool's project-level or global skills directory. The table below lists common locations.

Example project structure:

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