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](../../README.md) 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 for color, type, spacing, and radius.
- Keep names semantic and stable for handoff (frames, components, variants).
- If requirements are ambiguous, ask a focused clarification question before making large edits.