Figma Annotations Strategy
Generate strategic Figma annotations via MCP based on PRs, tickets, or user descriptions. Use when the user wants to document a screen, flow, or component for Figma, or mentions "figma annotations", "annotation strategy".
Install
npx skills add saralobo/skill-figma-annotations --skill figma-annotations-strategygit clone --depth 1 https://github.com/saralobo/skill-figma-annotations.git /tmp/skill-figma-annotations
mkdir -p ~/.claude/skills
cp -r /tmp/skill-figma-annotations/. ~/.claude/skills/figma-annotations-strategyPersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# Figma Annotations Strategy (via Figma Console MCP) ## Context and goal This skill automates the extraction and structuring of strategic context for screens, flows, or components, and attaches it directly in Figma via the `figma-console` MCP server. The result is the instant injection of native annotations (Figma Annotation tool, shortcut `Y`) onto components. **MANDATORY:** Cursor/Claude MUST use Figma's **native annotations**. Under no circumstances should it create separate "cards" or "frames" floating on the canvas, or use the comments tool. ## Activation trigger Whenever the user requests creation of "annotations for Figma", screen documentation, or provides a link/text and asks to extract context. ## Required flow ### 1. Context validation Before generating annotations, validate that the provided context covers the **5 critical points**: - **Screen/flow objective:** What is the user trying to accomplish? - **Critical business rules:** Restrictions, calculations, or essential logic. - **Important states or exceptions:** Loading, empty states, errors, edge cases. - **Technical dependencies:** APIs, permissions, hardware. - **Non-obvious behaviors:** Animations, transitions, conditional interactions. **If any essential information is missing, ask the user before proceeding!** ### 2. Native category definition Categories improve annotation scannability (native Figma colored pills). - Never include the category in the raw text (e.g. `[Behavior]`).
Details
- Skill name
figma-annotations-strategy- Repository
- saralobo/skill-figma-annotations
- License
- MIT
- Repo updated
- 2 March 2026
FAQ
What does the Figma Annotations Strategy skill do?
Generate strategic Figma annotations via MCP based on PRs, tickets, or user descriptions. Use when the user wants to document a screen, flow, or component for Figma, or mentions "figma annotations", "annotation strategy".
How do I install the Figma Annotations Strategy skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add saralobo/skill-figma-annotations --skill figma-annotations-strategy. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Is Figma Annotations Strategy popular?
It lives in saralobo/skill-figma-annotations, which has 10 GitHub stars and 3 forks.
Related skills
UI Styles
11chrzamz/ui-styles-skill
Participate before building or changing product UI: websites, apps, demos, dashboards, forms, visual redesigns, component-library selection, themes and interaction states. Act as a practical designer: understand the product, recommend and preview a direction, preserve a project visual standard, and implement it using the existing stack. 支持风格推荐、界面制作、组件库选型、主题 token、自定义风格。Skip backend-only work and nonvisual fixes.
Slizdeck
13pedroanze/slizdeck
Genera decks de slides HTML animados a partir de un design system propio — enfocado en pitch decks de startup (minimalista, poco texto, mucha imagen/gráfica), pero también sirve para charlas, demos y recaps de evento. Arquitectura deck-stage 1920×1080 con navegación por teclado, pensado para presentar en vivo. Trae cinco style packs listos (terminal oscuro, blanco puro, color dominante, denso en datos, editorial), cada uno con paleta, tipografía y reglas de composición validadas contra contraste WCAG y clichés visuales de IA. El design system se define de forma guiada —elegir un pack, inyectar
Designbrief
10Heiberg-Industries/designbrief
A library of UI design direction files that provide style guardrails for building tasteful, consistent interfaces. Use when building any UI — select a style or let the AI recommend one based on the project context.
Taxue Halftone
12taxueseek/taxue-halftone
半调海报:用限墨+网点把任意主题做成有结构、有质感、可复用的艺术封面。支持多种印刷语言(半调/孔版/双色/木刻/蓝晒/蓝染/复印机、1-bit 剪影、撕纸拼贴),按风格给出一致又有特色的封面。六项不变式出图前先定:纸色、墨色角色、叠印方式、印刷机制、主体走向、字图音量。触发词:半调海报、艺术封面、网点、孔版、双色、Riso、duotone、木刻、蓝晒、蓝染、蓝染海报、物影、蓝晒物影、反俗套蓝染、复印机美学、不完美印刷拼贴、撕纸拼贴、编辑型印刷拼贴、有意不完美、点阵解构、丝网海报、剪纸、窗花、中式剪纸、网点剪纸、经典致敬、风格模仿、致敬、名画、艺术流派、年代美学、视觉风格转译、波普、波点、圆点场、点画、视错觉、扁平矢量图形、艺术展览海报、平台封面(B站/小红书/抖音/公众号/头像/超宽)、主题结构印刷封面、限墨封面。不用于:全彩实拍、UI、图表、模板拼贴。
Frontend Design Pro
12Krishna-Modi12/frontend-design-pro
Production-grade frontend UI/UX skill registry. Auto-routes to the correct skill based on user intent. Use for anything involving what users see and click in a browser — building or fixing React/Next.js components, pages and layouts; visual defects; animation; dashboards; forms; accessibility audits; frontend performance; 3D with Three.js/R3F; design systems and tokens; and tests for any of it. Skip for backend logic, APIs, databases and infrastructure.
Ship Page
12Zooeyii/ship-page-skill
Create stunning, interactive landing pages for products, startups, and side projects — zero dependencies, single HTML file. Use this skill whenever the user wants to build a landing page, product page, launch page, marketing page, or any promotional web page for their app, tool, SaaS, open-source project, or personal brand. Also triggers when users say "I need a website for my product", "help me launch", "make a page for my app", or want to convert a README into a visual landing page. Works great for Product Hunt launches, GitHub project pages, and indie hacker ship days.
Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.