Agent skill · software engineering · thienanblog
ui-ux-concept-implementation
Implement an already-selected visual direction from a mockup, screenshot, or reference site in an existing project, using project-owned code and equivalent-state browser comparison. Use when visual fidelity is primary, directly or after project-development-mindset routing. Do not use for concept generation, routine UI edits, or supporting browser checks; prefer a dashboard-specific workflow for operational dashboards when available.
Why this skill is useful
Adds specific procedures for implementing UI/UX concepts and verifying them with Playwright and DevTools that the AI wouldn't reliably generate on its own.
What it needs
Requires playwright installed locally. About 3k tokens when loaded. Last updated 2026-08-05. 63 stars on the source repository.
What this skill does
UI/UX Concept Implementation Overview Turn a selected visual direction into working UI while preserving the project's product identity and producing browser evidence against the target. Run this skill in the main conversation. Do not spawn subagents, agent teams, or delegated parallel workers unless the user explicitly approves the proposed count and scope after being told that doing so can increase usage. Ask again before expanding an approved scope. Establish The Visual Contract Confirm that one direction is selected. A single user-supplied mockup, screenshot, or reference site is a selected target. If materially different concepts remain unselected, return to the coordinator or obtain the user's selection before implementation. If the selected target is an operational dashboard and a dashboard-specific workflow is available, return to the coordinator and use it. Otherwise continue with this general visual-reference workflow. Inspect the target and the current rendered UI at the relevant routes, viewports, themes, data states, and interaction states. Ask a narrow question only when unresolved ambiguity would produce materially different results. Classify the target's visible decisions as exact (must match), adaptable (translate into the product's visual language), or unspecified (follow established project conventions). Record only the distinctions needed to guide implementation and verification. Treat existing project instructions, design-system sources, components, tokens, content, assets, responsive conventions, and accessibility patterns as constraints. Do not replace suitable project identity merely because the reference uses a different system. Preserve the selected concept outside committed source only when later comparison genuinely needs a durable artifact. Prefer an existing ignored or environment-managed location; do not create project files or modify ignore configuration solely for transient persistence without authorization. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills thienanblog/ui-ux-concept-implementation