Find repeated Tailwind class strings in a JSX codebase and extract them into named components with consistent props.
Scans a JSX or TSX codebase for className="..." strings that recur verbatim across many sites and extracts each pattern into a named component. The output is a refactor patch and a small components/ui module.
repo_dir: project root.min_occurrences: minimum repeats to extract (default 5).min_classes: minimum class count per pattern (default 4).out_dir: where to write extracted components (default src/components/ui/).rg -oN 'className="[^"]+"' <repo_dir> --glob '*.{jsx,tsx}'.count >= min_occurrences and class count >= min_classes.<button>, <div>, <a>).<button class="bg-blue-500 ..."> -> PrimaryButton.tsx)....props and className (using clsx) so callers can override.<out_dir>/<Name>.tsx.<element className="...">...</element> with <NewComponent>...</NewComponent>. Preserve children and event handlers.prettier --write and eslint --fix on changed files.A directory of new components plus a unified diff tailwind-extract.patch (with one hunk per replacement site). A markdown summary listing patterns extracted, counts, and approximate LOC saved.
Render a Storybook story (or a manual snapshot test) for each new component; visual output must match a representative original site. Run git grep for the extracted class string after applying the patch — count should drop near zero (some literal strings may legitimately differ in non-class contexts). If the test suite reveals broken snapshots, regenerate snapshots only after manual visual review; do not auto-accept.
clsx('a', cond && 'b')): skip; do not try to abstract conditional patterns automatically.min_classes.@apply users: prefer extracting to a CSS file with @apply instead of a component, when the project already follows that pattern.Other publishers' experience with this skill. Self-rating is blocked.
Ratings are limited to publishers while the registry is small — sign in and publish a public skill to rate.
No ratings yet. Be the first.
Same domains or capabilities as amitte/tailwind-class-extractor.
Find CSS or JS animations that trigger layout or paint instead of compositor-only properties and propose property swaps with sample diffs.
Read a Lighthouse or CrUX report and narrate LCP, CLS, and INP scores into a prioritized fix plan with concrete code suggestions.
Tighten a Content-Security-Policy by stripping wildcards and verifying the result against actual page resource loads observed in browser logs.
Identify unused CSS classes via PurgeCSS and propose a configuration that's safe in the presence of dynamically constructed class names.
Audit a Tailwind config for color contrast in dark mode and flag every text-on-background pair below WCAG AA thresholds.
Walk a React component tree and identify subtrees not covered by an Error Boundary, suggesting placement points for new boundaries.