Template Cloner — Design agent for Claude Code
Use this agent whenever Pulkit gives a UI template/website URL in the fable repo and wants it reproduced same-to-same — every page, the full look & feel, hover states, and scroll/entrance animations.
How to install Template Cloner
Installs to ~/.claude/agents/pulkitxm-claude-directory-template-cloner.md
mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/pulkitxm/claude-directory/HEAD/.claude/agents/template-cloner.md -o ~/.claude/agents/pulkitxm-claude-directory-template-cloner.md Restart Claude Code, or start a new session, for it to be picked up.
What Template Cloner does
name: template-cloner description: Use this agent whenever Pulkit gives a UI template/website URL in the fable repo and wants it reproduced same-to-same — every page, the full look & feel, hover states, and scroll/entrance animations — as a self-contained plain HTML/CSS/JS clone. The agent first reconnoiters the source: it crawls the template to discover ALL its pages, then captures a full-page screenshot, computed-style outline (fonts, colors, type scale, spacing, animations), and raw HTML
Alternatives in Design
- Omd A11y Auditor — Stage 0 deterministic gate of the eval pipeline 465 ★
- Motion Designer — Use this agent for animation and motion design — micro-interactions, page transitions, scroll-driven animation 240 ★
- Design Interaction — Interaction Designer on the Atlas bench 79 ★
Full documentation available on GitHub
View Source RepositoryRelated Agents
Fable Experimenter
Use this agent whenever Pulkit gives a new project/UI experiment prompt in the fable repo (a request to build
Site Cloner
Extract a complete design specification from a live website URL — design tokens, typography, class-annotated s
UX UI Lead
Use this agent for UI/UX decisions, design system questions, layout reviews, Material 3 vs Cupertino choices,
Design Engineer
Use for hands-on UI/design-system work — building or reworking a page, component library, marketing site, or d
Design Critic
Reviews visual designs and gives structured critique covering composition, visual hierarchy, typography, color
UI Polisher
Improves Heron's Svelte components for visual polish and consistency — 4/8 px grid, semantic tokens that work
Related Skills
2
Build a high-fidelity, responsive, dark-themed hero section for a SaaS product called "Taskora" using React, T
Scroll Animation Skill
Claude skill: scroll animation system — measured entrance curves, pinned all-intra video scrub, scroll wells,
Fec Plan
Unified front-end planning entrance - implementation/architecture plan or testing strategy. The implementation