figma-export-code

Imported from zilaeu/petmetric (figma-export-code/AGENTS.md). Install upstream with npx skills add zilaeu/petmetric --skill figma-export-code. Copyright stays with the author.

figma-make-app

React + Vite + Tailwind CSS project running inside Figma Make.

Development Server

A Vite development server is already running on $PORT (default 8443). You don't need to start it manually.

• Preview URL: The user can access the running app through the preview panel
• Hot reload: Changes to source files are reflected immediately

Project Structure

This is the canonical project structure. Start with task-relevant files below. Only follow imports or inspect other files when required, when a documented path is missing, or when the repository contradicts this guide.

• src/main.tsx - React entrypoint; imports src/index.css and mounts src/App.tsx into the #root element
• src/App.tsx - Primary application component and the usual starting point for UI work
• src/index.css - Global CSS entrypoint and Tailwind CSS v4 import
• index.html - Vite HTML shell containing the #root element and loading src/main.tsx
• package.json - Project dependencies and the Vite build, development, preview, and formatting scripts
• vite.config.ts - Vite configuration with React, Tailwind CSS v4, and Figma Make plugins plus the @ alias for src
• .mise.toml - Toolchain versions for Node.js and pnpm

Dependencies

• Runtime: React 19 and React DOM 19
• Styling: Tailwind CSS v4 with the @tailwindcss/vite plugin
• Build tooling: Vite 8, TypeScript 5.7, and @vitejs/plugin-react
• Formatting: oxfmt

Styling

This project uses Tailwind CSS v4 through the @tailwindcss/vite plugin configured in vite.config.ts. src/index.css imports Tailwind with @import 'tailwindcss';. Use Tailwind utility classes directly in JSX and put global CSS or Tailwind v4 theme customization in src/index.css. This scaffold does not need a Tailwind config file or PostCSS config.

src/main.tsx imports src/index.css, so global font wiring belongs in src/index.css. Keep CSS @import statements first, then add any @font-face rules and font-family defaults there.

Code quality

• Use double quotes for strings containing apostrophes ("We're here to help"), or escape them in single-quoted strings. An unescaped apostrophe in a single-quoted string breaks the build.
• Ensure JSX tags are closed and braces are balanced.
• Export components as default exports.