punkadillo/figma-code-composer

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.

punkadillo/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.

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.

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.

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.

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.

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…

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…

punkadillo/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…

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.

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.

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.

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.

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.

punkadillo/figma-code-composer

Skill Claude Code

Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling.

punkadillo/figma-code-composer

Skill Claude CodeCodex

Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag.

punkadillo/figma-code-composer

Skill Claude CodeCodex

Comprehensive Next.js, React, Redux, and TypeScript development guidelines covering SOLID principles, component architecture, and best practices.

punkadillo/figma-code-composer

Skill Claude Code

Use when next.js Server Components for optimal performance. Use when building data-intensive Next.js applications.

punkadillo/figma-code-composer

Skill Claude CodeCodex

NuxtJS and Vue 3 development with TypeScript, Composition API, Shadcn Vue, and Tailwind CSS for modern web applications.

punkadillo/figma-code-composer

Skill Claude CodeCodex

Panda CSS styling framework guidance. Use when working with @pandacss packages, styled components, design tokens, or responsive/conditional styles.

punkadillo/figma-code-composer

Skill Claude Code

Use when configuring Playwright BDD projects, setting up defineBddConfig(), configuring feature and step file paths, and integrating with Playwright config.

punkadillo/figma-code-composer

Skill Claude Code

Use when writing Gherkin feature files, using Scenario Outline with Examples, applying tags for test organization, and leveraging Background sections for shared setup.

punkadillo/figma-code-composer

Skill Claude Code needs its repo

Use when creating step definitions with Given, When, Then, using createBdd() for step functions, implementing Page Object Model patterns, and sharing fixtures between steps.

punkadillo/figma-code-composer

Skill Claude CodeCodex

Expert guidance for Playwright end-to-end testing with TypeScript and JavaScript best practices.