# 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 Upstart 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, and src/content/sections/english/home-banner.md. Summarize in 10
bullet points how this Astro theme is organized: where text lives, how a page picks its sections,
how a named block becomes a section's content prop, which sections ignore enable: false, where
the layout options live, and which collections npm run astro-check actually validates. Don't
change any files yet.
```

**Describe your product once, then reuse it**

```text
Here is my product. Use it for every copywriting request in this conversation:
- Name: [PRODUCT NAME]
- What it does: [ONE SENTENCE]
- Who it is for: [AUDIENCE]
- Main features: [3 TO 6 FEATURES]
- Tone: short, clear, confident. No hype words.
Never invent customer names, testimonials, user counts, uptime figures, funding, or
certifications. 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 "Upstart" to "[NAME]". In src/config/config.toml update [site] title,
description, tagline, and logoText, and [seo] author. Then set common.siteTagline and
common.siteDescription in every src/i18n/<language>.json, and search src/content and src/config
for any remaining "Upstart" 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-dark, and
--color-border-light to match. This is a dark theme: --color-body is near-black and
--color-text-default is light, so check that body text, muted text, and borders still reach at
least 4.5:1 contrast on the new background. Don't add arbitrary color values anywhere else. List
the values you chose.
```

**Change the fonts**

```text
Replace Satoshi with [GOOGLE FONT] for --font-primary in src/config/fonts.json. Satoshi's entry
has "provider": "local", so change the provider to "google" and set the right weights and
subsets. Keep Syne for --font-secondary, Instrument Serif for --font-tertiary, and the IBM Plex
Sans Arabic entry (loaded only on Arabic pages). Tell me which local font files under
src/assets/ are now unused. 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. In src/config/config.toml set [site] logo to
"/images/[FILE].svg", adjust logoWidth and logoHeight to keep its proportions, set logoText to
[NAME OR ""], and tell me what logoHoverAnimation does so I can decide. Also set image under
[site.favicon] to the same file, and tell me to run npm run generate-favicons.
```

### Homepage And Sections
**Rewrite the homepage for my product**

```text
Rewrite the English homepage text for my product. The homepage is
src/pages/[...lang]/index.astro. Edit the section files it uses in
src/content/sections/english/ 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, and keep any **bold** markers the layout relies on. 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. Note that HomeBanner and IntegrationSection ignore enable: false, so taking them
out of the route is the only way to hide them. 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. Add a named block to
that page's content file and pass it to the section as the content prop in the route, the way
index.astro passes faqSection and features.astro passes why-us-two.md to WhyUs. Leave the shared
section file alone. Do the same for french and arabic.
```

**Switch the "why us" layout or the pricing table**

```text
Set layoutType to "[creative | modern]" in src/content/sections/english/why-us.md and
why-us-two.md, and their french and arabic copies. For the pricing page, the layout prop of
PricingSection in src/pages/[...lang]/pricing.astro chooses "regular" or "comparison": set it to
"[VALUE]". Then run npm run astro-check.
```

**Hide a section everywhere**

```text
Hide the [SECTION] everywhere. Set enable: false in src/content/sections/english/[FILE].md and in
the french and arabic copies. If it is HomeBanner or IntegrationSection, tell me instead which
route to remove it from, because those ignore enable.
```

### Content
**Write pricing plans**

```text
Update the plans in src/content/sections/english/pricing-section.md to: [PLAN NAME, MONTHLY
PRICE, YEARLY PRICE, 3-6 FEATURES for each plan]. Keep the file's structure, the plans toggle
list, and the button shape, and mark [PLAN] as featured. The plan type labels ("Monthly",
"Yearly") must be spelled exactly the same in the toggle list and in every plan's price entries.
Update the comparison block lower in the same file so it matches the plans. Then copy the same
numbers into the french and arabic versions and translate only the text.
```

**Rewrite the features**

```text
My product has these features: [LIST]. Rewrite the English text in
src/content/sections/english/features-section.md, features-section-two.md, why-us.md, and
why-us-two.md for them. Keep every key, option, icon name, and image path, and keep the number of
items in each list. Then do the french and arabic folders.
```

**Add an integration**

```text
Add an integration for [NAME] to src/content/integration/english/[slug].mdx, copying the
frontmatter of src/content/integration/english/discord.mdx. Give it a category that already
exists in that folder, because an integration with no category is left out of the lists on
/integration/. Keep the MDX shortcode tags in the body. Tell me which logo file to add. Only add
integrations I actually have. Then add the french and arabic versions.
```

**Add a changelog entry**

```text
Add an entry for [WHAT SHIPPED] on [DATE], version [VERSION], to
src/content/changelog/english/, following the shape of the existing entries and keeping every
key. Keep it under 150 words. Then add the french and arabic versions.
```

**Write the FAQ**

```text
Replace the questions in src/content/faq/english/-index.md with 10 questions a buyer of my
product would ask, with short, direct answers. Keep the file's structure, keys, and the
showCategories option. Remember that FaqSection.astro reads this file, not a section file. Then
translate them into the french and arabic versions.
```

**Write testimonials**

```text
Here are my real customer quotes: [FOR EACH: QUOTE, NAME, ROLE, COMPANY]. Put them in
src/content/sections/english/testimonial.md. 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 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 (a new post needs only a title, but match the existing ones). Use an existing image path
and an existing author from src/content/author/english/. Use ## headings and the MDX shortcodes
listed in src/lib/shortcodes.ts, such as <Notice> and <Tabs>; src/content/pages/english/
elements.mdx shows them all. Add the french and arabic versions.
```

**Set your business details**

```text
My details are: address [ADDRESS], phone [PHONE], email [EMAIL]. Upstart uses them in two places:
[settings.contactInfo] in src/config/config.toml (used by llms.txt and the mega menu bar) and
src/content/sections/<language>/contact-section.md (shown on the contact page). Update both, in
every language. 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
footerMenuLegal 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, footerMenuQuickLink, footerMenuResources,
footerMenuLegal, and footerMenu. Keep the JSON shape, the weight values (Navbar sorts by them),
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". Each icon is an SVG path such as /images/icons/svg/focus.svg, and
only the mobile menu shows the icons. Add the cta card with [DETAILS] and the bottom bar with
[TEXT, LABEL, URL]; the bar also shows the contact details from [settings.contactInfo].
```

**Add a page made of existing sections**

```text
Create a page at /[slug]/ with these sections: [WhyUs, Customers, TestimonialSection,
CallToAction]. Follow the "Add a new page" skill in SKILLS.md: copy src/pages/[...lang]/
features.astro, keep its getStaticPaths, and compose it from the section components, passing
headingTag="h1" to the section that opens the page. 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.<language>.json, then run npm run astro-check.
```

**Remove pages I don't need**

```text
I don't need these pages: [LIST, for example /changelog/, /integration/, /faq/]. 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 toml:watch first (the language scripts need the generated config), then
npm run generate-multilingual-content with those values, and add a /[xx]/* block to
netlify.toml. 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 MDX shortcode tag.
```

**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 SaaS
audience. Keep every key, number, URL, icon name, and MDX shortcode tag 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
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 form.inputs in
src/content/sections/english/contact-section.md, and make the same change in the french and
arabic copies. Don't write new form markup and don't edit ContactSection.astro; validation and
sending stay in src/lib/utils/FormHandle.ts. Keep the existing field shape and required flags.
```

**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, formAction under
[settings.subscription], [settings.contactInfo], the contact details in
src/content/sections/*/contact-section.md, social links in src/config/social.json, every price
and the comparison block in src/content/sections/*/pricing-section.md, the sample integrations in
src/content/integration/, the sample quotes in src/content/sections/*/testimonial.md, the
changelog entries, the legal pages in src/content/pages/, any "#" or example.com links in the
menus and content, and any remaining "Upstart" 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 route in src/pages/[...lang]/, the named block it passes as the content
prop, and the section file in src/content/sections/english/. Remember that FaqSection.astro reads
src/content/faq/<language>/-index.md instead of a section file. 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/.
```