BUILD JOURNAL / 001 /
A website built with
its own toolkit.
The catalog needed a front door. We used one of its own skills to prepare it, and kept a record of the decisions that mattered.
Initial checkpoint: local website preview. This entry records the design and local checks before publication. Local proof remains distinct from a live deployment.
01 — Start with a bounded brief
The goal was a simple website for Context Templates, in the existing public repository, with a useful explanation of the catalog and a way to get started. The process itself would become a public example.
For this preview, we chose a written build journal as the first record. This is an edited account of the work, rather than a session transcript.
Use ct-design-build-interface to prepare a simple public website for this skill catalog. Help visitors understand the skills, copy the discovery prompt and try an interactive example. Document the design decisions and actual checks in a reviewed build journal. Keep secrets, personal data and private session material out of public content. Prepare a local preview for review before publication.
This is a reusable brief based on the task, not a verbatim export of a private conversation.
02 — Use a real skill
We used ct-design-build-interface. Its method calls for inspecting the existing design language, defining the main user flow, producing a reviewable direction and checking the rendered result.
The package was assembled from the repository's explicit manifest. Its bundled tools validated an input describing the scope, constraints and viewports before the page was built. The record distinguishes source identity, command results and screenshots.
The agent chose the content and visual hierarchy. The scripts checked structure and evidence bindings. Those checks cannot decide whether a page is useful or whether a person likes its design.
03 — Keep the first version small
- One primary action: copy the existing discovery prompt. The agent recommends skills and waits for a choice, including an explicit “Install all skills” option.
- Working examples: link directly to the catalog's interactive UML pages, preserving their existing URLs.
- Familiar materials: reuse the dark green, copper, mint and system fonts from the diagram design language; introduce a light paper background for reading.
- A static page: use HTML, CSS and a small clipboard enhancement. It needs no backend, account system, remote fonts or analytics scripts.
04 — Check the actual page
The local proof covers a 390 × 844 mobile viewport and a 1440 × 1000 desktop viewport. Browser checks exercise the discovery prompt, example and journal links, keyboard access, page overflow, and the clipboard-denied recovery path. The prompt also remains readable without JavaScript.
The maintained browser check is scripts/check_website.cjs. It uses an already available Playwright installation and Chromium browser. Screenshots and raw command captures remain local and are excluded from the public source.
| Check | Its limit |
|---|---|
| Repository checks | Local catalog and source checks; not remote CI. |
| Browser checks and screenshots | Local interaction and layout evidence; not human acceptance. |
| Public-content review and scanner | Reviewed scope and known signature checks; not a guarantee that a heuristic can find everything. |
05 — Publish the lesson, protect the session
This page includes only reviewed project information, a reusable brief, design decisions and bounded descriptions of checks. It excludes raw chat, account details, local filesystem paths, credentials, private traffic analytics and unreviewed command logs.
The website's own assets load locally, without third-party scripts. Following a GitHub link or using the hosted site is still subject to the host's normal request processing.
From preview to publication
After reviewing this direction, the owner approved publication through a pull request, passing CI and the existing GitHub Pages host at contexttemplates.com. The release checks must bind the Pages build to its source commit, verify DNS and HTTPS, and exercise the live landing page, journal and example links.
This journal preserves the initial design checkpoint. Raw deployment records and account-management screens remain private.
06 — Bring the catalog onto the website
The next step was to let visitors browse every skill without leaving the site. The catalog now has searchable explanations, filters by area of work and a page for each skill. Those pages show how to get the repository once, preview an installation and install the chosen skill for Codex, Cursor or Claude Code, including a Windows Python note.
The pages are generated from canonical skill headings and descriptions, with drift checks in local validation and CI. The complete catalog and instructions remain readable without JavaScript. Browser checks exercise filtering, an empty result, agent selection and copy recovery on narrow and wide screens; isolated tests run the published installer commands in temporary home directories.
A sitemap and canonical URLs help search engines discover the public pages. Registering a site in Search Console and submitting a sitemap are separate from Google choosing to index its pages. Account and DNS verification evidence stays private.
Back to the website