pf-figma-design-mode

name	pf-figma-design-mode
description	Create and edit Figma design files using PatternFly-approved component libraries. Use when building, updating, or restructuring Figma frames and components. Requires Figma MCP.
disable-model-invocation	true

PatternFly Design Mode

Use this skill for write-focused design tasks in Figma.

Required prerequisites

This skill requires two skills from the official Figma plugin — see the plugin README for install instructions.

• figma-use — mandatory before every use_figma call; never skip it
• figma-generate-design — required when the task involves creating a full page or screen from code

Rules:

• Never call use_figma directly without first loading figma-use.
• If the task includes broad screen creation from code, pair figma-use with figma-generate-design.

Approved component sources (strict)

Use components and patterns only from the files listed in references/approved-sources.md.

Rules:

• Do not use components from any other library or file.
• Only use semantic design tokens and spacers from the approved files.
• Do not create ad-hoc replacement components when an approved component/pattern exists.
• If a needed component/pattern is missing in these sources, stop and ask the user before proceeding.

Pattern-first selection (strict)

Whenever possible, prefer larger patterns denoted with the 🧰 emoji.

• Select 🧰 patterns before assembling equivalent UI from smaller components.
• Only compose from smaller components when no suitable 🧰 pattern exists for the requirement.

Page creation behavior (strict)

If the user asks to "make a new page":

• Do not replace, clear, or mutate existing page content as the starting point.
• Create a new top-level frame for subsequent changes.
• Apply all new work to that new frame unless the user explicitly asks to edit an existing frame.

When to use

Use this skill when a request includes one or more of the following:

• "Create this in Figma", "edit this Figma file", "update this screen"
• "Make a new page" or equivalent phrasing for a new screen
• Layout restructuring (auto-layout, spacing, constraints, frame hierarchy)
• Component/variant updates, token/variable binding, or style cleanup
• Figma URL-driven implementation work

Workflow

1. Confirm target

   • Identify fileKey and nodeId from the Figma URL when provided.
   • Clarify expected output (new frame, edits to an existing frame, component updates).

2. Load prerequisite skill

   • Invoke the figma-use skill instructions first.

3. Resolve approved assets with pattern-first priority

   • Search and import from the approved PatternFly files only (see references/approved-sources.md).
   • Prefer matching 🧰 patterns first, then fall back to smaller components if needed.
   • Verify each chosen component/pattern comes from an approved source.

4. Handle page intent

   • If request is "make a new page", create a new top-level frame first.
   • Otherwise, edit only the user-specified existing frame/scope.

5. Make incremental edits

   • Prefer editing existing nodes/components over rebuilding from scratch (except new-page requests).
   • Use approved design-system components and variables instead of hardcoded values.
   • Apply changes in small batches and verify after each batch.

6. Validate outcome

   • Check hierarchy, alignment, spacing, constraints, and variant states.
   • Ensure all inserted components/patterns come from approved sources only.
   • Confirm 🧰 patterns were used whenever a suitable option exists.

Guardrails

• Reuse approved library assets first; avoid duplicate ad-hoc components.
• Bind variables/tokens where possible (color, type, spacing, radius).
• Keep names semantic and stable for handoff (frames, components, variants).
• If requirements are ambiguous, ask a focused clarification question before making large edits.