plannotator__effective-html/site/PRODUCT.md

# Product

<!-- impeccable:product-schema 1 -->

## 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:

1. Publish thoughtful guidance about HTML as a medium for understanding,
   judgment, and collaboration with agents.
2. 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

1. Show real work instead of merely describing what HTML can do.
2. Match fidelity to the decision; higher fidelity is not automatically better.
3. Use HTML when spatial, visual, comparative, or interactive expression adds
   leverage, and keep Markdown when it does not.
4. Preserve human understanding and judgment as agent output accelerates.
5. 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.