punkadillo/figma-code-composer

punkadillo/figma-code-composer

Skill Claude Code

Use when adding interaction testing to Storybook stories. Enables automated testing of component behavior, user interactions, and state changes directly in stories.

punkadillo/figma-code-composer

Skill Claude Code needs its repo

Use when creating or modifying Storybook stories for components. Ensures stories follow CSF3 format, properly showcase component variations, and build successfully.

punkadillo/figma-code-composer

Skill Claude CodeCodex

You are an expert in styled-components, CSS-in-JS patterns, and React component styling.

punkadillo/figma-code-composer

Skill Claude CodeCodex needs its repo

CLI tools for Svelte 5 documentation lookup and code analysis. MUST be used whenever creating, editing or analyzing any Svelte component (.svelte) or Svelte module (.svelte.ts/.svelte.js). If possible, this skill should be executed within the svelte-file-editor agent for optimal results.

punkadillo/figma-code-composer

Skill Claude CodeCodex

Guidance on writing fast, robust, modern Svelte code. Load this skill whenever in a Svelte project and asked to write/edit or analyze a Svelte component or module. Covers reactivity, event handling, styling, integration with libraries and more.

punkadillo/figma-code-composer

Skill Claude Code

Use when building reusable component patterns with Tailwind CSS. Covers component extraction, @apply directive, and composable design patterns.

punkadillo/figma-code-composer

Skill Claude Code

Use when setting up or customizing Tailwind CSS configuration, theme customization, plugins, and build setup. Covers tailwind.config.js setup and content paths.

punkadillo/figma-code-composer

Skill Claude CodeCodex

Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

punkadillo/figma-code-composer

Skill Claude Code needs its repo

Use when optimizing Tailwind CSS for production, reducing bundle size, and improving performance. Covers PurgeCSS, JIT mode, and build optimization.

punkadillo/figma-code-composer

Skill Claude Code

Use when building responsive layouts and mobile-first designs with Tailwind CSS. Covers breakpoints, container queries, and responsive utilities.

punkadillo/figma-code-composer

Skill Claude Code

Use when working with Tailwind CSS utility classes for layout, spacing, typography, colors, and visual effects. Covers utility-first CSS patterns and class composition.

punkadillo/figma-code-composer

Skill Claude CodeCodex

Always invoke when the user's message includes 'tailwind' in any form. Also invoke for: building responsive grid layouts (multi-column card grids, product grids), flex/grid page structures (dashboards with sidebars, fixed topbars, mobile-toggle navs), styling UI components (cards, tables, navbars, pricing sections…

punkadillo/figma-code-composer

Skill Claude CodeCodex

Expert in TailwindCSS utility-first styling with responsive design patterns.

punkadillo/figma-code-composer

Skill Claude CodeCodex

Test-driven development skill for writing unit tests, generating test fixtures and mocks, analyzing coverage gaps, and guiding red-green-refactor workflows across Jest, Pytest, JUnit, Vitest, and Mocha. Use when the user asks to write tests, improve test coverage, practice TDD, generate mocks or stubs, or mentions…

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…