Claude Skills by shayan-m81

github.com/shayan-m81

29 skillsA× 290 installs2 views

Figma DesignAWork 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.designjavascriptgoVotes: 0GitHub stars: 5
CheckACheck 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.designVotes: 0GitHub stars: 5
CodeAImplement 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.ai-agentsgoreactVotes: 0GitHub stars: 5
ComponentsATurn the selected Figma layers into a reusable component, several components, or one component set with variants and properties. Use for /layer:components.ai-agentsnodeVotes: 0GitHub stars: 5
ConnectAConnect 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.ai-agentsVotes: 0GitHub stars: 5
DesignADesign 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.ai-agentsVotes: 0GitHub stars: 5
DoctorAFind 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.ai-agentsVotes: 0GitHub stars: 5
EditAChange 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.ai-agentsVotes: 0GitHub stars: 5
HelpAWhat 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.designgitVotes: 0GitHub stars: 5
ImportABring 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.ai-agentsnodeVotes: 0GitHub stars: 5
InboxADo 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.ai-agentsVotes: 0GitHub stars: 5
PrototypeAWire Figma screens into a clickable prototype - interactions, transitions, overlays, flow starting points - and check for dead ends. Use for /layer:prototype.ai-agentsgoVotes: 0GitHub stars: 5
ReportADraft 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.ai-agentsgitVotes: 0GitHub stars: 5
ShotATake 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.ai-agentsnodeVotes: 0GitHub stars: 5
skillsAThe 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.designgogitVotes: 0GitHub stars: 5
Accessibility ReviewARun 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.designtestingVotes: 0GitHub stars: 5
Better AccessibilityAHelps your project comply with accessibility standards and best practices.designVotes: 0GitHub stars: 5
Better ColorsAHelps 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.ai-agentsgoVotes: 0GitHub stars: 5
Better LayoutAHelps with grouping, alignment, reading order, progressive disclosure and other details that make a good layout.designgoVotes: 0GitHub stars: 5
Better TypographyAFocuses on type scale, spacing, sizing, variable fonts, OpenType features, wrapping, truncation and other details that make typography feel great across your product.designgoawsVotes: 0GitHub stars: 5
Better UiAPolishes and improves the UI in your project. Covers concentric border radius, optical alignment, surface depth, contextual icons, hit areas and more.designspringperformanceVotes: 0GitHub stars: 5
BreakARenders a component you choose in every state and scenario on a temporary page and stress tests it.designdebuggingVotes: 0GitHub stars: 5
Create Design MdACreate 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.designgobashVotes: 0GitHub stars: 5
Design CritiqueAGet 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.designgoreactVotes: 0GitHub stars: 5
Design HandoffAGenerate 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.designgoreactVotes: 0GitHub stars: 5
Design SystemAAudit, 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.designgoapiVotes: 0GitHub stars: 5
Research SynthesisASynthesize 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.ai-agentsVotes: 0GitHub stars: 5
User ResearchAPlan, 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.designreacttestingVotes: 0GitHub stars: 5
Ux CopyAWrite 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.designgoVotes: 0GitHub stars: 5