punkadillo/figma-code-composer
Skill Claude CodeCodex
Sass (indented syntax) best practices and coding guidelines for clean, maintainable stylesheets.
not rated 3 2mo ago A 25 tokens
copy · 100% MIT
punkadillo/figma-code-composer
Skill Claude CodeCodex
SCSS/Sassy CSS best practices and coding guidelines for maintainable, scalable stylesheets.
not rated 3 2mo ago A 23 tokens
copy · 100% MIT
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.
not rated 3 2mo ago A 52 tokens
original MIT
senior-qa
100punkadillo/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…
not rated 3 2mo ago A 129 tokens
original MIT
senior-security
101punkadillo/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…
not rated 3 2mo ago A 74 tokens
original MIT
shadcn
102punkadillo/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…
not rated 3 2mo ago A 90 tokens
copy · 92% MIT
solid-react
103punkadillo/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.
not rated 3 2mo ago A 38 tokens
copy · 91% MIT
solid
104punkadillo/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.
not rated 3 2mo ago A 56 tokens
original MIT
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.
not rated 3 2mo ago A 30 tokens
original MIT
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.
not rated 3 2mo ago A 33 tokens
original MIT
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.
not rated 3 2mo ago A 31 tokens
original MIT
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.
not rated 3 2mo ago A 33 tokens
original MIT
punkadillo/figma-code-composer
Skill Claude CodeCodex
You are an expert in styled-components, CSS-in-JS patterns, and React component styling.
not rated 3 2mo ago A 20 tokens
original MIT
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.
not rated 3 2mo ago A 68 tokens
copy · 100% MIT
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.
not rated 3 2mo ago A 59 tokens
copy · 95% MIT
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.
not rated 3 2mo ago A 29 tokens
original MIT
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.
not rated 3 2mo ago A 35 tokens
original MIT
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.
not rated 3 2mo ago A 42 tokens
copy · 100% MIT
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.
not rated 3 2mo ago A 34 tokens
original MIT
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.
not rated 3 2mo ago A 30 tokens
original MIT
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.
not rated 3 2mo ago A 38 tokens
original MIT
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…
not rated 3 2mo ago A 151 tokens
copy · 100% MIT
tailwindcss
119punkadillo/figma-code-composer
Skill Claude CodeCodex
Expert in TailwindCSS utility-first styling with responsive design patterns.
not rated 3 2mo ago A 16 tokens
original MIT
tdd-guide
120punkadillo/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…
not rated 3 2mo ago A 82 tokens
original MIT
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: