← Cycles
app.qpoint.io · c1

documentation-cleanup

activecreated 2026-02-19· last activity 2026-03-12

Improve component documentation quality with better examples and human-AI collaborative workflow

Why

Component documentation across /lib pages lacks visual polish and example accuracy. The current documentation needs systematic improvement through a manual human visual review paired with AI-assisted implementation, enabling a more collaborative development workflow.

Objective

Establish a sustainable documentation workflow that combines human visual review and feedback with AI-assisted implementation to produce higher-quality, more accurate component documentation with better example sections.

Scope

  • Component documentation files in /lib pages
  • Example sections in component docs
  • Documentation generation and review workflow
  • AI-assisted documentation implementation tools

Key Changes

  • Document current state of /lib component pages
  • Establish human visual review checklist for documentation quality
  • Create AI-assisted example generation workflow
  • Implement improvements to 3-5 key components as proof of concept
  • Document lessons learned for future cycles
  • Make component documentation AI-friendly (added mid-cycle)

Outcome

Cycle established two complementary documentation layers:

  1. Human-facing: 116+ interactive LIB doc pages with live demos and examples
  2. AI-facing: Structured catalog, standards, patterns, decision trees, and JSON registry enabling AI assistants to accurately create, recommend, and compose with Qpoint components

Both layers are maintained through purpose-built agents (doc-writer/doc-auditor for human docs, registry-generator/component-expert for AI docs).

History

2026-02-17 — Documentation Coverage Complete

All component categories documented with LIB pages. 116+ doc pages across UX, Data Machine, Form, Health, Wizard, Content, Task, Filter, Page categories. doc-writer and doc-auditor agents established for ongoing maintenance.

2026-02-19 — AI-Friendly Component Documentation

Created a structured knowledge layer so AI assistants can effectively create and compose with Qpoint components.

Shared Knowledge Documents (.claude/skills/):

  • component-standards.md — Naming, props, emits, slots, styling, file structure conventions. The single source of truth for how components should be built.
  • component-catalog.md — Full catalog of 103 components with descriptions, props, slots, emits, usage guidance, and 12 decision trees for choosing between similar components (buttons, links, tags, inputs, code display, messages, data machine variants, table rows, table cells, health, filter).
  • component-patterns.md — 8 composition patterns with skeleton code: settings form, data table, modal dialog, filter bar, metrics dashboard, health display, page layout, wizard/onboarding flow.

Specialized Agents (.claude/agents/):

  • registry-generator.md — Scans all component source files and generates component-registry.json (machine-readable JSON with props, emits, slots, descriptions, doc page links for all 103 components across 12 categories).
  • component-expert.md — Creates new components following Qpoint standards. Workflow: understand requirement → check existing → design API → generate .vue → generate docs → update catalog/registry.
  • component-advisor.md — Recommends existing components for UIs, suggests compositions, compares similar components, and writes implementation code. Can both advise and build.

Generated Data:

  • component-registry.json — 103 components, 12 categories, machine-readable.

Qpoint Brand Style Guide