菜单
Transforms markdown content from docs/{lang}/ into beautiful Astro pages and components. Supports multi-language builds (en, fr, sw). Creates dynamic [lang] routes, language-aware content loading, and language switcher component. Use after design-system and photo-manager have run.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/peterbamuhigire/dynapharm-website --skill page-builder命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | page-builder |
| description | Transforms markdown content from docs/{lang}/ into beautiful Astro pages and components. Supports multi-language builds (en, fr, sw). Creates dynamic [lang] routes, language-aware content loading, and language switcher component. Use after design-system and photo-manager have run. |
Transform markdown content into stunning, production-grade Astro pages.
Before building pages, review Universal Design Guidelines for:
This skill applies these universal content and UX principles to Astro implementation.
Read these files first:
design-tokens.md — the design system decisions (fonts, colors, patterns)src/assets/images/_catalog.json — available photos and their dimensionsdocs/{lang}/pages.md — page structure and navigation for THIS languagedocs/{lang}/*.md file for the page contentMulti-Language Note: You are building pages for ONE language at a time. The website-builder will call you once per enabled language. Read content from docs/{lang}/ (e.g., docs/en/, docs/fr/, docs/sw/), not the root docs/ directory.
src/utils/i18n.ts — language validation and utilities (shared, not language-specific)src/components/LanguageSwitcher.astro — language switcher (shared)src/layouts/BaseLayout.astro — language-aware HTML shell (shared, accepts lang prop)src/components/Header.astro — language-aware navigation (shared, includes LanguageSwitcher)src/components/Footer.astro — language-aware footer (shared)src/pages/[lang]/*.astro — generate once per enabled languagedocs/{lang}/Note: Components are shared across all languages. Content differs per language.
Must include language prop and hreflang tags (NEW for i18n):
---
import '../styles/global.css';
import type { Language } from '../utils/i18n';
import { languages, getHrefLangPath } from '../utils/i18n';
interface Props {
lang: Language; // NEW: language code (en, fr, sw)
title: string;
description?: string;
ogImage?: string;
}
const { lang, title, description = '', ogImage = '/og-image.png' } = Astro.props;
const siteTitle = 'Company Name'; // from docs/{lang}/company-profile.md
const currentPath = new URL(Astro.request.url).pathname.replace(/^\/[a-z]{2}/, '') || '/';
// Language label for Open Graph
const langToLocale = (l: Language) => {
const locales = { en: 'en_GB', fr: 'fr_FR', sw: 'sw_KE' };
return locales[l];
};
---
<!DOCTYPE html>
<html lang={lang}> {/* NEW: dynamic lang attribute */}
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content={description} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={ogImage} />
<meta property="og:locale" content={langToLocale(lang)} /> {/* NEW: language variant */}
<title>{title} | {siteTitle}</title>
{/* NEW: Hreflang tags for all language versions */}
{languages.map(langCode => (
<link
rel="alternate"
hreflang={langCode}
href={`https://example.com${getHrefLangPath(langCode, currentPath)}`}
/>
))}
<link
rel="alternate"
hreflang="x-default"
href={`https://example.com/en${currentPath}`}
/>
<!-- Structured Data -->
<script type="application/ld+json" set:html={JSON.stringify({
"@context": "https://schema.org",
"@type": "Organization",
"name": siteTitle,
// ... from docs/{lang}/company-profile.md
})} />
</head>
<body class="font-body text-neutral-900 bg-surface antialiased">
<Header lang={lang} /> {/* NEW: pass lang to Header */}
<main>
<slot />
</main>
<Footer lang={lang} /> {/* NEW: pass lang to Footer */}
<!-- Scroll animation observer -->
<script>
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));
</script>
<!-- Alpine.js for interactive components -->
<script>
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
</script>
</body>
</html>
Must include (language-aware):
---
import type { Language } from '../utils/i18n';
import LanguageSwitcher from './LanguageSwitcher.astro';
interface Props {
lang: Language; // NEW: current language
}
const { lang } = Astro.props;
const currentPath = new URL(Astro.request.url).pathname.replace(/^\/[a-z]{2}/, '') || '/';
---
<!-- Mobile menu with Alpine.js -->
<header class="sticky top-0 z-50 bg-white/95 backdrop-blur-lg">
<nav x-data="{ open: false }" class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
{/* Logo */}
<a href={`/${lang}/`}>Logo / Company Name</a>
{/* Desktop nav */}
<div class="hidden md:flex gap-8 items-center">
<a href={`/${lang}/about`}>About</a>
<a href={`/${lang}/services`}>Services</a>
{/* More links from pages.md */}
</div>
{/* Language Switcher (NEW) */}
<div class="hidden md:block">
<LanguageSwitcher currentLang={lang} currentPath={currentPath} />
</div>
{/* Mobile toggle */}
<button @click="open = !open" class="md:hidden">Menu</button>
{/* Mobile menu */}
<div x-show="open" x-transition class="absolute top-full left-0 right-0 bg-white md:hidden">
<a href={`/${lang}/about`}>About</a>
<a href={`/${lang}/services`}>Services</a>
{/* Language Switcher in mobile menu */}
<LanguageSwitcher currentLang={lang} currentPath={currentPath} />
</div>
</nav>
</header>
LanguageSwitcher (NEW): This component is automatically included. It shows language options (English, Français, Kiswahili) and navigates to the same page in the selected language. See i18n/SKILL.md for the component definition.
Every page gets a hero. Vary the style per page:
<!-- Homepage Hero Example -->
<section class="relative min-h-screen flex items-center">
{heroImage && (
<Image
src={heroImage}
alt="..."
class="absolute inset-0 w-full h-full object-cover"
widths={[640, 1024, 1920]}
loading="eager"
/>
)}
<div class="absolute inset-0 bg-gradient-to-r from-primary-900/80 to-primary-900/40" />
<div class="relative z-10 max-w-7xl mx-auto px-6">
<h1 class="font-display text-5xl md:text-7xl text-white animate-on-scroll">
{headline}
</h1>
</div>
</section>
py-20 md:py-28 lg:py-32 (scales across all languages)max-w-7xl mx-auto px-6animate-on-scroll on section children with stagger classesAll pages are generated under language paths:
src/pages/[lang]/
├── index.astro → /en/, /fr/, /sw/
├── about.astro → /en/about, /fr/about, /sw/about
├── services.astro → /en/services, /fr/services, /sw/services
└── [slug].astro → /en/{slug}, /fr/{slug}, /sw/{slug}
Route Configuration Example:
---
export async function getStaticPaths() {
const languages = ['en', 'fr', 'sw'];
return languages.map(lang => ({
params: { lang },
}));
}
const { lang } = Astro.params;
// Load content from docs/{lang}/company-profile.md
---
Content loaded from docs/{lang}/, not docs/.
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{services.map((service, i) => (
<div class={`animate-on-scroll stagger-${i + 1}`}>
<ServiceCard {...service} />
</div>
))}
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
{members.map(member => (
<TeamMember
name={member.name}
role={member.role}
photo={member.photo} <!-- from catalog -->
bio={member.bio}
/>
))}
</div>
Always exactly 3 testimonials in a grid grid-cols-1 md:grid-cols-3 layout.
Convention — no real customers exist yet, so generate realistic fictional ones:
TestimonialCard props: quote, name, location, type (no business prop).
<TestimonialCard
quote="The specific feature changed how I run my business..."
name="Nakato Grace"
location="Mbale, Uganda"
type="Retail"
/>
Screenshots and product images MUST be clickable with a fullscreen lightbox so users can view them at real size. Thumbnails alone don't communicate enough detail.
Implementation pattern:
Lightbox component (src/components/Lightbox.astro) — included once per page via BaseLayout. Uses Alpine.js x-on:open-lightbox.window to listen for custom events. Renders a fullscreen overlay with close button (X), Escape key, click-outside-to-close, caption bar, and cursor-zoom-out.
BaseLayout includes <Lightbox /> just before the Alpine.js script tag. This makes the lightbox available on every page automatically.
Screenshot thumbnails use the .screenshot-trigger CSS class and dispatch Alpine events:
<div
x-data
@click="$dispatch('open-lightbox', { src: '/screenshots/FILENAME.jpg', alt: 'Description' })"
class="rounded-lg overflow-hidden shadow-hero screenshot-trigger"
>
<img src="/screenshots/FILENAME.jpg" alt="Description" class="w-full h-auto" loading="lazy" />
<span class="expand-hint">
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" />
</svg>
Click to enlarge
</span>
</div>
CSS (in global.css) for .screenshot-trigger: cursor: zoom-in, hover scale, gradient overlay, and .expand-hint label that fades in on hover.
French label: Use "Cliquez pour agrandir" instead of "Click to enlarge". Mobile screenshots: use "Enlarge" / "Agrandir".
Rules:
x-data and @click="$dispatch('open-lightbox', ...)"Bold, contrasting background. Clear action. One button, one message.
Never round inner elements the same as their parent container. Apply the formula: outer radius = inner radius + padding. When a card uses rounded-2xl (16px) with p-4 (16px padding), inner images/buttons/elements must use a smaller radius like rounded-lg (8px) or rounded-xl (12px). Matching radii on parent and child creates bulgy, uneven corners. Always subtract the gap/padding from the parent radius.
ALWAYS use Astro's Image component:
---
import { Image } from 'astro:assets';
import heroImg from '../assets/images/hero-office.jpg';
---
<Image
src={heroImg}
alt="Descriptive alt text"
widths={[640, 1024, 1920]}
sizes="(max-width: 640px) 640px, (max-width: 1024px) 1024px, 1920px"
loading="lazy"
class="rounded-xl object-cover" {/* inner radius < parent card radius */}
/>
loading="eager" (above the fold)loading="lazy"img { display: block; } in the base layer of global.css. Every image inside a card must use w-full h-full object-cover (or object-contain for product shots only). The image container must have overflow-hidden and a height constraint (h-full, aspect-[ratio], or explicit height). Never leave an image at its default inline display — this causes a baseline gap that produces ugly white space at the bottom of cards.French and Kiswahili content will be longer than English. Design with flexibility:
| Language | Expansion | Design Impact |
|---|---|---|
| English | 1.0x (baseline) | Base design |
| French | 1.2–1.4x | ~30% longer text |
| Kiswahili | 1.1–1.3x | ~20% longer text |
Flex Design Principles:
min-width and max-width, never fixed widthsTesting Checklist for Multi-Language:
For EVERY page in EVERY language, mentally verify:
global.css @theme block) AND that it contrasts against its parent section background. For example, bg-amber does not exist if the theme only defines bg-amber-500; an undefined class renders no background, making the element invisible. Always cross-reference the exact token names in @theme. On dark backgrounds (navy, sea-800, sea-900), use bg-highlight (amber) or bg-white; on light backgrounds, use bg-primary, bg-sea-800, or bg-navy.Users scan, they don't read. Format all content for quick comprehension:
Formatting Rules:
Content Structure:
Headline (value prop)
↓
2-3 short paragraphs (context)
↓
Bullet points (benefits/features)
↓
Visual break (image/graphic)
↓
CTA or next section
Tell users exactly what to do next.
CTA Best Practices:
When reading docs/{lang}/*.md files (NEW: language-specific):
---) = structured data (use as props)## Heading = section breaks**bold text** after heading = field values (role, summary, etc.)Important for Multi-Language:
docs/{lang}/ for THIS language onlydocs/ directory