Skip to content
New: Customize your theme with an AI assistant. Read the guide

Prompt Library

Skill level: Beginner

Copy a prompt, replace the parts in [BRACKETS], and send it to your assistant. Each prompt names the Stella 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

Read AGENTS.md and SKILLS.md, then look at src/config/config.toml,
src/pages/[...lang]/index.astro, and src/content/sections/english/home-hero.md. Summarize in 10
bullet points how this Astro theme is organized: where text lives, how a page picks its sections,
how a page overrides a section with the content prop, which pages keep their copy in sections
rather than in their own file, and which collections npm run astro-check actually validates.
Don't change any files yet.

Describe your product once, then reuse it

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

Change the brand from "Stella" to "[NAME]". In src/config/config.toml update [site] title,
description, tagline, and logoText, brandName in [settings], and [seo] author. Then set
seo.description and seo.tagline in every src/i18n/<language>.json that has them, and search
src/content and src/config for any remaining "Stella" in visible text and replace it. Don't
rename files or code identifiers.

Apply brand colors

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-theme-light and --color-theme-dark to
match. 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, and don't touch the typography tokens. List the values you
chose.

Change the fonts

Replace Figtree with [GOOGLE FONT] for --font-primary in src/config/fonts.json. Keep Instrument
Serif for --font-secondary unless I say otherwise, and keep the IBM Plex Sans Arabic entry (it is
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

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 ""]. Also set image under [site.favicon] to the same file, and tell me to run
npm run generate-favicons. Remember that a content path like /images/... means
src/assets/images/..., while public/images/ holds og-image.jpg and the favicons.

Homepage And Sections

Rewrite the homepage for my product

Rewrite the English homepage text for my product. 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/-index.md 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

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

On [PAGE ROUTE in src/pages/[...lang]/], change [WHAT] for that page only. Pass the values
through the section component's content prop in that route, the way company.astro passes the
our-values file to BenefitsSection. Leave the file in src/content/sections/english/ alone so
other pages keep the current text. Note that a block in a page's frontmatter does nothing unless
the route passes it.

Switch a section variant

Change [the pricing table to the comparison layout | the testimonials to the minimal layout | the
customers logos to the light version]. These are props on the section in its route file:
PricingSection layout="comparison", TestimonialSection minimalLayout, Customers lightLogo,
HowItWorks hideButton, and imagePosition in
src/content/sections/<language>/features-section-two.md. Change only what I asked for, then run
npm run astro-check.

Hide a section everywhere

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

Clean up the menus

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, footerMenu, footerMenuOne, and footerMenuTwo. Keep
the JSON shape, the weight values, and the same items in every language. The footer column titles
are footer.colTitleOne and footer.colTitleTwo in src/i18n/<language>.json. Then check the header
on desktop, with the keyboard, and in the mobile menu.

Build a mega menu

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

Create a page at /[slug]/ with these sections: [PageHeader, FeaturesSection, Customers,
CallToAction]. Follow the "Add a new page" skill in SKILLS.md: copy
src/pages/[...lang]/faq.astro, keep its getStaticPaths, and compose it from the section
components, passing 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

I don't need these pages: [LIST, for example /career/, /changelog/, /integration/]. 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

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

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. Set seo.description and seo.tagline there, or leave them empty to use
the config.toml values.

Improve the Arabic or French translation

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, 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

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

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 widgets/ContactForm.astro. Keep the existing field shape and the
required flags, and keep the labels translated per language.

Write SEO descriptions

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

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], contactInfo in every src/i18n/<language>.json (the sample address,
phone, and email), social links in src/config/social.json, every price and the comparison table
in src/content/sections/*/pricing-section.md, the sample integrations in src/content/integration/,
the sample roles in src/content/career/, the sample quotes in src/content/testimonial/, the
changelog entries, the legal pages in src/content/pages/, any "#" or example.com links in the
menus and content, and any remaining "Stella" in visible text. Don't change files: list the file
and the line for each item.

Fix Problems

Explain and fix an error

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

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]/, whether it passes a content prop to that
section, and the section file in src/content/sections/english/. Tell me which one wins and why.
Don't change anything yet.

Fix the Arabic layout

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. Note that elements positioned by
scripts in pixels, such as the pricing toggle thumb, stay physical on purpose. Then tell me what
to check at /ar/.
Type something to search...