Site Haus Back to Site Haus

Use skills when you build

How the AI uses expert skills on websites and web apps, how to call one by name, and how to use them with your own ChatGPT or Claude.

When you build a website or web app, the AI has a list of skills it can read. A skill is a set of expert instructions for one kind of work, such as animation, mobile polish or testing a page with awkward data. You do not have to do anything: when your request fits a skill, the AI loads it and follows it. You see a line in the chat, like Used the animate skill.

Skills are for website and web app projects. They are not used when building a WordPress theme.

Plans: on the Free plan you can choose 2 skills from the library to use. On Pro and Power all of them are on, and you can add your own.

Three ways to use a skill#

1. Just ask. Describe what you want in your own words. "Make the menu open smoothly" fits the animation skills, so the AI loads one on its own.

2. Call it by name. Start your message with a slash and the skill's name:

/animate make the cart drawer slide in from the right

/break-ui check the pricing table

You can call up to three at once: /animate /animation-performance make the hero feel smooth and fast. You can also say it in words: "use the animate skill for the card".

3. Pick it from the Skills button. In the chat box, press the sparkle Skills button next to the attach button. Choose a skill and it is added to the start of your message. Typing / shows the same list as suggestions: use the arrow keys and press Enter or Tab.

Browse all skills#

Press the Skills button in the chat and choose Browse all skills, or open Integrations and choose Skills. Skills are shown as cards, grouped by what you want to do: Make something, Polish and feel, Check and improve and Find the right words, plus My skills for ones you added yourself. Search by name or by what you need. Choose a card to read the skill in full, turn it on or off, or press Use in chat to add it to your message.

Add your own skills#

On the Pro and Power plans you can add skills of your own, which only you can use. Press ＋ Add your own at the top of the skills window. See Add your own skills.

Skills that only run when you ask#

A few skills, such as prototype and pick-ui-library, are marked only when asked. The AI never loads these on its own. You call them by name.

Turn skills on or off, or choose yours#

Open Integrations and choose Skills, then choose a card.

  • On Pro and Power, every skill is on. Each has a switch: a skill you turn off is not offered to the AI and does not appear in the Skills button.
  • On Free, nothing is on to begin with. Open a skill, read it, and choose Choose this skill. You can choose 2. To change one, open it and turn it off, then choose another. Trying to choose a third offers an upgrade.

You can read everything a skill says before you decide. It only changes things for you.

What the AI does with a skill#

The AI reads the skill, then uses its normal tools to look at your project's files and change them. Some skills only look and advise, like the ones that review or audit animation. They tell you what they found and do not change your files. If you call a skill with no request, such as just /animate, it replies that it is ready, and you then say what you want.

Tips#

  • Name the part of the page: "the checkout button", "the mobile menu". The skill is applied to that.
  • Use a review or audit skill after a build to check the result, then ask for the changes.
  • If a reply feels generic, call the skill by name. It makes sure the instructions are followed.
  • Skills use the same AI usage as any other message. A longer skill adds a little to what a message uses.

Using skills with your own ChatGPT or Claude#

Yes. If you have connected your own agent (see Connect your own AI), it can read the same skills while it builds in your project. It has two tools, list_skills and get_skill, and the list of skills is also in the Site Haus guidelines it reads first.

  • Just ask. "Make the menu open smoothly" is enough: the agent sees there is an animation skill, reads it with get_skill, and follows it.
  • Name one. Say "use the animate skill" or "follow the break-ui skill on the pricing page". The slash shortcut (/animate) is for the chat inside Site Haus, but naming the skill in words works in ChatGPT or Claude.
  • A short list. Ask "list my SiteHaus skills" and the agent shows one line per skill, like animate: Make motion feel smooth and intentional., so you can pick one. Ask for a skill by name to read it in full.
  • Files inside a skill. When a skill points to other files, such as references/pipeline.md, the agent reads them by path with get_skill. They are shown to it as plain reference text and are never run.
  • Your own skills too. The skills you added yourself are in the same list for your agent.
  • Plans. Using your own agent is free on every plan. Your agent can read the skills that are on for you: all of them on Pro and Power, or the 2 you chose on Free.

Find a skill and copy the sentence to ask for it#

Open Integrations and choose Skills. Choose any skill, yours included, to read it. Under it is a box called Use it from your own ChatGPT or Claude with a sentence ready to copy, such as "Use the animate skill on [describe what you want]." Paste it into your connected ChatGPT or Claude and say what you want in the brackets. Inside Site Haus's own chat, use Use in chat or type / and the skill's name.