Skip to content
Type something to search...
Kivo Theme Documentation

Prompt Library

Skill level: Beginner

Copy a prompt, replace the parts in [BRACKETS], and send it to your assistant. Each prompt names the Kivo files involved, so it works in AI editors and, with the file pasted in, in chat assistants too.

Get Started

Explain the project to the assistant

Read AGENTS.md and SKILLS.md, then look at src/config/config.toml, src/pages/[...lang]/index.astro,
and src/content/sections/english/hero-saas.md. Summarize in 10 bullet points how this Astro theme is
organized: where text lives, how pages pick their sections, how a page overrides a section
(named blocks), and how options.layout works. Don't change any files yet.

Describe your product once, then reuse it

Here is my product. Use it for every copywriting request in this conversation:
- Name: [PRODUCT NAME]
- What it does: [ONE SENTENCE]
- Who it is for: [AUDIENCE]
- Main features: [3 TO 6 FEATURES]
- Tone: short, technical, confident. No hype words.
Confirm with one line, and don't change any files yet.

Brand

Rename the site

Change the brand from "Kivo" to "[NAME]". In src/config/config.toml update [site] title, logoText,
tagline, description, and [seo] author. Then search src/content and src/i18n for any remaining
"Kivo" in visible text and replace it. Don't rename files or code identifiers.

Apply brand colors

My brand color is [HEX] and my accent color is [HEX]. In src/styles/theme.css, update
--theme-primary, --theme-primary-soft, and --theme-accent in both the :root (light) and :root.dark
(dark) palettes. Pick dark-mode values that keep at least 4.5:1 contrast on the dark background,
and a very light tint of the primary for --theme-primary-soft (a very dark one in dark mode).
List the values you chose.

Change the fonts

Replace Inter with [GOOGLE FONT] as the main font. Edit src/config/fonts.json: keep the cssVariable
"--font-primary", the weights 400, 500, and 600, and the fallback. Keep JetBrains Mono for code
unless I say otherwise. Don't edit CSS files.

Use my logo

I added my logo at src/assets/images/[FILE].svg. In src/config/config.toml set [site] logo to
"/images/[FILE].svg", set logoWidth and logoHeight to keep its proportions at about 28px tall,
and set logoText to [NAME OR ""]. Also set [site.favicon] image to the same file and tell me to
run npm run generate-favicons.

Homepage

Rewrite the homepage for my product

Rewrite the English homepage text for my product. The homepage is src/pages/[...lang]/index.astro.
Edit the section files it uses in src/content/sections/english/ and the named blocks in
src/content/homepage/english/-index.md. Keep every key, option, icon name, and the number of
items in each list. Only change text values. Then write the French version in the matching
files in src/content/sections/french/ and src/content/homepage/french/.

Reorder or remove homepage sections

On the homepage (src/pages/[...lang]/index.astro), move [SECTION] above [SECTION] and remove
[SECTION]. Only edit the route file: don't delete any content files. Remove imports that are
no longer used.

Pick layouts for the homepage

Set these layouts on the main homepage: hero "[centered | screenshot | code | form]", features
"[alternating | tabs | sticky | bento]", pricing "[usage | single | compact]", testimonials
"[marquee | spotlight | metrics]". Set options.layout in the matching named blocks of
src/content/homepage/english/-index.md and french/-index.md (add a block if it is missing).
Keep the <LayoutVariants> lines in src/pages/[...lang]/index.astro as they are. Then run
npm run astro-check.

To compare layouts on the page first, set [settings.layoutSwitcher] enable = true in config.toml, use the Change layout button on the homepage, then set it back to false (the default) before you launch.

Make a demo homepage the main one

I want the [API | AI | analytics] demo homepage as my main homepage. Replace the sections of
src/pages/[...lang]/index.astro with the ones in src/pages/[...lang]/[home-api | home-ai |
home-analytics].astro, and copy the named blocks from src/content/homepage/english/[FILE].md
into src/content/homepage/english/-index.md (same for french). Then delete the three demo
homepage routes and their content files, and remove them from the "Pages" menu in
src/config/menu.en.json and menu.fr.json.

Content

Clean up the menus

In src/config/menu.en.json and menu.fr.json: disable the "Pages" menu (set "enable": false),
and make the header menus point only to pages I keep: [LIST OF PAGES]. Set "enable": false on
links to pages I removed, in the header and the footer. Keep the JSON structure.

Add a simple text page

Add a page at /[slug]/ titled "[TITLE]" with this content: [TEXT]. Create
src/content/pages/english/[slug].md like src/content/pages/english/terms-conditions.md, and a
French version in src/content/pages/french/. Add it to the Company column of the footer menu.

Add a page made of existing sections

Create a page at /[slug]/ with these sections: [PageHeader, FeatureGridSection with the bento
layout, CustomerQuotesSection, QuestionsSection]. Copy src/pages/[...lang]/pricing.astro to
src/pages/[...lang]/[slug].astro, but read the content with getEntryCTM("pages", "[slug]",
Astro.currentLocale) from a new src/content/pages/english/[slug].md with a title and one named
block per section, and pass each section its block. Add "[slug]" to the ownRoutes list in
src/pages/[...lang]/[page].astro. Create the French file in src/content/pages/french/, add the
page to the header menu under [MENU] in menu.en.json and menu.fr.json, and run npm run astro-check.

Remove pages I don’t need

I don't need these pages: [LIST, for example /status/, /community/, /compare/]. For each one,
delete its route file in src/pages/[...lang]/ and its content folder or file in src/content/,
then remove every link to it from src/config/menu.en.json and menu.fr.json and from content
files (search for the URL). Run npm run astro-check and fix anything it reports.

Languages

Use English only

I only need English. Set [settings.multilingual] enable = false in src/config/config.toml. Don't
delete any files. Tell me what will happen if I later run npm run remove-multilingual.

Replace French with another language

Replace French with [LANGUAGE] ([CODE]). In src/config/language.json change the French entry to
languageName "[Xx]", languageCode "[code]", contentDir "[folder name]". Rename every
src/content/**/french/ folder to [folder name], rename src/i18n/fr.json and
src/config/menu.fr.json to [code].json and menu.[code].json, then translate their text values
from English. Update the "/fr/*" redirect in netlify.toml. Keep all keys. Don't use
npm run generate-multilingual-content.

Add a third language

Add [LANGUAGE] (code "[xx]", folder "[name]") and keep English and French. Follow the "Add or
remove a language" skill in SKILLS.md: copy every english/ folder under src/content/ to [name]/,
add the language to src/config/language.json, copy menu.en.json and src/i18n/en.json to
menu.[xx].json and [xx].json, and add a /[xx]/* block to netlify.toml. Don't run
npm run generate-multilingual-content. Then translate the copied files, keeping every key.

Forms, SEO, And Launch

Connect the contact form

Connect the contact form to [Formspree with form ID xxxx | formsubmit.co with [EMAIL] | Netlify
Forms]. Update contactFormAction and contactFormProvider in src/config/config.toml following the
comments above them. Don't change the form fields.

Write SEO descriptions

For every page file in src/content/*/english/-index.md and src/content/pages/english/, write a
metaDescription of 140-160 characters for my product, based on the page content. Only add or
change metaDescription. Then do the French files.

Pre-launch review

Review this site before launch and give me a checklist of what is still demo content. Check:
[site] baseUrl in src/config/config.toml (it ships as https://example.com), contactFormAction,
[settings.subscription] formAction, form.action in src/content/auth/, docsUrl,
[settings.contactInfo], [settings.layoutSwitcher] (it should be false), social links in
src/config/social.json, the "Pages" menu, the legal pages in src/content/pages/, the sample
careers roles, placeholder links ("#") in the menus, and any remaining demo brand names. Also
tell me to check that PUBLIC_DEMO_MODE is not set on my host. Don't change files: list the file
and line for each item.

Fix Problems

Explain and fix an error

npm run [dev | build | astro-check] fails with this error:
[PASTE THE FULL ERROR]
Explain the cause in one sentence, then fix it with the smallest change. Don't change unrelated files.

A change doesn’t show up

I changed [WHAT] in [FILE] but the page [URL] still shows the old version. Find where that page
gets this text: check its route in src/pages/[...lang]/, the named blocks in its content file,
and the section file in src/content/sections/english/. Tell me which file wins and why.