A simple orchestration for developing figma design to frontend components
This repository also configures its own agents. See what figma-code-composer tells them →
punkadillo/figma-code-composer
Skill Claude CodeCodex
Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.
punkadillo/figma-code-composer
Skill Claude Code
Use when vitest configuration, Vite integration, workspace setup, and test environment configuration for modern testing.
punkadillo/figma-code-composer
Skill Claude Code
Use when vitest performance optimization including fast execution, watch mode, and parallelization strategies.
punkadillo/figma-code-composer
Skill Claude Code
Use when vitest testing patterns including unit tests, mocks, spies, and browser mode testing.
punkadillo/figma-code-composer
Skill Claude CodeCodex
MUST be used for Vue.js tasks. Strongly recommends Composition API with and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.
punkadillo/figma-code-composer
Skill Claude Code
Use when Vue component patterns including props, emits, slots, and provide/inject. Use when building reusable Vue components.
punkadillo/figma-code-composer
Skill Claude Code
Use when Vue 3 Composition API with reactive refs, computed, and composables. Use when building modern Vue 3 applications.
punkadillo/figma-code-composer
Skill Claude Code
Use when Vue reactivity system with refs, reactive, computed, and watchers. Use when managing complex state in Vue applications.
punkadillo/figma-code-composer
Skill Claude CodeCodex
Expert in Vue.js TypeScript development with Vite, Pinia, and modern UI frameworks.
punkadillo/figma-code-composer
Skill Claude CodeCodex
Vue.js and TypeScript best practices for building performant applications with Vite, Pinia, VueUse, and Tailwind CSS.
punkadillo/figma-code-composer
Skill Claude CodeCodex
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.
punkadillo/figma-code-composer
Skill Claude CodeCodex
Best practices for Zod schema validation and type inference in TypeScript applications.
punkadillo/figma-code-composer
Skill Claude Code
Use when implementing advanced Zustand patterns including transient updates, subscriptions with selectors, store composition, and performance optimization techniques.
punkadillo/figma-code-composer
Skill Claude Code
Use when implementing Zustand middleware for persistence, dev tools, immutability, and other enhanced store functionality. Covers persist, devtools, immer, and custom middleware.
punkadillo/figma-code-composer
Skill Claude CodeCodex
Best practices for Zustand state management in React and Next.js applications with TypeScript.
punkadillo/figma-code-composer
Skill Claude Code
Use when creating and managing Zustand stores for React state management. Covers store creation, selectors, actions, and basic usage patterns.
punkadillo/figma-code-composer
Skill Claude Code
Use when working with Zustand in TypeScript projects. Covers type-safe store creation, typed selectors, and advanced TypeScript patterns with Zustand.
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: