---
id: sm-extract
name: "extract"
url: https://skills.yangsir.net/skill/sm-extract
author: pbakaus
domain: ai-data-management-analysis
tags: ["data-extraction", "etl-processes", "web-scraping", "api-integration", "database-queries"]
install_count: 53500
rating: 4.70 (1676 reviews)
github: https://github.com/pbakaus/impeccable
---

# extract

> 此技能专注于运用设计语言，优化AI工具的数据提取能力，确保从各种来源高效、准确地获取所需数据，为后续的数据分析奠定坚实基础。

**Stats**: 53,500 installs · 4.7/5 (1676 reviews)

## Before / After 对比

### 关键信息智能提取与整理

## Readme

# extract

Identify reusable patterns, components, and design tokens, then extract and consolidate them into the design system for systematic reuse.

## Discover

Analyze the target area to identify extraction opportunities:

- 

**Find the design system**: Locate your design system, component library, or shared UI directory (grep for "design system", "ui", "components", etc.). Understand its structure:

Component organization and naming conventions

- Design token structure (if any)

- Documentation patterns

- Import/export conventions

**CRITICAL**: If no design system exists, ask before creating one. Understand the preferred location and structure first.

- 

**Identify patterns**: Look for:

**Repeated components**: Similar UI patterns used multiple times (buttons, cards, inputs, etc.)

- **Hard-coded values**: Colors, spacing, typography, shadows that should be tokens

- **Inconsistent variations**: Multiple implementations of the same concept (3 different button styles)

- **Reusable patterns**: Layout patterns, composition patterns, interaction patterns worth systematizing

- 

**Assess value**: Not everything should be extracted. Consider:

Is this used 3+ times, or likely to be reused?

- Would systematizing this improve consistency?

- Is this a general pattern or context-specific?

- What's the maintenance cost vs benefit?

## Plan Extraction

Create a systematic extraction plan:

- **Components to extract**: Which UI elements become reusable components?

- **Tokens to create**: Which hard-coded values become design tokens?

- **Variants to support**: What variations does each component need?

- **Naming conventions**: Component names, token names, prop names that match existing patterns

- **Migration path**: How to refactor existing uses to consume the new shared versions

**IMPORTANT**: Design systems grow incrementally. Extract what's clearly reusable now, not everything that might someday be reusable.

## Extract & Enrich

Build improved, reusable versions:

- 

**Components**: Create well-designed components with:

Clear props API with sensible defaults

- Proper variants for different use cases

- Accessibility built in (ARIA, keyboard navigation, focus management)

- Documentation and usage examples

- 

**Design tokens**: Create tokens with:

Clear naming (primitive vs semantic)

- Proper hierarchy and organization

- Documentation of when to use each token

- 

**Patterns**: Document patterns with:

When to use this pattern

- Code examples

- Variations and combinations

**NEVER**:

- Extract one-off, context-specific implementations without generalization

- Create components so generic they're useless

- Extract without considering existing design system conventions

- Skip proper TypeScript types or prop documentation

- Create tokens for every single value (tokens should have semantic meaning)

## Migrate

Replace existing uses with the new shared versions:

- **Find all instances**: Search for the patterns you've extracted

- **Replace systematically**: Update each use to consume the shared version

- **Test thoroughly**: Ensure visual and functional parity

- **Delete dead code**: Remove the old implementations

## Document

Update design system documentation:

- Add new components to the component library

- Document token usage and values

- Add examples and guidelines

- Update any Storybook or component catalog

Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently.
Weekly Installs17.4KRepository[pbakaus/impeccable](https://github.com/pbakaus/impeccable)GitHub Stars10.2KFirst Seen14 days agoSecurity Audits[Gen Agent Trust HubPass](/pbakaus/impeccable/extract/security/agent-trust-hub)[SocketPass](/pbakaus/impeccable/extract/security/socket)[SnykPass](/pbakaus/impeccable/extract/security/snyk)Installed oncodex17.2Kopencode17.1Kgithub-copilot17.1Kgemini-cli17.0Kcursor17.0Kamp17.0K

---
*Source: https://skills.yangsir.net/skill/sm-extract*
*Markdown mirror: https://skills.yangsir.net/api/skill/sm-extract/markdown*