Wedding Invitation

Use this skill when the user wants to design and generate a wedding invitation card in any language. The skill drives a conversational workflow — you gather the couple's info and style preferences, design a bespoke HTML template from scratch (no template selection), render it locally with headless Chrome, produce a print-ready PNG, and include a live tweak panel so the user can adjust colors, fonts, frames, and optional components without rebuilding. All data stays on the user's machine; no cloud, no signups, no data leaves.

7 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add wyx-sg/wedding-invitation-skill --skill wedding-invitation

Manual install

git clone --depth 1 https://github.com/wyx-sg/wedding-invitation-skill.git /tmp/wedding-invitation-skill
mkdir -p ~/.claude/skills
cp -r /tmp/wedding-invitation-skill/. ~/.claude/skills/wedding-invitation

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Wedding Invitation Skill

## When to invoke

The user asks for help making a wedding invitation, save-the-date, or a similar event card (engagement, anniversary, etc.) in any language. They want a single image or set of images — not a website, not a SaaS product.

## Core principle: design, don't pick

This skill **does not** have a generic template gallery the user picks from. Every invitation is **designed from scratch for this specific couple** in the language(s) they want.

How many designs end up in the final gallery depends entirely on the **style picker** in Stage 3 — it's multi-select. Pick 1 aesthetic → 1 design. Pick 3 → 3 designs. Stage 4 produces a navigation gallery (`dist/preview.html`) + a tweak studio per design (`dist/<id>-studio.html`); Stage 5 produces the final gallery (`dist/index.html`) + detail page per design (`dist/<id>-page.html`). No mode flag, no upfront mode choice — count emerges naturally from picker selections.

Each design is custom-built (not pulled from a frozen template library) using `design-principles.md` as the visual vocabulary.

Your job:
1. Talk with the user to learn who they are, what language(s), and which aesthetic direction(s) fit their photos
2. Design **fresh** HTML template(s) tailored to them, one per direction they picked
3. Render them locally + open the gallery, where each design can be downloaded or tweaked via a live tweak panel

Read the full skill on GitHub

Details

Skill name: wedding-invitation
Repository: wyx-sg/wedding-invitation-skill
License: MIT
Repo updated: 25 May 2026

FAQ

What does the Wedding Invitation skill do?

How do I install the Wedding Invitation skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add wyx-sg/wedding-invitation-skill --skill wedding-invitation. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Wedding Invitation popular?

It lives in wyx-sg/wedding-invitation-skill, which has 7 GitHub stars and 0 forks.

Related skills

Yafa UI Dashboard

rejourneyco/yafa-ui-dashboard

Design, build, refactor, or review polished responsive analytics dashboards, SaaS admin dashboards, business intelligence interfaces, and data-heavy product UI using Yafa-UI. Covers sidebar navigation, one-row page headers, multi-color KPI cards, charts, tables, filters, Lucide icons, accessible states, and mobile dashboard layouts across React, Next.js, Tailwind CSS, Vue, Svelte, and other frontend stacks. Do not use this visual system as the default for marketing sites, authentication, setup wizards, account or billing settings, or unrelated public pages.

Frontend & Design

Tidyfactor Design

TidyFactor/Design

Code-native UI design lifecycle engine (Figma alternative) with Contextual Decision Layer (CDL). Supports all 7 design stages with zero per-page CSS/JS and pluggable CSS foundations (Native, Tailwind, daisyUI, Pico, Hybrid). Trigger on commands 'brief', 'study', 'init', 'brand', 'tokens', 'palette', 'layout', 'components', 'page', 'dashboard', 'motion', 'i18n', 'audit', 'deploy', or design system requests.

Frontend & Design

Apple Design

bowen31337/apple-design

Build web interfaces (HTML/CSS/JS, React, Vue, Tailwind) that look and feel like Apple made them — the real Apple aesthetic, not generic glassmorphism. Covers Liquid Glass / iOS-26 materials as rendered CSS+SVG (specular highlights, refraction, vibrancy, fallbacks), Apple's fluid-motion physics (springs by damping/response, velocity handoff, momentum projection, interruptibility, rubber-banding) implemented in BOTH Motion (motion.dev) and GSAP (Flip, ScrollTrigger, SplitText, Inertia), SF typography optics, a drop-in Apple design-token layer, and complete copy-paste components (glass nav, spri

Frontend & Design

Game UI Mobile Friendly Design

dungnotnull/game-ui-mobile-friendly-design-agent-skill

Mobile-Friendly Game UI Design & Touch-Friendly Interaction — Bulletproof production-grade harness for Mobile Game UI/UX & Touch Interaction Design analysis with zero placeholder code. Use this skill whenever the user asks for mobile game UI evaluation, touch interaction design, gesture discoverability analysis, accessibility assessment for games, one-handed mobile usability, thumb zone layout optimization, Fitts's Law application to touch targets, colorblind accessibility in games, or any mobile game interface design question. This skill provides evidence-backed analysis with academic citatio

Frontend & Design

Handdraw Skill

ToBeWin/HandDraw-Skill

Create deterministic hand-drawn, whiteboard, educational, and explainer MP4 animations from a JSON Animation DSL. Use when a user asks to make or edit a hand-drawn video, whiteboard animation, animated SVG explainer, or programmatic animation video.

Frontend & Design

Design Psychology

Fh-Ndiritu/design-psychology-skill

Audit or build any website/UI against research-backed conversion and design-psychology principles (Hick's Law, Von Restorff, Goal Gradient, Peak-End, Fitts's Law, the Aha moment, loss aversion, social proof, feedforward, labor illusion, and ~50 more). Use when reviewing a live URL or a local codebase for conversion/UX quality, or when designing or editing any user-facing surface — landing pages, pricing, onboarding, CTAs, forms, empty states, error flows, mobile screens. Auto-detects whether the target is a live URL or local source files. Brand-agnostic: derives the product's own tokens and vo

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.