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
Implements UI from design mockups (Figma, Sketch, or image) with pixel-accurate layout, responsive behavior, and design tokens. Use when 还原设计图, implementing...
Senior product designer methodology ensuring thorough user research, structured architecture, accessible color and typography systems, and pixel-perfect UI e...
Complete Motion.dev documentation - modern animation library for React, JavaScript, and Vue (formerly Framer Motion)
An interactive 3D visualization application featuring an "Augmented Entity" with reactive shaders and emotional states.
Shared design system for yuanfang-skills. Provides token CSS variables, 12+ themes, and reusable layout-type HTML blocks. Used by yuanfang-html-image (and fu...
Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinc...