WebsitePresent

Imported from BANG644/WebsitePresent (AGENTS.md). Install upstream with npx skills add BANG644/WebsitePresent. Copyright stays with the author.

WebsitePresent Codex Workflow

These instructions define the active Codex workflow for this repository.

Active Runtime Surfaces

• AGENTS.md is the shared always-on instruction surface.
• .codex/config.toml defines Codex runtime limits for this repo.
• .codex/agents/*.toml contains the custom specialist agents.
• .agents/skills/* contains the repo-local Codex skills.
• Do not treat archived source directories as active runtime instruction surfaces.

Project Mission

The repository exists to convert materials under input/ into HTML-native presentation outputs that can outperform PPT in interaction, animation control, pacing, and presentation clarity.

All collaboration behavior must serve that mission.

Core Principles

• HTML-first delivery: think in sections, states, scenes, anchors, and motion, not static slides.
• Presentation-first judgment: evaluate every change by whether it improves explanation, pacing, and audience understanding.
• Prompt-stack discipline: brief lock, direction lock, source and narrative framing, experience and motion decisions, implementation, critique, and release.
• Source-to-experience separation: source analysis, narrative framing, design direction, motion design, implementation, and QA are separate responsibilities.
• Versioned output: deliver changes through version-aware paths and notes, not silent overwrites.
• Reuse-first engineering: move reusable logic into src/ when it benefits future tasks; keep task-specific runtime snapshots under versions/.
• Skill-aware execution: if a repo skill already fits the job, use it instead of improvising a weaker flow.
• Windows-default execution: unless the user explicitly states another environment, use Windows-native paths, commands, and expectations.
• Clean-root discipline: do not scatter temporary working files in the repository root.

Prompt Stack Order

For meaningful presentation work, think in this order:

1. Brief lock
2. Direction lock
3. Source and narrative framing
4. Experience and motion decisions
5. Implementation
6. Critique and release gate

Do not collapse these layers into one blurry step.

Discovery Rules

Fresh presentation work starts with discovery, not implementation.

Use discovery when the task is:

• a new presentation task,
• a major redesign,
• a new version direction,
• a substantial creative request,
• any work where audience, tone, delivery shape, or reference style is still open.

Skip discovery only when at least one of these is true:

• the task is a surgical tweak inside an active task,
• the user explicitly says to skip questions,
• the task is a narrow fix with no change to direction, structure, or motion intent,
• the user is answering a question batch that was already asked.

If direction is unclear, lock direction before heavy design work begins.

The repository default curated directions are:

• Editorial Briefing
• Institutional Minimal
• Signal Utility
• Warm Humanized
• Stage Motion

If the user wants reference or brand matching, extract observable style evidence before styling.

Before implementation for a skill-driven task, read the seed or reference files that define the quality floor.

Before declaring presentation work done, run both:

• the relevant checklist gate,
• a five-dimension self-critique using Fit, Hierarchy, Execution, Specificity, and Restraint.

Execution Priority Rules

1. Parallel first: if two analyses do not depend on each other, run them in parallel.
2. Dependency before speed: if narrative depends on source clarity, do not skip the source step.
3. One-round maximize: complete the fullest safe slice of work in each turn instead of stopping early.
4. Narrow before broad: validate the touched presentation slice first before re-opening surrounding scope.
5. Explainability over novelty: unusual design or motion is welcome only when it improves delivery comprehension.

Agent Architecture

Coordinator Layer

• awesome_website_presenter_agent is the single orchestrator.
• It owns planning, delegation, synthesis, and final communication.

Strategy Layer

• source_strategist owns source inventory, extraction framing, task boundaries, and material risk detection.
• narrative_architect owns presenter logic, chapter order, narrative cadence, and section objectives.

Design Layer

• experience_director owns information architecture, interface rhythm, navigation, typography direction, and responsive behavior.
• motion_director owns animation intent, timing grammar, motion consistency, and motion-skill routing.

Production Layer

• frontend_producer owns implementation, structural integration, version-path discipline, and runnable output quality.

Governance Layer

• review_guardian owns release judgment, smoke-level verification, regression detection, and delivery blocking.

Working Modes

Rapid Mode

Use when:

• the task is already structured,
• only a narrow implementation or presentation fix is needed,
• the affected surface is obvious,
• no new animation system is required.

Expected route:

• coordinator confirms the slice,
• frontend_producer implements,
• review_guardian validates.

Planned Mode

Use when:

• a section must be re-framed,
• a new interaction or visual system is introduced,
• motion meaningfully changes,
• more than one major handoff is needed.

Expected route:

• coordinator routes source and narrative first,
• design and motion directions are set,
• production happens after those decisions,
• review_guardian blocks release until the integrated slice passes.

Studio Mode

Use when:

• a new task folder is being transformed from scratch,
• multiple versions are being explored,
• the output may become both a presentation page and a video-like artifact,
• source materials are messy or incomplete.

Expected route:

• source diagnosis,
• narrative framing,
• experience direction,
• motion direction,
• implementation,
• release review.

Directory Protocol

Input

• input/<task_name>/ is the authoritative source location for that task.
• Agents may read recursively inside that task folder.
• Agents must not write final outputs back into input/.

Shared Design Reasoning

• docs/outline/ stores refined speaking outlines and structural flow summaries.
• docs/decisions/ stores visual, interaction, motion, and delivery rationale.

Shared Runtime Assets

• src/core/ stores reusable presentation logic.
• src/styles/ stores reusable theming and presentation styles.
• src/data/ stores reusable structured content or data shims.
• src/templates/ stores reusable presentation template library with matching index.
• Additional reusable modules should follow the same separation principle.

Delivery Output

• versions/<task_name>/vN/site/ is the runnable task-specific artifact.
• versions/<task_name>/vN/notes.md records the intent and delta of that version.

Validation

• tests/smoke/ stores smoke-level acceptance criteria and reusable validation references.

Delegation Rules

• Call source_strategist when the task unit is unclear, sources are heterogeneous, or missing attachments are suspected.
• Call narrative_architect when chapter order is unclear, presenter rhythm is weak, or the page feels like raw material dumping.
• Call experience_director when interface structure changes, new navigation or interaction patterns appear, or a redesign is requested.
• Call motion_director when new animation or scene transitions are introduced, the user wants stronger motion language, or a motion-specific skill may be a better fit.
• Call frontend_producer when files under src/ or versions/ need to be created or changed and the direction is stable enough to implement.
• Call review_guardian when the change is about to be considered done, visible interaction changed, motion changed, or responsive behavior may have regressed.

Skill Routing Rules

Mandatory design skills

When visible UI is created or materially changed, incorporate:

• frontend-design
• ui-ux-pro-max

Skipping both is only acceptable for invisible maintenance work.

Prompt-stack workflow skills

• Use presentation-discovery to lock brief and direction before large creative work.
• Use presentation-critique to enforce checklist and critique gating before declaring completion.

Source extraction skills

• Use docx, pdf, pptx, and xlsx when source extraction or structured reading benefits from the installed workflow.

Motion skill routing

• Use presentation-motion-stack when the task is broadly about making HTML presentation motion better or deciding between live-page motion, special-effect engines, and video or export lanes.
• Use claude-typer for prompt typing animation.
• Use light-spotlight-render for spotlight reveal scenarios.
• Use procedural-fish-render for procedural fish video tasks.
• Use remotion-3d-ticker for continuous vertical media ticker scenes.
• Use remotion-vinyl-player for record-player-style music scenes.
• Use ruler-progress-render for ruler-like progress animation.
• Use svg-assembly-animator for parts-assembly SVG animation.
• Use wechat-2d-render for chat-style motion scenes.

Shared motion stack rule

• For HTML-first live presentation pages, the default shared motion lane is GSAP plus ScrollTrigger.
• CSS scroll-driven animations are the preferred native baseline for lightweight enhancement and graceful degradation.
• Remotion belongs to the video and export lane, not the default live-page runtime.
• three.js, PixiJS, Rive, Theatre.js, and similar engines must be treated as opt-in special lanes with an explicit reason.
• Do not place two primary motion runtimes on the same live page unless motion_director explicitly explains why the default lane is insufficient.

Delivery Gates

Gate 0: Brief Lock

• fresh work passed discovery,
• direction is chosen or reference style is extracted,
• main hard constraints are explicit.

Gate A: Source Integrity

• correct task boundary,
• complete enough source set for the chosen slice,
• no silent source substitution.

Gate B: Narrative Readiness

• each section has a speaking goal,
• section order has a reason,
• conclusion or action takeaway is explicit.

Gate C: Experience Readiness

• layout hierarchy is intentional,
• navigation model is coherent,
• mobile and desktop reading are both considered,
• the page does not read like a pasted document.

Gate D: Motion Readiness

• animation meaning is clear,
• timing supports comprehension,
• motion intensity matches the topic,
• fallback behavior is sane,
• reduced-motion behavior is defined,
• mobile behavior does not depend on heavy pinning or scroll hijacking.

Gate E: Production Integrity

• reusable logic sits in the right shared area when appropriate,
• task-specific snapshot sits in the correct version folder,
• version notes are updated if the delivery shape changed.

Gate F: Review Clearance

• navigation works,
• attachments or linked assets resolve,
• no severe layout breakage,
• no major interaction regression,
• smoke checklist expectations are met or explicitly waived,
• checklist and five-dimension critique were actually run.

Red Lines

• Do not flatten the task into a generic landing page when it is supposed to support live explanation.
• Do not dump long raw source text without restructuring.
• Do not add flashy motion that weakens comprehension.
• Do not skip discovery on fresh work because the user wrote a long prompt.
• Do not let visual direction emerge accidentally inside implementation.
• Do not treat every request for better animation as a reason to escalate into 3D or canvas-first architecture.
• Do not let frontend_producer silently rewrite story structure or design direction.
• Do not let review_guardian fix issues instead of reporting them.
• Do not mark work complete without a release gate.
• Do not mix different task folders into the same version lineage.
• Do not place scratch artifacts in the root directory.
• Do not bypass design skills on meaningful UI work.
• Do not bypass the critique gate just because the result looks good enough.

Workflow Improvement Rule

If the collaboration workflow itself needs to change:

• update the live Codex surfaces coherently,
• preserve the principle-driven style of the prompts,
• avoid making one role absorb too many responsibilities again.

[WebsitePresent] recent context, 2026-05-12 3:49pm GMT+8

Legend: 🎯session 🔴bugfix 🟣feature 🔄refactor ✅change 🔵discovery ⚖️decision 🚨security_alert 🔐security_note Format: ID TIME TYPE TITLE Fetch details: get_observations([IDs]) | Search: mem-search skill

Stats: 3 obs (937t read) | 0t work

May 12, 2026

784 3:18p 🔵 WebsitePresent 项目发现 14 个 GitHub Copilot Skills 785 3:31p ✅ Copilot Skill 迁移至 Claude Code Slash Command：presentation-discovery 786 3:35p ✅ 批量迁移 5 个 Copilot Skills 至 Claude Code 斜杠命令