Product

Platform

web

Stack

Fumadocs with Fumadocs MDX.
Next.js App Router.
Vercel deploys the self-contained application from the repository's site/ directory.
The skills and their source examples remain at the repository root.

Users

The primary users are developers working with coding agents: developers instrumenting agents, building products, prototyping ideas, or working in vibe-coding workflows.

They need to understand when HTML creates more leverage than prose and how to choose an appropriate artifact form—especially a wireframe, mockup, prototype, diagram, explainer, or small purpose-built interface.

Product Purpose

EffectiveHTML.com is a free, visual field guide and catalog for using HTML effectively with coding agents.

It has two complementary jobs:

Publish thoughtful guidance about HTML as a medium for understanding, judgment, and collaboration with agents.
Teach developers practical distinctions and techniques through real, inspectable artifacts rather than walls of prose.

Success means a developer can recognize when HTML will help, choose the right fidelity, inspect a relevant example, and apply the technique in their own agent workflow.

Positioning

Effective HTML is not a generic frontend course and does not argue that HTML should replace Markdown everywhere. It focuses on decision-shaped artifacts: interfaces that make spatial, visual, interactive, or comparative questions easier for a human to understand and direct.

The teaching mechanism is the differentiator. The site demonstrates its ideas through the same wireframes, mockups, prototypes, diagrams, explainers, SVGs, and custom interfaces that it teaches people to create.

Operating Context

Visitors may arrive while planning agent work, reviewing generated output, choosing a prototyping fidelity, or trying to understand an unfamiliar system.
The site should support both quick reference and sustained reading.
Examples should be directly inspectable and, where practical, interactive.
The documentation should preserve familiar search, sidebar, table-of-contents, and MDX reading behavior.
The catalog should make the breadth of useful HTML artifacts visible without becoming a template marketplace.

Capabilities and Constraints

A custom landing page introduces the catalog and point of view.
A Fumadocs guide contains the durable educational material.
Initial scope is the product shell, navigation, design system, and a small representative content structure—not the complete course.
Existing Effective HTML skills and release-readiness examples are real source material.
/Users/ramos/oss/effective-svg contains related static and animated SVG specimens that may be cataloged later.
Thariq Shihipar's Effective HTML writing and examples and Geoffrey Litt's writing about understanding are intellectual references, not claims owned by this product.
Do not fabricate testimonials, adoption numbers, benchmarks, customers, course-completion claims, or capabilities absent from the repositories.
The domain is effectivehtml.com.

Brand Commitments

Product name: Effective HTML.
The existing attribution is by Plannotator.
The approved Working Atlas direction in design.md is binding.
Approved assets include public/brand/effective-html-banner.png and art/brand-concepts/working-atlas-v1-refined.png.
The site should feel practitioner-led, tactile, graphic, technically calm, and generous with examples.
Preserve the near-black Ink field, warm Paper surfaces, cobalt, lilac, green, pink, and coral printed-ink palette.
Avoid generic AI imagery, dashboard grids, glass effects, and a neutral SaaS appearance.

Evidence on Hand

../README.md describes the five Effective HTML skills and their intended uses.
../skills/ contains the current creative-direction, wireframe, prototype, plan, diagram, and broad HTML guidance.
../examples/release-readiness/ contains standalone wireframe and prototype examples with desktop and mobile screenshots.
public/brand/effective-html-banner.png is the deployed site banner.
art/brand-concepts/working-atlas-v1-refined.png is the approved site concept plate.
/Users/ramos/oss/effective-svg/svg/ and /Users/ramos/oss/effective-svg/svg-animated/ contain related visual specimens.

There are no confirmed testimonials, usage metrics, customer logos, or course completion data.

Product Principles

Show real work instead of merely describing what HTML can do.
Match fidelity to the decision; higher fidelity is not automatically better.
Use HTML when spatial, visual, comparative, or interactive expression adds leverage, and keep Markdown when it does not.
Preserve human understanding and judgment as agent output accelerates.
Keep the guide lean and familiar while making the catalog memorable.

Accessibility & Inclusion

Meet WCAG AA contrast for text and controls.
Provide complete keyboard access and visible focus.
Respect reduced-motion preferences.
Preserve semantic structure and readable alternatives for visual artifacts.
Make the core guide usable at narrow mobile widths as well as desktop.

5.2 KiB Raw Permalink Blame History