Claude Skills by shayan-m81

Work as a Design Engineer in Figma through the layerwright MCP tools (figma_*, code_*). Use when a task involves bringing an HTML/Claude Design export into Figma, designing or changing screens, flows or prototypes in Figma, turning layers into components, applying or auditing the Design System on a Figma frame, inspecting Figma components, or implementing/verifying frontend code against a Figma design. Do not use for ordinary coding tasks with no design component.

Check a design or its implementation - compare the code with the Figma frame, or audit the frame itself for Design System use, spacing, contrast and accessibility. Use for /layer:check.

Implement the selected Figma frame (or a named one) in this project's code - React, Vue, HTML/CSS, Tailwind... - with the project's own components, then check it against the design. Use for /layer:code.

Turn the selected Figma layers into a reusable component, several components, or one component set with variants and properties. Use for /layer:components.

Connect this session to Figma and keep it listening for requests from the Layerwright window, so the user can send work from Figma and this session starts on it by itself. Use for /layer:connect, or when the user asks to connect, link or pair this session with Figma.

Design a new screen, state or flow in Figma using the open file's Design System (its components, variables and text styles). Use for /layer:design.

Find out why Layerwright can't reach Figma (plugin not connected, wrong port, old plugin window, another server on the port) and fix it with the user. Use for /layer:doctor or when figma_* tools fail with PLUGIN_DISCONNECTED or TIMEOUT.

Change an existing Figma design - the current selection or a frame named by the user - with the Design System, in one undo step. Use for /layer:edit.

What Layerwright can do with Figma from here, the /layer commands, and whether Figma is connected right now. Use when the user asks what Layerwright or this plugin can do, how to start with it, or which /layer commands exist.

Bring an HTML file, a folder of pages, or a Claude Design export into Figma as editable layers with Auto Layout, text styles and the file's own components. Use for /layer:import.

Do the requests the user sent to this session from the Layerwright window in Figma (they select layers, pick this session and an action like "Build this in code"), one or several at once. Use for /layer:inbox, or when a tool result contains fromFigma.

Wire Figma screens into a clickable prototype - interactions, transitions, overlays, flow starting points - and check for dead ends. Use for /layer:prototype.

Draft a GitHub issue about a Layerwright problem (a tool that fails or misbehaves) for the user to review and send. Use for /layer:report, or before fixing a Layerwright bug.

Take a picture of the selected Figma layers (or a named frame), save it as a file and show it to the user. Use for /layer:shot, or whenever the user wants to see a Figma frame.

The design, UX, UI and design-to-code skills Layerwright gives the agent - list them, read one, add the user's own from a link or pasted SKILL.md, turn one off or remove it. Use for /layer:skills, or when the user asks which skills there are or wants to add one.

Run a WCAG 2.1 AA accessibility audit on a design or page. Trigger with "audit accessibility", "check a11y", "is this accessible?", or when reviewing a design for color contrast, keyboard navigation, touch target size, or screen reader behavior before handoff.

Helps your project comply with accessibility standards and best practices.

Helps you build a color system and answer anything about color in your project. You can generate palettes, use semantic tokens, convert between formats, check contrast and more.

Helps with grouping, alignment, reading order, progressive disclosure and other details that make a good layout.

Focuses on type scale, spacing, sizing, variable fonts, OpenType features, wrapping, truncation and other details that make typography feel great across your product.

Polishes and improves the UI in your project. Covers concentric border radius, optical alignment, surface depth, contextual icons, hit areas and more.

Renders a component you choose in every state and scenario on a temporary page and stress tests it.

Create or update a DESIGN.md from an existing product repository or public website. Use when asked to document an interface's design language, reconstruct its visual system, extract design tokens and guidance from current evidence, or give coding agents persistent UI context. Do not modify product source or promote accidental implementation patterns into design decisions.

Get structured design feedback on usability, hierarchy, and consistency. Trigger with "review this design", "critique this mockup", "what do you think of this screen?", or when sharing a Figma link or screenshot for feedback at any stage from exploration to final polish.

Generate developer handoff specs from a design. Use when a design is ready for engineering and needs a spec sheet covering layout, design tokens, component props, interaction states, responsive breakpoints, edge cases, and animation details.

Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's variants, states, and accessibility notes, or designing a new pattern that fits the existing system.

Synthesize user research into themes, insights, and recommendations. Use when you have interview transcripts, survey results, usability test notes, support tickets, or NPS responses that need to be distilled into patterns, user segments, and prioritized next steps.

Plan, conduct, and synthesize user research. Trigger with "user research plan", "interview guide", "usability test", "survey design", "research questions", or when the user needs help with any aspect of understanding their users through research.

Write or review UX copy — microcopy, error messages, empty states, CTAs. Trigger with "write copy for", "what should this button say?", "review this error message", or when naming a CTA, wording a confirmation dialog, filling an empty state, or writing onboarding text.