--- name: storyfeed-custom-css description: Mimic any publisher site's look in a StoryFeed embed — extract brand colors, fonts and button styles from the target site and produce feedCss/detailCss override JSON plus embed snippet and admin paste instructions. Use when asked to style, customize, theme, or brand-match a story-feed demo. version: 0.1.0 --- # StoryFeed Custom-CSS Skill Clone the visual identity of any media site into a `` embed, without touching the component bundle. ## When to use Use this skill when the user asks (in any language) to style / customize / theme a storyfeed demo to look like a target site, e.g.: > use storyfeedmedia.com custom-css skill for this storyfeed https://storyfeedmedia.com/demos/caras-demo.html and apply the styling to mimic this site https://caras.perfil.com ## Inputs you need 1. **Baseline demo URL** — a page embedding `` (e.g. `https://storyfeedmedia.com/demos/caras-demo.html`). Fetch it and read: - `` attributes (`endpoint`, `client`, `limit`, `background-blur`, …) - the ` ``` - `feedCss` is injected into every `` / `` shadow root; `detailCss` into ``. - Web fonts declared in the host `` ARE inherited through shadow boundaries, so load Google Fonts in `` and reference the family names inside `feedCss`/`detailCss`. - Never edit `public/js/story-feed*.js` or the component bundle. Only produce `feedCss` / `detailCss` + `` font links. ## Step 1 — Read the baseline demo Fetch the demo URL. Record `endpoint`, `client`, `limit` and the current `feedCss`/`detailCss` + font links. Keep the same `endpoint`/`client` in your output unless the user asks to change the feed source. ## Step 2 — Extract the target identity Fetch the target homepage (and 1–2 linked stylesheets if needed). Extract: | Token | Where to look | Example (CARAS) | |---|---|---| | Primary brand color | CTA buttons, badges, logo accents, link hovers | `#E30613` red | | Dark surfaces / text colors | body bg, card overlays, headlines | `#0F0F0F` / `#FFFFFF` / `#E2E2E2` | | Headline font | `h1`/`h2`, hero titles (`font-family`, weight, uppercase?) | `Roboto Condensed` 700, uppercase badges | | Body font | paragraphs, excerpts, dates | `Open Sans` 400 | | Button shape | `border-radius`, padding, uppercase, shadow on CTA | `4px` rect, uppercase, red w/ shadow | | Detail accents | blockquote border, excerpt bar, tag pills, avatar gradient | red left-bar, red `#tag` hover | Reference implementation: CARAS demo at `https://storyfeedmedia.com/demos/caras-demo.html` mimics `https://caras.perfil.com` (red `#E30613`, `Roboto Condensed` headlines, `Open Sans` body). ## Step 3 — Write `feedCss` (feed cards) Allowed selectors (applied to `` + ``): `:host`, `.panel`, `.media`, `.scrim`, `.content`, `.eyebrow`, `h2`, `p.subtitle`, `.footer`, `.meta`, `.author`, `.date`, `.footer-actions`, `.cta` (+`:hover`), `.share-actions`, `.share-btn`, `.share-btn svg`, `.copied-badge`. Rules: - `:host` sets the base `font-family` fallback stack. - `.scrim` gradient guarantees headline legibility over photos. - `h2` uses the editorial headline font; `p.subtitle` the body font with `-webkit-line-clamp: 3` truncation. - `.eyebrow` badge carries the primary brand color. - `.cta` carries the primary brand color + brand radius + hover state. - Circular buttons MUST stay geometrically centered: ```css .share-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 38px; height: 38px; min-width: 38px; min-height: 38px; box-sizing: border-box; border-radius: 50%; } .share-btn svg { width: 18px; height: 18px; display: block; margin: auto; } ``` ## Step 4 — Write `detailCss` (article reader) Allowed selectors (applied to ``): `:host`, `.wrap`, `.close` (+`:hover`), `.detail-page`, `.body`, `h2`, `.excerpt`, `.author`, `.avatar`, `.author-who`, `.content`, `.content p`, `.content strong, .content b`, `.content h1, h2, h3, h4`, `.content h3`, `.content a`, `.content blockquote`, `.content img`, `.tags`, `.tags-eyebrow`, `.tag` (+`:hover`), `.source`, `.detail-footer`, `.ad-disclosure`. Hide scraper leftovers with `.wrap #article-content ... { display: none !important; }`. Rules: - `:host` sets modal backdrop + base body font. - `h2` uses the headline font at 800; `.excerpt` is italic with brand `border-left: 3px solid `. - `.avatar` uses a brand gradient; `.content a` / `.content h3` / `blockquote` carry the brand color. - `.close` is a centered circle with brand hover. ## Step 5 — Emit the output (always all four parts) 1. **Font `` tags** for `` (Google Fonts, non-blocking pattern with `media="print" onload` + `