250 free skills · page 5 of 5
Design Systems skills
Skills for design systems — component libraries, design tokens, theming, and turning Figma designs into code.
Real files from public repositories — hand-curated, never invented. Sorted by installs.
5 / 5page
using-westpac-uiwestpacgel/gel-nextGuides consumers of the @westpac/ui component library on correct usage, capabilities, and patterns. Use when asking how to use a GEL component, whether a component supports a feature, or how to implement a UI pattern with @westpac/ui.Design Systems54
edit-figma-designwarpdotdev/figma-skillsCreate or update Figma designs directly from a written product or UI description using the Figma MCP authoring tools. Use when the user wants a mockup, wireframe, screen, component, flow, or concept designed in Figma from text, or wants to iterate on an existing Figma file from textual feedback. Despite the name, this skill can start from a new blank file or edit an existing one. Do not use for capture-based workflows that turn a running page into Figma; use figma-generate-design for those, and use implement-design for code implementation requests. Requires Figma MCP server connection.Design Systems52
imagesyntax-syndicate/marketing-skillsWhen the user wants to create, generate, edit, or optimize images for marketing — blog heroes, social graphics, product mockups, profile banners, listing visuals, or brand assets. Also use when the user mentions 'AI image generation,' 'generate an image,' 'create a graphic,' 'product mockup,' 'hero image,' 'social media graphic,' 'banner image,' 'cover photo,' 'profile banner,' 'listing screenshot,' 'Flux,' 'Midjourney,' 'DALL-E,' 'GPT Image,' 'Ideogram,' 'Gemini image,' 'Canva,' 'Figma,' 'image optimization,' 'compress images,' 'WebP,' or 'OG image.' Use this for general-purpose marketing image creation and optimization. For paid ad image creative and platform-specific ad specs, see ad-creative. For video production, see video.Design Systems52
design-handoff-briefmohitagw15856/pm-claude-skillsTransform feature briefs into structured design briefs that give designers the context they need before opening Figma. Use when asked to write a design brief, create a design handoff, brief a designer on a new feature, or translate a PRD into design requirements. Produces a brief with user goal, emotional context, success criteria, constraints, edge cases, and out-of-scope boundaries.Design Systems51
figmazenobi-us/dotfilesUse when design, prototyping or referencing Figma files. Provides capabilities for inspecting design elements, extracting assets, generating code from designs, and managing Code Connect mappings via the figma-desktop MCP server.Design Systems51
web-styling-scss-modulesagents-inc/skillsSCSS Modules, cva, design tokensDesign Systems51
web-cssalexanderstephenthompson/claude-hubCSS architecture for vanilla CSS - organization, design tokens, responsive patternsDesign Systems50design-critiquemohitagw15856/pm-claude-skillsGive structured, constructive feedback on any design using UX frameworks. Use when asked to critique a design, review a UI, give feedback on a Figma file or wireframe, assess a user flow, or evaluate a design against UX principles. Produces actionable critique applying Jobs-to-be-Done, Gestalt principles, and usability heuristics, with prioritised issues and specific recommendations.Design Systems50figma-user-flow-plannermohitagw15856/pm-claude-skillsPlan user flows and screen states for a Figma design before any designing starts. Use when asked to plan a user flow, map out screens for a feature, define screen states, plan a Figma file structure, or work out what needs to be designed before opening Figma. Produces a complete flow map with all screens, states, entry/exit points, and a suggested Figma page structure.Design Systems49
sb-healthstrongeron/storybook-workbenchCheck design-system health for a React+Vite app — raw hex, undefined/unused tokens, scale gaps, DESIGN.md drift, and (opt-in) property→token-family misuse. Use for 'is my design system healthy', 'find raw colors', 'check tokens', or a mixed design system.Design Systems49Other tasks
same rules, different job
