social-carousel

A 3-card social-media carousel laid out as 1080×1080 squares. Connected headlines, cinematic gradients, drop-into-Instagram ready.

インストール方法

デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。

npx skills add https://github.com/pujan-modha/clover-design --skill social-carousel

コマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。

ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。

インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。

SKILL.md

ソースの指示 · 読み取り専用プレビュー

name	social-carousel
description	A 3-card social-media carousel laid out as 1080×1080 squares. Connected headlines, cinematic gradients, drop-into-Instagram ready.
triggers	["social carousel","carousel post","instagram carousel","linkedin carousel","x thread cards","social series"]
df	{"mode":"prototype","platform":"desktop","scenario":"marketing","preview":{"type":"html","entry":"index.html"},"design_system":{"requires":true}}

Produce a 3-panel social carousel on a single dark stage.

Read DESIGN.md. Pick loudest serif for headlines, mono for stamps.
Pick theme + 3 captions that read as one sentence: ("onwards." → "to the next one." → "looking ahead.")
Stage: full-bleed dark. Header strip with serif italic title
- mono description + "SERIES · 01 → 03" badge.
Cards: 3 squares (aspect-ratio: 1/1), rounded 12px.
- Background: layered radial+linear gradients (no images).
- Top-left: brand wordmark + micro index "AI · 01/03".
- Bottom-left: headline lockup, italic accent on one word.
- Bottom-right: "1× LOOP" mono stamp.
Self-check:
- Headlines form one sentence, feel cinematic.
- Each panel's color story is distinct.
- Mono only for index, stamp, captions.

Single index.html, inline CSS. Cards sized via clamp(280px, 30vw, 380px).