frontend-design-extractorExtract reusable UI/UX design systems from frontend codebases: design tokens, global styles, components, interaction patterns, and page templates. Use when analyzing any frontend repo (React/Vue/Angular/Next/Vite/etc.) to document or migrate UI/UX for reuse across projects. Focus on UI/UX only; explicitly ignore business logic and domain workflows.
Install via ClawdBot CLI:
clawdbot install xsir0/frontend-design-extractorGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Generated Mar 1, 2026
A fintech startup with a React-based web app needs to migrate from an inconsistent, ad-hoc styling approach to a unified design system to improve development speed and brand consistency. The skill extracts existing UI patterns, normalizes design tokens, and creates a migration plan for incremental adoption without disrupting core financial transaction logic.
An e-commerce company using Vue.js wants to build a reusable component library from their existing product pages and checkout flows to standardize UI across multiple storefronts. The skill inventories components like buttons, modals, and cards, documenting variants and accessibility gaps while excluding backend integration and payment processing logic.
A healthcare provider has an outdated Angular application with fragmented styles and poor accessibility. The skill analyzes the codebase to extract design tokens and global styles, enabling a phased refactor to meet WCAG standards and create a maintainable UI spec, ensuring compliance without altering patient data workflows.
A media company with separate Next.js web and React Native mobile apps seeks to unify their UI/UX design systems for consistency. The skill extracts reusable patterns like color schemes, typography, and interaction behaviors from both codebases, focusing on visual elements while ignoring content delivery and user authentication logic.
A SaaS startup building a new analytics dashboard with Vite needs a scalable UI foundation from scratch. The skill defines design tokens, creates baseline components like tables and charts, and provides page templates, enabling rapid prototyping without embedding business logic for data processing or user management.
Offer specialized UI/UX extraction and migration services to clients, charging per project or hourly. This model leverages the skill to analyze codebases, deliver design specs, and guide refactoring, generating revenue from expertise in frontend modernization and design system implementation.
Develop and sell a SaaS platform that automates the extraction process, providing users with self-service scans, spec generation, and migration planning. Revenue comes from monthly or annual subscriptions, targeting teams needing ongoing UI consistency across multiple projects.
Partner with digital agencies to integrate the skill into their service offerings for web development and redesign projects. This model generates revenue through referral fees or white-label solutions, helping agencies deliver faster, more consistent UI outcomes without in-house expertise.
💬 Integration Tip
Integrate this skill early in project planning to define UI constraints and avoid costly refactors later; use the provided scripts for automated scanning to save time on manual code inspection.
Scored Apr 19, 2026
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Tailwind reference tool. Use when working with tailwind in frontend contexts.
A product creation skill based on the "Bee Website Builder" Open API. It is used to create a new product under a specified site language and product group, w...
A product update skill based on the "Bee Website Builder" Open API. It is used to update an existing product under a specified site language and supports upd...
Build WCAG 2.1 AA compliant websites with semantic HTML, proper ARIA, focus management, and screen reader support. Includes color contrast (4.5:1 text), keyboard navigation, form labels, and live regions. Use when implementing accessible interfaces, fixing screen reader issues, keyboard navigation, or troubleshooting "focus outline missing", "aria-label required", "insufficient contrast".
Use when building Vue 3 applications with Composition API, Nuxt 3, or Quasar. Invoke for Pinia, TypeScript, PWA, Capacitor mobile apps, Vite configuration.