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 Taskly 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,
src/content/homepage/english/home-2.md, and src/content/sections/english/hero-section.md. Summarize
in 10 bullet points how this Astro theme is organized: where text lives, how pages pick their
sections, how a page overrides a section (named blocks and the merge rules), and how the `layout`
field works. 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: calm, friendly, concrete. No hype words.
Confirm with one line, and don't change any files yet.

Brand

Rename the site

Change the brand from "Taskly" to "[NAME]". In src/config/config.toml update [site] title, logoText,
tagline, description, and [seo] author and keywords. Update "tagline" under "site" in src/i18n/en.json
and fr.json. Then search src/content and src/i18n for any remaining "Taskly" in visible text,
including src/content/widgets/*/dashboard-mockup.md, and replace it. Don't rename files or code
identifiers.

Rebrand the colors

Follow the "Rebrand colors / typography" skill in SKILLS.md. My brand color is [HEX] and my
button color is [HEX | keep sun]. In src/styles/theme.css, inside :root, set --theme-primary to
the brand color (links, focus rings, the featured plan, the logo tile: white text sits on it, so
check the contrast), set --theme-primary-soft to a very light tint of it, set --theme-sun and
--theme-accent to the button color (the "fill" button is dark text on it, so keep it light), and
[keep | adjust to match] the pastels --theme-lime, --theme-sky, --theme-orchid, --theme-mint,
--theme-lemon, --theme-lilac, and the soft tints --theme-sun-soft, --theme-lime-soft,
--theme-sky-soft. If a pastel goes from light to dark or back, update its text color in
src/lib/pastel.ts. Don't rename any variable, and don't change the pastel names used in content
files. List the old and new values.

Change the fonts

Replace [Figtree | Bricolage Grotesque] with [GOOGLE FONT] in src/config/fonts.json. Keep its
cssVariable ("--font-primary" for body text, "--font-heading" for headings), the weights, and the
fallback. Keep DM Mono (--font-note) and Instrument Serif (--font-display) unless I say otherwise.
Don't edit CSS files.

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", set logoWidth and logoHeight to keep its proportions at about 32px tall,
and set logoText to [NAME OR ""] (the wordmark footer on / prints logoText, or the site title
when it is empty). If the logo is dark, set logoDark to a light version for the dark footer. Also set [site.favicon] image to a square version and tell me
to run npm run generate-favicons and npm run generate-og-image.

Homepage

Rewrite the homepage for my product

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/ (hero-section.md, logos-section.md,
why-section.md, features-section.md, integrations-section.md, overview-section.md,
testimonials-section.md, pricing-section.md, faq-section.md, call-to-action.md) and any named
blocks in src/content/homepage/english/-index.md. Keep every key, option, layout, icon name, and the
number of items in each list. Only change text values. Keep the sample reviews, ratings, prices,
and numbers and list them for me to replace. Then write the French version in the matching
french/ files.

Change a homepage layout

On [/ | /home-2/ | /home-3/], use the "[LAYOUT]" layout of the [hero | logos | why | integrations |
testimonials | faq] section. Set `layout` in the matching named block of
src/content/homepage/english/[-index.md | home-2.md | home-3.md] and the french/ file (add the block
if it is missing). Copy the allowed values from the comment next to `layout` in the section file
in src/content/sections/english/. If the layout reads extra fields (for example rating for the
split hero, or pill and signup for the signup hero), check they are filled in. Don't change the
other homepages. Then run npm run astro-check and tell me to open the page.

Make another homepage the main one

I want the layout of [/home-2/ | /home-3/] as my main homepage at /. Replace the sections in
src/pages/[...lang]/index.astro with the ones in src/pages/[...lang]/[home-2 | home-3].astro, and
copy the named blocks and footerLayout from src/content/homepage/english/[home-2 | home-3].md
into src/content/homepage/english/-index.md (same for french). Keep the metaTitle and metaDescription of
-index.md. Then delete home-2.astro and home-3.astro and their content files, and remove the "Home"
menu from src/config/menu.en.json and menu.fr.json and the "Homepages" footer column.

Reorder or remove homepage sections

On the homepage (src/pages/[...lang]/index.astro), move [SECTION] above [SECTION] and remove
[SECTION]. Keep the hero first: the header floats over it. Only edit the route file: don't delete
any content files. Remove imports that are no longer used.

Replace the dashboard sample data

Rewrite the sample data of the coded product dashboard in
src/content/widgets/english/dashboard-mockup.md for my product: tabs, greeting, actions, and the
performance, focus, project, team, and activity cards. Keep every key, the three legend items, the
two activity periods, and the same number of labels and values. Then do the same in french/.

Sections And Pages

Add a section

Follow the "Add a new section" skill in SKILLS.md. Create a [DESCRIBE IT, for example "logo wall
with a quote"] section: src/layouts/components/sections/[Name]Section.astro, a content file
src/content/sections/english/[name]-section.md and french/, a schema in src/sections.schema.ts
registered in sectionsSchema as [name]Section, and comments in the .md that list every option.
Reuse SectionHeading, Button, DynamicIcon, OptimizedImage, the tint names (pastel), and the theme
tokens; no arbitrary Tailwind values, no hardcoded ids. Add it to [PAGE ROUTE] after [SECTION].
Then run npm run astro-check and tell me which page to open.

Add a page made of existing sections

Follow the "Add a new page" skill in SKILLS.md. Create a /[slug]/ page from existing sections:
PageHeader, then [SECTIONS]. Add the route at src/pages/[...lang]/[slug].astro (copy the pattern of
src/pages/[...lang]/features.astro), a content collection "[slug]" with the page schema in
src/content.config.ts, and src/content/[slug]/english/-index.md and french/-index.md with the
title, meta fields, pageHeader, and a named block per section. Don't name it like an existing
section file. Add it to the header menu in menu.en.json and menu.fr.json. Run npm run astro-check.

Add a simple text page

Add a text page at /[slug]/: create src/content/pages/english/[slug].md and french/[slug].md with
the same frontmatter as privacy-policy.md (title, description, date, pageHeader, contentPage), and
this body: [TEXT]. src/pages/[...lang]/[page].astro renders it, so don't add a route. Link it from
the footer in src/config/menu.en.json and menu.fr.json.

Remove pages I don’t need

I don't need these pages: [/home-2/, /home-3/, /status/, /careers/, ...]. For each one, delete its
route in src/pages/[...lang]/ and its content folder or files in src/content/, remove its links
from src/config/menu.en.json and menu.fr.json, and search src/content and src/i18n for links to it.
Keep /elements/ out of the menus. Then run npm run build and fix any broken import.

Collections

Add a template

Add a project template "[NAME]" to the templates gallery. Create
src/content/templates/english/[slug].md by copying the frontmatter shape of bug-triage.md: title,
description, category (one of the categories in templates-catalog-section.md, or a new one),
view (board | list | calendar | timeline), color (sun | lime | sky | lilac | orchid | mint |
lemon | white | cream), icon (a Lucide name), taskCount, audience, columns with example tasks,
related, and weight. Then write the French version in src/content/templates/french/[slug].md with
the same file name.

Add an open role

Add an open role "[TITLE]" to the careers page. Create src/content/careers/english/[slug].md by
copying the shape of backend-engineer.md: title, description, date, department (one of the
departments in careers-list-section.md), workplace (remote | hybrid | onsite), location, type
(full-time | part-time | contract | internship), salary, salaryRange, applyUrl [URL], weight, and a
Markdown body with "About the role", "What you will do", and "What you bring". Use only facts I
give you: [DETAILS]. Then write the French version with the same file name. Delete the sample
roles I don't keep: [LIST].

Edit the status page data

Update the status page data in src/content/sections/english/status-section.md (and french/): set
the components to [NAMES AND DESCRIPTIONS], each with status operational | degraded | outage |
maintenance and a 90-day `history` string (one letter per day, oldest first: o operational,
d degraded, x outage, m maintenance, - no data). Add this incident at the top of incidents.items:
[DATE, TITLE, STATUS, AFFECTED COMPONENTS, UPDATES]. Keep the banner and state labels. Leave
`uptime` empty where I don't give a number, so it is computed from the history.

Write a blog post

Write a blog post about [TOPIC] for [AUDIENCE]. Create src/content/blog/english/[slug].md with the
same frontmatter as the existing posts (title, description, image, date, author, categories,
tags, draft: false). Use an existing author from src/content/author/english/ or [NEW AUTHOR]. About
800 words, with ## headings. Then write the French version with the same file name.

Add a changelog entry

Add a changelog release [VERSION] dated [DATE]: [WHAT CHANGED]. Create
src/content/changelog/english/[slug].md with the same frontmatter as the existing releases (title,
description, date, version, tags, highlights). Then the French version with the same file name.

Write pricing plans

Replace the sample plans in src/content/sections/english/pricing-section.md with my plans: [PLANS,
MONTHLY AND YEARLY PRICES, FEATURES]. Keep the structure of each plan (name, color, description,
price, period, featured, badge, features, button). Update the comparison table in
plan-compare-section.md to match (one value per plan in each row). Check the pricingSection blocks
in src/content/homepage/english/home-2.md and src/content/pricing/english/-index.md too, because a
block's `plans` list replaces the section's list. Then French.

Write the FAQ

Rewrite the FAQ in src/content/sections/english/faq-section.md for my product: [TOPICS]. Fill
`items` (used on the homepages) with 6 questions, and `groups` (used on /faq/) with 4 to 6 topics,
each with a title, a Lucide icon, a color, and 3 to 5 questions. Answers in 1 to 3 sentences, using
only facts I give you: [FACTS]. Then French.

Clean up the menus

Update the menus in src/config/menu.en.json and menu.fr.json. Header: [Product (dropdown: ...),
Solutions, Pricing, Resources (mega menu: ...), Contact]. Hide the "Home" and "Pages" demo menus.
Footer columns: [Product, Resources, Company]. Use Lucide icon names, keep "enable": true on every
visible item, and translate the names for French.

Pick the footers

Set the site footers with footerLayout (default | wordmark | newsletter | tiles) in the page
frontmatter: [wordmark] on / (src/content/homepage/english/-index.md), and [default] on every
other page. Make the same change in the french/ files. Don't edit the footer components. Then
run npm run astro-check and tell me which pages use which footer.

Connect the contact form

Set up the contact form for [Formsubmit with my email | Formspree form ID | Netlify Forms]. Edit
contactFormAction and contactFormProvider in src/config/config.toml and tell me any step I must
do on the provider's side.

Pre-launch review

Review this site before launch and give me a checklist of what is still demo content. Check:
[site] baseUrl in src/config/config.toml (it ships as https://example.com), contactFormAction,
[settings.subscription] formAction, form.action in src/content/auth/, the contact details in
contact-cards-section.md and contact-message-section.md, social links in src/config/social.json,
the "Home" and "Pages" menus, the announcement bar, the legal pages in src/content/pages/, the sample careers roles, the status page data, the dashboard
sample data, ratings and reviews, customer logos, placeholder "#" links in the help center, and
any remaining demo brand names. Also tell me to check that PUBLIC_DEMO_MODE is not set on my host.
Don't change files: list the file and 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 its route in src/pages/[...lang]/, the named blocks in its content file,
the section file in src/content/sections/english/, and src/content/widgets/english/. Tell me which
file wins and why.
Type something to search...