Skip to content
New: Customize your theme with an AI assistant. Read the guide

Prompt Library

Skill level: Beginner

Copy a prompt, replace the parts in [BRACKETS], and send it to your assistant. Each prompt names the Homio files involved, so it works in AI editors and, with the files 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,
src/content/homepage/english/-index.md, and src/content/sections/english/hero-section.md.
Summarize in 10 bullet points how this Astro theme is organized: where text lives, where the
business details and prices live, 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 business once, then reuse it

Here is my business. Use it for every copywriting request in this conversation:
- Name: [BUSINESS NAME]
- What we do: [HOUSE CLEANING, DEEP CLEANS, MOVE-OUT, HANDYMAN, WINDOWS, CARPETS, ...]
- Where we work: [TOWNS OR ZIP CODES]
- Who we serve: [HOMEOWNERS, RENTERS, LANDLORDS, OFFICES, ...]
- Facts you may use: [YEARS IN BUSINESS, INSURANCE, BACKGROUND CHECKS, GUARANTEE]
- Tone: short, plain, friendly. No hype words.
Never invent reviews, ratings, review counts, statistics, or prices. Confirm with one line, and
don't change any files yet.

Business Details And Brand

Rename the company and update the phone everywhere

My company is "[NAME]", phone [PHONE AS DIALED, e.g. +15551234567] shown as "[PHONE AS
WRITTEN]", email [EMAIL]. In src/config/config.toml:
- [business]: set name, phone (E.164: + country code, digits only), phoneDisplay, and email.
Set sms and smsDisplay to [TEXT NUMBER], or to "" if we don't take texts.
- [site]: set title and logoText to my name, and rewrite tagline and description for my business.
Then search src/content and src/i18n (English and French) for "Homio" and "homio" in visible
text and replace them. The Elm Park area file in src/content/areas/ has a sample phone and phoneDisplay:
set them to "" so it uses the business phone, unless I give you local numbers.
Don't rename files, ids, or code identifiers. List every file you changed.

Set the address and opening hours

In [business] of src/config/config.toml, set the address to [STREET, CITY, STATE OR PROVINCE,
POSTAL CODE, COUNTRY CODE] and timezone to "[IANA ZONE, e.g. America/Chicago]". [We work from
home and don't receive customers: set [business.address] show = false.] Set [business.hours]
to: [DAYS AND TIMES], in 24-hour "HH:MM-HH:MM" format, with "" for closed days. Set
closedDates to these holidays: [DATES YYYY-MM-DD]. Remove the "# sample" comments on the
values you changed.

Apply my brand colors

My brand colors are: main [HEX], button color [HEX]. In src/styles/theme.css, in the :root
block, set --theme-deep (the big green blocks) to my main color and --theme-primary (links,
icons, checks) to a shade of it that has at least 4.5:1 contrast on white and on #f2f5ee, and
set --theme-accent (the pill buttons, with dark text) to my button color. Update the matching
--page-primary values and the hover shades. In :root.dark, set lighter versions that read on
#0e130f. Keep every variable name. Tell me the values you chose and their contrast ratios.

Change the fonts

Replace Lexend (headings) with [GOOGLE FONT] and Figtree (body text) with [GOOGLE FONT]. Edit
src/config/fonts.json only: keep the cssVariable values "--font-heading" and "--font-primary",
keep the shipped weight range (300 to 600 for headings, 400 to 700 for body text), and keep the fallback. Leave JetBrains Mono
(--font-code, prices and ticket codes). Then tell me to restart npm run dev.

Use my logo

I put my logo at src/assets/images/[FILE].svg. In [site] of src/config/config.toml set
logo = "/images/[FILE].svg" and logoWidth / logoHeight so it is about 28px tall with its own
proportions. If the file already contains the name, set logoText = "". Then set [site.favicon]
image to "/images/[SQUARE MARK FILE]" and tell me to run npm run generate-favicons and
npm run generate-og-image.

Prices, Estimator, And Booking

Change the estimator rates

Update the prices in src/content/pricing/english/-index.md with my rates:
- Standard clean: base [X], perBedroom [X], perBathroom [X], minimum [X]
- Deep clean: base [X], perBedroom [X], perBathroom [X], minimum [X]
- Move-out clean: base [X], perBedroom [X], perBathroom [X], minimum [X]
- Handyman: hourlyRate [X], callOutFee [X]
- Windows: base [X], perUnit [X] per pane, minimum [X]
- Discounts: weekly [X]%, biweekly [X]%, monthly [X]%
- Add-ons: [ADD-ON ID AND PRICE, ...]
Only change numbers in rateCards, frequencies, and addOns. Keep every id, mode, and key.
Copy exactly the same numbers into src/content/pricing/french/-index.md. Remove "# sample" from
the values you changed and list the rate cards you didn't touch. Then tell me the price the
estimator shows for a 2-bedroom, 1-bathroom standard clean every 2 weeks.

Change the currency

We charge in [CURRENCY, e.g. CAD]. In [settings.estimator] of src/config/config.toml set
currency to "[ISO CODE]" and currencyDisplay to [symbol | narrowSymbol | code]. Then search
src/content for prices typed as text (for example "$" in titles, notes, or gift card amounts)
in English and French, and list them for me without changing them.

Set the booking rules

In [settings.booking] of src/config/config.toml: earliest booking [N] days from today
(minLeadDays), latest [N] days ahead (maxDays). Our postal codes look like [EXAMPLE]: set
zipPattern to a regular expression that accepts them. Keep checkArea = true. Then check that
every area file in src/content/areas/english/ and french/ lists ZIP codes in that format in
zips.

Connect the forms

Send booking requests and contact messages to [EMAIL] with [formsubmit.co | formspree |
netlify]. In [settings] of src/config/config.toml set contactFormProvider and
contactFormAction (the comments there show the URL format for each provider). Leave
[settings.booking] formAction empty so bookings use the same endpoint. For the newsletter, here
is my Mailchimp embed form action: [URL]. Put it in [settings.subscription] formAction with
each "&" changed to "&".

Services And Service Areas

Add a service with its included list

Add a service "[NAME]" in the [cleaning | repairs | windows | carpets | outdoor] trade. Copy
src/content/services/english/deep-cleaning.md to [slug].md and rewrite title, description,
metaTitle, metaDescription, code, faq, and related. Set trade to that trade id and order to
[N]. Build the included list from room and task ids in the rooms: list of
src/content/services/english/-index.md (add new tasks there if needed, with the same ids in
French), and list tasks we never do in notIncluded. Add a rate card with id "[slug]" to
rateCards in src/content/pricing/english/-index.md: mode [rooms | hourly | units], my prices
[PRICES]. Do the same in the french/ files with the same ids and numbers. Keep the image paths
of the copied file and tell me which photos to replace. The header menu lists the service on
its own; add it to the Services column of the footer in menu.en.json and menu.fr.json.

Change what a service includes

In src/content/services/english/[slug].md, change the included list to: [ROOMS AND TASKS] and
notIncluded to: [TASKS]. Use only room and task ids from rooms: in
src/content/services/english/-index.md; add any missing task there with a short label (and in
the French file with the same id). Do the same in the French service file.

Add a service area with its own page

Add a service area "[TOWN]" with ZIP codes [ZIPS] and neighborhoods [LIST]. Copy
src/content/areas/english/elm-park.md to [slug].md and set title, description, metaTitle,
region, code, order, zips, neighborhoods, aliases, introTitle, notes, faq, and nearby. Set
phone and phoneDisplay to "" (use the business phone) unless I give you a local number, keep
office: {} unless we have a real staffed office there, and set crews and since only from facts
I give you. Remove the "# sample" comments. Do the same in src/content/areas/french/ with the
same file name. The header Areas menu, the footer areas column, and the booking ZIP check pick
the new area up on their own.

Replace the sample areas with mine

We serve: [TOWN: ZIPS; TOWN: ZIPS; ...]. Replace the four sample areas in
src/content/areas/english/ and french/ (north-harbor, elm-park, westfield-heights, old-mill)
with these, one file per town, following the existing frontmatter. Then search
src/content and src/config/menu.*.json for the old area ids and URLs (for example
/areas/elm-park/ in the Pages menu and area: "elm-park" in reviews, projects, team, and careers)
and update or list them.

Homepage And Layouts

Switch the hero to the split layout

On the main homepage, set heroSection options.layout to "split" in
src/content/homepage/english/-index.md and src/content/homepage/french/-index.md. The split
layout shows an eyebrow line above the title: write a short one for my business in both
languages. Keep every other key. Then tell me what to check on / at 375 px and 1280 px.

Change a section’s layout

On [PAGE URL], switch the [SECTION] to the [LAYOUT] layout. Find the page's content file and
its named block for that section (or the section file in src/content/sections/english/ if the
page has no block), and set options.layout. Use only a value listed in the comment next to
layout:. Do the same in the French file.

Reorder or remove homepage sections

On the main homepage (src/pages/[...lang]/index.astro), move the [SECTION] above the [SECTION]
and remove the [SECTION]. Keep the <LayoutVariants section="..." content={...} /> wrapper on
the sections that use it. Only edit the route file and remove imports that are no longer
used; don't delete content files.

Use another homepage as the main one

I want the /home-[cleaning | commercial | handyman]/ design as my main homepage. Replace the
contents of src/pages/[...lang]/index.astro with those of home-[NAME].astro, reading the
"-index" entry instead of "home-[NAME]". Copy all frontmatter of
src/content/homepage/english/home-[NAME].md into -index.md (same for french/), and remove
robots and excludeFromSitemap there. Then delete the three other homepage routes and content
files and remove their links from the Homepages group of the Pages menu in menu.en.json and
menu.fr.json. Run npm run astro-check.

Change the header and footer layout

Set the site header to [default | simple | centered | utility] and the footer to [default |
minimal | large | columns] in [settings.layout] of src/config/config.toml. Then list every page
file that sets its own headerLayout or footerLayout in frontmatter, so I can decide whether to
keep them.

Turn on the announcement bar

Show an announcement above the header: "[TEXT]" with a link "[LABEL]" to [URL], ending on
[YYYY-MM-DD]. Edit src/content/sections/english/announcement-bar.md and french/: set enable:
true, text, link, end, and a new id (so visitors who closed the old one see it). Keep
hideOn and tone.

Content

Clean up the menus

In src/config/menu.en.json and menu.fr.json: set "enable": false on the "Pages" header item
(it lists every demo page), and make the footer columns link only to pages I keep: [LIST].
Keep the Legal column last. Keep the same structure in both files, then run
npm run check-i18n.

Turn off French

I only need English. In [settings.multilingual] of src/config/config.toml set enable = false.
Tell me to restart npm run dev, then run npm run remove-multilingual, which deletes the
french/ folders, menu.fr.json, and fr.json. Before that, list any French-only text I might want
to keep.

Check the site before launch

Prepare my site for launch. In src/config/config.toml: set [site] baseUrl to "[URL]", check
that contactFormAction and the Mailchimp formAction are no longer placeholders, and keep
[settings.layoutSwitcher] enable = false. Then search src/content, src/config, and src/i18n
for "# sample", "PLACEHOLDER", "example.com", and "555" and list every value I still have to
replace, grouped by file. Don't change them. Finally run npm run build and report the warnings.

Fix an error

npm run [dev | build | astro-check] shows this error: [PASTE THE WHOLE ERROR]. Find the cause,
explain it in one sentence, and fix it in the content or config file, not in a component.
Type something to search...