Loading...
Loading...
Found 12 Skills
Guidelines for integrating Figma designs with development workflows using MCP servers and best practices
Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations.
Extract comprehensive JSON design specifications from visual sources including Figma exports, UI mockups, screenshots, or live website captures. Produces W3C DTCG-compliant output with component trees, suitable for code generation, design documentation, and developer handoff.
CLI for downloading complete Figma design context and metadata to local files. Always use this CLI instead of calling Figma MCP tools (`get_design_context`, `get_metadata`) directly. Direct MCP tool calls risk incomplete data due to context limits. This CLI guarantees 100% complete output.
Visual testing, UI verification, and design comparison using screenshots and Figma integration. Use when the user wants to verify UI appearance, compare with Figma designs, test responsive layouts, check for visual regressions, or validate design implementation.
Design-to-code pipeline: extract copy from URLs, extract design tokens from images, then build React components or HTML preview variants. Use when: extracting content from websites, extracting design systems, generating frontend code, previewing design variants, sending to Figma via MCP. Triggers on "extract copy", "extract design", "build frontend", "generate variants", "export design", "send to Figma".
Creates Jira epics for large features following Prowler's standard format. Trigger: When user asks to create an epic, large feature, or multi-task initiative.
Advanced Odoo frontend development with comprehensive theme development, /create-theme command, theme.utils activation system, complete dynamic page reference (headers, footers, shop, blog), design workflow methodology, PWA support, modern JavaScript/TypeScript, testing frameworks, performance optimization, accessibility compliance, and real-time features. Features complete $o-website-values-palettes reference, theme mirror model architecture, publicWidget patterns with editableMode handling, and MCP integration. Supports Odoo 14-19 with auto-detection.
Design System Governance Workflow for auditing, refactoring, and syncing enterprise design systems, design tokens, Figma variables, and developer handoff outputs.
Sync design system components between Figma and code using Code Connect mappings
World-class design systems architecture - tokens, components, documentation, and governance. Design systems create the shared language between design and engineering that makes products feel cohesive at any scale. Use when "design system, component library, design tokens, atomic design, style guide, theme, theming, design scale, component api, variant, figma tokens, style dictionary, design-system, tokens, components, theming, documentation, figma, accessibility, versioning" mentioned.
Creates accurate frontend implementations from visual references while maintaining design consistency. Use when user provides Figma URLs, screenshots, design images, requests visual implementation from reference, or asks to build UI matching a design. Automatically checks existing design intent patterns before implementation.