# 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 Margo files involved, so it works in AI editors and, with the files 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/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 the
projects and services 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 yourself once, then reuse it**

```text
Here is my practice. Use it for every copywriting request in this conversation:
- Name: [YOUR NAME OR STUDIO NAME]
- What I make: [BRAND IDENTITY, PACKAGING, WEB DESIGN, PHOTOGRAPHY, ...]
- For whom: [SMALL MAKERS, RESTAURANTS, PUBLISHERS, ...]
- Where: [CITY, OR "REMOTE"]
- Facts you may use: [YEARS OF WORK, CLIENTS I MAY NAME, AWARDS, NUMBER OF PEOPLE]
- Tone: short, plain, first person [I / WE]. No hype words.
Never invent testimonials, client names, ratings, review counts, metrics, or prices. Confirm
with one line, and don't change any files yet.
```

### Identity And Brand
**Rename the site**

```text
My name (or studio name) is "[NAME]". In [site] of src/config/config.toml, set title and
logoText to it, and rewrite tagline (under about 55 characters) and description for my work.
In [seo], set author to "[NAME]" and rewrite keywords. In [seo.identity], set type to
"[Person | Organization]", and jobTitle to "[JOB TITLE]" if it is a Person. In each file in
src/i18n/ that has a site.tagline value, translate my new tagline. Then search src/content
(every language folder) for the sample names in visible text and list them for me. Don't
rename files, ids, or code identifiers.
```

**Apply my brand colors**

```text
My brand colors are: text and buttons [HEX], background [HEX]. In src/styles/theme.css, set
--color-ink to my text color and --color-paper to my background, and adjust --color-stone,
--color-ash, and --color-charcoal so small grey text keeps at least 4.5:1 contrast on the
background. In the :root.dark block, set versions that read on a dark background. Keep every
variable name. Tell me the values you chose and their contrast ratios.
```

**Change the fonts**

```text
Replace Hanken Grotesk (--font-primary, headings and text) with [GOOGLE FONT] and Newsreader
(--font-accent, the italic accent words) with [GOOGLE FONT]. Edit src/config/fonts.json only:
keep the cssVariable values, choose weights the new fonts have that match the current ones, and
keep the fallback. Leave IBM Plex Sans Arabic (--font-arabic, Arabic pages) as it is. Then tell
me to restart npm run dev.
```

**Use my logo**

```text
I put my logo at src/assets/images/[FILE].svg. In [site] of src/config/config.toml set
logo = "/images/[FILE].svg" and logoWidth / logoHeight to match its proportions. If the file
already contains my name, set logoText = "". Then set [site.favicon] image to
"/images/[SQUARE MARK FILE]" and tell me to run npm run generate-favicons and
npm run generate-og-image.
```

### Projects And Photo Series
**Add a case study**

```text
Add a project for [CLIENT]: [WHAT I DID, YEAR, MY ROLE, SERVICES, DURATION, RESULTS I CAN
SHARE, CLIENT QUOTE IF I HAVE PERMISSION]. Copy src/content/projects/english/ceramic-forms.md to
[slug].md and fill in title, description, client, year, role, services, categories, tags,
result, duration, metrics, quote, and information from my facts only. Remove metrics or quote
if I gave you none. I put the photos in src/assets/images/projects/[slug]/: set image and
imageAlt to cover.jpg, and build the images list from the other files, with type, src, alt,
caption, and size (full | half | third). Use only categories that the other projects use, or
tell me if I need a new one. Add the same file to the french/ and arabic/ folders, translated.
```

**Add a photo series**

```text
Add a photo series "[TITLE]", taken in [PLACE] in [YEAR]. Copy
src/content/projects/english/north-atlantic.md to [slug].md. My photos are in
src/assets/images/series/[slug]/ (cover.jpg and gallery-1.jpg to gallery-[N].jpg). Set image,
imageAlt, location, year, result, categories: ["Photography"], and list every photo in images.
Keep options: layout: "gallery". Write a short alt text for each photo from what I tell you:
[WHAT EACH PHOTO SHOWS]. Add the same file to the french/ and arabic/ folders, translated.
```

**Change the template of a project page**

```text
Show the project src/content/projects/english/[slug].md with the [default | gallery | split]
template: set options: layout to that value. Do the same in the french/ and arabic/ files of
that project. Tell me what changes on the page.
```

**Choose the projects on the homepage**

```text
On the main homepage, the hero shows four project cards from heroSection cards in
src/content/homepage/english/-index.md. Replace them with these project ids, in this order:
[ID, ID, ID, ID]. Use only ids of files in src/content/projects/english/. Make the same change
in the french/ and arabic/ -index.md files.
```

### Homepage And Layouts
**Change a section's layout**

```text
On [PAGE URL], switch the [SECTION] to the [LAYOUT] layout. Find the page's content file and
its named block for that section (or the section file in src/content/sections/english/ if the
page has no block), and set options.layout. Use only a value listed in the comment next to
layout:. Do the same in the french/ and arabic/ files.
```

**Switch the hero to the panel layout**

```text
On the main homepage, change heroSection options.layout from "masthead" to "panel" in
src/content/homepage/english/-index.md, and in the french/ and arabic/ -index.md files. Keep
every other key. Then tell me what to check on / at 375 px and 1280 px.
```

**Reorder or remove homepage sections**

```text
In src/pages/[...lang]/index.astro, move the <LayoutVariants section="[SECTION]" ... /> line
above the [SECTION] line and remove the [SECTION] line. Keep the <LayoutVariants> wrapper on
every section. Only edit the route file; don't delete content files.
```

**Use another homepage as the main one**

```text
I want the /home-[studio | photo]/ design as my main homepage. Replace the contents of
src/pages/[...lang]/index.astro with those of home-[NAME].astro, reading the "-index" entry
instead of "home-[NAME]". Copy all frontmatter of src/content/homepage/english/home-[NAME].md
into -index.md, and do the same in the french/ and arabic/ folders. Then delete the two other
homepage routes and their content files, and remove their links from the menu files in
src/config/. Run npm run astro-check.
```

**Change the header and footer layout**

```text
Set the site header to [pill | bar | overlay] and the footer to [wordmark | columns | email] in
[settings.layout] of src/config/config.toml. Then list every content file that sets its own
headerLayout or footerLayout in frontmatter, so I can decide whether to keep them.
```

### Content
**Rewrite the homepage for my practice**

```text
Rewrite the English text of the sections on the main homepage for my practice. The text lives
in the section files in src/content/sections/english/ (hero-section.md, projects-section.md,
services-section.md, stats-section.md, about-section.md, testimonials-section.md,
logos-section.md, pricing-section.md, faq-section.md, journal-section.md) and the named blocks
in src/content/homepage/english/-index.md. Keep every key, option, icon name, image path, and
the number of items in each list. Only change text values. Don't invent ratings, numbers,
client names, or quotes: keep the sample values and list them for me. Then write the same
changes in the french/ and arabic/ files.
```

**Add a service**

```text
Add a service "[NAME]". Copy src/content/services/english/brand-identity.md to [slug].md and
rewrite title, description, icon (a Lucide icon name), price, duration, deliverables, process,
faq, and related (ids of projects in src/content/projects/english/). Set weight to [N]. Use
only the prices and facts I give you: [FACTS]. Keep the image path and tell me which photo to
replace. Add the same file to the french/ and arabic/ folders, translated, and add a link to
the group of links in the Services mega menu ("menus") in each src/config/menu.<language>.json,
with a short translated description like the other links. Menu items show in file order.
```

**Update the testimonials**

```text
Here are real testimonials, shared with the clients' consent: [QUOTE, NAME, ROLE, COMPANY,
RATING]. Replace the items in src/content/sections/english/testimonials-section.md with them,
keeping the item fields (quote, emphasis, name, role, company, image, rating). Set image to ""
where I have no portrait. Then update the rating and label in proof to [MY RATING AND COUNT],
or tell me which sample numbers are still in the hero, testimonials, and call-to-action
section files. Do the same in the french/ and arabic/ files.
```

**Change the prices**

```text
Update the plans in src/content/sections/english/pricing-section.md with my prices: [PLAN
NAMES, MONTHLY PRICES, YEARLY PRICES, WHAT EACH INCLUDES]. Keep every key and the number of
plans. Write prices as the final text, for example "€3,600". Copy the same prices into the
french/ and arabic/ files. Then search src/content for other prices (the price of each service
in src/content/services/) and list them for me.
```

**Write the FAQ**

```text
Rewrite the questions in src/content/faq/english/-index.md for my practice: keep the groups
and write 3 to 5 questions per group with short, direct answers. Use only the facts and prices
I give you. Keep the file structure and keys. Then translate it into the french/ and arabic/
-index.md files.
```

**Write a journal post**

```text
Write a journal post titled "[TITLE]" about [TOPIC], around 800 words. Create
src/content/blog/english/[slug].mdx with the same frontmatter fields as
how-i-price-a-project.mdx (title, description, image, date [YYYY-MM-DD], author, categories,
tags, draft: false). The author must match a file in src/content/author/english/. Use ##
headings. Don't quote figures, clients, or prices I haven't given you.
```

**Add a team member**

```text
Add a team member: [NAME, ROLE, CITY, SHORT BIO, EMAIL IF PUBLIC]. Copy
src/content/team/english/elio-brask.md to a new file and fill in my details only (title,
description, image, profession, location, email, weight, social). Add the same file to the
french/ and arabic/ folders, translated. Set draft: true on the sample members I don't keep:
[LIST].
```

### Menus, Languages, And Launch
**Clean up the menus**

```text
In each src/config/menu.<language>.json: set "enable": false on the "Pages" item in
headerPrimary (it lists every demo page), and make the footer columns link only to pages I
keep: [LIST]. Keep the Legal column last. Point the Work dropdown and the Services mega menu at
my own projects and services, and set cta.project in Services to one of my project file names.
If I hide Pages, move its Search quick link ("action": "search" in bar.links) to the Services
bar. Keep the same structure in every file.
```

**Turn off one language**

```text
I don't need [LANGUAGE] yet. Add its code to disableLanguages in [settings.multilingual] of
src/config/config.toml, and tell me to restart npm run dev. Keep its files.
```

**Keep only English**

```text
I only need English. In [settings.multilingual] of src/config/config.toml set enable = false.
Tell me to run npm run dev once, then npm run remove-multilingual, which deletes the content
folders, menu files, and i18n files of every language except the default one, French and
Arabic included. Before that, list any translated text I might want to keep, and save a git
commit.
```

**Check the site before launch**

```text
Prepare my site for launch. In src/config/config.toml: set [site] baseUrl to "[URL]", check
that contactFormAction and the Mailchimp formAction in [settings.subscription] are no longer
placeholders, check the email and booking values in [settings.contactInfo], and keep
[settings.layoutSwitcher] enable = false. Then search src/content, src/config, and src/i18n
for "PLACEHOLDER", "example.com", and "555" and list every value I still have to replace,
grouped by file. Don't change them. Finally run npm run build and report the warnings.
```

**Fix an error**

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