# 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 Veltro files involved, so it works in AI editors and, with the file 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/sections/english/banner.md, and src/enum.ts.
Summarize in 10 bullet points how this Astro theme is organized: where text lives, how a page
picks its sections, when a route's content prop overrides a section file, why the blocks in
src/content/homepage/ currently do nothing, where the card layout values come from, how the
header options work, 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]
- 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**

```text
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 every
src/i18n/<language>.json, and search src/content and src/config for any remaining "Veltro" 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-primary-soft, --color-border-primary,
--color-theme-dark, and --color-theme-light to match. Veltro's primary is a pale green used
behind dark text, so if my color is dark, tell me which text tokens have to flip and keep every
pair at 4.5:1 or better. Don't add arbitrary color values anywhere else. List the values you
chose.
```

**Change the fonts**

```text
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 say
otherwise, and keep the IBM Plex Sans Arabic entry (loaded only on Arabic pages). Keep the
cssVariable names, the weights, and the fallbacks. 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].svg and a light version at
src/assets/images/[FILE]-light.svg. In src/config/config.toml set [site] logo (header) and
logoLight (footer) 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.
```

### Homepages, Headers, And Sections
**Pick one homepage and drop the other**

```text
I want the second homepage as my main homepage. Replace the sections of
src/pages/[...lang]/index.astro with the ones in src/pages/[...lang]/home-two.astro, and copy the
frontmatter of src/content/homepage/english/home-two.md into
src/content/homepage/english/-index.md (same for french and arabic). Keep the Base props that
home-two uses. Then delete the other homepage route and its content file, and remove it from the
Home menu in every src/config/menu.<language>.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. Its copy comes from the section files in
src/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 change
text values. Then write the french and arabic versions, with identical keys. Tell me which other
pages use the same section files, since editing them changes those pages too.
```

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

**Change a section on one page only**

```text
On [PAGE ROUTE in src/pages/[...lang]/], change [WHAT] for that page only. Pass a content prop to
that section in the route, either from a block in the page's own content file (as faq.astro does
with faqSection) or inline (as about.astro does with TeamSection). Leave the shared file in
src/content/sections/english/ alone, and make sure any new block name is declared in
src/sections.schema.ts. Do the same for french and arabic.
```

**Change a card layout**

```text
Change the [services | blog | portfolio | testimonial | industries] card layout to "[VALUE]". Use
only a value from src/enum.ts for that card, not the comment next to the option, which is out of
date in some files. Set options.layout in the matching section file in
src/content/sections/english/, or in the collection's -index.md if it is a list page. Make the
same change in the french and arabic copies, then run npm run astro-check.
```

**Change the header on a page**

```text
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 change
Base.astro or Header.astro.
```

### Content
**Rewrite the services**

```text
My services are: [LIST]. Rewrite the entries in src/content/services/english/, following the
frontmatter of service-01.mdx (title, customSlug, description, date, icon, image, overview and
the other blocks) and replacing the body text of each one. Keep every key, keep customSlug the
same in every language, and use icon and image paths that already exist. Mark entries I don't
need as draft: true. Then update src/content/sections/english/services-section.md and
services-section-two.md so the section text matches, and do the french and arabic folders.
```

**Rewrite the industries**

```text
We serve these industries: [LIST]. Rewrite the entries in src/content/industries/english/,
following the frontmatter of industry-1.mdx and keeping every key. Then update
src/content/sections/english/industries-section.md, and do the french and arabic folders.
```

**Replace the portfolio and case studies with my work**

```text
Replace the sample work with mine: [FOR EACH: TITLE, CLIENT (only if I may name them), YEAR, WHAT
WE BUILT, THE OUTCOME I CAN BACK UP]. Put short pieces in src/content/portfolio/english/ (follow
01.mdx) and the detailed ones in src/content/case-studies/english/ (follow case-study-1.mdx).
Keep every key and the same customSlug in every language. Use only the outcomes I gave you: do not
invent percentages or figures. Tell me which image files to add. Mark entries I don't need as
draft: true. Then add the french and arabic versions.
```

**Write open roles**

```text
Add these open roles to src/content/careers/english/: [FOR EACH: TITLE, LOCATION, TYPE,
RESPONSIBILITIES, REQUIREMENTS]. Follow the frontmatter of career-1.md and keep every key. Update
src/content/sections/english/join-team-section.md and work-with-us-section.md so the section text
matches. Mark roles I don't have as draft: true. Then add the french and arabic versions.
```

**Write the team**

```text
Replace the sample team in src/content/team/english/ with: [FOR EACH PERSON: NAME, ROLE, SHORT
BIO, SOCIAL LINKS]. Follow the frontmatter of team-1.md and keep every key. Use image paths under
/images/team/ and tell me which image files to add. Update
src/content/sections/english/team-section.md so the section text matches, and note that
about.astro passes TeamSection its content inline, so check that too. Then do the french and
arabic versions.
```

**Write testimonials**

```text
Here are my real client quotes: [FOR EACH: QUOTE, NAME, ROLE, COMPANY]. Put them in
src/content/testimonial/english/-index.md and in the testimonial section files
(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.
```

**Fix the awards list**

```text
The awards in src/content/awards/english/-index.md are invented. Replace them with the ones I
actually won: [LIST, with the year and who gave it], keeping the file's structure and keys. If I
have none, tell me how to take the awards page and award-section.md out of the site instead. Then
do the french and arabic versions.
```

**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 client would ask a software
company, 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 ITEMS INCLUDED 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 figures
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;
src/content/pages/english/components.mdx shows them. Add the french and arabic versions.
```

**Set your business details**

```text
My details are: [FOR EACH OFFICE: CITY, ADDRESS, PHONE, EMAIL]. Put the main phone and email in
[settings.contactInfo] in src/config/config.toml, and the offices in
src/content/contact/<language>/-index.md, in every language, keeping every key. 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
footerLegal in every src/config/menu.<language>.json.
```

### Navigation And Pages
**Clean up the menus**

```text
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 five
levels deep under Pages > Multi Level Menu: flatten it to [WHAT I WANT]. 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.<language>.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". Add the cta card with [DETAILS] and the bottom bar with
[TEXT, LABEL, URL], or set their enable to false.
```

**Edit the side menu**

```text
The contact panel behind the header's menu icon (header/SideMenu.astro) should show: [WHAT I
WANT]. 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 I
don't want the panel at all, tell me which Base prop hides it.
```

**Add a page made of existing sections**

```text
Create a page at /[slug]/ with these sections: [AboutCompanySection, ProcessSection,
TestimonialSection, CallToAction]. 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. Where the page needs its own copy, pass a content prop, with the block declared in
src/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**

```text
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 it
from each src/config/menu.<language>.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, number, and customSlug.
```

**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 for a technical
audience. Keep every key, number, URL, icon name, and customSlug 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
contactFormAction in src/config/config.toml is empty, so the form sends nothing today. Connect it
to [Formspree with form ID xxxx | formsubmit.co with [EMAIL] | Netlify Forms], setting
contactFormAction and contactFormProvider following the comment next to them. Don't change the
form fields.
```

**Change the contact form fields**

```text
The contact form should ask for: [LIST OF FIELDS]. Edit the form block in
src/content/contact/english/-index.md, following contactFormSchema, 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.
```

**Connect the newsletter form**

```text
formAction under [settings.subscription] in src/config/config.toml is empty. Set it to [MY
MAILCHIMP URL] and tell me where the form's labels live in src/i18n/<language>.json, so I can
check them in every language.
```

**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 as a pages.dev URL), contactFormAction and formAction under
[settings.subscription] (both ship empty), [settings.contactInfo], the offices in
src/content/contact/*/-index.md, social links in src/config/social.json, every price in
src/content/sections/*/pricing-section.md, the sample work in src/content/portfolio/ and
src/content/case-studies/, the invented awards in src/content/awards/, the sample team in
src/content/team/, the sample roles in src/content/careers/, 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 "Veltro" in visible text. 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 section file in src/content/sections/english/, and whether the route in
src/pages/[...lang]/ passes a content prop that overrides it. If I edited a block in
src/content/homepage/, check whether the route passes it at all. Also check whether the key is
declared in a schema, because undeclared 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,
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/.
```