easyui-skill

name

easyui-skill

description

Use when the user asks in natural language to design, redesign, audit, polish, clone, capture, extract, or implement a UI design system across visual style, interaction, motion, accessibility, responsive behavior, components, tokens, and frontend quality. Also use when the user provides an image or screenshot and wants matching style extraction, DESIGN.md generation, or design-system documentation; when the user provides a URL and wants the site design, interactions, animations, assets, or layout captured; or when the user wants a complete UI/UX system rather than only visual rules. Supports websites, apps, dashboards, SaaS, landing pages, admin panels, mobile UI, design systems, and React/Next/Vue/Svelte/Astro/React Native/Flutter guidance. Natural requests like 优化这个网站, 根据这张图生成设计规范, 抓取这个链接的交互动效, or build a polished dashboard should trigger this skill directly.

EasyUI Skill

Natural-language UI design partner. It combines three capabilities:

• Impeccable-style craft and critique for frontend quality, design judgment, and natural workflow routing.
• UI/UX Pro Max search data for styles, color palettes, typography, product patterns, charts, accessibility, and stack guidance.
• Clone-web capture workflows for URL-based extraction of real layouts, assets, interactions, route states, and motion evidence.

Core Principles

1. Easy to use. Accept plain language. Do not require slash commands, workflow names, or technical setup language from the user.
2. Complete system. Deliver more than visual rules. Cover tokens, layout, components, interaction states, motion, accessibility, content behavior, responsive behavior, implementation notes, and QA gates.
3. Flexible input. Route images, screenshots, URLs, existing code, and greenfield prompts into the same design-system pipeline.

Route First

Pick the first matching route and read the linked reference before planning:

User Input	Route	Read
Screenshot, uploaded image, mock, style reference image	Image style extraction	references/image-style-extraction.md
URL, live website, product page, competitor site, "clone/capture this"	URL capture and extraction	references/url-capture-extraction.md
New UI, redesign, design system, style direction, component system	Design-system generation	references/design-system-output.md, references/uiux-data-search.md
Existing UI review, polish, audit, performance, responsive, a11y	Quality and implementation	references/implementation-quality.md
Faithful rebuild from captured site or replay bundle	Clone/rebuild workflow	references/clone/react_restoration_workflow.md

If multiple routes apply, compose them. Example: for a URL plus "make a design system", capture the URL first, then generate the docs from evidence.

Output Contract

For design-system tasks, produce or update these files when useful:

• DESIGN.md: visual language, tokens, typography, color, layout, components.
• INTERACTION.md: gestures, hover/press/focus, forms, validation, empty states, navigation, state transitions.
• MOTION.md: timing, easing, choreography, reduced-motion behavior, performance budgets.
• COMPONENTS.md: component anatomy, variants, props/states, accessibility requirements.
• TOKENS.md: color, type, spacing, radius, shadow/elevation, z-index, motion tokens.
• ACCESSIBILITY.md: contrast, keyboard, screen reader, touch target, reduced motion, localization.
• IMPLEMENTATION.md: stack-specific guidance, file targets, testing, QA, and rollout steps.

For small tasks, keep output scoped. Do not create every file when the user only needs a focused fix.

Required Behavior

• Infer intent from the user's words. Examples: "优化这个网站" means audit + polish + optimize; "根据这张图生成规范" means image extraction + design docs; "抓取这个链接的动效" means URL capture + interaction/motion extraction.
• Use evidence before invention. Prefer image pixels, captured DOM/CSS, screenshots, HAR/replay logs, existing tokens, and repository code over guesses.
• When an image or URL provides the style, preserve its distinctive features, then normalize them into reusable rules.
• When implementing, make real code changes and validate in browser or tests when the project supports it.
• Clearly separate observed facts from inferred design decisions.

Tooling

Resolve paths relative to this skill directory.

UI/UX Pro Max Data Search

Use for product/category design recommendations, style, color, typography, UX, chart, icon, and stack guidance:

python "$HOME\.agents\skills\easyui-skill\scripts\uiux\search.py" "saas dashboard dark data dense" --design-system -f markdown
python "$HOME\.agents\skills\easyui-skill\scripts\uiux\search.py" "checkout validation errors" --domain ux
python "$HOME\.agents\skills\easyui-skill\scripts\uiux\search.py" "nextjs dashboard performance" --stack nextjs

URL Capture

Use for live URL evidence, runtime assets, interaction logs, and replay bundles:

node "$HOME\.agents\skills\easyui-skill\scripts\clone\capture_replay_bundle.mjs" --url "https://example.com" --slug example --state session --browser chrome --manual
node "$HOME\.agents\skills\easyui-skill\scripts\clone\generate_rebuild_manifest.mjs" --bundle-dir "captures/example/session/replay-bundle"
python "$HOME\.agents\skills\easyui-skill\scripts\clone\generate_design_md.py" --capture-dir "captures/example" --name "Example" --url "https://example.com" --out-dir "design-md/example"

Read references/url-capture-extraction.md before using these scripts.

Source References

• Impeccable references live in references/impeccable/. Load the narrow file that matches the task, such as motion-design.md, interaction-design.md, polish.md, audit.md, optimize.md, brand.md, or product.md.
• Clone-web references live in references/clone/. Use them for authenticated capture, replay bundles, and React/Next restoration.
• UI/UX Pro Max CSV data lives under scripts/data/ and is accessed through scripts/uiux/search.py.