Landing Page Illustration Library

What it does

Manages a set of reusable SVG components (cards, badges, connectors, flow nodes) to assemble visual sections without redesigning from scratch. Keeps a flat, consistent style across the whole site.

When to use it

• Building multiple landing pages under the same visual identity
• Needing flow diagrams or integration graphics to explain a product
• Speeding up repetitive visual section layout

Steps

1. Audit which illustrations and primitives already exist in the library
2. Identify which components are missing for the current page
3. Adapt colors and proportions to the client's brand
4. Assemble the section using the shared components
5. Check visual consistency across the page's sections
6. Present the assembled page as a draft before publishing

The skill

---
name: landing-page-illustration-library
description: Organize and apply a library of reusable SVG illustrations and visual components to build landing pages faster.
---

# Landing Page Illustration Library

## 1. What it does
Manages a set of reusable SVG components (cards, badges, connectors, flow nodes) to assemble visual sections without redesigning from scratch. Keeps a flat, consistent style across the whole site.

## 2. When to use it
- Building multiple landing pages under the same visual identity
- Needing flow diagrams or integration graphics to explain a product
- Speeding up repetitive visual section layout

## 3. Steps
1. Audit which illustrations and primitives already exist in the library
2. Identify which components are missing for the current page
3. Adapt colors and proportions to the client's brand
4. Assemble the section using the shared components
5. Check visual consistency across the page's sections
6. Present the assembled page as a draft before publishing

## 4. Safety rules
Always work in draft mode: nothing is sent, published, or paid for without explicit client approval. Never invent data, metrics, or results. No passwords, tokens, or API keys are requested or shown in chat.

## 5. Deliverable
A clear, reviewable draft of the output (text, code, report, or file), ready for the user to approve before it becomes final.

For Claude Code, save it as ~/.claude/skills/landing-page-illustration-library/SKILL.md. In Cursor, ChatGPT or another assistant, paste it as project instructions.