170 Claude Code skills tagged Figma. Browse all third-party tool or service-related skills in the open ClaudSkills registry — free to install, one-click via the desktop app.
Showing all 170 skills.
Generate prototype React components + Storybook stories from Figma URLs. 6-phase pipeline: figma_to_react → UntitledUI matching → prototype synthesis → verify → storybook integrati
product
Configure Code Connect dans un projet pour mapper les composants Figma vers le code existant. Utiliser pour initialiser l'intégration Figma dans un projet, quand l'utilisateur dit
general
Figma-to-code design handoff patterns including Figma Variables to design tokens pipeline, component spec extraction, Dev Mode inspection, Auto Layout to CSS Flexbox/Grid mapping,
product
Maquina de design UI/UX. 67 estilos, 96 paletas, 57 font pairings, 13 stacks. Design system, componentes, landing pages, dashboards. Integra com shadcn, Figma, v0.
product
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 sha
product
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 sha
product
Extract design assets and metadata from Figma using the Figma REST API.
general
Convert an image (screenshot, mockup, Figma export) into an HTML page styled with Tailwind CSS. Use this skill whenever the user says "image-to-code …", asks to turn a design image
general
This skill should be used for external artifact ingestion: JIRA/Figma/Google Docs to SPEC.md + DESIGN.md via MCP connectors, plus cross-repo spec fetch with version pinning
general
Use when you need to design, review, or improve validation in Quarkus applications — including Bean Validation on JAX-RS resources, @Valid on parameters and CDI beans, constraint g
security
AI 原生 UI 设计与代码一体化工作流（claude-design / figma / v0 / lovable）。auto-loaded by frontend-agent；由 /import-design 命令显式触发。
general
Configure CI/CD pipeline for automated Figma-to-code generation with Anima. Use when automating design-to-code in GitHub Actions, setting up PR-based component generation, or integ
engineering
Diagnose and fix common Anima SDK design-to-code errors. Use when encountering Figma token errors, code generation failures, node not found issues, or output quality problems. Trig
general
Build automated Figma-to-React pipeline with the Anima SDK. Use when automating design handoff, building CI/CD design-to-code workflows, or creating a design system code generator
tools
Generate React/Vue/HTML code from a Figma design using the Anima SDK. Use when testing design-to-code conversion, learning Anima's code output format, or building your first automa
engineering
Install the Anima SDK and configure authentication for Figma-to-code generation. Use when setting up design-to-code automation, configuring Figma token access, or initializing the
general
Set up iterative design-to-code development loop with Anima SDK. Use when rapidly iterating on Figma-to-code output, comparing framework outputs, or building a local preview server
general
Production readiness checklist for Anima design-to-code pipelines. Use when deploying automated design-to-code services, preparing CI/CD Figma-to-code automation, or validating out
general
Implement reference architecture for Anima design-to-code automation. Use when designing a design system automation pipeline, structuring a Figma-to-React project, or planning team
engineering
Secure Anima and Figma tokens for design-to-code pipelines. Use when protecting API credentials, restricting Figma access scope, or hardening CI/CD design automation pipelines. Tri
security
Upgrade @animaapp/anima-sdk versions and handle API changes. Use when upgrading SDK versions, migrating from the Figma plugin workflow to SDK-based automation, or adapting to new A
tools
Use Figma webhooks to trigger automatic Anima code generation on design changes. Use when building event-driven design-to-code pipelines, auto-generating components when Figma file
general
Run the full design-to-code roundtrip — analyze a Figma design, surface gotchas, write designer answers back into the file via the Figma Plugin API (use_figma), re-analyze to confi
general
Export assets and read Figma file metadata using the figma CLI (silships). Use for file export, styles, and components. Does NOT fully replace the Figma MCP — keep MCP for design t
tools
Connects Figma design components to code components using Code Connect. Use when user says "code connect", "connect this component to code", "connect Figma to code", "map this comp
general
Sync React components to Figma designs. Use when: 'sync component to Figma', 'generate Figma from code', 'create design system in Figma', 'export React to Figma'. Parses React/TSX
general
Figma Dev Mode MCP 도구를 활용한 디자인-코드 변환 지원. 디자인 요소 추출, 코드 생성, 스크린샷 캡처, 메타데이터 분석 시 사용. Figma 링크나 디자인 작업 요청 시 자동 활성화.
general
Provides expertise in converting Figma designs to HTML/CSS using Figma MCP tools, with data attributes for content tracking and comprehensive analysis. Use when converting Figma de
general
Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize de
product
Deploy applications to Kubernetes with production-ready manifests. Supports Deployments, Services, Ingress, HPA, ConfigMaps, Secrets, StatefulSets, and NetworkPolicies. Includes he
engineering
Despliega aplicaciones en clústeres de Kubernetes usando manifiestos kubectl para Deployments, Services, ConfigMaps, Secrets y recursos Ingress. Implementa verificaciones de salud,
engineering
Automatically extract technical requirements from design references when user mentions Figma, uploads images, or says "implement this design". Analyzes colors, typography, spacing,
product
Эксперт по design handoff. Используй для спецификаций дизайна, Figma annotations и developer handoff.
product
Creates accurate frontend implementations from visual references while maintaining design consistency. Use when user provides Figma URLs, screenshots, design images, or requests UI
general
Extract comprehensive JSON design specifications from visual sources including Figma exports, UI mockups, screenshots, or live website captures. Produces W3C DTCG-compliant output
general
Detect and track design token drift between Figma design systems and code implementations - report-only skill that identifies inconsistencies and creates wrangler issues for resolu
product
Pixel-perfect Figma to React conversion using coderio. Generates production-ready code (TypeScript, Vite, TailwindCSS V4) with high visual fidelity. Features robust error handling,
growth
Converts Figma/design specifications into production-ready UI components with accurate spacing, typography, color tokens, responsive rules, and interaction states (hover, focus, di
general
Create Drupal paragraph types from Figma designs or screenshots using the design-specialist agent. Auto-activates when user provides a design reference and asks to create a Drupal
general
Create WordPress block patterns from Figma designs or screenshots using the design-specialist agent. Auto-activates when user provides a Figma URL or design mockup and asks to crea
general
Création de design systems cohérents avec tokens, composants et guidelines. Se déclenche avec "design system", "composants UI", "tokens", "style guide", "atomic design", "Figma com
product
Conseille sur la création de wireframes et mockups pour apps et sites. Se déclenche avec "wireframe", "maquette", "mockup", "prototype", "Figma", "UI layout", "comment structurer m
product
Documents all UI state variations (default, empty, error, loading, success) from Figma designs. Use when defining complete UI specifications before implementation.
general
Generate professional Product Requirement Documents (PRD) from multiple sources — Figma designs, briefs, user research, existing code. Includes risk analysis, RICE prioritization,
product
Downloads images, icons, and SVGs from Figma designs. Use when extracting visual assets from Figma for implementation.
general
Drupal SDC Figma-to-code pixel-parity workflow using direct Figma MCP tools, with screenshot-gated validation and node-specific capture dimensions.
engineering
Design system intelligence. Search AntD, Material-UI, Figma, Bootstrap, Tailwind specs. Generate compliant CSS code. Audit for violations. Components, colors, typography, spacing,
general
Automate user-installed Electron desktop apps (Slack, Discord, VS Code, Notion, Figma, Spotify, etc.) via CDP using this repo's Libretto CLI. Use when the task is to control a loca
engineering
Extracts and documents design tokens (colors, typography, spacing, shadows, etc.) from Figma designs. Updates the "デザイントークン" section in screen spec.md.
general
Extracts interaction specifications from Figma designs (hover states, transitions, animations, triggers). Updates the "インタラクション" section in screen spec.md.
general
Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Fig
general
Deep debugging for Figma API issues: network analysis, response inspection, and support escalation. Use when standard troubleshooting fails, diagnosing intermittent failures, or pr
engineering
Design and prototype interfaces in Figma - create, edit, and manage design files, components, and collaborate on design projects
product
Direct Figma API interactions for design asset management. Fetch files and components, extract design tokens, export images, manage comments, and access version history.
general
Choose between Figma integration architectures: CLI script, webhook service, or plugin. Use when deciding how to integrate with Figma, comparing REST API vs Plugin API, or planning
engineering
Automate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools first for current schemas.
general
Automate Figma design token sync and asset export in CI/CD pipelines. Use when setting up GitHub Actions for Figma, automating icon exports, or validating design token changes in p
engineering
Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code
content
Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "li
general
Diagnose and fix common Figma REST API and Plugin API errors. Use when encountering HTTP errors, plugin sandbox crashes, or unexpected API responses from Figma. Trigger with phrase
general
Extract design tokens, colors, typography, and spacing from Figma files via REST API. Use when building a design-to-code pipeline, syncing design tokens, or extracting styles from
general
Export images, icons, and assets from Figma files via the REST API. Use when building an asset pipeline, exporting icons as SVG/PNG, or rendering frames to images for documentation
general
Optimize Figma API usage to minimize costs and stay within plan limits. Use when analyzing request volumes, reducing unnecessary API calls, or choosing the right Figma plan for you
general
Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize de
product
Create a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling use_figma. Handles plan resolution vi
content
Handle Figma API data correctly: comments, versions, user data, and privacy compliance. Use when working with Figma comments API, version history, or ensuring GDPR compliance for F
general
Collect Figma API diagnostic evidence for support tickets and troubleshooting. Use when encountering persistent issues, preparing support tickets, or collecting diagnostic informat
engineering
Deploy Figma-powered applications to Vercel, Cloud Run, and Fly.io. Use when deploying webhook receivers, design token APIs, or Figma-connected web apps to production platforms. Tr
engineering
Extract design specifications from Figma designs using MCP server. Triggers on Figma URLs, design context extraction, or design-to-code workflows. Formerly also known as "figma-ext
general
Complete Figma design extraction for pixel-perfect implementation. Extracts design tokens, component specs, layouts, and responsive behavior systematically.
general
Parse Figma design files into structured screen hierarchies. Use when working with Figma API, extracting text/labels from design nodes, traversing node trees, detecting cover frame
general
Figma 디자인 시스템을 분석하여 .claude/rules/design-system/ 규칙 파일을 생성합니다. 디자인 토큰, 공통 컴포넌트, 레이아웃 패턴, 타이포그래피, 간격 체계 등 자체 디자인 시스템 구성에 필요한 모든 정보를 추출하고 규칙화합니다. Figma 디자인 규칙 추출, 디자인 시스템 문서화, design
product
Extracts design tokens from Figma files using the Figma REST API v1 and transforms them into platform-specific formats via Style Dictionary. Supports CSS custom properties, Tailwin
engineering
Extracts design tokens from Figma files using the Figma REST API and style-dictionary. Generates CSS custom properties, Tailwind configs, and Swift/Kotlin theme files from Figma co
engineering
Extracts design tokens from Figma files and generates production-ready CSS, SCSS, JSON, TypeScript, and W3C DTCG format files using the Figma MCP server
engineering
Generate Figma mockups from wrangler specifications with hierarchical file structure and approval tracking
general
Analyzes Figma designs and generates implementation-ready PRDs with detailed visual specifications. Use when user provides Figma link or uploads design screenshots. Requires Figma
product
Extract design data from Figma files using REST API scripts. Includes frame extraction, metadata retrieval, screenshots, design token extraction, annotations, and FigJam content fo
general
Extract components from Figma, convert designs to React components, sync design tokens, and generate code from designs. Bridge the gap between design and code with automated workfl
general
Configure Figma Enterprise features: OAuth 2.0, team management, and access control. Use when implementing OAuth flows, managing team/project access via API, or building Enterprise
general
Figma design expert for components, auto-layout, design systems, and developer handoff
general
Explore Figma designs by decoding the binary Kiwi wire protocol — full scenegraph access, SVG extraction, CSS properties, no REST API rate limits. Use when the user asks to inspect
general
Export Figma frames as PNG images via Figma REST API. Use when you need to get a design screenshot from a Figma URL for visual comparison.
general
Exports assets from Figma files using the Figma REST API v1. Extracts component sets, design tokens (colors, typography, spacing), and renders frames as SVG/PNG. Generates CSS cust
general
Extract design specifications and tokens from Figma files via MCP. Use when pulling design from Figma, extracting colors/typography, or converting Figma to spec. Triggers on keywor
general
Make your first Figma REST API call to fetch a file and inspect its node tree. Use when starting a new Figma integration, testing API connectivity, or learning the Figma document s
engineering
Use when working with Figma and UI icons are needed — triggers on icon names, icon libraries (Tabler, Lucide, Material Design, Phosphor, Heroicons), or requests to add/insert icons
general
Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Tr
content
Pixel-perfect implementation of Figma designs. When Claude needs to translate Figma designs into code with precise attention to autolayout, variables, and styles.
general
Translate a Figma screen or component into an implementation plan covering structure, states, constraints, and component boundaries.
general
Respond to Figma API outages, auth failures, and rate limit incidents. Use when Figma integration is down, experiencing errors, or running post-incident reviews for Figma-related f
general
Set up Figma REST API authentication with personal access tokens or OAuth 2.0. Use when connecting to the Figma API, generating tokens, configuring scopes, or setting up OAuth flow
general
Guidelines for integrating Figma designs with development workflows using MCP servers and best practices
general
Avoid the most common Figma API integration mistakes and anti-patterns. Use when reviewing Figma code, onboarding new developers, or auditing an existing Figma integration. Trigger
general
Load test Figma API integrations and plan for scale. Use when benchmarking API throughput, testing rate limit behavior, or planning capacity for high-volume Figma integrations. Tri
engineering
Set up a local development workflow for Figma plugin and REST API projects. Use when building Figma plugins, creating design-to-code pipelines, or developing against the Figma API
general
Use when working with Figma and brand or product logos are needed — triggers on brand names (React, Next.js, Vercel, Stripe, GitHub), company logos, or requests to add/insert logos
general
Pull frames/components via Figma MCP, normalize messy or non-autolayout designs, and generate faithful HTML/CSS (or Shopify Liquid) layouts with inferred spacing and responsiveness
general
Standardize Figma-to-code workflow using Figma MCP - always get_design_context first, then screenshot, use project tokens not hardcoded values, validate 1:1 parity
general
Migrate design systems between Figma files, or from other tools to Figma via API. Use when migrating design tokens between files, syncing variables across libraries, or building au
general
Configure Figma API access across dev, staging, and production environments. Use when setting up per-environment tokens, managing multiple Figma files, or isolating development fro
general
Set up monitoring, metrics, and alerting for Figma API integrations. Use when implementing observability for Figma operations, tracking API health, or configuring alerts for rate l
general
Optimize Figma REST API performance with caching, partial fetches, and connection reuse. Use when experiencing slow API responses, reducing bandwidth for large files, or optimizing
engineering
Enforce security policies and coding standards for Figma API integrations. Use when setting up linting rules for Figma tokens, preventing accidental credential leaks, or enforcing
security
Production readiness checklist for Figma REST API integrations. Use when deploying Figma integrations to production, preparing for launch, or auditing an existing integration for p
general
Use when implementing Disney's 12 animation principles in Figma prototypes and Smart Animate
product
Handle Figma REST API rate limits with exponential backoff and request queuing. Use when encountering 429 errors, implementing retry logic, or optimizing API request throughput for
engineering
Reference architecture for production Figma API integrations. Use when designing a new Figma integration, planning project structure, or establishing patterns for design-to-code pi
engineering
Build resilient Figma integrations with circuit breakers, fallbacks, and graceful degradation. Use when implementing fault tolerance, handling Figma outages gracefully, or building
general
Exports design assets from Figma files using the GET /v1/files/:key and /v1/images/:key endpoints. Supports SVG, PNG, and PDF export with scale and format parameters.
engineering
Extract and save Figma screenshots from Codex session logs when user needs to recover images captured by the Figma MCP server
general
Production-ready patterns for the Figma REST API and Plugin API. Use when building reusable Figma client wrappers, extracting design tokens, traversing node trees, or creating type
tools
Secure Figma API tokens, configure scopes, and validate webhook signatures. Use when securing API keys, implementing least-privilege scopes, or auditing Figma security configuratio
security
트리거: "figma를 코드로", "디자인 구현해줘", "피그마 코드 변환", "figma to code", "디자인 스펙 구현" 수행: Figma 디자인 명세(JSON 또는 텍스트 설명) → React 또는 Vue 코드로 변환. Tailwind CSS 우선 사용 출력: 컴포넌트 파일, Tailwind 클래스 적용 마크업
general
Figma 디자인을 분석하여 프로젝트 규칙에 맞는 React 컴포넌트를 자동 생성합니다. Figma URL을 받아서 TDD 방식으로 컴포넌트, 스타일, 테스트, Storybook을 생성합니다.
general
Generate Android Jetpack Compose UI from Figma using Figma Desktop MCP (get_metadata, get_variable_defs, create_design_system_rules, get_design_context, get_screenshot). Automatica
engineering
Figma 디자인을 정적 HTML/CSS로 변환합니다. Figma 링크나 node-id가 제공되면 MCP를 통해 디자인 정보를 가져와 정확한 코드를 생성합니다. Use when converting Figma designs to HTML/CSS, or when user mentions Figma links, design c
engineering
Figma 디자인을 인라인 SVG가 포함된 정적 HTML/CSS로 변환합니다. 런타임에서 색상 제어가 필요한 심볼/아이콘용입니다. Use when converting Figma SVG designs to inline SVG HTML for runtime color control, symbol state components
general
Generates React code for a full page based on pasted Figma 'Inspect' details. Uses the page scaffolder.
tools
Figma visual intent extractor — MCP server knowledge for 4 Figma tools. Generates REFERENCE CODE (~50-60% match) used as search input for library MCP matching in the design-sync pi
general
Handle Figma REST API scope changes, deprecations, and migration tasks. Use when migrating from deprecated scopes, updating webhook versions, or adapting to Figma API changelog cha
general
Implement Figma Webhooks V2 for real-time file, comment, and library events. Use when setting up webhook endpoints, handling FILE_UPDATE events, or building event-driven Figma auto
general
Write design decisions from DESIGN-CONTEXT.md back into the active Figma file. Three modes: annotate (layer comments), tokenize (variable bindings), mappings (Code Connect). Operat
general
设计实现：将 DESIGN.md 转化为代码。反AI模板编码、shadcn/ui组件推荐、Token驱动样式、CSS优先修改、原子提交。读取 Image 2/Figma 视觉稿作观感参考，最终以真实截图和 CSS 断言验证。从 forge-design 接力，或 forge-eng 调用。触发方式：用户说"实现设计"、"forge-design-impl"、
general
开发调度器。接力 forge-prd 产出的 PRD 变更，半自动调度设计(forge-design)、工程(forge-eng)、QA(forge-qa) 子技能。读取 PRD 迭代摘要，并行调研技术方案，传递 Image 2/Figma/真实截图等视觉决策索引，判断需要调用哪些子技能，列出建议顺序供用户确认后以独立上下文执行。触发方式：用户说"开始开发"
product
产品诊断与 PRD 迭代管理器。用户描述遇到的问题或需求，skill 诊断根因（产品设计缺陷/实现偏离/PRD遗漏）、审查模块健康度、设计方案、挑战假设、必要时反驳需求，最终更新 PRD 和 CHANGELOG。支持从零创建 PRD、迭代已有 PRD，并记录前端/全栈需求的视觉决策需求（Image 2/Figma/真实截图）。触发方式：用户说"更新PRD"、
product
Bridge agent that extracts and structures design context from Figma via MCP Server for downstream implementation agents. Use when Figma-to-code bridging, Code Connect management, o
general
Conducts comprehensive frontend design reviews covering UI/UX design quality, design system validation, accessibility compliance, responsive design patterns, component library arch
product
Use when adding a new service with full Deployment/Service/ConfigMap manifests, overlay coverage, and GitOps commit governance
engineering
When 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.
ads
Translates Figma designs into production-ready code with 1:1 visual fidelity. Use when implementing UI from Figma files, when user mentions "implement design", "generate code", "im
general
基于 Figma、Sketch、MasterGo、Pixso、墨刀或摹客的设计上下文实现页面或组件，强调复用、设计 Token 映射以及面向生产的前端实现方式，并将实现计划保存为 Markdown 文件。当用户提供设计稿链接、设计选区、截图或要求按设计稿实现组件/页面时自动激活。
general
Implements Figma designs 1:1 using OneKey component library. Use when implementing UI from Figma, converting designs to code, or building pages/components from design specs. Trigge
general
Generate production-ready Kubernetes manifests with Deployments, Services, ConfigMaps, and Ingress
tools
Kubernetes and Helm patterns - use for deployment configs, service definitions, ConfigMaps, Secrets, and Helm chart management
engineering
Step-by-step guidance for creating production-ready Kubernetes manifests including Deployments, Services, ConfigMaps, Secrets, and PersistentVolumeClaims.
tools
Kubernetes Configmap Handler - Auto-activating skill for DevOps Advanced. Triggers on: kubernetes configmap handler, kubernetes configmap handler Part of the DevOps Advanced skill
engineering
Diagnoses CrashLoopBackOff pods in Kubernetes clusters using kubectl and the Kubernetes API. Fetches pod events, container logs, and resource limits via the /api/v1/namespaces/{ns}
engineering
Diagnoses CrashLoopBackOff pods using the Kubernetes API /api/v1/pods endpoint, kubectl logs --previous, and container runtime inspection via crictl. Identifies OOMKilled events, m
engineering
Kubernetes manifest guidelines for GitOps deployments. Apply when editing `.yaml`/`.yml` files in `clusters/` or k8s directories. Use for Deployments, Services, security, multi-env
engineering
Kubernetes deployment patterns with Helm charts. Covers deployments, services, ConfigMaps, Secrets, Dapr sidecar injection, health probes, and resource management.
engineering
Generate Kubernetes YAML manifests for deployments, services, ingress, configmaps, and other resources with best practices. Triggers on "create Kubernetes manifest", "generate k8s
tools
Assist with Kubernetes interactions including debugging (kubectl logs, describe, exec, port-forward), resource management (deployments, services, configmaps, secrets), and cluster
engineering
Automates diagnosis of CrashLoopBackOff pods using kubectl commands wrapped via the Kubernetes API server. Fetches recent events, container logs, and resource quota status to ident
engineering
Use when managing Kubernetes resources including deployments, services, configmaps, and secrets.
engineering
Kubernetes native configuration management with Kustomize. Use for environment-specific configs, resource patching, manifest organization, multi-environment deployments, and GitOps
engineering
Use when generating ConfigMaps and Secrets with Kustomize for Kubernetes configuration management.
tools
Build Flutter UI bằng package lme_ui (lme-ui-flutter). Auto-trigger khi project có dependency `lme_ui`, file Dart import `package:lme_ui/lme_ui.dart`, hoặc user nói "build screen/f
general
Analyzes codebases to generate and manage Figma Make Guidelines.md packages, designs prompt strategies, and validates output. Use when preparing optimized input for Figma Make.
general
Design tool integration specialist covering Figma MCP, Pencil renderer, and Pencil-to-code export. Use when fetching design context from Figma, rendering Pencil designs, or exporti
general
Pixel-level image comparison between two screenshots. Generates a visual diff overlay highlighting differences. Use for comparing Figma designs against web implementations.
general
Design de produto nivel Apple — sistemas visuais, UX flows, acessibilidade, linguagem visual proprietaria, design tokens, prototipagem e handoff. Cobre Figma, design systems, tipog
product
Create production-grade UI with the craft level of Linear, Stripe, Superhuman, Figma, Notion, and Slack. Use when building interfaces that need to feel professional, polished, and
product
Convert design prototypes (HTML, CSS, Figma exports) into production-ready components. Analyzes prototype structure, extracts design tokens, identifies reusable patterns, and gener
product
Generate comprehensive test plans, manual test cases, regression test suites, and bug reports for QA engineers. Includes Figma MCP integration for design validation.
engineering
Build and maintain Rayden UI components and screens in Figma via Figma MCP with full design token enforcement
general
Confluence, Jira, Figma, 파일, 인터뷰 등에서 요구사항을 수집합니다. 멀티 도메인 프로젝트에서는 도메인별 수집을 지원합니다. Use when: "요구사항 수집", "인터뷰 해줘", "요구사항 정리", "gather requirements", "collect requirements"
general
Google Stitch MCP - generazione e modifica UI design da prompt, output React/TypeScript/HTML/CSS, estrazione design tokens. Use when generating UI from text prompts via Stitch, con
engineering
Get a high-level overview of a Figma design system — components, styles, tokens, and structure
general
k8s/ Kustomize base — sentinel-target namespace; Deployment/Service/ConfigMap/NetworkPolicy; Postgres + Redis tek-replica.
engineering
Create and sell templates. Notion, Canva, Excel, Figma, Google Sheets. Marketplace optimization and passive income.
tools
Tạo file docs/ui-library/component-catalog.md bằng cách quét Figma kit hoặc mã nguồn của template UI đã cài đặt. Chạy 1 LẦN sau khi cài template — sau đó mọi tính năng đọc catalog
general
Création de design systems cohérents avec tokens, composants et guidelines. Se déclenche avec "design system", "composants UI", "tokens", "style guide", "atomic design", "Figma com
product
Visual-first UI/UX collaboration loop using agent-browser (primary), Playwright MCP (alternative), Figma MCP (design system/specs), and Lucid (wireframes). Use when designing or it
product
Act as a Global Design Director to produce a complete design system — color palette, typography scale, 8px grid, 30+ components, responsive patterns, animations, and WCAG AA access
product
Mengubah desain screenshot/Figma menjadi UI frontend pixel-perfect dengan komponen reusable. Gunakan saat task fokus pada implementasi tampilan dan layout halaman.
general
Conseille sur la création de wireframes et mockups pour apps et sites. Se déclenche avec "wireframe", "maquette", "mockup", "prototype", "Figma", "UI layout", "comment structurer m
product
Generate a phased delivery orchestration plan for creative-direction-driven work, mapping which skills run when, what locks at which gate, how handoffs occur between phases, and ho
engineering
Analyze UI design screenshots and generate React components with TypeScript and Tailwind CSS. Use this skill when the user provides UI mockups, design screenshots, or Figma exports
engineering
뿌클로드 페이지 개발. 새 venue 추가, 기존 venue 수정, Figma 디자인 반영 시 사용.
general