extractionExtract design systems, architecture patterns, and methodology from codebases into reusable skills and documentation. Use when analyzing a project to capture patterns, creating skills from existing code, extracting design tokens, or documenting how a project was built. Triggers on "extract patterns", "extract from this repo", "analyze this codebase", "create skills from this project", "extract design system".
Install via ClawdBot CLI:
clawdbot install wpank/extractionGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
https://github.com/wpank/ai/tree/main/skills/extraction/pattern-extractionAudited Apr 16, 2026 · audit v1.0
Generated Mar 20, 2026
Extract design tokens and UI patterns from a legacy React application to create a modern design system for a redesign. This helps standardize colors, typography, and components, reducing inconsistencies and speeding up development.
Analyze a Go-based microservices project to extract folder structures, API patterns, and deployment workflows. This generates reusable skills for onboarding new developers and documenting best practices across teams.
Extract reusable UI components and checkout flow patterns from an e-commerce site built with Tailwind CSS and shadcn/ui. This creates skills for rapid prototyping of new features and maintaining design consistency.
Capture CI/CD pipelines and Docker configurations from a Kubernetes-managed project to create skills for automating deployments. This ensures reproducible builds and reduces manual errors in production environments.
Extract custom CSS variables and theme files from a legacy design system to migrate to a new framework like Tailwind. This facilitates smooth transitions and preserves brand aesthetics across applications.
Offer pattern extraction as a service to help companies analyze and document their codebases. Revenue comes from project-based fees or retainer contracts for ongoing extraction and skill creation.
Develop a cloud-based tool that automates pattern extraction from uploaded repositories, generating documentation and skills. Revenue is generated through subscription tiers based on usage and features.
Provide training sessions and workshops to teach teams how to use the pattern extraction skill for internal projects. Revenue comes from workshop fees, certification programs, and corporate training packages.
💬 Integration Tip
Integrate this skill into CI/CD pipelines to automatically extract patterns during code reviews, ensuring up-to-date documentation and skill generation without manual intervention.
Scored Apr 19, 2026
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.
Professional Figma design analysis and asset export. Use for extracting design data, exporting assets in multiple formats, auditing accessibility compliance, analyzing design systems, and generating comprehensive design documentation. Read-only analysis of Figma files with powerful export and reporting capabilities.
Complete workflow for creating distinctive design systems from scratch. Orchestrates aesthetic documentation, token architecture, components, and motion. Use when starting a new design system or refactoring an existing one. Triggers on create design system, design tokens, design system setup, visual identity, theming.
Create logos, interfaces, and visual systems with principles of hierarchy, branding, and usability.
Comprehensive UI design skill covering fundamentals, patterns, and anti-patterns. Layout, typography, color, spacing, accessibility, motion, and component design. Use when building any web interface, reviewing design quality, or creating distinctive UIs.
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer han...