# 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 Looka 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**
```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/services-section.md. Summarize in 10 bullet points how this Astro
theme is organized: where text lives, how a page picks its sections, how a page block overrides a
section and why the route file has to pass it in, where section options are documented, and which
collections npm run astro-check actually validates. Don't change any files yet.
```
**Describe your firm once, then reuse it**
```text
Here is my firm. Use it for every copywriting request in this conversation:
- Name: [FIRM NAME]
- What we do: [ONE SENTENCE]
- Industries we serve: [LIST]
- Services: [3 TO 6 SERVICES]
- Tone: professional, specific, no buzzwords.
Never invent client names, testimonials, case-study results, team sizes, awards, 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 "Looka" to "[NAME]". In src/config/config.toml update [site] title and
logoText, brandName in [settings] (the big footer text), and [seo] author. Then set
seo.siteDescription and seo.tagline in every src/i18n/.json, and search src/content and
src/config for any remaining "Looka" 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-theme-light to match. Remember that --color-light is a grey text color, not a background.
Keep at least 4.5:1 contrast for text on --color-body and on --color-theme-dark. Don't add
arbitrary color values anywhere else. List the values you chose.
```
**Change the fonts**
```text
Replace DM Sans 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.
```
**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, and set logoText
to [NAME OR ""]. The footer uses a white version from src/assets/images/logo-white.svg, set in
src/layouts/components/global/Footer.astro: tell me what to put there. Also set image under
[site.favicon] to the main file, and tell me to run npm run generate-favicons.
```
### Homepage And Sections
**Rewrite the homepage for my firm**
```text
Rewrite the English homepage text for my firm. The homepage is src/pages/[...lang]/index.astro.
Edit the blocks in src/content/homepage/english/-index.md and the section files it uses in
src/content/sections/english/. 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 block
in that page's frontmatter in src/content/[about | pricing | faq | contact]/english/-index.md,
and make sure the route file in src/pages/[...lang]/ passes that block to the section with the
content prop. Leave the file in src/content/sections/english/ alone so other pages keep the
current text. Do the same for french and arabic.
```
**Set section options**
```text
Change the [services | FAQ | case studies | blog] section options: [WHAT I WANT]. Use the options
documented in AGENTS.md under "Sections and Page Blocks" (services: colorScheme, showServicesAs,
cta, limit, creativeShape; FAQ: sectionLayout, minimalFaqLayout, faqLayoutOnly, showCategories;
case studies: filter.layout, body.layout, body.card.layout, headType; blog: settings.card.layout
and single.layout). Set them in the matching content file, pick only values from the comment next
to each option, make the same change in french and arabic, 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. Don't delete the files or edit the routes.
```
### Content
**Rewrite the services**
```text
My services are: [LIST]. Rewrite the entries in src/content/services/english/, following the
frontmatter of service-01.md (title, description, image, icon as a Lucide icon name, and the
intro and other blocks). Keep every key and the number of items in each list. Use image paths
that already exist under /images/services/. Mark entries I don't need as draft: true rather than
deleting them. Then update src/content/sections/english/services-section.md so the section text
matches, and do the french and arabic folders.
```
**Write case studies**
```text
Write case studies for these projects: [FOR EACH: CLIENT (only if I may name them), INDUSTRY,
PROBLEM, WHAT WE DID, RESULTS I CAN BACK UP]. The entries are the files in
src/content/case-studies/english/. Follow the frontmatter of case-studies-01.mdx and keep every
key. Use only the results I gave you: do not invent percentages or figures. Use image paths that
already exist. Then add the french and arabic versions.
```
**Write open roles**
```text
Add these open roles to src/content/career/english/: [FOR EACH: TITLE, LOCATION, TYPE,
RESPONSIBILITIES, REQUIREMENTS]. Follow the frontmatter of job-01.md and keep every key. Update
src/content/sections/english/career-openings.md and join-us.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 list**
```text
Replace the sample team 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. Note
that the team page renders the OurTeam section twice, with a leadership block and a full-team
block.
```
**Write the FAQ**
```text
Replace the questions in src/content/faq/english/-index.md with 10 questions a prospective client
would ask, with short, direct answers. Keep the file's structure, keys, and categories. Then
translate them into the french and arabic versions.
```
**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 and the button shape,
and mark [PLAN] as the featured one. Important: the monthly and yearly labels must match
common.monthlyPlan and the yearly equivalent in src/i18n/en.json, or no plan button shows as
active. Then copy the same numbers into the french and arabic versions, translate only the text,
and keep each file's labels matching its own i18n file.
```
**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 offices and contact details**
```text
My offices are: [FOR EACH: CITY, ADDRESS, PHONE, EMAIL]. Put them in
src/content/sections/english/office-locations.md and contactList in
src/content/sections/english/contact-section.md, and set the phone and email in
[settings.contactInfo] in src/config/config.toml. Keep every key. Then do the french and arabic
copies, translating only the labels.
```
**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..json.
```
### Navigation And Pages
**Clean up the menus**
```text
In every src/config/menu..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, 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..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]. The bar also shows the phone from [settings.contactInfo] in config.toml.
```
**Add a page made of existing sections**
```text
Create a page at /[slug]/ with these sections: [AboutUs, Achievements, Testimonial,
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. Put the page's own copy in blocks in a new content file and pass each block to its
section with the content prop. Add "[slug]" to headerPrimary in every
src/config/menu..json, then run npm run astro-check.
```
**Remove pages I don't need**
```text
I don't need these pages: [LIST, for example /career/, /faq/, /pricing/]. 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..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. Remember that lists don't fall back: every collection needs its files
in the new language or those detail pages won't exist.
```
**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 corporate
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.
```
**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 edit ContactSection.astro, and don't replace the theme's form classes. Keep
the existing field shape and required flags. Note that each input's name is the label that
appears on the submission.
```
**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] (both ship as placeholders and nothing warns about them),
[settings.contactInfo], the contact details in src/content/sections/*/contact-section.md and
office-locations.md, social links in src/config/social.json, every price in
src/content/sections/*/pricing-section.md, the sample results in src/content/case-studies/, the
sample team in src/content/team/, the sample roles in src/content/career/, the legal pages in
src/content/pages/, any "#" or example.com links in the menus and content, and any remaining
"Looka" 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 block in the page's frontmatter, whether the route file in
src/pages/[...lang]/ passes that block to the section, and the section file in
src/content/sections/english/. If the field is in blog, services, case-studies, or pages, also
check whether src/content.config.ts lists it, because unknown 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/.
```