Skip to content

feat(landing): DesignFeatureFlow section - #46

Merged
AlexandreCamillo merged 11 commits into
mainfrom
feat/landing-design-feature-section
May 29, 2026
Merged

AlexandreCamillo merged 11 commits into
mainfrom
feat/landing-design-feature-section

Conversation

@AlexandreCamillo

Copy link
Copy Markdown
Collaborator

Summary

Adds a new section to the landing page explaining the design-feature skill — the 6-phase workflow that orchestrates a UI feature from "I want a pricing card" to a Design-System parity check.

  • Pipeline diagram (inline SVG, no images): 6 nodes connected by an accent-tinted rail, hidden on viewports < 1024px in favor of the card grid.
  • Six phase cards (00–05): Discovery, Design brainstorm, Promote, Tech brainstorm, Plan + execute, Visual + behavior QA.
  • Each card carries a Markup ↗ boost callout showing what the platform contributes at that step (hosted URL, version diff, agent context API, version-patch endpoint, regression pin reuse).
  • New `#design-loop` anchor added to the topbar nav.

Built on the existing landing primitives (`Section`, `Eyebrow`) — no new deps, no images, pure CSS + inline SVG.

Files

  • `src/components/landing/DesignFeatureFlow.tsx` (new, ~160 LOC)
  • `src/components/landing/DesignFeatureFlow.module.css` (new, ~210 LOC)
  • `src/app/landing/page.tsx` — mount between `FixLoopSteps` and `FeatureGrid`
  • `src/components/landing/Topbar.tsx` — add nav anchor

Test plan

  • `pnpm tsc --noEmit` clean
  • `pnpm vitest run tests/landing tests/unit/components/landing` — 27/27 pass
  • `biome check` clean on touched files
  • Visual review on dev server (tunnel link will be shared separately)

…ature skill

Six-phase pipeline (00–05) walking from framework discovery to visual+behavior
QA, with a Markup-boost callout per phase showing where the platform turns a
manual step into a hosted, addressable artifact (pin, version, diff).

Includes a small SVG rail diagram above the cards and a 'Design loop' link
in the topbar nav. No new dependencies — pure CSS + inline SVG built on the
existing landing primitives (Section, Eyebrow).
@github-actions

github-actions Bot commented May 29, 2026

Copy link
Copy Markdown

Coverage report

Metric Baseline (main) This PR Δ
Lines 58.57% 58.87% +0.30
Statements 55.64% 56.00% +0.36
Functions 50.91% 51.87% +0.96
Branches 47.66% 47.97% +0.31

- Drop the SVG pipeline rail (visual noise; the card grid already telegraphs
  the sequence).
- Remove the per-card 'Markup ↗' label — the styled callout already reads
  as a highlighted note; the label was redundant.
- Reposition the section as a third-party-skill pairing rather than a
  Markup-native flow. New lead leads with the value: lock UI before talking
  implementation. Adds a ghost-pill link to the skill repo
  (AlexandreCamillo/markup-design-toolkit).
…ills

markup-design-toolkit is deprecated. The skill family moved to
github.com/alkg-cloud/design-skills.
- Remove FixLoopSteps (was '#how-it-works') and CompareTable; hide Pricing
  block until commercial framing is ready. Drop the topbar 'How it works' nav
  link and re-point the footer 'Agent API' link to '#design-loop'.
- Rename topbar + hero CTAs from 'Spin it up' to 'Get started'.
- Rewrite DesignFeatureFlow phase boosts to lead with 'With Markup,' and
  drop the API/code references in favor of outcome language. Rename phase
  02 'Promote' to 'Lock the design' to match the new framing.
- Footer copyright: Alexandre Camillo -> ALKG.
- ThreeUp icons: swap glyphs for react-icons/vsc (VscPass, VscSymbolMethod,
  VscCode).
- FAQ: drop 'How are pin coordinates persistent?' (already covered by
  ThreeUp 'iframe is the truth' card).
- Quickstart: drop the agent-loop.sh curl card; the docker one is the
  whole quickstart now. Tighten the h2.
- Replace em-dashes in user-visible copy across landing components.
- Drop boost callouts from phases 00 (Discovery), 04 (Plan + build), and
  05 (Visual + behavior QA). Those phases stand on their own; the boost
  row was adding nothing concrete.
- Phase 01: replace 'mockup goes online with one click' (untrue: there is
  no click, the agent uploads automatically as part of the skill flow)
  with 'every iteration is uploaded for you'.
FAQ, Quickstart, Contributors (and the hidden Pricing) used Section
width="narrow" which capped them at 980px while the default sections
sit at 1200px. That left section titles unevenly aligned across the
page. Removing the narrow variant entirely (CSS + Section types +
callers) collapses every section onto the same 1200px container.
The two failing landing.spec.ts tests still looked for a "Drop pin"
button that has not existed since the ViewerShell migration. The
demo's create-annotation flow now: click "New annotation" → click
inside the iframe (title="Mockup") → fill the draft textarea ("Annotation
body") → click "Send" → annotation card appears with data-pin-target.
Drops the window.prompt mock (the old DraftCard used prompt, the new
one is a real textarea). Reset test uses the same flow to seed a 4th
annotation before exercising the two-click reset.
The /Reset|Click again/i regex used to disambiguate the demo's reset
button now also matches the CanvasToolbar's zoom-reset button
(aria-label 'Current zoom 100% - click to reset'), which appeared after
the ViewerShell migration. Narrow the regex to 'Reset demo' so only the
intended button is targeted.
Covers eyebrow + headline + lead + repo CTA, all six phase cards in
order, the boost-callout pattern (only on phases 01/02/03), and the
closing coda paragraph.

Restores the line coverage that was lost when FixLoopSteps and
CompareTable were removed in the previous commits on this branch.
These components had no direct tests before; adding minimal render
tests lifts branch + line coverage to recover the regression
introduced by removing FixLoopSteps and CompareTable.

The FAQ test also pins the removal of the 'pin coordinates' question
so it can't drift back in unnoticed.
These two pure helpers were sitting at 0% coverage and counted against
the project ratchet. Adding unit tests against their full surface
(every align path, every clamp branch, every regex outcome) lifts
line, statement, branch, and function coverage above the recorded
baseline.

Required to unblock the coverage ratchet — landing files are
excluded from the coverage scope by design, so the four landing-only
test files added in earlier commits don't show up in the totals.
@AlexandreCamillo
AlexandreCamillo merged commit 235fb15 into main May 29, 2026
10 checks passed
AlexandreCamillo added a commit that referenced this pull request May 29, 2026
Brand alignment: the public-facing owner string now matches the GitHub
org (alkg-cloud). Affects copyright (README, CLA, footer was already
updated in #46), the dev seed admin display name (with the qa-dev-flow
doc updated to reflect the new 'AL' avatar resolution), the sample
agent-context payload in docs, the avatar JSDoc example (swapped to
'Jane Doe' so the two-word case is still demonstrated), and the
AnnotationCard / Comment tests that hard-coded the previous name.
@AlexandreCamillo
AlexandreCamillo deleted the feat/landing-design-feature-section branch May 29, 2026 04:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant