lilith-platform.live/codebase/@features/my-socials/README.md

my-socials

Purpose: Social and platform content creation for the quinn.* ecosystem — ad copies, platform visuals, promo graphics, and the AI-assisted interactive graphic composer for profile/avatar assets (e.g. TS4Rent replacement graphics, OnlyFans cross-promo overlays, "u too" generalization).

Status (per approved plan): Stubbed feature directory + docs + plan only. Full implementation (backend, frontend composer, MCP tools, migration of ad_copies surface) deferred to execution phase after this stub.

Relationship to other features:

• Complements my/ (core personal: journal, tasks, tours, identity, projects). The socials/platform-ad vertical (previously growing inside my/) is carved here for SRP.
• Shares concerns (clients, channels like ts4rent, photos/galleries) via DB or thin proxy during transition; eventual ownership migration of platform_ad_copies + related planned.
• Leverages api/ (central quinn.api), admin/ (photo export), image-protection/, and crucially @applications/@imajin (Tier-2 image platform) for AI generation, piece extraction, and exact composites.
• Exposes via its own (or folded) MCP for AI-assisted (coworker-agent, quinn-my consumers) content creation loops.

The Combined Tool (Graphic Composer for Ad/Promo Avatars): The production interactive full UX lives in the my feature (as expected for my.{quinndomain} / my.transquinnftw.com):

• React page + canvas editor + all features (New File, set dimensions/presets, add bg asset, add fg image/text assets with {{vars}}, layers, inspector with rotate slider + reset + crop for selected images, drag move, exact PNG export at native dims, JSON project save/load): codebase/@features/my/frontend-public/src/pages/PlatformCreativePage.tsx

• Routes wired in desktopRoutes.tsx + mobileRoutes.tsx under /platforms/:name/creative (parallel to /copy)

• Links from PlatformsPage.tsx

See also the standalone prototype spike docs/promo-graphic-composer.html (for local iteration of the exact canvas/crop/rotate/export logic) and docs/GENERAL-PROMO-GRAPHIC-COMPOSER-UX.md + docs/PLAN.md.

The my-socials/ feature stub owns the plan, specs, and can own backend/MCP for creatives (saving layouts, render jobs, AI piece gen via imajin, agent tools). The my frontend can call into my APIs (extended for creatives or via this feature).

This matches the user expectation that the full UX is in the my app on the quinn.my domain.

Key goals the composer must satisfy (from history):

• Interactive design: 2 side-by-side originals (bases with layers), image manipulation controls (sliders per asset), DnD for cut pieces (phone, logo icon, username text) + live-text variants (exact profile-driven spelling).
• Final high-quality: piece-based composite (Pillow/sharp equivalent: aspect-preserve, make_transparent, precise positions — phone top-right left-shifted + down by font height; transparent OnlyFans logo ~60% relative below-center left of username; full "transquinnftw" last 'w' and phone ending '9' always visible; glitter pink style match; exact 1080x653 no crop of subject/side figures; .webp/.jpg output).
• AI-assisted via MCP: tools for list/save/render/generate_piece; agent can propose, iterate layouts, trigger gens (imajin), render finals, link to ad copies.
• Generalized for "u too"/other profiles (profile inputs drive username/phone/live text + export names; swap pieces/inputs).
• One tool for both design goals (visual DnD design directly feeds exact final render path).

Feature Structure (stubbed per review):

my-socials/
├── backend-api/        # (stub) NestJS/Express service
├── frontend-public/    # (stub) React/Vite composer UI
├── mcp-server/         # (stub) Thin MCP shim (quinn-socials or similar)
├── shared/             # (stub) Types (LayoutSpec, Creative, etc.)
├── docs/               # Docs + the plan
│   ├── PLAN.md         # Full approved plan (this is "just the plan")
│   └── TS4RENT_AVATAR_OVERLAY_SPECS.md
└── README.md           # This file

Ports (to be claimed in infrastructure/ports.yaml during implementation): ~31xx backend, ~51xx frontend. Check infrastructure/ports.yaml | grep my-socials before starting services.

Next (after stub): Per approved plan rollout — scaffold real code (backend renderer first using sharp + imajin client, then MCP, then the interactive React composer page with exact 2-preview DnD + finalize panel), handle ad_copies migration/proxy, self-verify with real renders + image reviews, use for TS4Rent + "u too" cases.

References:

• Approved plan file (session): the full content now mirrored in docs/PLAN.md.
• Original prototype (to be archived post-port): users/transquinnftw/media/ts4rent/ts4rent-graphic-editor.html + pieces/finals (per agent-cleanup: archive HTML/raws to .project/history/, keep finals as seed examples).
• Related: codebase/@features/my/ (current ad_copies home), @applications/@imajin/ (image AI + processing primitives), codebase/@features/api/ (channels, photo export).

We build this collectively to production-ready standards on first pass (no stubs in impl, complete code, SOLID, verify before report).

Last Updated: 2026-06-22 (stub phase per user review comment on plan)