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 isorganized: 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 codeunless 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 torun 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 insrc/content/homepage/english/-index.md. Keep every key, option, icon name, and the number ofitems in each list. Only change text values. Then write the French version in the matchingfiles 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 areno 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 ofsrc/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 runnpm 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 ofsrc/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].mdinto src/content/homepage/english/-index.md (same for french). Then delete the three demohomepage routes and their content files, and remove them from the "Pages" menu insrc/config/menu.en.json and menu.fr.json.Content
Navigation And Pages
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 onlinks 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]. Createsrc/content/pages/english/[slug].md like src/content/pages/english/terms-conditions.md, and aFrench 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 bentolayout, CustomerQuotesSection, QuestionsSection]. Copy src/pages/[...lang]/pricing.astro tosrc/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 namedblock per section, and pass each section its block. Add "[slug]" to the ownRoutes list insrc/pages/[...lang]/[page].astro. Create the French file in src/content/pages/french/, add thepage 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 contentfiles (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'tdelete 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 tolanguageName "[Xx]", languageCode "[code]", contentDir "[folder name]". Rename everysrc/content/**/french/ folder to [folder name], rename src/i18n/fr.json andsrc/config/menu.fr.json to [code].json and menu.[code].json, then translate their text valuesfrom English. Update the "/fr/*" redirect in netlify.toml. Keep all keys. Don't usenpm run generate-multilingual-content.Add a third language
Add [LANGUAGE] (code "[xx]", folder "[name]") and keep English and French. Follow the "Add orremove 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 tomenu.[xx].json and [xx].json, and add a /[xx]/* block to netlify.toml. Don't runnpm 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] | NetlifyForms]. Update contactFormAction and contactFormProvider in src/config/config.toml following thecomments 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 ametaDescription of 140-160 characters for my product, based on the page content. Only add orchange 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 insrc/config/social.json, the "Pages" menu, the legal pages in src/content/pages/, the samplecareers roles, placeholder links ("#") in the menus, and any remaining demo brand names. Alsotell me to check that PUBLIC_DEMO_MODE is not set on my host. Don't change files: list the fileand 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 pagegets 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.