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.
punkadillo/figma-code-composer
Skill Claude Code needs its repo
Use when managing test state and infrastructure with reusable Playwright fixtures and lifecycle hooks for efficient test setup and teardown.
punkadillo/figma-code-composer
Skill Claude Code needs its repo
Use when creating page objects or refactoring Playwright tests for better maintainability with Page Object Model patterns.
punkadillo/figma-code-composer
Skill Claude CodeCodex
Production-grade Playwright testing toolkit. Use when the user mentions Playwright tests, end-to-end testing, browser automation, fixing flaky tests, test migration, CI/CD testing, or test suites. Generate tests, fix flaky failures, migrate from Cypress/Selenium, sync with TestRail, run on BrowserStack. 55 templates…
punkadillo/figma-code-composer
Skill Claude Code
Use when setting up Playwright test projects and organizing test suites with proper configuration and project structure.
punkadillo/figma-code-composer
Skill Claude CodeCodex
PostCSS best practices and configuration guidelines for modern CSS processing and optimization.
punkadillo/figma-code-composer
Skill Claude CodeCodex
Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.
punkadillo/figma-code-composer
Skill Claude CodeCodex
React best-practices reviewer for TSX files. Triggers after editing multiple TSX components to run a condensed quality checklist covering component structure, hooks usage, accessibility, performance, and TypeScript patterns.
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
Design scalable React components using functional components, hooks, composition patterns, and TypeScript. Use when building reusable component libraries and maintainable UI systems.
punkadillo/figma-code-composer
Skill Claude CodeCodex
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
punkadillo/figma-code-composer
Skill Claude CodeCodex
Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions.
punkadillo/figma-code-composer
Skill Claude CodeCodex
Comprehensive Redux Toolkit best practices for React and Next.js applications with TypeScript.
punkadillo/figma-code-composer
Skill Claude CodeCodex
Expert guidance for Remix development with TypeScript, loaders/actions, nested routes, and full-stack web application best practices.
punkadillo/figma-code-composer
Skill Claude CodeCodex
Comprehensive guidelines for responsive web design including mobile-first approach, flexible layouts, media queries, and cross-device optimization.
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: