43 brief carousel skill

Dung khi can brief mot CHUOI NHIEU SLIDE — carousel Facebook, Instagram, LinkedIn hoac bo anh doc theo mach: hook o slide 1, xay gia tri o giua, CTA o slide cuoi, kem huong dan render HTML preview de duyet concept truoc khi vao production.

by minhnv0807·MIT license·★ 599 Stars on the repo·GitHub ↗

Use now

minhnv0807/master1 file shown

SKILL.md8.3 KB

Browse every file on GitHub↗

SKILL.md

Show the full text203 lines

43-brief-carousel/SKILL.md203 lines · 8.3 KB

PreviewCode

Outline

RawView on GitHub

Brief Carousel

Carousel khong phai "anh ghep" — la mot chuoi ke chuyen, moi slide phai keo nguoi doc sang slide tiep theo. Slide 1 quyet dinh swipe hay khong. Slide cuoi phai co CTA ro rang. Khong tu bia noi dung — thieu thi hoi user truoc.

Thu thap thong tin

Doc .agents/product-marketing-context.md, brand guideline va content nguon neu co. Neu user chua cung cap noi dung, hoi toi da 4 cau:

Chu de + noi dung nguon? Carousel nay tu bai content nao, hay can viet moi tu dau?
Muc tieu + tang pheu? Education / proof / offer / tips / story / comparison — TOFU / MOFU / BOFU?
Kenh + so slide? Facebook / Instagram / LinkedIn — bao nhieu slide (khuyen nghi 5-7)?
Copy va tone? Copy tung slide da co hay can viet? Tone gan gui / chuyen nghiep / bold / storytelling?

Nguyen tac

Slide 1 la quan trong nhat — dau tu 40% cong suc vao hook. Slide 1 quyet dinh swipe hay luot qua.
Copy tung slide duyet xong roi moi vao tool design — khong lam nguoc.
Moi slide 1 y duy nhat. Carousel khong phai powerpoint — khong nhoi text.
5-7 slide la ly tuong. Qua 9 slide nguoi xem drop giua chung. Neu noi dung dai hon 7 slide → chia thanh 2 carousel series.
Luon co CTA o slide cuoi. Carousel khong co CTA = bo phi toan bo cong suc.
Gioi han text: headline toi da 8 tu, sub toi da 15 tu, body toi da 25 tu moi slide.

Quy trinh

Buoc 1 — Xac dinh narrative arc

Carousel tot co arc ro rang truoc khi phan bo noi dung:

Hook → Problem → Insight → Solution → Proof → CTA

Xac dinh arc truoc, sau do moi chia noi dung vao tung slide. Voi noi dung co san: slide 1 = cau hook manh nhat (pain point / cau hoi / so lieu soc), slide giua = proof / giai thich / loi ich, slide cuoi = action ro rang.

Buoc 2 — Viet copy tung slide

Moi slide gom: headline (toi da 8 tu) + body (toi da 25 tu) + visual direction. Copy phai duoc duyet truoc khi designer bat dau layout.

Buoc 3 — Brief visual direction tung slide

Moi slide co visual direction rieng — khong de designer tu doan. Mau nen doc tu brand guideline: slide hook va slide CTA dung nen dam ([mau primary] hoac gradient [mau primary] sang [mau secondary]) de tao contrast, slide body dung nen sang de co breathing room.

Buoc 4 — Render HTML preview de duyet concept

Truoc khi giao designer production, render 1 file HTML preview:

Canvas: 1080x1080px moi slide (1:1) — co the render 900x900 cho nhe.
Font: [font heading] / [font body] doc tu brand guideline (Google Fonts neu co).
Navigation: nut trai/phai de xem tung slide, counter "1 / N" goc duoi phai.
Slide hook + CTA: nen dam, chu sang. Slide body: nen sang, eyebrow mau accent, headline dam.

HTML preview = de duyet concept, khong phai file production. Sau khi duyet HTML → designer moi vao Canva/Figma lam file that.

Cau truc ket qua

Ten file: brief-carousel-[ten]-[YYYYMMDD].md

# Carousel Brief — [Ten]

## Tong quan
| Hang muc | Chi tiet |
|----------|----------|
| Muc dich | |
| Kenh | |
| Tang pheu | TOFU / MOFU / BOFU |
| So slide | |
| Kich thuoc | 1080x1080px (Feed) / 1080x1350px (Portrait) |
| Tone | |
| Deadline | |
| So lan sua toi da | |

## Brand direction (ap dung toan bo carousel)
- Nen chu dao: [trang / mau primary / gradient primary sang secondary / mixed]
- Font heading: [font heading] Bold — mau [...]
- Font body: [font body] Regular — mau [...]
- Accent: [mau secondary] — dung cho highlight / so lieu / CTA
- Logo: xuat hien toi thieu o slide 1 va slide cuoi (hoac tat ca slide neu brand guideline yeu cau), vi tri theo brand guideline

## Slide 1 — HOOK (quyet dinh swipe hay khong)
| Element | Noi dung |
|---------|----------|
| Headline | [cau hook manh — pain / curiosity / so lieu soc, toi da 8 tu] |
| Subtext | [1 cau ho tro hook — toi da 15 tu] |
| Visual | [full-color background / bold typography / anh goi cam xuc] |
| CTA mini | "Swipe de xem" hoac bo neu hook du manh |
| Nen | [nen dam — mau primary — tao contrast manh] |

## Slide 2 — PROBLEM / SETUP
| Element | Noi dung |
|---------|----------|
| Headline | |
| Body | |
| Visual | [icon / illustration / minimal text layout] |
| Nen | [sang/nhat — tao breathing room sau slide 1] |

## Slide 3 — INSIGHT / TURNING POINT
| Element | Noi dung |
|---------|----------|
| Headline | |
| Body | |
| Visual | [so lieu lon / quote / diagram don gian] |
| Accent | [highlight so lieu bang mau secondary] |

## Slide 4 — SOLUTION / VALUE
| Element | Noi dung |
|---------|----------|
| Headline | |
| Body | |
| Visual | |

## Slide 5 — PROOF / SOCIAL PROOF (neu co)
| Element | Noi dung |
|---------|----------|
| Headline | |
| Body | [testimonial / so lieu ket qua / case study ngan] |
| Visual | [screenshot / quote card / before-after] |

## Slide N-1 — PRE-CTA / RECAP
| Element | Noi dung |
|---------|----------|
| Headline | [tom tat gia tri — 1 cau] |
| Body | [nhac lai ly do hanh dong] |

## Slide cuoi — CTA
| Element | Noi dung |
|---------|----------|
| Headline | [CTA ro — dong tu + loi ich cu the] |
| Subtext | [huong dan buoc tiep theo] |
| CTA button | [text + link / "inbox tu khoa X"] |
| Logo + contact | [full logo, link / Zalo / email tuy campaign] |
| Nen | [nen dam — dong bo slide 1, tao vong tron visual] |

## Dieu khong duoc lam
- Khong dung mau ngoai palette brand guideline
- Giu text overlay gon (Meta khuyen nghi duoi 20% dien tich)
- Khong doi font ngoai [font heading] / [font body]
- Khong nhoi qua 1 y moi slide

Visual consistency rules

Moi slide co so trang nho o goc: "01/07", "02/07"...
Progress bar hoac dots indicator o bottom.
Transition feeling: slide sau phai "keo" tu slide truoc — khong dut doan (cau cuoi slide truoc mo ra slide sau).
Khong dung qua 3 mau text trong toan bo carousel.
Slide hook va slide CTA dung cung tong nen dam de tao vong tron visual.

Deliverables va review

File goc (share link — khong flatten)
Export tung slide rieng: PNG 1080x1080px
Export tat ca slide thanh 1 PDF de review de
Resize portrait 1080x1350px neu can Instagram
Quy trinh: duyet copy → duyet HTML preview → production → nop draft → feedback trong [X] gio → sua toi da [X] lan → approve boi Leader

Lien ket skill

36-content-brief / 01-lich-noi-dung: nguon noi dung va vi tri carousel trong lich.
42-brief-hinh-anh: brief anh don le — dung khi chi can 1 static thay vi chuoi slide.
45-brief-canva: direction thao tac Canva cho khau production sau khi duyet concept.
46-brand-guideline: nguon mau, font, logo rules.
47-design-review: cham diem carousel sau khi designer nop.

Checklist chat luong

Narrative arc ro: hook → value → CTA, moi slide 1 y
Slide 1 co hook du manh (pain / curiosity / so lieu)
Slide cuoi co CTA + huong dan buoc tiep theo
So slide 5-7, qua 7 da chia series
Headline toi da 8 tu, body toi da 25 tu moi slide
Copy tung slide da duyet truoc khi vao production
Mau nen tung slide chi ro, doc tu brand guideline
Co so trang + consistency rules
HTML preview render de duyet concept truoc production
Deliverables + so lan sua + nguoi approve ghi ro

1	---
2	name: 43-brief-carousel
3	description: "Dung khi can brief mot CHUOI NHIEU SLIDE — carousel Facebook, Instagram, LinkedIn hoac bo anh doc theo mach: hook o slide 1, xay gia tri o giua, CTA o slide cuoi, kem huong dan render HTML preview de duyet concept truoc khi vao production. Kich hoat khi user nhac 'brief carousel', 'lam carousel', 'bo slide dang Facebook', 'tach bai nay thanh carousel', 'brief slide', 'render carousel xem truoc', 'post nhieu anh'. Khong dung cho — mot anh tinh don le thi dung skill 42-brief-hinh-anh; slide thuyet trinh ban hang thi dung skill 71-sales-enablement; huong dan thao tac tren Canva thi dung skill 45-brief-canva."
4	metadata:
5	version: 1.0.1
6	category: content
7	license: MIT
8	triggers:
9	- "brief carousel"
10	- "lam carousel"
11	- "carousel tu content nay"
12	- "brief slide"
13	- "brief slider"
14	- "render carousel"
15	- "tao carousel"
16	output: "File .md — brief chi tiet tung slide (headline, body, visual direction, mau nen) + huong dan render HTML preview duyet concept truoc khi giao designer production."
17	related:
18	- 42-brief-hinh-anh
19	- 41-campaign-asset-list
20	- 01-lich-noi-dung
21	- 36-content-brief
22	- 45-brief-canva
23	- 46-brand-guideline
24	- 47-design-review
25	---
26
27	# Brief Carousel
28
29	> Carousel khong phai "anh ghep" — la mot chuoi ke chuyen, moi slide phai keo nguoi doc sang slide tiep theo. Slide 1 quyet dinh swipe hay khong. Slide cuoi phai co CTA ro rang. Khong tu bia noi dung — thieu thi hoi user truoc.
30
31	## Thu thap thong tin
32
33	Doc `.agents/product-marketing-context.md`, brand guideline va content nguon neu co. Neu user chua cung cap noi dung, hoi toi da 4 cau:
34
35	1. Chu de + noi dung nguon? Carousel nay tu bai content nao, hay can viet moi tu dau?
36	2. Muc tieu + tang pheu? Education / proof / offer / tips / story / comparison — TOFU / MOFU / BOFU?
37	3. Kenh + so slide? Facebook / Instagram / LinkedIn — bao nhieu slide (khuyen nghi 5-7)?
38	4. Copy va tone? Copy tung slide da co hay can viet? Tone gan gui / chuyen nghiep / bold / storytelling?
39
40	## Nguyen tac
41
42	1. Slide 1 la quan trong nhat — dau tu 40% cong suc vao hook. Slide 1 quyet dinh swipe hay luot qua.
43	2. Copy tung slide duyet xong roi moi vao tool design — khong lam nguoc.
44	3. Moi slide 1 y duy nhat. Carousel khong phai powerpoint — khong nhoi text.
45	4. 5-7 slide la ly tuong. Qua 9 slide nguoi xem drop giua chung. Neu noi dung dai hon 7 slide → chia thanh 2 carousel series.
46	5. Luon co CTA o slide cuoi. Carousel khong co CTA = bo phi toan bo cong suc.
47	6. Gioi han text: headline toi da 8 tu, sub toi da 15 tu, body toi da 25 tu moi slide.
48
49	## Quy trinh
50
51	### Buoc 1 — Xac dinh narrative arc
52
53	Carousel tot co arc ro rang truoc khi phan bo noi dung:
54
55	```
56	Hook → Problem → Insight → Solution → Proof → CTA
57	```
58
59	Xac dinh arc truoc, sau do moi chia noi dung vao tung slide. Voi noi dung co san: slide 1 = cau hook manh nhat (pain point / cau hoi / so lieu soc), slide giua = proof / giai thich / loi ich, slide cuoi = action ro rang.
60
61	### Buoc 2 — Viet copy tung slide
62
63	Moi slide gom: headline (toi da 8 tu) + body (toi da 25 tu) + visual direction. Copy phai duoc duyet truoc khi designer bat dau layout.
64
65	### Buoc 3 — Brief visual direction tung slide
66
67	Moi slide co visual direction rieng — khong de designer tu doan. Mau nen doc tu brand guideline: slide hook va slide CTA dung nen dam ([mau primary] hoac gradient [mau primary] sang [mau secondary]) de tao contrast, slide body dung nen sang de co breathing room.
68
69	### Buoc 4 — Render HTML preview de duyet concept
70
71	Truoc khi giao designer production, render 1 file HTML preview:
72
73	- Canvas: 1080x1080px moi slide (1:1) — co the render 900x900 cho nhe.
74	- Font: [font heading] / [font body] doc tu brand guideline (Google Fonts neu co).
75	- Navigation: nut trai/phai de xem tung slide, counter "1 / N" goc duoi phai.
76	- Slide hook + CTA: nen dam, chu sang. Slide body: nen sang, eyebrow mau accent, headline dam.
77
78	HTML preview = de duyet concept, khong phai file production. Sau khi duyet HTML → designer moi vao Canva/Figma lam file that.
79
80	## Cau truc ket qua
81
82	Ten file: `brief-carousel-[ten]-[YYYYMMDD].md`
83
84	```markdown
85	# Carousel Brief — [Ten]
86
87	## Tong quan
88	\| Hang muc \| Chi tiet \|
89	\|----------\|----------\|
90	\| Muc dich \| \|
91	\| Kenh \| \|
92	\| Tang pheu \| TOFU / MOFU / BOFU \|
93	\| So slide \| \|
94	\| Kich thuoc \| 1080x1080px (Feed) / 1080x1350px (Portrait) \|
95	\| Tone \| \|
96	\| Deadline \| \|
97	\| So lan sua toi da \| \|
98
99	## Brand direction (ap dung toan bo carousel)
100	- Nen chu dao: [trang / mau primary / gradient primary sang secondary / mixed]
101	- Font heading: [font heading] Bold — mau [...]
102	- Font body: [font body] Regular — mau [...]
103	- Accent: [mau secondary] — dung cho highlight / so lieu / CTA
104	- Logo: xuat hien toi thieu o slide 1 va slide cuoi (hoac tat ca slide neu brand guideline yeu cau), vi tri theo brand guideline
105
106	## Slide 1 — HOOK (quyet dinh swipe hay khong)
107	\| Element \| Noi dung \|
108	\|---------\|----------\|
109	\| Headline \| [cau hook manh — pain / curiosity / so lieu soc, toi da 8 tu] \|
110	\| Subtext \| [1 cau ho tro hook — toi da 15 tu] \|
111	\| Visual \| [full-color background / bold typography / anh goi cam xuc] \|
112	\| CTA mini \| "Swipe de xem" hoac bo neu hook du manh \|
113	\| Nen \| [nen dam — mau primary — tao contrast manh] \|
114
115	## Slide 2 — PROBLEM / SETUP
116	\| Element \| Noi dung \|
117	\|---------\|----------\|
118	\| Headline \| \|
119	\| Body \| \|
120	\| Visual \| [icon / illustration / minimal text layout] \|
121	\| Nen \| [sang/nhat — tao breathing room sau slide 1] \|
122
123	## Slide 3 — INSIGHT / TURNING POINT
124	\| Element \| Noi dung \|
125	\|---------\|----------\|
126	\| Headline \| \|
127	\| Body \| \|
128	\| Visual \| [so lieu lon / quote / diagram don gian] \|
129	\| Accent \| [highlight so lieu bang mau secondary] \|
130
131	## Slide 4 — SOLUTION / VALUE
132	\| Element \| Noi dung \|
133	\|---------\|----------\|
134	\| Headline \| \|
135	\| Body \| \|
136	\| Visual \| \|
137
138	## Slide 5 — PROOF / SOCIAL PROOF (neu co)
139	\| Element \| Noi dung \|
140	\|---------\|----------\|
141	\| Headline \| \|
142	\| Body \| [testimonial / so lieu ket qua / case study ngan] \|
143	\| Visual \| [screenshot / quote card / before-after] \|
144
145	## Slide N-1 — PRE-CTA / RECAP
146	\| Element \| Noi dung \|
147	\|---------\|----------\|
148	\| Headline \| [tom tat gia tri — 1 cau] \|
149	\| Body \| [nhac lai ly do hanh dong] \|
150
151	## Slide cuoi — CTA
152	\| Element \| Noi dung \|
153	\|---------\|----------\|
154	\| Headline \| [CTA ro — dong tu + loi ich cu the] \|
155	\| Subtext \| [huong dan buoc tiep theo] \|
156	\| CTA button \| [text + link / "inbox tu khoa X"] \|
157	\| Logo + contact \| [full logo, link / Zalo / email tuy campaign] \|
158	\| Nen \| [nen dam — dong bo slide 1, tao vong tron visual] \|
159
160	## Dieu khong duoc lam
161	- Khong dung mau ngoai palette brand guideline
162	- Giu text overlay gon (Meta khuyen nghi duoi 20% dien tich)
163	- Khong doi font ngoai [font heading] / [font body]
164	- Khong nhoi qua 1 y moi slide
165	```
166
167	## Visual consistency rules
168
169	- Moi slide co so trang nho o goc: "01/07", "02/07"...
170	- Progress bar hoac dots indicator o bottom.
171	- Transition feeling: slide sau phai "keo" tu slide truoc — khong dut doan (cau cuoi slide truoc mo ra slide sau).
172	- Khong dung qua 3 mau text trong toan bo carousel.
173	- Slide hook va slide CTA dung cung tong nen dam de tao vong tron visual.
174
175	## Deliverables va review
176
177	- [ ] File goc (share link — khong flatten)
178	- [ ] Export tung slide rieng: PNG 1080x1080px
179	- [ ] Export tat ca slide thanh 1 PDF de review de
180	- [ ] Resize portrait 1080x1350px neu can Instagram
181	- Quy trinh: duyet copy → duyet HTML preview → production → nop draft → feedback trong [X] gio → sua toi da [X] lan → approve boi Leader
182
183	## Lien ket skill
184
185	- `36-content-brief` / `01-lich-noi-dung`: nguon noi dung va vi tri carousel trong lich.
186	- `42-brief-hinh-anh`: brief anh don le — dung khi chi can 1 static thay vi chuoi slide.
187	- `45-brief-canva`: direction thao tac Canva cho khau production sau khi duyet concept.
188	- `46-brand-guideline`: nguon mau, font, logo rules.
189	- `47-design-review`: cham diem carousel sau khi designer nop.
190
191	## Checklist chat luong
192
193	- [ ] Narrative arc ro: hook → value → CTA, moi slide 1 y
194	- [ ] Slide 1 co hook du manh (pain / curiosity / so lieu)
195	- [ ] Slide cuoi co CTA + huong dan buoc tiep theo
196	- [ ] So slide 5-7, qua 7 da chia series
197	- [ ] Headline toi da 8 tu, body toi da 25 tu moi slide
198	- [ ] Copy tung slide da duyet truoc khi vao production
199	- [ ] Mau nen tung slide chi ro, doc tu brand guideline
200	- [ ] Co so trang + consistency rules
201	- [ ] HTML preview render de duyet concept truoc production
202	- [ ] Deliverables + so lan sua + nguoi approve ghi ro
203