Customize Techlo With AI

Customize Techlo With AI

Skill level: Beginner · Works with: Claude, Cursor, GitHub Copilot, Gemini, Windsurf, Codex, ChatGPT, and any other assistant

Techlo is built so that an AI assistant can change it safely. Three things make that work:

1. Content is separate from code. Almost every change is an edit to a Markdown, TOML, or JSON file: your company details in src/config/config.toml, services in src/content/services/, projects in src/content/projects/, prices in src/content/sections/<language>/pricing-section.md. AI tools do this kind of task well.
2. Content files explain themselves. Section files list their options and allowed values in comments next to each key, so the assistant can see what is possible without guessing.
3. The theme ships instruction files for AI tools. They describe the folder structure and the rules for changing it. Most AI coding tools load them when you open the project folder.

The AI Instruction Files In Techlo

Techlo ships four instruction files at the top of the theme folder and three in hidden folders. Folders that start with a dot (.github/, .cursor/, .windsurf/) are hidden by default in Finder and File Explorer; your code editor shows them. You don’t need to edit any of these files. They are there for your assistant. Each edition ships its own copy, written for that edition.

File	Read by	What it contains
AGENTS.md	OpenAI Codex, Cursor, Windsurf, GitHub Copilot, and other tools that follow the AGENTS.md convention	The full rules: project map, content model, sections and named page blocks, section and header layouts, menus, styling, RTL, languages, motion, forms, editions, and the limits of the checks
SKILLS.md	Any assistant you point to it	Step-by-step recipes: add a section or page, switch a layout, edit menus, add or remove a language, make something work right to left, rebrand, add an icon, verify
CLAUDE.md	Claude Code	Imports AGENTS.md (the @AGENTS.md line), then a short list of the most important rules
GEMINI.md	Gemini CLI	The same as CLAUDE.md, for Gemini
.github/copilot-instructions.md	GitHub Copilot (coding agent, VS Code, CLI)	A short summary that points to AGENTS.md and SKILLS.md
.cursor/rules/theme-architecture.mdc	Cursor (always on)	The architecture rules, with a pointer to AGENTS.md
.windsurf/rules/theme-architecture.md	Windsurf (always on)	The same rules for Windsurf

The .vscode/ folder holds editor settings and recommended extensions, not AI rules.

Chat assistants in a browser (ChatGPT, Claude, Gemini) can’t read your folder. You paste AGENTS.md into the conversation yourself: see AI Workflow.

These files tell an assistant to:

• keep editable text, links, images, buttons, and options in src/content/, not in components
• make every change in every language: each language folder under src/content/, src/i18n/<language>.json, and src/config/menu.<language>.json
• change a section on one page with a named block in that page’s frontmatter, using a block name from src/sections.schema.ts
• switch a section’s look with options.layout, and remember that a homepage route can pass a layout through the content prop, which wins
• pick a page’s header with headerLayout and headerPosition on <Base>, not by editing the header components
• reuse Techlo’s Button.astro, Icons.astro, DynamicIcon.astro, and OptimizedImage.astro and the color tokens in src/styles/theme.css
• use logical CSS classes (ms, pe, start, text-start) so every page still works right to left in Arabic
• read languages through src/config/language.json, never from a hard-coded language code
• never invent client names, testimonials, project results, metrics, or prices
• check changed pages at about 375 px and 1280 px wide, and at /ar/
• run npm run astro-check when they finish

Two Ways To Work With AI

What AI Is Great At In Techlo

• Rewriting the sample copy for your company, in every language
• Filling collections: services, projects, blog posts, team, testimonials, FAQ, legal pages
• Setting your prices and what each package includes
• Picking one of the three homepages and reordering its sections
• Choosing section layouts and a header layout and position per page
• Changing menus, including the Services mega menu and the footer columns
• Translating the site, adding a language, or turning one off
• Explaining an error message and fixing it

What To Check Yourself

• Project results. Every client name, figure, and outcome in src/content/projects/ is made up. Replace them with work you actually did, and make sure you are allowed to name the client.
• Facts. AI writes convincing copy, and it can invent testimonials, team sizes, certifications, partner badges, and uptime figures you never gave it. Check every quote, number, and claim before you publish.
• Prices. The packages in src/content/sections/<language>/pricing-section.md are samples. Give the assistant your real figures, and read the result back.
• Contact details in three places. Techlo keeps them in [settings.contactInfo], src/content/contact/<language>/-index.md, and src/content/sections/<language>/contact-section-two.md. Ask for all three, then check all three.
• Longer names and labels. A company name, button label, or menu item longer than the sample can wrap or crowd the layout. Check the header, the top bar, the mega menu, and the hero at about 375 px.
• Arabic and French. Both are machine translated in the sample content. Open /ar/ after any layout change and have the text reviewed by a native speaker. Note that header layout three has no language switcher.
• The result in the browser. npm run astro-check validates only homepage, pages, services, projects, blog, and team. A wrong option in a sections, about-us, contact, faq, pricing, testimonials, or author file passes the check, and in a checked collection a block name that is not a key of sectionsSchema is dropped without an error.
• Forms. Send one contact message on the live site and check that it arrives. No page renders a newsletter form today, so [settings.subscription] does nothing until you add one.
• Unused sections. AboutOne, AboutTwo, Awards, BannerPersonalPortfolio, Clients, Skills, TestimonialCreative, and VideoSection ship in the folder but no page renders them. If an assistant suggests one, test it on a page first.

Ready? Go to the Prompt Library for copy-paste prompts.