punkadillo

punkadillo/figma-code-composer

Skill Claude Code

Use when typeScript async patterns including Promises, async/await, and async iterators with proper typing. Use when writing asynchronous TypeScript code.

punkadillo/figma-code-composer

Skill Claude Code needs its repo

Use when working with TypeScript's type system including strict mode, advanced types, generics, type guards, and compiler configuration.

punkadillo/figma-code-composer

Skill Claude Code

Use when typeScript utility types, mapped types, and advanced type manipulation. Use when creating flexible, type-safe TypeScript code.

punkadillo/figma-code-composer

Skill Claude CodeCodex

Expert in TypeScript development with best practices for type safety and clean code.

punkadillo/figma-code-composer

Skill Claude CodeCodex

UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.

punkadillo/figma-code-composer

Skill Claude CodeCodex

UI design best practices for building accessible, performant, and user-friendly interfaces with modern web standards.

punkadillo/figma-code-composer

Skill Claude CodeCodex

UnoCSS instant atomic CSS engine, superset of Tailwind CSS. Use when configuring UnoCSS, writing utility rules, shortcuts, or working with presets like Wind, Icons, Attributify.

punkadillo/figma-code-composer

Skill Claude CodeCodex

Comprehensive guide for styling React components with Vanilla Extract (Vite integration, typed styles, theming, composition, global APIs, recipes, dynamic runtime theming, and optional sprinkles). Use this skill when user tasks involve implementing or refactoring React component styling with Vanilla Extract…

punkadillo/figma-code-composer

Skill Claude CodeCodex

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance…

punkadillo/figma-code-composer

Skill Claude CodeCodex

Guide for implementing smooth, native-feeling animations using React's View Transition API ( component, addTransitionType, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components…

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.