Turn the selected Figma layers into a reusable component, several components, or one component set with variants and properties. Use for /layer:components.
Scanned 10/6/2026
npx -y skills add shayan-m81/layerwright --skill components --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Components?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/shayan-m81-components)More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.
---
name: components
description: Turn the selected Figma layers into a reusable component, several components, or one component set with variants and properties. Use for /layer:components.
argument-hint: "[variant property, e.g. State]"
disable-model-invocation: true
---
# Make components
1. `figma_status` with a `title`, then `figma_inspect` target "selection" (`format: "summary"`). Nothing selected → ask the user to select the layers.
2. Decide the shape and say it before doing it: one component; several; or one component set when the layers are states or sizes of one thing (name the property, e.g. State = Default / Hover / Disabled, from what the user typed after the command when given).
3. `figma_edit` with a `componentize` op (`mode: "single" | "multiple" | "variants"`, `variants` per node, `exposeText` for text properties). It works on copies unless they want the originals replaced.
4. `figma_export_image` of the result; report the component names, properties and where they are.
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!