SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsreport-to-webpage

report-to-webpage

Frontend & websites

View repository

Updated 10-16 07:58

About this skill

Report-to-Webpage Orchestrator

Markdown analysis report (reports/*.md) and supplementary materials (_workspace/*.md) into a modern interactive web page (web/index.html + assets).

Execution mode: Agent team (pipeline + fan-out + incremental QA)

design-lead first creates the design system and data structure (pipeline stage 1), and based on those outputs, 3 members—visualization, frontend, and motion—work in parallel (fan-out), while web-qa verifies incrementally as soon as each module is completed.

Agent composition

Team member Agent type Role Skill Output
design-lead general-purpose Design system + information architecture + data.json (prerequisite) web-design-system web/_design/*
visualization-engineer general-purpose Interactive charts (Chart.js/ECharts) web-data-visualization web/scripts/charts.js + chart-configs/
frontend-engineer general-purpose HTML/CSS/Vanilla JS markup and components web-frontend-build web/index.html + styles/ + scripts/main.js
motion-designer general-purpose WebGL/Canvas background + GSAP scroll motion + micro-interactions web-motion-animation web/scripts/background-animation.js + scroll/microinteractions
web-qa general-purpose Incremental integration verification (tokens, data, semantics, responsiveness, performance) web-quality-assurance web/_design/qa-report.md
(Leader = orchestrator) — Progress coordination + final integration verification — User result reporting

Workflow

Phase 0: Context check (support for follow-up work)

  1. web/ Check whether the directory exists
  2. Determine execution mode:
    • web/ does not exist → Initial build. Go to Phase 1
    • web/ exists + partial modification request (e.g., "just redo the charts", "only change the background motion", "change the color theme") → Partial re-execution. Re-invoke only the relevant agent
    • web/ exists + full re-execution request → Existing web/을 web_{YYYYMMDD_HHMMSS}/then move to Phase 1
  3. For partial re-execution, specify the previous output path + change request in the relevant agent prompt

Phase 1: Input analysis & work directory preparation

  1. Identify input reports:
    • Primary: reports/SK하이닉스_분석보고서_20260512.md
    • Supplementary: _workspace/01~05_*.md
  2. web/_design/ Create directory
  3. Analyze user requirements:
    • Extract special requests (e.g., specified color theme, type of background motion)
    • Priorities (modernness vs information density, motion intensity, etc.)
  4. Input parameters to web/_design/00_input.mdsave to

Phase 2: Design system definition (pipeline stage 1 — design-lead alone)

Execution mode: Sub-agent (design-lead standalone prerequisite work)

Invoke design-lead alone to generate the design system, information architecture, and data.json:

Agent(
  name: "design-lead",
  subagent_type: "general-purpose",
  model: "opus",
  prompt: ".claude/agents/design-lead.md 역할 + .claude/skills/web-design-system/SKILL.md 스킬 따라 작업. 입력: reports/SK하이닉스_분석보고서_20260512.md + _workspace/*. 출력: web/_design/design-tokens.json, information-architecture.md, component-catalog.md, data.json, style-guide.md"
)

Why design-lead works alone first: because all 3 subsequent members (viz/frontend/motion) receive design-lead's outputs as input. Parallelizing would cause conflicts with tokens not yet finalized.

Output verification (web-qa 1st pass):

  • design-tokens.json completeness
  • Accuracy of original report figures in data.json
  • component-catalog sufficiency

Phase 3: Parallel implementation + incremental QA (fan-out — 4-person team)

Execution mode: agent team

After design-lead deliverables are ready, form a 4-person team (visualization, frontend, motion, web-qa):

TeamCreate(
  team_name: "web-build-team",
  members: [
    { name: "visualization-engineer", agent_type: "general-purpose", model: "opus",
      prompt: "..." },
    { name: "frontend-engineer", agent_type: "general-purpose", model: "opus",
      prompt: "..." },
    { name: "motion-designer", agent_type: "general-purpose", model: "opus",
      prompt: "..." },
    { name: "web-qa", agent_type: "general-purpose", model: "opus",
      prompt: "각 모듈 완성 직후 즉시 검증 (점진적 QA). 발견 버그는 해당 담당자에게 SendMessage. 단계별 검증 후 web/_design/qa-report.md 작성." }
  ]
)

TaskCreate(tasks: [
  { title: "차트 라이브러리 선택 + 7개 차트 구현", assignee: "visualization-engineer" },
  { title: "HTML 시맨틱 마크업 + CSS 디자인 토큰 + 반응형", assignee: "frontend-engineer" },
  { title: "Hero 배경 애니메이션(WebGL 또는 Canvas) + 스크롤 모션 + 마이크로 인터랙션", assignee: "motion-designer" },
  { title: "점진적 QA: 차트 완료 직후 검증", assignee: "web-qa" },
  { title: "점진적 QA: 마크업 완료 직후 검증", assignee: "web-qa" },
  { title: "점진적 QA: 모션 완료 직후 검증", assignee: "web-qa" },
  { title: "최종 통합 QA + qa-report.md", assignee: "web-qa", depends_on: ["..."] }
])

Team communication patterns:

  • visualization → frontend: chart container HTML spec (ID/structure) SendMessage
  • frontend → motion: background canvas container + trigger class spec SendMessage
  • motion → visualization: coordinate scroll-entry stagger timing SendMessage
  • web-qa → each owner: on bug discovery, specific location/expected/actual SendMessage

Deliverable storage:

Team member Output
visualization web/scripts/charts.js, web/scripts/chart-configs/*.js
frontend web/index.html, web/styles/*.css, web/scripts/main.js, web/scripts/data-loader.js
motion web/scripts/background-animation.js, scroll-animations.js, microinteractions.js, web/styles/animations.css
web-qa web/_design/qa-report.md

Phase 4: Final integration verification & results report

  1. Wait for all team members to finish work (check via TaskGet)
  2. Read web-qa final report
  3. If P0/P1 bugs are found, request rework from the responsible owner (1 cycle)
  4. Report results to the user:
    • Final deliverable path: web/index.html
    • Key implementation items (design system, 7 chart types, background motion, interactions)
    • QA report results (Pass/Warn/Fail counts)
    • Data limitations/unsecured items
    • Preview method: cd web && python3 -m http.server 8000 (or VS Code Live Server)

Phase 5: Cleanup

  1. Request shutdown from team members (SendMessage shutdown_request)
  2. Team cleanup (TeamDelete)
  3. web/_design/ Preserve directory (for post-verification/evolution)
  4. Record this build in the CLAUDE.md change history

Data flow

[보고서 + _workspace/]
         ↓
[design-lead] (선행, 서브 에이전트)
         ↓
web/_design/
  - design-tokens.json
  - information-architecture.md
  - component-catalog.md
  - data.json
  - style-guide.md
         ↓
[Team: visualization ↔ frontend ↔ motion ↔ web-qa]
         ↓
web/
  - index.html
  - styles/{main,components,responsive,animations}.css
  - scripts/{main,data-loader,charts,background-animation,scroll-animations,microinteractions}.js
  - scripts/chart-configs/*.js
  - _design/qa-report.md
         ↓
[사용자] — http.server로 미리보기

Error handling

Situation Strategy
design-lead failure Retry once. If it fails again, notify the user (prerequisite failure makes follow-up impossible)
1 team member fails (Phase 3) Retry once. If it fails again, proceed while specifying the missing area (e.g., static page without motion)
Chart data mismatch (found by QA) Request 1 fix from viz-engineer
Token hardcoding detected Request 1 fix from frontend
WebGL unsupported (motion) PASS if CSS gradient fallback works; if it fails, change to a static background
Report data unavailable (N/A) Clearly display "data unavailable" in the UI. Do not make arbitrary estimates
Many P0 bugs in Phase 4 integrated QA Agree on priorities after reporting to the user

Test scenarios

Normal flow

  1. User requests "turn the report into a webpage"
  2. Phase 0: web/ None → initial build
  3. Phase 1: analyze report/workspace files, web/_design/ generation
  4. Phase 2: run design-lead alone → generate tokens/IA/data.json, web-qa first-pass verification
  5. Phase 3: 4-person team composition, parallel implementation + incremental QA
  6. Phase 4: Final verification, report to user web/index.html report
  7. Phase 5: Team cleanup
  8. User checks via python3 -m http.server or browser

Error flow — Motion failure

  1. In Phase 3, motion-designer fails to compile WebGL shader
  2. Leader requests one retry
  3. On repeated failure, apply only CSS gradient fallback
  4. State in qa-report.md: "WebGL shader not applied, CSS gradient fallback used"
  5. Report to user as a static page

Partial re-execution flow — Modify chart only

  1. User says "The HBM market share chart colors don't match, just redo the chart"
  2. Phase 0: web/ exists + partial modification request detected
  3. Call only visualization-engineer alone (sub-agent), read previous chart-configs/ then modify only hbm-share.js
  4. web-qa re-verifies only that chart
  5. Report to user

Partial re-execution flow — Design token change

  1. User says "Make the light mode colors warmer"
  2. Call only design-lead to modify the light theme colors in design-tokens.json
  3. Call frontend-engineer to update CSS Custom Properties
  4. web-qa re-verification (confirm no impact on dark mode)

Preview method (user guidance)

cd /Users/robin/Downloads/kakaopay-research/web
python3 -m http.server 8000
# 또는
npx serve .
# 또는 VS Code Live Server 확장 사용

Open http://localhost:8000 in the browser.

Follow-up task keywords (reflected in description)

  • Design: "modify design", "change theme", "change colors", "make it more modern", "enhance glassmorphism"
  • Chart: "just redo the chart", "modify the HBM market share chart", "change the scenario chart"
  • Motion: "change the background animation", "lower the motion intensity", "make it more flashy", "make it simple"
  • Markup: "fix responsiveness", "mobile layout", "improve accessibility"
  • Data: "update with the latest data", "reflect the report update"
  • General: "re-execute", "make it again", "improve the previous result", "only a specific section"

Operations guide

  • When adding a new chart, only a viz-engineer + qa cycle (frontend only adds a container)
  • When adding a new section, design-lead's IA update → affects all other team members
  • When updating data, modifying only design-lead's data.json reflects automatically (data-loader fetches)
  • Rebuild recommended after quarterly earnings announcement (however, the analysis report itself must be updated first)