| skill_id | token-matched-dummy-renderer |
| name | nezam-Token-Matched Dummy Renderer |
| tier | 2 |
| description | Generates locale-aware dummy content (copy, logos, illustrations) that picks up the live --ds-* token theme. Output adapts color, radius, and typography to whichever DESIGN.md profile is active. |
| version | 1.0.0 |
| updated | "2026-05-28T00:00:00.000Z" |
| changelog | ["1.0.0 — Initial release. Backs the Design Hub preview pane content layer."] |
| references | ["DESIGN.md",".cursor/design/references/masri-design-assets/",".cursor/design/references/typeui-main/"] |
| breaking_changes | false |
Token-Matched Dummy Renderer
Charter
Produce realistic dummy content for wireframes that visually inherits the current theme. Color, radius, type, and motion all come from the active token set — never hardcoded.
What the dummy set provides
| Slot | Latin (en-US) | Masri (ar-EG) |
|---|
names[] | "Alex Rivera", "Priya Nair" | "سارة محمود", "أحمد فاروق" |
companies[] | "Acme Corp", "Globex" | "شركة النيل", "مصر التقنية" |
prices[] | "$19" / "$79" | "٤٩٠ ج.م" / "١٢٩٠ ج.م" |
headings[] | "Build faster. Ship smarter." | "ابني أسرع. اطلق بثقة." |
dates[] | "Mar 15, 2026" | "١٥ مارس ٢٠٢٦" / "٢٧ رمضان ١٤٤٧" |
chartData[] | numeric series | identical |
Token-driven SVG primitives
Every illustration (IllusHero, IllusFeatures, IllusDashboard, IllusChart, IllusAvatar, IllusProduct, IllusEmpty) takes a brand prop and computes shades inline:
export function IllusHero({ brand }: { brand: string }) {
return (
<svg viewBox="0 0 400 300">
<rect fill={`${brand}15`} /* 15% opacity */ />
<rect fill={`${brand}40`} />
<rect fill={brand} />
</svg>
)
}
brand MUST be passed via var(--ds-accent) (resolved at parent), never as a hardcoded hex.
Wireframe → dummy slot binding
| Block | Dummy slot consumed |
|---|
Hero_Centered | headings[0], descriptions[1], primary CTA label |
Content_Features | features[0..5] (title + desc) + per-card icon |
Content_Logos | real PNGs from /public/logos/*.png (no text labels) |
Content_CTA | static "Ready to launch your project?" + button label |
Nav_Footer | column titles ('Product', 'Company', 'Resources', 'Legal') |
Locale switch
const dummy = locale === 'ar-EG' ? DUMMY_MASRI : DUMMY_LATIN
DUMMY_MASRI lives in .cursor/design/references/masri-design-assets/ (currently a manifest — payload pending Phase 03 curation).
Anti-patterns
- ❌ Hardcoding a color in an illustration SVG (use
brand prop + suffix alpha)
- ❌ Using Latin numerals in Masri price slots when region = EG
- ❌ Showing "Lorem ipsum" — dummy must be production-realistic
- ❌ Rendering company logo names as text fallback (use the actual logo PNG; if missing, render a neutral placeholder card)
Outputs
src/components/preview/dummy-content.tsx (shipped)src/components/preview/dummy-content-masri.tsx (Phase 03 curation)public/logos/*.png (real assets, no text)
Validation
pnpm run check:tokens
pnpm --filter design-hub test -- --testPathPattern=dummy
