UI/UX library

What every teaching page follows. Start at the compendium; the rest is reference.

Animated sites, video under the page, and people melted into it. Doctrine + the reference prompts, opened 31-07-2026.

Ready page shapes. Each thumbnail is a real page; open it, then copy its shape. The skill that builds each one is shown below its card.

Vision paper

Long-form vision paper

One continuous argument, chapter by chapter, each opening with a summary box. For a thesis that needs a sustained read.

Skill: /ui-doc

Teaching compendium

Reference compendium

Many blocks gathered on one page as a reference or teaching front door. Also our own rules page.

Skill: /ui-doc

One-pager

Short explainer

A single short page that explains one thing well: one clear job, grayscale-first, one scrolling column.

Skill: /ui-doc

Teaching poster

At-a-glance comparison

A comparison grid absorbed in seconds: several options side by side, one clear takeaway. (Example is OBFC-branded.)

Skill: /obfc-brand

Simple table

Coverage / verdict board

One screen answering "how did it go, per item": hero band, stat strip that totals the table, one table with badges, a note reading the columns.

Spec: simple-table.md

Service / law leaflet

Citizen procedure fiche

Who is eligible, what you get, the procedure: every criterion and step anchored to its exact article of law.

Skill: /law-to-service-leaflet

Narrated deck

Full-bleed presentation

Full-bleed slides, one on screen at a time, with per-slide narration. For a pitch walked through, not read.

Skill: /frank-avatar for narration; the page itself with /ui-doc

The kinds of leaflet we've built for countries so far, only Lesotho and Comores today. Each is a real page, with the skill that builds it below.

Lesotho · comparison

Which type should I choose

Helps a citizen pick between business forms: the options weighed side by side, with one plain recommendation.

Skill: /obfc-brand

Lesotho · one form

One business form explained

A single legal form: what it is, who it suits, what it needs, explained on one page for the person choosing it.

Skill: /obfc-brand

Comores · law fiche

Eligibility and procedure from law

Who qualifies, what they get, the steps: every point anchored to its exact article of the law.

Skill: /law-to-service-leaflet

Comores · checklist

Registry control checklist

What the registry checks at registration: each control point anchored to its article, framed as a formal check.

Skill: /rccm-checklist

Places to find UI ideas: real app screens and flows, classified by screen type. A growing list.