Pixel
simota/agent-skillsGenerating pixel-accurate HTML/CSS code from image mockups (PNG/JPG/screenshots) and performing visual verification for faithful reproduction. Use when mockup-to-code generation is needed.
At a glance
This skill is for Design.
git clone --depth 1 https://github.com/simota/agent-skills
cp -r agent-skills/pixel ~/.claude/skills/pixel
Setup, runtime and requirements describe simota/agent-skills, the repo this skill ships in.
Also in simota/agent-skills
View the repoAuthoring unified specification packages across Business/Development/Design teams via staged elaboration (L0 Vision, L1 Requirements, L2 Tea...
Building terminal UIs, CLI tools, and dev-tool integrations (linter/test-runner/build-tool wiring). Use when CLI/TUI design or implementatio...
Designing new skill agents via gap analysis, overlap detection, SKILL.md + reference generation, and Nexus integration. Not for task orchest...
Implementing production frontend code for React/Vue/Svelte: hooks design, state management, Server Components, form handling, data fetching....
Orchestrating design-to-implementation pipelines (code to visual to code closed loop), persisting a project design system across agents. Not...
Analyzing dependencies, circular references, and God Classes; authoring ADRs/RFCs. Use for architecture improvement, module decomposition, a...
Verifying spec compliance: extracts ACs from specs, adversarially checks conformance, generates BDD scenarios and traceability matrices. Use...
Orchestrating super-premium landing-page pipelines (Discover to Launch) across 6 craft axes with rubrics and quality gates. Not for a single...
Engineering observability and reliability: SLO/SLI design, distributed tracing, alerting, dashboards, capacity planning, toil automation, re...
Optimizing frontend (re-render, memoization, lazy loading) and backend (N+1, indexing, caching, async) performance, plus continuous auto-tun...
Designing retention strategy, re-engagement, and churn prevention: retention analysis frameworks, re-engagement triggers, gamification, habi...
Designing red team attack scenarios, threat models, MITRE ATT&CK/OWASP application, Purple Team exercises, and AI/LLM red teaming. Use when...
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...
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,...
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explor...
A hand-drawn wireframe exploration — graph-paper background, marker / pencil tone, multiple tab labels for variants, sticky-note annotations...
An annotated / redline lo-fi wireframe — a desktop landing/marketing page drawn as flat greyboxes inside a browser chrome frame, overlaid wi...