punkadillo/figma-code-composer
Skill Claude CodeCodex
Generate production-ready code from a Figma component or frame using the Figma MCP server.
not rated 3 2mo ago A 23 tokens
original MIT
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 2mo ago A 192 tokens
copy · 100% MIT
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 2mo ago A 164 tokens
copy · 100% MIT
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 2mo ago A 146 tokens
original MIT
punkadillo/figma-code-composer
Skill Claude CodeCodex
Guidelines for integrating Figma designs with development workflows using MCP servers and best practices.
not rated 3 2mo ago A 21 tokens
copy · 100% MIT
punkadillo/figma-code-composer
Skill Claude CodeCodex
Sync design system components between Figma and code using Code Connect mappings.
not rated 3 2mo ago A 19 tokens
original MIT
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 2mo ago A 45 tokens
copy · 84% MIT
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 2mo ago A 43 tokens
original MIT
figma-use
57punkadillo/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 2mo ago A 114 tokens
copy · 100% MIT
punkadillo/figma-code-composer
Skill Claude CodeCodex
Framework-agnostic CSS patterns for typography, color, motion, and spatial composition.
not rated 3 2mo ago A 22 tokens
original MIT
punkadillo/figma-code-composer
Skill Claude CodeCodex
HeroUI v2 to v3 migration guide for agents. Use when migrating HeroUI v2 apps to v3, upgrading components, or accessing migration documentation. Keywords: HeroUI migration, v2 to v3, migration guide, upgrade HeroUI.
not rated 3 2mo ago C 56 tokens
copy · 97% MIT
heroui-react
60punkadillo/figma-code-composer
Skill Claude CodeCodex
HeroUI v3 React component library (Tailwind CSS v4 + React Aria). Use when building UIs with HeroUI — creating Buttons, Modals, Forms, Cards; installing @heroui/react; configuring dark/light themes with oklch variables; or fetching component docs. Keywords: HeroUI, Hero UI, heroui, @heroui/react, @heroui/styles.
not rated 3 2mo ago C 83 tokens
copy · 92% MIT
punkadillo/figma-code-composer
Skill Claude CodeCodex needs its repo
Implement comprehensive testing strategies using Jest, Vitest, and Testing Library for unit tests, integration tests, and end-to-end testing with mocking, fixtures, and test-driven development. Use when writing JavaScript/TypeScript tests, setting up test infrastructure, or implementing TDD/BDD workflows.
not rated 3 2mo ago B 63 tokens
copy · 100% MIT
punkadillo/figma-code-composer
Skill Claude Code
Use when advanced Jest features including custom matchers, parameterized tests with test.each, coverage configuration, and performance optimization.
not rated 3 2mo ago A 28 tokens
original MIT
punkadillo/figma-code-composer
Skill Claude Code needs its repo
Use when jest configuration, setup files, module resolution, and project organization for optimal testing environments.
not rated 3 2mo ago A 23 tokens
original MIT
punkadillo/figma-code-composer
Skill Claude Code
Use when jest testing patterns including unit tests, mocks, spies, snapshots, and assertion techniques for comprehensive test coverage.
not rated 3 2mo ago A 28 tokens
original MIT
punkadillo/figma-code-composer
Skill Claude CodeCodex
Build custom dropdown/select/autocomplete/multiselect components using Mantine's Combobox primitives. Use this skill when: (1) creating a new custom select-like component with Combobox primitives, (2) building a searchable dropdown, (3) implementing a multi-select or tags input variant, (4) customizing option…
not rated 3 2mo ago A 104 tokens
copy · 100% MIT
punkadillo/figma-code-composer
Skill Claude CodeCodex
Build custom components that integrate with Mantine's theming, Styles API, and core features. Use this skill when: (1) creating a new component using factory(), polymorphicFactory(), or genericFactory(), (2) adding Styles API support (classNames, styles, vars, unstyled), (3) implementing CSS variables via…
not rated 3 2mo ago A 134 tokens
copy · 100% MIT
mantine-form
67punkadillo/figma-code-composer
Skill Claude CodeCodex
Build forms using @mantine/form in the mantine-9 repository. Use this skill when: (1) setting up a form with useForm, (2) adding validation rules or async validation, (3) working with nested object or array fields, (4) sharing form state across components with createFormContext, (5) using uncontrolled mode for…
not rated 3 2mo ago A 113 tokens
copy · 100% MIT
punkadillo/figma-code-composer
Skill Claude CodeCodex
Integrates Material UI with Next.js App and Pages routers using @mui/material-nextjs, Emotion cache providers, next/font, CSS layers with Tailwind/CSS Modules, Link component prop patterns, CSS theme variables SSR notes, and App Router useSearchParams + Suspense. Use when setting up or debugging MUI in a Next.js app.
not rated 3 2mo ago A 76 tokens
copy · 100% MIT
punkadillo/figma-code-composer
Skill Claude CodeCodex
Chooses the right Material UI styling approach (sx, styled, theme overrides, global CSS) from official MUI guidance. Use when styling @mui/material components, customizing themes, overriding slots, or comparing sx vs styled.
not rated 3 2mo ago A 52 tokens
copy · 100% MIT
punkadillo/figma-code-composer
Skill Claude CodeCodex
Integrates Material UI with Tailwind CSS v4 using cascade layers (enableCssLayer, @layer order) and documents Tailwind v3 interoperability (preflight, important, injectFirst, portals). Use when combining MUI with Tailwind utilities, slotProps className, or theme token bridges.
not rated 3 2mo ago A 67 tokens
copy · 100% MIT
punkadillo/figma-code-composer
Skill Claude CodeCodex
Guides Material UI theming and design tokens (createTheme, ThemeProvider, palette, colorSchemes, cssVariables, theme.vars, dark mode, TypeScript augmentation). Use when building or extending a theme, toggling light/dark, or aligning tokens across an app.
not rated 3 2mo ago A 63 tokens
copy · 100% MIT
punkadillo/figma-code-composer
Skill Claude CodeCodex
Master ES6+ features including async/await, destructuring, spread operators, arrow functions, promises, modules, iterators, generators, and functional programming patterns for writing clean, efficient JavaScript code. Use when refactoring legacy code, implementing modern patterns, or optimizing JavaScript applications.
not rated 3 2mo ago A 64 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: