skills.rest
leadgenjay
leadgenjayCOMMUNITY
Explore all skills by this author →
GitHub

LGJ-graphics

Create flat SVG illustrations with LGJ design tokens and motion patterns.

11|4|Updated Jan 30, 2026
Search Tags:#svg#illustration#framer-motion#design-tokens#motion-graphics#lgj
One-click install
npx skills add https://github.com/leadgenjay/claude-skills --skill lgj-graphics
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: LGJ-graphics
Source: https://github.com/leadgenjay/claude-skills/tree/main/skills/LGJ-graphics
Command: npx skills add https://github.com/leadgenjay/claude-skills --skill lgj-graphics

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Establishes a cohesive LGJ brand illustration system that standardizes flat SVG visuals, animation patterns, and design tokens across pages, tools, and marketing materials.

Core Features & Use Cases

  • Flat SVG illustrations with design tokens to ensure consistent branding and visuals across all LGJ assets
  • Floating UI card aesthetics combined with Framer Motion animations for engaging, modern visuals
  • Shared component library and logos including 30 brand logos, tokens, and utilities for rapid asset creation and reuse
  • Design-token palette and typography guidance to maintain typography, color, and layout consistency across illustrations

Quick Start

Create a new LGJ illustration following the shared primitives and motion patterns, wiring it into the design-token palette.

Frequently Asked Questions about LGJ-graphics

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I standardize flat SVG illustrations across marketing and product pages?▼

You can standardize flat SVG illustrations by applying a shared brand illustration system that enforces consistent design tokens, vector primitives, and motion patterns across all marketing and product pages.

Can I use Framer Motion animations with a design-token palette for UI elements?▼

Yes, the system combines Framer Motion animations with a design-token palette to create engaging, modern floating UI card aesthetics and motion-driven elements for landing pages and campaigns.

What is a brand illustration system and when do I need it?▼

A brand illustration system is a standardized framework of flat SVG visuals, design tokens, and animation patterns. You need it to maintain visual cohesion across tools, pages, and marketing materials.

Do I need external raster assets or dependencies to build these vector illustrations?▼

No, you do not need external raster assets or dependencies. The system relies entirely on a shared component library, token palette, and built-in primitives to generate vector graphics.

How do I create a new illustration following shared primitives and motion patterns?▼

To create a new illustration, wire your vector composition into the design-token palette and apply the system's shared primitives and Framer Motion animation patterns for consistent branding.

What's the best way to maintain typography and color consistency across brand illustrations?▼

The best way to maintain typography and color consistency is by leveraging a design-token palette and typography guidance provided within the shared brand illustration component library.

Related Skills

Explore More Design & Creative Skills→
shuyu-labsshuyu-labs
288

brand-guidelines

Apply Anthropic brand colors and typography to documents and presentations.

Official
Basic
jieni777jieni777
1

animation-gen

Convert plain-English animation requests into CSS keyframes or Framer Motion variants.

Community
Intermediate
Tahasaif3Tahasaif3

framer-motion

Animate React components with Framer Motion's declarative motion primitives.

Community
Advanced
tiankong0101-bytetiankong0101-byte

graphic-design

Create visual assets for branding, marketing, and presentations.

Community
Intermediate