Design Screenshot Spec
ytvee-dev/webdev-agent-kitTurn user-supplied screenshots, copied inspect values, exports, assets, or design notes into a strict frontend Design Implementation Spec. Live design links alone are insufficient.
At a glance
This skill is for Design and helps you convert screenshots into design specs, create frontend implementation specs, and document design details from exports.
/plugin marketplace add ytvee-dev/webdev-agent-kit
/plugin install design-screenshot-spec
Setup, runtime and requirements describe ytvee-dev/webdev-agent-kit, the repo this skill ships in.
frontenddesign-systemsimplementationSpecificationsAssetsdocumentation
Also in ytvee-dev/webdev-agent-kit
View the repoCreate, evaluate, or edit this .agents WebDev Agent Kit, including AGENTS.md, common/**, project/**, skills/**, metadata, validators, and pr...
Create, resume, analyze, or converge standard and deep frontend execution plans with traceable slices, evidence, and stop/resume state. Skip...
Plan architecture and ownership for standard or deep React/Next.js work across routing, state, data, styling, forms, builds, migrations, and...
Diagnose and fix frontend defects from evidence, including unclear UI/runtime errors, broken routes, styling regressions, and hydration or c...
Set subject-grounded visual direction for standard or deep UI work, redesign, polish, critique, anti-template review, or design handoff. Ski...
Ground standard or deep UI work in product category, page pattern, design dials, domain UX risks, and anti-patterns before visual direction....
Implement an approved Design Implementation Spec or screenshot-derived spec in React/Next.js using existing CSS Modules, Redux, TanStack, an...
Run scoped frontend lint verification, repair related lint failures, or plan explicitly requested lint setup. Prefer existing commands; depe...
Review frontend quality from evidence across code, UI, architecture, TypeScript, security, performance, verification, decomposition, UX, and...
Perform bounded, behavior-preserving frontend refactors such as component extraction, file moves, prop or interface cleanup, state simplific...
Verify rendered frontend evidence after implementation, including screenshot comparison, responsiveness, overflow, visible states, and scope...
Define user goal, scope, constraints, and done criteria before standard or deep frontend work. Skip micro-fixes, obvious type errors, tiny s...
Other Design skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typog...
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art...
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explor...
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right,...
An annotated / redline lo-fi wireframe — a desktop landing/marketing page drawn as flat greyboxes inside a browser chrome frame, overlaid wi...
Generate configurable chat motion overlays from a transcript or screenshot, including plain bubble scenes, app-style chat containers, option...