Prompt Library
Skill level: Beginner
Copy a prompt, replace the parts in [BRACKETS], and send it to your assistant. Each prompt names the Veltro 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/banner.md, and src/enum.ts.Summarize in 10 bullet points how this Astro theme is organized: where text lives, how a pagepicks its sections, when a route's content prop overrides a section file, why the blocks insrc/content/homepage/ currently do nothing, where the card layout values come from, how theheader options work, and which collections npm run astro-check actually validates. Don't changeany 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]- Industries: [LIST]- Tone: direct, concrete, no buzzwords.Never invent client names, testimonials, case-study results, awards, certifications, 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
Change the brand from "Veltro" to "[NAME]". In src/config/config.toml update [site] title,description, tagline, and logoText, and [seo] author. Then check `seo` in everysrc/i18n/<language>.json, and search src/content and src/config for any remaining "Veltro" invisible text and replace it. Don't rename files or code identifiers.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-primary-soft, --color-border-primary,--color-theme-dark, and --color-theme-light to match. Veltro's primary is a pale green usedbehind dark text, so if my color is dark, tell me which text tokens have to flip and keep everypair at 4.5:1 or better. Don't add arbitrary color values anywhere else. List the values youchose.Change the fonts
Replace Inter with [GOOGLE FONT] for --font-primary and Space Grotesk with [GOOGLE FONT] for--font-secondary in src/config/fonts.json. Keep Funnel Display for --font-ternary unless I sayotherwise, and keep the IBM Plex Sans Arabic entry (loaded only on Arabic pages). Keep thecssVariable names, the weights, and the fallbacks. Don't edit any CSS file. Remind me to restartnpm run dev.Use my logo
I added my logo at src/assets/images/[FILE].svg and a light version atsrc/assets/images/[FILE]-light.svg. In src/config/config.toml set [site] logo (header) andlogoLight (footer) to those paths, adjust logoWidth and logoHeight to keep their proportions, andset logoText to [NAME OR ""]. Also set image under [site.favicon] to the main file, and tell meto run npm run generate-favicons.Homepages, Headers, And Sections
Pick one homepage and drop the other
I want the second homepage as my main homepage. Replace the sections ofsrc/pages/[...lang]/index.astro with the ones in src/pages/[...lang]/home-two.astro, and copy thefrontmatter of src/content/homepage/english/home-two.md intosrc/content/homepage/english/-index.md (same for french and arabic). Keep the Base props thathome-two uses. Then delete the other homepage route and its content file, and remove it from theHome menu in every src/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. Its copy comes from the section files insrc/content/sections/english/, because the homepage routes don't pass any frontmatter blocks.Keep every key, option, icon name, image path, and the number of items in each list. Only changetext values. Then write the french and arabic versions, with identical keys. Tell me which otherpages use the same section files, since editing them changes those pages too.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.Change a section on one page only
On [PAGE ROUTE in src/pages/[...lang]/], change [WHAT] for that page only. Pass a content prop tothat section in the route, either from a block in the page's own content file (as faq.astro doeswith faqSection) or inline (as about.astro does with TeamSection). Leave the shared file insrc/content/sections/english/ alone, and make sure any new block name is declared insrc/sections.schema.ts. Do the same for french and arabic.Change a card layout
Change the [services | blog | portfolio | testimonial | industries] card layout to "[VALUE]". Useonly a value from src/enum.ts for that card, not the comment next to the option, which is out ofdate in some files. Set options.layout in the matching section file insrc/content/sections/english/, or in the collection's -index.md if it is a list page. Make thesame change in the french and arabic copies, then run npm run astro-check.Change the header on a page
On [PAGE ROUTE in src/pages/[...lang]/], make the header [sticky | fixed | static], [with | without]a border on scroll, and [hide | keep] the offcanvas menu. Set headerPosition,headerBorderOnScroll, and hideOffcanvas on Base in that route file only. Don't changeBase.astro or Header.astro.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, footer, and footerLegal. The demo menu nests fivelevels deep under Pages > Multi Level Menu: flatten it to [WHAT I WANT]. Keep the JSON shape, theweight values, 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". Add the cta card with [DETAILS] and the bottom bar with[TEXT, LABEL, URL], or set their enable to false.Edit the side menu
The contact panel behind the header's menu icon (header/SideMenu.astro) should show: [WHAT IWANT]. Its labels come from sideMenu in src/i18n/<language>.json and the contact details from[settings.contactInfo]. Update those, in every language, rather than editing the component. If Idon't want the panel at all, tell me which Base prop hides it.Add a page made of existing sections
Create a page at /[slug]/ with these sections: [AboutCompanySection, ProcessSection,TestimonialSection, CallToAction]. Follow the "Add a new page" skill in SKILLS.md: copysrc/pages/[...lang]/about.astro, keep its getStaticPaths, and compose it from the sectioncomponents. Where the page needs its own copy, pass a content prop, with the block declared insrc/sections.schema.ts. Add "[slug]" to headerPrimary in every src/config/menu.<language>.json,then run npm run astro-check.Remove pages I don’t need
I don't need these pages: [LIST, for example /awards/, /industries/, /careers/]. 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 itfrom each src/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, number, and customSlug.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 for a technicalaudience. Keep every key, number, URL, icon name, and customSlug exactly as it is, and don'tchange the English files. For Arabic, keep numbers, emails, and URLs left to right.Forms, SEO, And Launch
Connect the contact form
contactFormAction in src/config/config.toml is empty, so the form sends nothing today. Connect itto [Formspree with form ID xxxx | formsubmit.co with [EMAIL] | Netlify Forms], settingcontactFormAction and contactFormProvider following the comment next to them. Don't change theform fields.Change the contact form fields
The contact form should ask for: [LIST OF FIELDS]. Edit the form block insrc/content/contact/english/-index.md, following contactFormSchema, and make the same change inthe french and arabic copies. Don't edit widgets/ContactForm.astro. Keep the existing field shapeand the required flags.Connect the newsletter form
formAction under [settings.subscription] in src/config/config.toml is empty. Set it to [MYMAILCHIMP URL] and tell me where the form's labels live in src/i18n/<language>.json, so I cancheck them in every language.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 as a pages.dev URL), contactFormAction and formAction under[settings.subscription] (both ship empty), [settings.contactInfo], the offices insrc/content/contact/*/-index.md, social links in src/config/social.json, every price insrc/content/sections/*/pricing-section.md, the sample work in src/content/portfolio/ andsrc/content/case-studies/, the invented awards in src/content/awards/, the sample team insrc/content/team/, the sample roles in src/content/careers/, the sample quotes insrc/content/testimonial/, the legal pages in src/content/pages/, any "#" or example.com links inthe menus and content, and any remaining "Veltro" in visible text. Don't change files: list thefile 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 section file in src/content/sections/english/, and whether the route insrc/pages/[...lang]/ passes a content prop that overrides it. If I edited a block insrc/content/homepage/, check whether the route passes it at all. Also check whether the key isdeclared in a schema, because undeclared keys are dropped. Tell me which one wins and why. Don'tchange 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,and add any direction-bearing icon to the rtlFlipIcons list insrc/layouts/helpers/Icons.astro rather than at the call site. Then tell me what to check at /ar/.