agentmods.dev

punkadillo/figma-code-composer

A simple orchestration for developing figma design to frontend components

This repository also configures its own agents. See what figma-code-composer tells them →

Open on GitHub punkadillo.github.io
3Stars on the repository
174Mods indexed here, across every type
18d agoLast push, which is what freshness is scored on
MITLicence, which decides whether bodies are shown
Sort RelevanceRecently updatedFewest tokensSecurity gradeRepo starsStars this weekTop rated 137 mods

atomic-design-templates

25

punkadillo/figma-code-composer

Skill Claude Code needs its repo

Use when creating page layouts without real content. Templates define the skeletal structure of pages using organisms, molecules, and atoms.

not rated 3 18d ago A 29 tokens original MIT

chakra-ui-builder

26

punkadillo/figma-code-composer

Skill Claude CodeCodex

Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form…

not rated 3 18d ago A 214 tokens copy · 100% MIT

chakra-ui-migrate

27

punkadillo/figma-code-composer

Skill Claude CodeCodex

Migrate Chakra UI projects from v2 to v3, covering package changes, codemods, provider setup, color mode, prop renaming, compound components, theming, recipes, and Next.js updates. Use this skill whenever a user is upgrading Chakra UI versions, encountering breaking changes after an upgrade, converting old v2 patterns…

not rated 3 18d ago A 137 tokens copy · 100% MIT

chakra-ui-refactor

28

punkadillo/figma-code-composer

Skill Claude CodeCodex

Review, convert, and improve UI code using Chakra UI v3. Use this skill whenever a user wants to review Chakra UI code for issues, convert plain HTML/CSS, Tailwind, CSS Modules, or styled-components to Chakra UI, clean up messy Chakra components, fix layout structure or token usage, or asks anything like "is this…

not rated 3 18d ago A 139 tokens copy · 100% MIT

component-architecture

29

punkadillo/figma-code-composer

Skill Claude CodeCodex

Load PROACTIVELY when task involves designing or building UI components. Use when user says "build a component", "create a form", "add a modal", "design the layout", or "refactor this page". Covers component composition and hierarchy, prop design and typing, render optimization (memo, useMemo, useCallback), compound…

not rated 3 18d ago A 94 tokens original MIT

css

30

punkadillo/figma-code-composer

Skill Claude CodeCodex

Best practices for CSS development including modern layout techniques, naming conventions, theming, and maintainable stylesheet architecture.

not rated 3 18d ago A 23 tokens copy · 100% MIT

design-system-patterns

31

punkadillo/figma-code-composer

Skill Claude CodeCodex

Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations.

not rated 3 18d ago A 42 tokens copy · 100% MIT

e2e-testing-patterns

32

punkadillo/figma-code-composer

Skill Claude CodeCodex

Master end-to-end testing with Playwright and Cypress to build reliable test suites that catch bugs, improve confidence, and enable fast deployment. Use when implementing E2E tests, debugging flaky tests, or establishing testing standards.

not rated 3 18d ago A 51 tokens copy · 100% MIT

feature-arch

33

punkadillo/figma-code-composer

Skill Claude CodeCodex

React feature-based architecture guidelines for scalable applications. This skill should be used when writing, reviewing, or refactoring React code to ensure proper feature organization. When invoked on a project, the agent produces a concrete target-architecture blueprint at docs/architecture/FEATURE-ARCH-TARGET.md…

not rated 3 18d ago A 108 tokens copy · 95% MIT

feature-sliced-design

34

punkadillo/figma-code-composer

Skill Claude CodeCodex

Official Feature-Sliced Design (FSD) v2.1 skill for applying the methodology to frontend projects. Use when the task involves organizing project structure with FSD layers, deciding where code belongs, placing static assets (images, icons, fonts, PDFs), grouping closely related slices, defining public APIs and import…

not rated 3 18d ago A 172 tokens copy · 86% MIT

figma-code-connect

36

punkadillo/figma-code-composer

Skill Claude Code

Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files.

not rated 3 18d ago A 57 tokens copy · 84% MIT

figma-create-new-file

37

punkadillo/figma-code-composer

Skill Claude Code

MANDATORY prerequisite — you MUST invoke this skill BEFORE every createnewfile tool call. NEVER call createnewfile directly without loading this skill first. Trigger whenever the user wants a new blank Figma file — a new design, FigJam, or Slides file — or when you need a fresh file before calling usefigma. Usage …

not rated 3 18d ago A 121 tokens copy · 88% MIT

figma-generate-design

40

punkadillo/figma-code-composer

Skill Claude Code

Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the…

not rated 3 18d ago A 192 tokens copy · 100% MIT

figma-generate-diagram

41

punkadillo/figma-code-composer

Skill Claude CodeCodex

MANDATORY prerequisite — load this skill BEFORE every generatediagram tool call. NEVER call generatediagram directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render, sketch, or build a diagram — flowchart, architecture diagram, sequence diagram, ERD or…

not rated 3 18d ago A 164 tokens copy · 86% MIT

figma-generate-library

42

punkadillo/figma-code-composer

Skill Claude Code

Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, create individual components with proper variant sets and variable bindings, set up theming (light/dark modes), document foundations, or reconcile gaps between…

not rated 3 18d ago A 146 tokens original MIT

figma-integration

43

punkadillo/figma-code-composer

Skill Claude CodeCodex

Guidelines for integrating Figma designs with development workflows using MCP servers and best practices.

not rated 3 18d ago A 21 tokens copy · 100% MIT

figma-use-figjam

45

punkadillo/figma-code-composer

Skill Claude Code

This skill helps agents use Figma's usefigma MCP tool in the FigJam context. Can be used alongside figma-use which has foundational context for using the usefigma tool.

not rated 3 18d ago A 45 tokens copy · 91% MIT

figma-use-slides

46

punkadillo/figma-code-composer

Skill Claude Code

This skill helps agents use Figma's usefigma MCP tool in the Slides context. Can be used alongside figma-use which has foundational context for using the usefigma tool.

not rated 3 18d ago A 43 tokens original MIT

figma-use

47

punkadillo/figma-code-composer

Skill Claude Code needs its repo

MANDATORY prerequisite — you MUST invoke this skill BEFORE every usefigma tool call. NEVER call usefigma directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in…

not rated 3 18d ago A 114 tokens copy · 100% MIT

At most 3 mods per repository are shown here, and a mod shipped inside a plugin is left to that plugin's page — the rest are on their repository pages: