jschuler

Figma MCP Integration Rules

These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change.

General

• IMPORTANT: Always use components from @patternfly/react-core, @patternfly/react-charts, @patternfly/react-table when possible
• Prioritize Figma fidelity to match designs exactly
• ALL text content must match the Figma design exactly - no additions, modifications, or placeholder text

Required flow (do not skip)

1. Run get_code first to fetch the structured representation for the exact node(s).

jschuler

const rowText = getData(index);
    if (context.searchedInput) {
      const splitAnsiString = splitAnsi(rowText);
      // need to escape user input so that regexp doesn't break
      const regEx = new RegExp(`(${escapeString(context.searchedInput)})`, 'ig');

      const composedString: string[] = [];
      splitAnsiString.forEach((substr: string) => {
        if (!substr.match(isAnsi)) {
          // not ansi, check for search match

jschuler

import React from "react";
import {
  Brand,
  Breadcrumb,
  BreadcrumbItem,
  Button,
  ButtonVariant,
  Card,
  CardBody,
  Dropdown,

jschuler

import React from "react";
import { Modal, ModalVariant, Button } from "@patternfly/react-core";

class SmallModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isModalOpen: false,
    };
    this.handleModalToggle = () => {

jschuler

import React from "react";
import { Modal, ModalVariant, Button } from "@patternfly/react-core";

class SmallModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isModalOpen: false,
    };
    this.handleModalToggle = () => {

jschuler

import React from "react";
import { Page, PageSection, Popover } from "@patternfly/react-core";
class NewComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Page>
        <PageSection variant="default">

jschuler

/******/ (() => { // webpackBootstrap
/******/ 	var __webpack_modules__ = ({

/***/ "./node_modules/ansi-html/index.js":
/*!*****************************************!*\
  !*** ./node_modules/ansi-html/index.js ***!
  \*****************************************/
/***/ ((module) => {

"use strict";

jschuler

/******/ (() => { // webpackBootstrap
/******/ 	"use strict";
/******/ 	var __webpack_modules__ = ({

/***/ "./src/quickstarts/qsEntry.ts":
/*!************************************!*\
  !*** ./src/quickstarts/qsEntry.ts ***!
  \************************************/
/***/ (() => {

jschuler

apiVersion: 1.0.0
metadata:
  generateName: quarkus-kafka-quickstart-
projects:
  - name: quarkus-kafka-quickstart
    source:
      location: 'https://github.com/redhat-developer/app-services-guides.git'
      type: github
      sparseCheckoutDir: /code-examples/quarkus-kafka-quickstart/

jschuler

metadata:
  name: getting-started
spec:
  displayName: Using didact
  durationMinutes: 10
  icon: ''
  description: Let's use didact
  prerequisites: [You learned how to use didact commands]
  introduction: |-
    ### This quick start shows you how to use didact commands in quick starts