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
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, andsrc/content/homepage/english/-index.md. Summarize in 10 bullet points how this Astro theme isorganized: where text lives, how a page picks its sections, how the three homepages differ, how apage overrides a section with the content prop, how a page picks its header and footer, and whichcollections npm run astro-check actually validates. Don't change any files yet.Describe your company once, then reuse it
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. Ifyou 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
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 everysrc/i18n/<language>.json for a per-language tagline and description, and search src/content andsrc/config for any remaining "Lumio" in visible text and replace it. Don't rename files or codeidentifiers.Apply brand colors
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 thetypography or breakpoint tokens. List the values you chose.Change the fonts
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 loadedonly on Arabic pages). Don't edit any CSS file. Remind me to restart npm run dev.Use my logo
I added my logo at src/assets/images/[FILE].png and a white version atsrc/assets/images/[FILE]-white.png. In src/config/config.toml set [site] logo and logoWhite tothose 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 runnpm run generate-favicons (it needs npm run toml:watch to have run).Homepages, Headers, And Sections
Pick one homepage and drop the others
I want the [second | third] homepage as my main homepage. Replace the sections ofsrc/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 intosrc/content/homepage/english/-index.md (same for french and arabic). Then delete the otherhomepage routes and their content files, and remove them from the Home menu in everysrc/config/menu.<language>.json. Run npm run astro-check.Rewrite the homepage for my company
Rewrite the English homepage text for my company. The homepage issrc/pages/[...lang]/index.astro. Edit the section files it uses insrc/content/sections/english/ (the homepage copy lives there, not insrc/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 writethe french and arabic versions, with identical keys.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, and remove imports that areno longer used. Then run npm run astro-check.Switch a section variant
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/<language>/, so import the new component,render it with the same props, and tell me which content file I now need to fill in everylanguage. Then run npm run astro-check.Change the header or footer on a page
On [PAGE ROUTE in src/pages/[...lang]/], use header "[one | two | three]" and footer "[one |two]". Set the header and footer props on <Base> in that route file only. Don't changeBase.astro, whose defaults are header one and footer two.Change a section on one page only
On [PAGE, for example /about/], change [WHAT] for that page only. Put the values in that page'sown content file (src/content/[about | contact]/english/-index.md) and pass them to the sectionwith the content prop in src/pages/[...lang]/[PAGE].astro, the way the other routes do. Leave thefile in src/content/sections/english/ alone so other pages keep the current text. Do the same forfrench and arabic.Content
Navigation And Pages
Clean up the menus
In every src/config/menu.<language>.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 weightvalues, and the same items in every language. Then check the header on desktop, with thekeyboard, and in the mobile menu.Build a mega menu
Turn the "[MENU NAME]" item in headerPrimary into a mega menu in everysrc/config/menu.<language>.json. Use hasMegaMenu: true with menus as groups of{ enable, name, description, icon, url, weight }, following the shape documented in AGENTS.mdunder "Menus and Mega Menu". Note that mega menu links show their name on desktop and their iconon mobile, and description is stored but not shown. Add the cta card with [DETAILS] and thebottom bar with [TEXT, LABEL, URL]; the bar also shows the phone from [contact] in config.toml.Add a page made of existing sections
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 anew 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.<language>.json, then runnpm run astro-check.Remove pages I don’t need
I don't need these pages: [LIST, for example /faq/, /pricing/, /team/]. For each one, delete itsroute file or folder in src/pages/[...lang]/ and its content folder in src/content/, remove itfrom src/lib/utils/aiContent.ts if it is listed there, then remove every link to it from eachsrc/config/menu.<language>.json and from content files (search for the URL). Runnpm run astro-check and npm run build, and fix anything they report.Languages
Use English only
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 andnpm run remove-multilingual would do, and which lines I should remove from netlify.toml.Add a language
Add [LANGUAGE] (code "[xx]", folder "[name]", locale "[xx-XX]", social locale "[xx_XX]") and keepthe other languages. Follow the "Add or remove a language" skill in SKILLS.md: runnpm run generate-multilingual-content with those values, add a /[xx]/* block to netlify.toml, andadd a font entry to src/config/fonts.json if the script needs its own font. Then translate thecopied 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 newlanguage has no URL there.Improve the Arabic or French translation
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, keepnumbers, emails, and URLs left to right.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 next to them. Don't change the form fields. Tell me where the status messages live insrc/i18n/<language>.json.Change the contact form fields
The contact form should ask for: [LIST OF FIELDS]. Edit form.inputs insrc/content/sections/english/contact-section.md, following contactFormSchema andinputFieldSchema, and make the same change in the french and arabic copies. Don't editwidgets/ContactForm.astro. Keep the existing field shape and the required flags.Turn on blog comments
Turn on the blog comment form. Following AGENTS.md under "Forms": insrc/layouts/components/widgets/BlogDetails.astro, importsrc/layouts/components/sections/BlogCommentSection.astro and take BlogCommentSection out of theHTML comment. It posts to contactFormAction, so tell me what that means for where commentsarrive. Then run npm run astro-check.Write SEO descriptions
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 orchange metaDescription. Then do the french and arabic versions.Pre-launch review
Review this site before launch and list what is still demo content. Check: baseUrl in [site] insrc/config/config.toml (it ships pointing at the theme demo and the build warns about it),contactFormAction, formAction under [settings.subscription], [contact], contactInfo andfooterBlock in every src/i18n/<language>.json, social links in src/config/social.json, everyprice in src/content/sections/*/pricing-section.md, the placeholder bodies insrc/content/services/ and src/content/case-studies/, the sample team in src/content/team/, thesample quotes in src/content/testimonial/, the legal pages in src/content/pages/, any "#" orexample.com links in the menus and content, and any remaining "Lumio" in visible text. Alsoconfirm 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
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 unrelatedfiles.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 the route in src/pages/[...lang]/, the content prop it passes, and thesection 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, becauseunknown keys are dropped. Tell me which one wins and why. Don't change anything yet.Fix the Arabic layout
On [PAGE] at /ar/, [WHAT LOOKS WRONG]. Follow the RTL Rules in AGENTS.md: replace physicalclasses 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 thertlFlipIcons list in src/layouts/helpers/Icons.astro rather than at the call site. Then tell mewhat to check at /ar/.