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 thebusiness 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, anddon'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 ASWRITTEN]", 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 visibletext 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 fromhome 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. SetclosedDates to these holidays: [DATES YYYY-MM-DD]. Remove the "# sample" comments on thevalues you changed.Apply my brand colors
My brand colors are: main [HEX], button color [HEX]. In src/styles/theme.css, in the :rootblock, 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, andset --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]. Editsrc/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 setlogo = "/images/[FILE].svg" and logoWidth / logoHeight so it is about 28px tall with its ownproportions. 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 andnpm 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" fromthe values you changed and list the rate cards you didn't touch. Then tell me the price theestimator 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 setcurrency to "[ISO CODE]" and currencyDisplay to [symbol | narrowSymbol | code]. Then searchsrc/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]: setzipPattern to a regular expression that accepts them. Keep checkArea = true. Then check thatevery area file in src/content/areas/english/ and french/ lists ZIP codes in that format inzips.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 andcontactFormAction (the comments there show the URL format for each provider). Leave[settings.booking] formAction empty so bookings use the same endpoint. For the newsletter, hereis my Mailchimp embed form action: [URL]. Put it in [settings.subscription] formAction witheach "&" 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. Copysrc/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 ofsrc/content/services/english/-index.md (add new tasks there if needed, with the same ids inFrench), and list tasks we never do in notIncluded. Add a rate card with id "[slug]" torateCards 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 pathsof the copied file and tell me which photos to replace. The header menu lists the service onits 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] andnotIncluded to: [TASKS]. Use only room and task ids from rooms: insrc/content/services/english/-index.md; add any missing task there with a short label (and inthe 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]. Copysrc/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. Setphone and phoneDisplay to "" (use the business phone) unless I give you a local number, keepoffice: {} unless we have a real staffed office there, and set crews and since only from factsI give you. Remove the "# sample" comments. Do the same in src/content/areas/french/ with thesame file name. The header Areas menu, the footer areas column, and the booking ZIP check pickthe new area up on their own.Replace the sample areas with mine
We serve: [TOWN: ZIPS; TOWN: ZIPS; ...]. Replace the four sample areas insrc/content/areas/english/ and french/ (north-harbor, elm-park, westfield-heights, old-mill)with these, one file per town, following the existing frontmatter. Then searchsrc/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" insrc/content/homepage/english/-index.md and src/content/homepage/french/-index.md. The splitlayout shows an eyebrow line above the title: write a short one for my business in bothlanguages. 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 andits named block for that section (or the section file in src/content/sections/english/ if thepage has no block), and set options.layout. Use only a value listed in the comment next tolayout:. 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 onthe sections that use it. Only edit the route file and remove imports that are no longerused; 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 thecontents of src/pages/[...lang]/index.astro with those of home-[NAME].astro, reading the"-index" entry instead of "home-[NAME]". Copy all frontmatter ofsrc/content/homepage/english/home-[NAME].md into -index.md (same for french/), and removerobots and excludeFromSitemap there. Then delete the three other homepage routes and contentfiles and remove their links from the Homepages group of the Pages menu in menu.en.json andmenu.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 pagefile that sets its own headerLayout or footerLayout in frontmatter, so I can decide whether tokeep 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). KeephideOn and tone.Content
Menus, Languages, And Launch
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 runnpm 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 thefrench/ folders, menu.fr.json, and fr.json. Before that, list any French-only text I might wantto keep.Check the site before launch
Prepare my site for launch. In src/config/config.toml: set [site] baseUrl to "[URL]", checkthat contactFormAction and the Mailchimp formAction are no longer placeholders, and keep[settings.layoutSwitcher] enable = false. Then search src/content, src/config, and src/i18nfor "# sample", "PLACEHOLDER", "example.com", and "555" and list every value I still have toreplace, 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.