메뉴
Pull live reviews from Google Places API (and other platforms) and embed them as responsive sliders/carousels in Next.js landing pages with Google branding. Use when the user asks to add reviews, testimonials, or social proof sections to a site.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Healthchecks, SSH access, model switching, and systemd debugging for the Appie fleet. Covers Appie-2 (Hetzner Hermes) and common failure modes.
Direct Google Calendar + Gmail + Contacts REST API access via Python. Use when gws CLI is broken (token cache decrypt failure) or google_api.py wrapper is unreliable. Companion to the bundled google-workspace skill.
State-of-the-art text-to-image generation with Stable Diffusion models via HuggingFace Diffusers. Use when generating images from text prompts, performing image-to-image translation, inpainting, or building custom diffusion pipelines.
Use 21st.dev Agent Elements — 25 shadcn/ui components purpose-built for AI agent UIs. Tool cards (Bash, Edit, Search, Plan, Subagent, MCP), chat, input, streaming. Open source, shadcn-registry install, no runtime lock-in.
Use v0 Design Systems 2.0, Bolt Design System Agents, or Lovable to generate production UI from a client's real design system components — not generic Tailwind. Use when building a client website where brand consistency matters.
Umbrella workflow for delegating coding work to local agent CLIs such as Claude Code, Codex, and OpenCode.
| name | social-proof-widgets |
| description | Pull live reviews from Google Places API (and other platforms) and embed them as responsive sliders/carousels in Next.js landing pages with Google branding. Use when the user asks to add reviews, testimonials, or social proof sections to a site. |
Pull live third-party reviews and embed them as branded, responsive carousels on landing pages.
# Step 1: Find the Place ID
curl -s "https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=<business name> <city>&inputtype=textquery&fields=place_id,name,rating&key=<API_KEY>"
# Step 2: Pull reviews (max 5 returned by API)
curl -s "https://maps.googleapis.com/maps/api/place/details/json?place_id=<ID>&fields=name,rating,user_ratings_total,reviews&key=<API_KEY>&language=en&reviews_sort=newest"
The Google Places API hard-limits to 5 reviews per call. Multi-language calls return the same reviews translated — do not count them as unique. The only way to get more is:
"59 Google reviews")For most landing pages, 4-5 quality reviews in a slider + the total count badge is sufficient social proof.
See references/responsive-slider-pattern.md for the full component template.
Key architectural decisions:
'use client') for motion/interactivityinitial/animate/exit)useEffect + setInterval (pause on hover via state)unoptimized to avoid Next.js image limits)Apply the standard responsive cascade on ALL elements:
mobile: base classes (text-xs, p-5, w-8, h-8, round-2xl)
tablet+: md: prefix (md:text-sm, md:p-10, md:w-10, md:h-10, md:rounded-3xl)
desktop: lg: prefix (when needed)
Every visual element scales: badge size, star size, card padding, arrow buttons, profile photo, section padding, heading font size.
Push to GitHub → Vercel auto-deploys. Verify at preview URL. Test at 375px, 768px, and 1440px.
language=nl, language=de) return the same 5 reviews translated — filter by unique text to avoid duplicates.google.com/maps often get empty pages or captchas. The Places API is the reliable path.git reset --soft with --no-verify: When cherry-picking specific changes, a soft reset stages EVERYTHING from the remote HEAD. Untracked imported files (like MetaEvents.tsx) get left behind, causing build failures. Use git cherry-pick for surgical commits or double-check git status for missing imports.profile_photo_url returns Google CDN URLs. Set unoptimized={true} on Next.js Image to avoid domain allowlist issues.===ME:social-proof-widgets