Design skills

**MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. Example prompts (not exhaustive) are 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'design to code'. This skill provides critical instructions and steps to the agent on how to correctly implement Figma designs in code and must NOT be skipped.

The English summary is being prepared. Showing the original description.

Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code', 'convert this modal/dialog/drawer/panel to Figma'. This is the preferred workflow skill whenever the user wants to build or update a full page, modal, dialog, drawer, sidebar, panel, or any composed multi-section view in Figma from code or a description. Discovers design system components, variables, and styles from Code Connect files, existing screens, and library search, then imports them and assembles views incrementally section-by-section using design system tokens instead of hardcoded values.

The English summary is being prepared. Showing the original description.

Translate Figma designs into production-ready application code with 1:1 visual fidelity. Use for Figma URLs, node IDs, implementation requests, or components that must match Figma specs; use the local `figma` skill for general Figma MCP context and setup.

The English summary is being prepared. Showing the original description.

Translates Figma motion and animations into production-ready application code. Use when implementing animation/motion from a Figma design — user mentions "implement this motion", "add animation from Figma", "animate this component", provides a Figma URL whose node is animated, or when `get_design_context` returns motion data or instructs you to call `get_motion_context`.

The English summary is being prepared. Showing the original description.

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 Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.

The English summary is being prepared. Showing the original description.

Interactive idea refinement using Socratic method to develop fully-formed designs

The English summary is being prepared. Showing the original description.

Design philosophy docs and canvas-based visual creation. Use when articulating design principles, crafting multi-page design documents, or exploring aesthetic philosophy with intentional design thinking.

The English summary is being prepared. Showing the original description.

Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.

The English summary is being prepared. Showing the original description.

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.

The English summary is being prepared. Showing the original description.

DDD v3 — bounded contexts, aggregates, value objects, domain events, Ubiquitous Language, strategic design

The English summary is being prepared. Showing the original description.

Expert en Domain Driven Design (bounded contexts, aggregates, value objects, repositories, ubiquitous language)

The English summary is being prepared. Showing the original description.

Expert en design system markdown specs (73+ design systems as markdown, tokens, components)

The English summary is being prepared. Showing the original description.

Expert en design patterns (GoF, SOLID, enterprise patterns, refactoring, anti-patterns)

The English summary is being prepared. Showing the original description.

Design patterns v3 — GoF, SOLID, enterprise patterns, anti-patterns, refactoring, language-specific

The English summary is being prepared. Showing the original description.

Expert en construction de design systems avancés (tokens, composants, Storybook, Figma sync, versioning, theming)

The English summary is being prepared. Showing the original description.

Design System Builder IA — Expert en construction de design systems (Storybook, tokens, component API, theming, Figma sync)

The English summary is being prepared. Showing the original description.

Compiler designer v2 — lexing, parsing, AST, code generation, optimization, LLVM, DSLs

The English summary is being prepared. Showing the original description.

Expert en conception de compilateurs (lexing, parsing, AST, code generation, LLVM, interpreters)

The English summary is being prepared. Showing the original description.

Chatbot Designer IA — Expert en conception de chatbots (Rasa, Botpress, Dialogflow, conversation design, NLU).

The English summary is being prepared. Showing the original description.

API Designer IA — Expert en conception d'APIs (REST, GraphQL, gRPC, OpenAPI, versioning, rate limiting). Crée des APIs intuitives, évolutives et sécurisées.

The English summary is being prepared. Showing the original description.

Use when writing or auditing the conversational copy layer of a Salesforce bot or Agentforce agent: utterance authoring strategy, fallback message copy, escalation-criteria phrasing, and persona-consistent dialog scripting across channels. NOT for platform configuration (bot builder setup, topic metadata wiring, action mapping, or Agentforce deployment) — see architect/einstein-bot-architecture and agentforce/agentforce-persona-design for those concerns.

The English summary is being prepared. Showing the original description.

Enhanced architecture guidance for voice-first Brazilian fintech applications. Use when designing voice interfaces, implementing PIX/Boletos, optimizing financial systems, or making technology stack decisions for Brazilian market applications. Integrates with docs/ content, MCP tools for Brazilian market research, enhanced validation scripts, and comprehensive Brazilian compliance patterns.

The English summary is being prepared. Showing the original description.

Avalia qualidade UX de um projeto comparando screenshots reais contra a Design Library (24 solucoes + design system). Captura telas via Playwright, pontua aderencia a tokens/patterns, identifica desvios. Produz UX Compliance Report.

The English summary is being prepared. Showing the original description.

Taxonomia de 86 layouts de apresentação/marketing (hero, pricing, auth, nav, CTA, testimonials, footer, FAQ, onboarding, blog, contact, stats, bento, states) adaptada do VibeUI. Consultar ANTES de construir landing pages, onboarding flows, auth screens, ou qualquer UI de camada de apresentação. Complementa o design-library/solutions (que cobre módulos verticais de produto).

The English summary is being prepared. Showing the original description.