Skip to content

ai: implement figma and font skills - #143

Draft
kerne1s wants to merge 20 commits into
mainfrom
prd-2656-ai-skills
Draft

ai: implement figma and font skills#143
kerne1s wants to merge 20 commits into
mainfrom
prd-2656-ai-skills

Conversation

@kerne1s

@kerne1s kerne1s commented Aug 10, 2026

Copy link
Copy Markdown
Contributor

No description provided.

@kerne1s kerne1s self-assigned this Aug 10, 2026
@kerne1s

kerne1s commented Aug 14, 2026

Copy link
Copy Markdown
Contributor Author

UPDATE 1

Summary

Refine the Figma-import skills (import-figma-ui, import-figma-assets) and the mantine generator's default styles, based on friction found while running the full import flow end to end against a real Figma file.

  • import-figma-ui

    • Require hex color values (6-digit, or 8-digit with alpha) instead of rgb()/rgba() — Stylelint normalizes rgb()/rgba() syntax but never rewrites hex, so writing hex is the only way to keep the file visually consistent.
    • Require font-size tokens in px instead of rem, matching the raw value from Figma's Typekit table.
    • Warn against fetching a large/page-level Figma node at full depth in one call (can exceed the tool's response size limit) — fetch shallow first, then drill into the specific named child.
    • Add a rule to verify suspicious-looking table values (e.g. a value coincidentally matching an unrelated row) by rendering that part of the design before trusting the raw structured data.

  • import-figma-assets

    • Fix favicon export to target the actual favicon node nested inside its comparison frame, instead of the frame itself (which baked an unwanted background/padding into the exported icon.svg). Also match Figma's auto-appended disambiguator (favicon 2, favicon 3, ...) when a favicon layer is duplicated for side-by-side comparison.
    • Replace the "map icon positions as an optional stretch goal" note with a concrete method: derive each icon's sprite position by simulating the frame's CSS flex-wrap layout (padding/gap/order), verify the result against the exported asset's real dimensions/geometry, then name and dedupe icons before writing the --bg-position map and IconName union.

  • mantine generator: switch the default _variables.scss font-size tokens from rem to px, matching the new import-figma-ui convention so freshly scaffolded apps and Figma-imported ones stay consistent.

Test plan

  • Ran import-figma-ui end to end against a live Figma file for a generated app; verified _variables.scss colors are hex and font sizes are px.
  • Confirmed favicon export picks the inner favicon/favicon N node, not the comparison frame.
  • Confirmed icon sprite mapping renders every icon correctly via a throwaway verification page.
  • npm run lint:css, eslint, tsc, and nx build all pass on the generated app.

@kerne1s

kerne1s commented Aug 14, 2026

Copy link
Copy Markdown
Contributor Author

UPDATE 2

Split the import-figma-ui skill

Extracted a new import-figma-vars skill from import-figma-ui, covering Phase 0 (Figma access,
resolving the target app) and Phase 1 (writing tokens to _variables.scss). import-figma-ui
itself is now a pure orchestrator.

New skill: import-figma-vars

  • Imports design tokens (colors, font sizes, spacing) from a Figma UI-kit page's "Variables"
    block into _variables.scss.
  • Can run standalone or as the first phase of import-figma-ui.
  • When run as part of import-figma-ui, also captures the node IDs for "Web assets" and the
    Typekit rows so the later phases don't have to re-locate them.

Changes to import-figma-ui

The skill now only:

  1. Honors the user's own scoping of the run (skipping individual phases).
  2. Drives a single progress report across 4 phases: Variables → Web assets → Mantine theme →
    Fonts    .
  3. Hands off sequentially to sibling skills, threading shared context between them (Figma link,
    <app>, node IDs):
    • import-figma-vars — Variables
    • import-figma-assets — Web assets
    • configure-mantine-theme — Mantine theme
    • add-fonts — Fonts

It no longer reads from Figma or writes files directly.

Fixed the add-fonts skill description

The frontmatter description stated the app was scaffolded with next-app --withMantine, implying
Mantine was required — but the skill's own "Scope" section already correctly said it works "with
or without --withMantine". Updated the description to match: next-app (with or without
--withMantine).

Fixed in both the repo root (.agents/skills/add-fonts/SKILL.md) and the generator template
(plugin/src/generators/next-app/agent-skills/.agents/skills/add-fonts/SKILL.md.template). Plugin
tests still pass (12/12).

Michael Ivonin and others added 15 commits August 14, 2026 15:43
Michael Ivonin
feat: initialized add-figma-developer-mcp skill
4b2ffb8
Michael Ivonin
Merge branch 'prd-2656-ai-skills' into prd-2656-ai-skills-3
64ad53d
Michael Ivonin
feat: translated add-figma-developer-mcp skill messages
fbceb07
Michael Ivonin
feat: initialized nextjs-specific skills separation
3273101
Michael Ivonin
feat: initialized nextjs-specific skills separation
c6af8c8
Michael Ivonin
feat: completed nextjs-specific skills separation
8aa055a
Michael Ivonin
feat: connected with add-figma-developer-mcp skill
b501c20
Pavel Barashkov
fix: cut icon color-detection cost and fix sprite background-size bug
6a299e8
Dmitry Degtyarev
ai: improve import-figma-vars skill for using with framelink, fix cla…
84f4d72 
…ude skills path
Dmitry Degtyarev
fix: update tests with actual data
c105bb7
Michael Ivonin
chore: removed agent-skills templates
5b892bf
Dmitry Degtyarev
ai: harden figma-import skills against stale composite/instance data
1b891fb 
- configure-mantine-theme, add-fonts: require screenshotting each
  actual "Title / H<N>" row before trusting a get_variable_defs dump of
  composite text-style instances — they can misreport a heading's own
  fontFamily/lineHeight the same way a repeated color-swatch instance
  can misreport its fill, which previously produced a wrong Mantine
  theme (incorrect per-heading line-heights, a false "mixed fonts"
  read) that only a visual check caught
- import-figma-vars: import named line-height tokens from the Typekit
  table so downstream skills can reference var(--line-height-*)
  instead of hardcoding numbers
- import-figma-assets: extract icon sprite position/naming/color
  mapping into references/sprite-mapping.md, and guard against
  ancestor backgrounds getting baked into a favicon's exported SVG
Michael Ivonin
chore: minor fix
83e7614
Dmitry Degtyarev @claude
ai: add import-figma-components skill
55cad70 
Implements Button/Input/Checkbox from a Figma UI-kit page into an app's
ui-kit library, wired in as import-figma-ui's fifth phase and runnable
standalone. Ships references/mantine.md with the Mantine-specific pattern
(a classNames color picker + a colocated theme.module.scss, instead of a
custom variantColorResolver or vars/styles functions) and the pitfalls
that produce plausible-but-wrong theming code, verified end-to-end
against this design system's own production codebase.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Dmitry Degtyarev
ai: update import-figma-components skill
9059122
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@kerne1s kerne1s

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@kerne1s