# 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 Lumio 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**
```text
Read AGENTS.md and SKILLS.md, then look at src/config/config.toml,
src/pages/[...lang]/index.astro, src/content/sections/english/home-banner.md, and
src/content/homepage/english/-index.md. Summarize in 10 bullet points how this Astro theme is
organized: where text lives, how a page picks its sections, how the three homepages differ, how a
page overrides a section with the content prop, how a page picks its header and footer, and which
collections npm run astro-check actually validates. Don't change any files yet.
```
**Describe your company once, then reuse it**
```text
Here is my company. Use it for every copywriting request in this conversation:
- Name: [COMPANY NAME]
- What we do: [ONE SENTENCE]
- Who it is for: [AUDIENCE]
- Services: [3 TO 6 SERVICES]
- Tone: professional, specific, no buzzwords.
Never invent client names, testimonials, case-study results, team sizes, awards, or prices. If
you need one, leave the sample value and list it for me.
Confirm with one line, and don't change any files yet.
```
### Brand
**Rename the site**
```text
Change the brand from "Lumio" to "[NAME]". In src/config/config.toml update [site] title,
description, tagline, and logoText, and [seo] author. Then check `site` in every
src/i18n/.json for a per-language tagline and description, and search src/content and
src/config for any remaining "Lumio" in visible text and replace it. Don't rename files or code
identifiers.
```
**Apply brand colors**
```text
My brand color is [HEX] and my accent color is [HEX]. In src/styles/theme.css update
--color-primary and --color-accent, and adjust --color-secondary, --color-theme-light, and
--color-theme-dark to match. Keep at least 4.5:1 contrast for text on --color-body and on
--color-theme-dark. Don't add arbitrary color values anywhere else, and don't touch the
typography or breakpoint tokens. List the values you chose.
```
**Change the fonts**
```text
Replace Outfit with [GOOGLE FONT] in src/config/fonts.json. Keep the cssVariable
"--font-primary", the weights, the fallback, and the IBM Plex Sans Arabic entry (it is loaded
only on Arabic pages). Don't edit any CSS file. Remind me to restart npm run dev.
```
**Use my logo**
```text
I added my logo at src/assets/images/[FILE].png and a white version at
src/assets/images/[FILE]-white.png. In src/config/config.toml set [site] logo and logoWhite to
those paths, adjust logoWidth and logoHeight to keep their proportions, and set logoText to
[NAME OR ""]. Also set image under [site.favicon] to the main file, and tell me to run
npm run generate-favicons (it needs npm run toml:watch to have run).
```
### Homepages, Headers, And Sections
**Pick one homepage and drop the others**
```text
I want the [second | third] homepage as my main homepage. Replace the sections of
src/pages/[...lang]/index.astro with the ones in src/pages/[...lang]/home-[two | three].astro,
and copy the SEO fields from src/content/homepage/english/home-[two | three].md into
src/content/homepage/english/-index.md (same for french and arabic). Then delete the other
homepage routes and their content files, and remove them from the Home menu in every
src/config/menu..json. Run npm run astro-check.
```
**Rewrite the homepage for my company**
```text
Rewrite the English homepage text for my company. The homepage is
src/pages/[...lang]/index.astro. Edit the section files it uses in
src/content/sections/english/ (the homepage copy lives there, not in
src/content/homepage/english/-index.md, which only holds SEO fields). Keep every key, option,
icon name, image path, and the number of items in each list. Only change text values. Then write
the french and arabic versions, with identical keys.
```
**Reorder or remove homepage sections**
```text
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, and remove imports that are
no longer used. Then run npm run astro-check.
```
**Switch a section variant**
```text
On [PAGE ROUTE in src/pages/[...lang]/], use [HomeBannerTwo | TestimonialSectionThree |
OurServicesTwo | the variant I named] instead of the current one. These are separate components,
each with its own content file in src/content/sections//, so import the new component,
render it with the same props, and tell me which content file I now need to fill in every
language. Then run npm run astro-check.
```
**Change the header or footer on a page**
```text
On [PAGE ROUTE in src/pages/[...lang]/], use header "[one | two | three]" and footer "[one |
two]". Set the header and footer props on in that route file only. Don't change
Base.astro, whose defaults are header one and footer two.
```
**Change a section on one page only**
```text
On [PAGE, for example /about/], change [WHAT] for that page only. Put the values in that page's
own content file (src/content/[about | contact]/english/-index.md) and pass them to the section
with the content prop in src/pages/[...lang]/[PAGE].astro, the way the other routes do. Leave the
file in src/content/sections/english/ alone so other pages keep the current text. Do the same for
french and arabic.
```
### Content
**Rewrite the services**
```text
My services are: [LIST]. Rewrite the entries in src/content/services/english/, following the
frontmatter of service-1.mdx (title, description, customSlug, image, imagePosition, icon,
image3, weight, draft). Replace the placeholder body text of each one. Keep every key and use
image and icon paths that already exist. Mark entries I don't need as draft: true. Then update
src/content/sections/english/our-services.md so the section text matches, and do the french and
arabic folders.
```
**Write case studies**
```text
Write case studies for these projects: [FOR EACH: CLIENT (only if I may name them), INDUSTRY,
PROBLEM, WHAT WE DID, RESULTS I CAN BACK UP]. The entries are the files in
src/content/case-studies/english/. Follow the frontmatter of an existing entry and keep every
key. Use only the results I gave you: do not invent percentages or figures. Then add the french
and arabic versions.
```
**Write the team list**
```text
Replace the sample team in the list in src/content/team/english/-index.md with: [FOR EACH
PERSON: NAME, ROLE, SHORT BIO, SOCIAL LINKS]. Keep the file's structure and keys, and use image
paths under /images/team/. Tell me which image files to add. Then do the french and arabic
versions.
```
**Write testimonials**
```text
Here are my real customer quotes: [FOR EACH: QUOTE, NAME, ROLE, COMPANY]. Put them in the list in
src/content/testimonial/english/-index.md and in the testimonial section files
(src/content/sections/english/testimonial-section.md and its Two and Three variants if I use
them). Use only the quotes I gave you, keep the file structure, and if I gave fewer than the
sample has, reduce the list rather than inventing more. Then do french and arabic.
```
**Write the FAQ**
```text
Replace the questions in src/content/faq/english/-index.md and
src/content/sections/english/faq-section.md with 10 questions a prospective client would ask,
with short, direct answers. Keep the structure and keys. Then translate them into the french and
arabic versions.
```
**Write pricing packages**
```text
Update the packages in src/content/sections/english/pricing-section.md to: [PACKAGE NAME, PRICE,
3-6 FEATURES for each]. Keep the file's structure, the button shape, and the options documented
in the comments, and mark [PACKAGE] as the featured one. Then copy the same numbers into the
french and arabic versions and translate only the text.
```
**Write a blog post**
```text
Write a blog post titled "[TITLE]" about [TOPIC], around 800 words. Create
src/content/blog/english/[slug].mdx with the same frontmatter fields as the other posts in that
folder. Use an existing image path and an existing author from src/content/author/english/. Use
## headings, and the MDX shortcodes from src/lib/shortcodes.ts where they help. Add the french
and arabic versions.
```
**Set your business details**
```text
My details are: address [ADDRESS], phone [PHONE], email [EMAIL]. Put them in [contact] in
src/config/config.toml, update the labels in contactInfo and the text in footerBlock in every
src/i18n/.json, and update src/content/sections/english/office-locations.md and its
french and arabic copies. Also update the social links in src/config/social.json ([LIST OF URLS])
and set "enable": false on the networks I don't use.
```
**Add a legal or text page**
```text
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 the
french and arabic versions. [page].astro renders it, so no route file is needed. Add it to a
footer column in every src/config/menu..json.
```
### Navigation And Pages
**Clean up the menus**
```text
In every src/config/menu..json: keep only links to the pages I use ([LIST]), and set
"enable": false on the rest in headerPrimary, topbar, and footer. Keep the JSON shape, the weight
values, and the same items in every language. Then check the header on desktop, with the
keyboard, and in the mobile menu.
```
**Build a mega menu**
```text
Turn the "[MENU NAME]" item in headerPrimary into a mega menu in every
src/config/menu..json. Use hasMegaMenu: true with menus as groups of
{ enable, name, description, icon, url, weight }, following the shape documented in AGENTS.md
under "Menus and Mega Menu". Note that mega menu links show their name on desktop and their icon
on mobile, and description is stored but not shown. Add the cta card with [DETAILS] and the
bottom bar with [TEXT, LABEL, URL]; the bar also shows the phone from [contact] in config.toml.
```
**Add a page made of existing sections**
```text
Create a page at /[slug]/ with these sections: [WhoWeAre, NumbersStats, TestimonialSection,
GetInTouch]. Follow the "Add a new page" skill in SKILLS.md: copy src/pages/[...lang]/about.astro,
keep its getStaticPaths, and compose it from the section components. Put the page's own copy in a
new content file and pass it with the content prop where a section needs page-specific values.
Add "[slug]" to headerPrimary in every src/config/menu..json, then run
npm run astro-check.
```
**Remove pages I don't need**
```text
I don't need these pages: [LIST, for example /faq/, /pricing/, /team/]. For each one, delete its
route file or folder in src/pages/[...lang]/ and its content folder in src/content/, remove it
from src/lib/utils/aiContent.ts if it is listed there, then remove every link to it from each
src/config/menu..json and from content files (search for the URL). Run
npm run astro-check and npm run build, and fix anything they report.
```
### Languages
**Use English only**
```text
I only need English. Set enable = false under [settings.multilingual] in src/config/config.toml.
Don't delete any files yet. Then tell me exactly what npm run toml:watch and
npm run remove-multilingual would do, and which lines I should remove from netlify.toml.
```
**Add a language**
```text
Add [LANGUAGE] (code "[xx]", folder "[name]", locale "[xx-XX]", social locale "[xx_XX]") and keep
the other languages. Follow the "Add or remove a language" skill in SKILLS.md: run
npm run generate-multilingual-content with those values, add a /[xx]/* block to netlify.toml, and
add a font entry to src/config/fonts.json if the script needs its own font. Then translate the
copied content folders, src/config/menu.[xx].json, and src/i18n/[xx].json, keeping every key,
icon name, URL, and number. Remember that a single entry such as a post with no file in the new
language has no URL there.
```
**Improve the Arabic or French translation**
```text
The [Arabic | French] content is machine translated. Review src/content/[FOLDER]/
[arabic | french] and src/i18n/[ar | fr].json and rewrite the text so it reads naturally. Keep every key,
number, URL, and icon name exactly as it is, and don't change the English files. For Arabic, keep
numbers, emails, and URLs left to right.
```
### Forms, SEO, And Launch
**Connect the contact form**
```text
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 next to them. Don't change the form fields. Tell me where the status messages live in
src/i18n/.json.
```
**Change the contact form fields**
```text
The contact form should ask for: [LIST OF FIELDS]. Edit form.inputs in
src/content/sections/english/contact-section.md, following contactFormSchema and
inputFieldSchema, and make the same change in the french and arabic copies. Don't edit
widgets/ContactForm.astro. Keep the existing field shape and the required flags.
```
**Turn on blog comments**
```text
Turn on the blog comment form. Following AGENTS.md under "Forms": in
src/layouts/components/widgets/BlogDetails.astro, import
src/layouts/components/sections/BlogCommentSection.astro and take BlogCommentSection out of the
HTML comment. It posts to contactFormAction, so tell me what that means for where comments
arrive. Then run npm run astro-check.
```
**Write SEO descriptions**
```text
For each page's -index.md in src/content/*/english/ and each file in src/content/pages/english/,
write a metaDescription of 140-160 characters based on that page's real content. Only add or
change metaDescription. Then do the french and arabic versions.
```
**Pre-launch review**
```text
Review this site before launch and list what is still demo content. Check: baseUrl in [site] in
src/config/config.toml (it ships pointing at the theme demo and the build warns about it),
contactFormAction, formAction under [settings.subscription], [contact], contactInfo and
footerBlock in every src/i18n/.json, social links in src/config/social.json, every
price in src/content/sections/*/pricing-section.md, the placeholder bodies in
src/content/services/ and src/content/case-studies/, the sample team in src/content/team/, the
sample quotes in src/content/testimonial/, the legal pages in src/content/pages/, any "#" or
example.com links in the menus and content, and any remaining "Lumio" in visible text. Also
confirm PUBLIC_DEMO_MODE is not set. Don't change files: list the file and the line for each item.
```
### Fix Problems
**Explain and fix an error**
```text
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**
```text
I changed [WHAT] in [FILE] but the page [URL] still shows the old version. Find where that page
gets this text: check the route in src/pages/[...lang]/, the content prop it passes, and the
section file in src/content/sections/english/. If the field is in pages, services, blog,
case-studies, team, or testimonial, also check whether src/content.config.ts lists it, because
unknown keys are dropped. Tell me which one wins and why. Don't change anything yet.
```
**Fix the Arabic layout**
```text
On [PAGE] at /ar/, [WHAT LOOKS WRONG]. Follow the RTL Rules in AGENTS.md: replace physical
classes with logical ones, add rtl: handling for translate-x, transform origins, and gradients
(AOS slide mirrors are in src/styles/rtl-theme.css), and add any direction-bearing icon to the
rtlFlipIcons list in src/layouts/helpers/Icons.astro rather than at the call site. Then tell me
what to check at /ar/.
```