LogoClawIndex
CasesSkillsAbout
LogoClawIndex

style-extractor - Extract reusable web UI style and motion guides

Extracts evidence-based visual tokens, component states, interaction rules, and motion behavior from websites or web apps into reusable guides.

Tags

Updated: 2026-09-29
web UIdesign systemstyle guidemotion designvisual tokensevidence collection

Capabilities

Extract reusable style tokensCapture static UI evidenceAnalyze component state matricesExtract motion behavior evidence

Typical Inputs

Project nameStyle or variant nameSource URL

Typical Outputs

Style guide Markdown fileMotion guide Markdown fileEvidence manifest Markdown file

What this skill does

  • Extract reusable style tokens
  • Capture static UI evidence
  • Analyze component state matrices
  • Extract motion behavior evidence
  • Generate structured guide files
  • Store evidence in required folders
  • Review reference packages before extraction

Inputs

  • Project name
  • Style or variant name
  • Source URL
  • Web repository
  • Motion assessment
  • Reuse target
  • Primary reference package

Outputs

  • Style guide Markdown file
  • Motion guide Markdown file
  • Evidence manifest Markdown file
  • Evidence directory
  • Screenshots
  • Downloaded CSS and JS assets
  • Extraction notes

Requirements

  • Chrome MCP tools
  • Source website or repository access
  • Reference package files
  • Write access to the user output directory

Source

  • Spec: SKILL.md

ClawIndex

OpenClaw Skills & Use Case Index

ClawIndex is an ecosystem-driven index of OpenClaw skills and real-world use cases.

Index

Skills·
Cases

Meta

About·
Disclaimer·
Email·
GitHub
© 2026 ClawIndex All Rights Reserved.