Hosseinkm89
UserClaude Skills for product designers working in Figma — design systems, layout cleanups, Plugin API automation.
Categories
Indexed Skills (3)
auto-layout-refactor
Converts flat Figma frames built with absolute (free-form) positioning into proper auto-layout structures, in place. Triggers when the user describes a legacy or messy Figma file where layers were dragged into position instead of stacked — phrasings like "this file has no auto-layout", "everything is absolutely positioned", "refactor this screen to auto-layout", "auto-layout this page", "convert these frames to auto-layout", "clean up this old Figma file", "the layout is flat / has no structure", "add auto-layout to these frames", "wrap these into auto-layout", "fix this legacy layout", or "auto-layoutify". Also trigger when a designer opens an old design and asks for help making it editable, responsive, or maintainable. Do NOT trigger for creating new layouts from scratch (use figma-generate-design) or for component construction (use figma-generate-library).
accessibility-contrast-audit
Audits color contrast on a Figma page against WCAG 2.1 AA and AAA, then writes a clean, designed report onto a brand-new page in the same file. For every top-level frame it scores text contrast (1.4.3 AA and 1.4.6 AAA, with the large-text exception) and flags low-contrast UI strokes/borders (1.4.11, 3:1), giving each frame a PASS/FAIL verdict. The report lists one row per frame with pass/fail badges and a clickable link that jumps straight to that frame, plus its node address printed underneath — so findings are easy to act on without cluttering the layout. Triggers when a designer wants to check contrast or accessibility before handoff — phrasings like "check the color contrast on this page", "run a WCAG contrast audit", "is this design AA compliant?", "which frames pass AA and AAA?", "audit contrast and write up the results", "are my text colors accessible?", "find low-contrast text", "contrast check before handoff", or "make me an accessibility contrast report". Reads the designs and creates a report page
figma-rename-layers
Batch-renames Figma layers from their design content instead of leaving default names like "Frame 1" or "Rectangle 23". Walks every frame and its child layers on the current page, derives a readable Title Case name from the most prominent text, a contained component, or an image fill, and applies the names in batches the designer can undo. Triggers when a designer wants to clean up generic layer names — phrasings like "rename all my layers", "my layers are all called Frame 1, Frame 2", "auto-rename these frames based on what's inside them", "clean up the layer names on this page", "name my layers from their content", "batch rename layers", "rename layers by content", or "fix these default layer names". Renames frames plus their generic-named children, preserves names the designer set on purpose, and chunks large pages so each batch is one undo step. The skill also documents Figma's built-in AI "Rename layers" command as a manual fallback for nuanced cases — that feature is editor-UI only and cannot be trigger
Bio shown is the top-scored skill's repo description as a fallback — real GitHub bios land in a future update.