# Prompt Library

## 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.

<Aside type="tip">
  Start a new conversation with the first prompt below. It gives the assistant
  the map of the theme, and every later request gets better.
</Aside>

### Get Started
**Explain the project to the assistant**

```text
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**

```text
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**

```text
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**

```text
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**

```text
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**

```text
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**

```text
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**

```text
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**

```text
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**

```text
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**

```text
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 "&amp;" changed to "&".
```

### Services And Service Areas
**Add a service with its included list**

```text
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**

```text
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**

```text
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**

```text
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**

```text
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**

```text
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**

```text
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**

```text
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**

```text
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**

```text
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
**Rewrite the homepage for my business**

```text
Rewrite the English text of the main homepage for my business. Edit the named blocks in
src/content/homepage/english/-index.md (heroSection, stepsSection, whyUsSection,
servicesSection, reviewsSection, contactSection, questionsSection, ...). Keep every key,
option, icon name, image path, and the number of items in each list. Only change text values.
Don't invent ratings, numbers, or promises: keep the sample values and list them for me. Then
write the French version in src/content/homepage/french/-index.md.
```

**Add real reviews**

```text
Here are real reviews, shared with the customers' consent: [NAME + LAST INITIAL, TOWN, SERVICE,
STARS, DATE, TEXT]. Add one file per review to src/content/reviews/english/ (and french/, with
the text translated), copying the frontmatter of an existing review. Use area ids from
src/content/areas/ and service ids from src/content/services/. Then set draft: true on the
sample reviews. Update the rating value and counts in src/content/sections/english/
trust-strip.md and french/ to: [MY RATING AND REVIEW COUNTS PER SOURCE], or tell me which
sample numbers are still there.
```

**Add a before-and-after project**

```text
Add a project to src/content/projects/english/ for: [JOB, TOWN, SERVICE, DURATION, CREW SIZE,
SCOPE, PRICE, CUSTOMER QUOTE IF I HAVE ONE]. Copy the frontmatter of bathroom-regrout.md. I put
the photos at src/assets/images/projects/[BEFORE].jpg and [AFTER].jpg; set before, after,
beforeAlt, and afterAlt. Use only the facts I gave you. Add the French version with the same
file name.
```

**Write the FAQ**

```text
Rewrite the questions in src/content/faq/english/-index.md for my business: keep the topic
groups and write 3-5 questions per group with short, direct answers. Use only the facts and
prices I give you. Keep the file structure and keys. Then translate it
into src/content/faq/french/-index.md.
```

**Write a blog post**

```text
Write a blog post titled "[TITLE]" about [TOPIC], around 800 words, for homeowners in [TOWN].
Create src/content/blog/english/[slug].mdx with the same frontmatter fields as
streak-free-windows.mdx (title, description, image, imageAlt, date [YYYY-MM-DD], author,
categories, tags, service, draft: false). Use ## headings. Don't quote figures or prices I
haven't given you.
```

**Add a job opening**

```text
Add a job opening to src/content/careers/english/ for: [TITLE, TRADE, AREA, TYPE, PAY,
SCHEDULE, START, REQUIREMENTS, HOW TO APPLY]. Copy the frontmatter keys of handyman.md and use a
file name that makes a good URL. Add the French version with the same file name.
```

**Add a team member**

```text
Add a team member: [NAME, ROLE, TRADE, AREA, YEAR JOINED, LANGUAGES, KNOWN FOR]. Copy
src/content/team/english/sam-k.md to a new file and fill in my details only. Add the French
version with the same file name. Set draft: true on the sample team members I don't keep:
[LIST].
```

**Replace the sample photos and update IMAGE-CREDITS.md**

```text
I added my own photos to src/assets/images/[FOLDER]/: [FILE NAMES AND WHAT EACH SHOWS]. Find
where the sample photos they replace are used in src/content (English and French), point those
image fields to my files, and write a short alt text for each in both languages. Then remove
the rows of the replaced sample photos from IMAGE-CREDITS.md and add a row for each of my
photos with source "Own photo". List the sample photos that are still in use.
```

### Menus, Languages, And Launch
**Clean up the menus**

```text
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**

```text
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**

```text
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**

```text
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.
```