本文へ移動
cccskills
無料GitHub で公開

extract

Identifies reusable UI patterns, components, and design tokens, then extracts and consolidates them into a design system for systematic reuse.

skillmds/skillmd
インストール方法を見る

含まれるファイル（2）

  • SKILL.md3.7 KB
  • skill-report.json8.3 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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:

  1. 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.

  2. 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

  3. 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.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

academic-pptx

無料

Use this skill whenever the user wants to create or improve a presentation for an academic context — conference papers, seminar talks, thesis defenses, grant briefings, lab meetings, invited lectures, or any presentation where the audience will evaluate reasoning and evidence. Triggers include: 'conference talk', 'seminar slides', 'thesis defense', 'research presentation', 'academic deck', 'academic presentation'. Also triggers when the user asks to 'make slides' in combination with academic content (e.g., 'make slides for my paper on X', 'create a presentation for my dissertation defense', 'build a deck for my grant proposal'). This skill governs CONTENT and STRUCTURE decisions. For the technical work of creating or editing the .pptx file itself, also read the pptx SKILL.md.

日本語の概要は準備中です。原文の説明を表示しています。

skillmds/skillmd712026年10月9日 更新

adp

無料

Redpanda's Agentic Data Plane: governance infrastructure for building, running, and governing AI agents and MCP servers, plus a proxying AI Gateway for LLM providers, operated via `rpk ai` and the ADP API. Use when creating or managing AI agents (managed or self-managed) via `rpk ai agent` or `AgentRegistryService`; configuring MCP servers (remote or managed catalog, code mode, auth); setting up LLM providers or querying models via `rpk ai llm`/`rpk ai model` or the AI Gateway proxy; or configuring budgets, guardrails, or Cedar access-control policies through the governance APIs. Also covers reading agent transcripts and spending insights, and wiring OAuth clients or providers to the aigw Authorization Server. For the separate rpk cloud mcp control-plane MCP server, see `/redpanda:rpk-cloud`.

日本語の概要は準備中です。原文の説明を表示しています。

skillmds/skillmd712026年10月9日 更新

ads

無料

Operate professional paid advertising across Google, Meta, YouTube, LinkedIn, TikTok, Microsoft, Apple, Amazon, Reddit, Pinterest, Snapchat, and X. Use for account intake, source-grounded audits, strategy, budget and measurement planning, creative production, experiments, reporting, monitoring, and explicitly approved campaign changes. Also trigger on PPC, paid social, retail media, attribution, tracking, landing pages, cross-platform conversion totals, negative keywords or search terms, beta-feature scoring, stale platform claims, API-token or credential setup, campaign deletion, and safe Claude Ads installation or uninstall.

日本語の概要は準備中です。原文の説明を表示しています。

skillmds/skillmd712026年10月9日 更新

ads-apple

無料

Audit Apple Ads measurement, AdServices and AdAttributionKit, campaign and keyword structure, Search Match, App Store placements, custom product pages, bidding, budgets, MMP reconciliation, and policy. Use for Apple Ads, Apple Search Ads, App Store ads, Search Match, custom product pages, AdServices, or Apple app-install campaigns.

日本語の概要は準備中です。原文の説明を表示しています。

skillmds/skillmd712026年10月9日 更新

ads-competitor

無料

Research competitor paid-ad presence, messaging, creative, formats, landing pages, keyword and auction signals, transparent ad libraries, and strategic gaps across supported platforms. Use for competitor ads, ad libraries, ad spy, competitive PPC analysis, competitor creative, Google Ads Transparency, Meta Ad Library, or paid-media competitor research.

日本語の概要は準備中です。原文の説明を表示しています。

skillmds/skillmd712026年10月9日 更新

ads-dna

無料

Extract a public-safe brand and offer profile for paid advertising from an authorized website and operator input. Triggers on: brand DNA, brand profile, brand identity, brand style, brand colors, brand voice, visual identity, style guide, website brand analysis.

日本語の概要は準備中です。原文の説明を表示しています。

skillmds/skillmd712026年10月9日 更新

skillmds のスキルをすべて見る

このスキルの問題を報告する