# 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 Techbyte 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/hero-section.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, how a named block in a page's frontmatter overrides a section and why the
route has to pass it, where the card and section layout values come from, how a page picks its
header and footer layout, 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]
- Tone: direct, technical, no buzzwords.
Never invent client names, testimonials, project results, certifications, partner badges, uptime
figures, 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 "Techbyte" to "[NAME]". In src/config/config.toml update [site] title and
logoText, and [seo] author. Then set common.siteDescription and common.tagline in every
src/i18n/<language>.json, and search src/content and src/config for any remaining "Techbyte" 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-ink, --color-secondary,
--color-theme-light, and --color-theme-dark to match. The tokens are written in oklch(): convert
my hex values and keep that format. Keep at least 4.5:1 contrast for text on --color-body and on
--color-body-dark. Don't add arbitrary color values anywhere else. List the values you chose.
```

**Change the fonts**

```text
Replace Kanit with [GOOGLE FONT] for --font-primary and Syne with [GOOGLE FONT] for
--font-secondary in src/config/fonts.json. Keep the cssVariable names, the weights, the
fallbacks, and the IBM Plex Sans Arabic entry (it is loaded only on Arabic pages). Don't edit any
CSS file. Remind me to restart npm run dev, and tell me which headings to check at 375 px.
```

**Use my logo**

```text
I added my logo at src/assets/images/[FILE].png and a white version at
src/assets/images/[FILE]-white.png. In src/config/config.toml set [site] logo and logoAlternate
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, Layouts, 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
title and meta fields from src/content/homepage/english/home-two.md into
src/content/homepage/english/-index.md (same for french and arabic). Keep the headerLayout and
footerLayout 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, and its copy is in the section files in
src/content/sections/english/ (src/content/homepage/english/ holds only the title and meta). 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.
```

**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, for example /about/], change [WHAT] for that page only. Add or edit the matching named
block in that page's frontmatter in src/content/[about-us | pricing | faq | contact]/english/
-index.md, using a block name that exists in src/sections.schema.ts, and make sure the route in
src/pages/[...lang]/ passes that block to the section. Leave the file in
src/content/sections/english/ alone. Do the same for french and arabic.
```

**Change a card or section layout**

```text
Change the [services | projects | blog | features grid | testimonial] layout to "[VALUE]". Set
cardLayout (services, features, testimonial) or options.layout (blog sections and the blog list)
in the matching file in src/content/sections/english/, using only a value from src/enum.ts. Make
the same change in the french and arabic copies, then run npm run astro-check.
```

**Change the header or footer on a page**

```text
On [PAGE ROUTE in src/pages/[...lang]/], use headerLayout "[header-1 | header-2]" and
footerLayout "[footer-1 | footer-2]". Set those props on Base in that route file only. Note that
footer-1 also renders ContactSection above the footer. Don't change Base.astro, whose defaults
are header-1 and footer-2.
```

### 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, image, icon as a Lucide icon
name) and replacing the body text of each one. Keep every key and use 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.
```

**Replace the projects with my work**

```text
Replace the sample projects with mine: [FOR EACH: TITLE, CLIENT (only if I may name them), YEAR,
WHAT WE BUILT, THE OUTCOME I CAN BACK UP]. The entries are the files in
src/content/projects/english/. Follow the frontmatter of project-1.mdx and keep every key. 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 the team list**

```text
Replace the sample team in the list in src/content/team/english/-index.md with: [FOR EACH PERSON:
NAME, ROLE, SHORT BIO, SOCIAL LINKS]. Keep the file's structure and keys, and use image paths
under /images/team/. Tell me which image files to add. 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 the list in
src/content/testimonial/english/-index.md and in
src/content/sections/english/testimonial-section.md and testimonial-section-two.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 the FAQ**

```text
Replace the questions in src/content/faq/english/-index.md and
src/content/sections/english/faq-section.md and faq-section-two.md with 10 questions a client
would ask an IT services 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.
```

**Fix the technology and brand logos**

```text
The technology and brand logos should only show what we actually work with: [LIST]. Update
src/content/sections/english/customized-technologies-section.md, brand-logos.md, and
brand-logos-two.md, removing the rest. Tell me which logo files to add under src/assets/images/
and which existing ones are now unused. Then do the french and arabic copies.
```

**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. Add the french
and arabic versions.
```

**Set your business details**

```text
My details are: address [ADDRESS], phone [PHONE], email [EMAIL]. Put them in
[settings.contactInfo] in src/config/config.toml, and update the contact details in
src/content/sections/english/contact-section.md and contact-section-two.md and their french and
arabic copies. 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
footerPrivacy or a footer menu 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, footerPrimary, footerSecondary, and footerPrivacy.
Keep the JSON shape, the weight values, and the same items in every language. Note that
footerPrimary is the Footer.astro menu and footerSecondary the FooterTwo.astro menu, so update
whichever footer my pages use. 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].
```

**Add a page made of existing sections**

```text
Create a page at /[slug]/ with these sections: [AboutSection, FeaturesGrid, StatsSection,
CtaSection]. 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
named blocks in a new content file, using block names from src/sections.schema.ts, and pass each
block to its section. 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 /projects/, /faq/, /team/]. 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, and number, and set common.siteDescription and common.tagline there.
```

**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, and icon name 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
comments next to them. Don't change the form fields. Tell me where the form's status messages
live in src/i18n/<language>.json.
```

**Change the contact form fields**

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

**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 https://example.com), contactFormAction, formAction under
[settings.subscription], [settings.contactInfo], the contact details in
src/content/sections/*/contact-section.md and contact-section-two.md, social links in
src/config/social.json, every price in src/content/sections/*/pricing-section.md, the sample
projects in src/content/projects/, the sample team in src/content/team/, the sample quotes in
src/content/testimonial/, the technology and brand logos, the legal pages in src/content/pages/,
any "#" or example.com links in the menus and content, and any remaining "Techbyte" 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 named block in the page's frontmatter, whether the route in
src/pages/[...lang]/ passes that block, whether the block name is a key of sectionsSchema in
src/sections.schema.ts, and the section file in src/content/sections/english/. Also check whether
the route uses the "two" version of that section. 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/.
```