punkadillo/figma-code-composer

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.

punkadillo/figma-code-composer

Skill Claude CodeCodex

Sass (indented syntax) best practices and coding guidelines for clean, maintainable stylesheets.

punkadillo/figma-code-composer

Skill Claude CodeCodex

SCSS/Sassy CSS best practices and coding guidelines for maintainable, scalable stylesheets.

punkadillo/figma-code-composer

Skill Claude CodeCodex

Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.

punkadillo/figma-code-composer

Skill Claude CodeCodex needs its repo

Generates unit tests, integration tests, and E2E tests for React/Next.js applications. Scans components to create Jest + React Testing Library test stubs, analyzes Istanbul/LCOV coverage reports to surface gaps, scaffolds Playwright test files from Next.js routes, mocks API calls with MSW, creates test fixtures, and…

punkadillo/figma-code-composer

Skill Claude CodeCodex

Security engineering toolkit for threat modeling, vulnerability analysis, secure architecture, and penetration testing. Includes STRIDE analysis, OWASP guidance, cryptography patterns, and security scanning tools. Use when the user asks about security reviews, threat analysis, vulnerability assessments, secure coding…

punkadillo/figma-code-composer

Skill Claude CodeCodex

Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for…

punkadillo/figma-code-composer

Skill Claude Code

SOLID principles for React 19. Files < 100 lines, hooks separated, interfaces in src/interfaces/, JSDoc mandatory. Use for React architecture and code quality.

punkadillo/figma-code-composer

Skill Claude CodeCodex

Use this skill when writing code, implementing features, refactoring, planning architecture, designing systems, reviewing code, or debugging. This skill transforms junior-level code into senior-engineer quality software through SOLID principles, TDD, clean code practices, and professional software design.

punkadillo/figma-code-composer

Skill Claude Code

Use when configuring interactive controls and args for Storybook stories. Helps create dynamic, explorable component demonstrations with proper type constraints.

punkadillo/figma-code-composer

Skill Claude Code

Use when creating or improving component documentation in Storybook. Helps generate comprehensive docs using MDX, autodocs, and JSDoc comments.