Stats
Actions
Tags
From cklph-figma
Extract a design's tokens from Figma — brand colors, the type scale, and spacing — into a reusable map, and check whether the target already defines them. Use after reading a Figma frame and before styling, so output references existing design-system values instead of hardcoded one-offs.
How this skill is triggered — by the user, by Claude, or both
Slash command
/cklph-figma:figma-tokensThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Pull the design's **tokens** once, map them, and reference the map everywhere. Then check whether the
Pull the design's tokens once, map them, and reference the map everywhere. Then check whether the target system already defines them — if it does, bind to those, don't re-create them.
get_variable_defs on a representative node returns the bound variables:
{ "Colors/Brand/FinCore/Purple": "#b41a83",
"Colors/Brand/FinCore/Blue": "#00205c",
"Font/Family/Headlines": "IBM Plex Serif",
"Font/Size/Heading/H3": "44", "Font/Line Height/Heading/H3": "48",
"Font/Size/Paragraph/P3": "16", "Font/Line Height/Paragraph/P3": "22",
"Spacing/M": "24", "Section Padding/padding-section-medium": "80",
"Container/container-large": "1280", "Border Radius/XSM": "8" }
Distill to a compact map you keep in working context: brand colors, the heading + paragraph scale (size/line-height/weight), the spacing steps, container width, radius.
Before applying any value, see if the target design system already holds it:
custom_colors / custom_typography (see cklph-elementor's
elementor-templates). If the brand scale is already there, reference it by id (__globals__),
don't paste hexes.:root tokens. Bind to the variable, not the literal.A value that exists in two places drifts. One source of truth = consistency for free, and it honors "don't break what's already built."
If the design uses a token the target lacks, add it to the target's system once (a new Kit global, a new CSS var), then reference it — so the next page inherits it too.
npx claudepluginhub chykalophia/cklph-marketplace --plugin cklph-figmaSearches MemPalace before answering questions about past work, people, projects, or prior decisions. Returns verbatim stored content instead of guessing from model memory.
Guides Payload CMS config (payload.config.ts), collections, fields, hooks, access control, APIs. Debugs validation errors, security, relationships, queries, transactions, hook behavior.
Implements vector databases with Pinecone, Weaviate, Qdrant, Milvus, pgvector for semantic search, RAG, recommendations, and similarity systems. Optimizes embeddings, indexing, and hybrid search.