1. 1

   Install the skill

   Run these commands once in Claude Code. The skill gives the agent know-how for this kind of piece. With other agents, follow the instructions on the skill page.

   frontend-design

   /plugin marketplace add anthropics/skills
   /plugin install example-skills@anthropic-agent-skills

   Copy
2. 2

   Create the images

   Code cannot draw these well. Generate them with any image generator (hover the button to see a few), or with your agent's image tool if it has one, and save them in the project.

   Any image generator

REFERENCE
- Gallery page: https://magpui.com/en/i/dachshund-that-grows-with-your-password-71494e
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/dachshund-that-grows-with-your-password-71494e/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/dachshund-that-grows-with-your-password-71494e/clip.mp4
- Original post: https://x.com/RaminNasibov/status/2111194691303596460 by @RaminNasibov
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.

ASSETS
This needs real artwork, not shapes drawn in code. Use the files the user gives you (ask where they are). If you have an image generation tool, generate them with these prompts; otherwise leave clearly marked placeholders.
- Dachshund in four moods: Flat cartoon illustration of a long orange dachshund seen from the side, thick dark brown outlines, big round white eyes, floppy brown ears. Four versions with the same pose: grumpy, surprised, pleased, happy. Separate head, middle body and tail so the body can stretch. Clean vector style, transparent background, centered, no text, 4 images 1:1.

BUILD
A reset-password card where the strength meter is an illustrated dachshund: the body stretches horizontally with each character typed and the face changes through four moods (grumpy, surprised, pleased, happy). A short cheeky label under the input reflects the strength.

DESIGN SYSTEM
- Card 360px wide, white, 24px radius, on #F1F1F1. Title 22px bold, subtitle 14px grey.
- Input with 2px green border #22C55E, password dots 20px.
- Strength label 11px: red #E5484D when weak, green #16A34A when strong. Black full-width Reset button.

MOTION
- Body: the dog is split in head, middle and tail; the middle segment scales on X from 1 to 3.2 as length goes 0 to 16 chars, spring (stiffness 300, damping 20); head and tail translate with it.
- Face: swap expression at 4/8/12 characters with a 120ms squash (scaleY 0.9 then 1).
- Tail wags faster as strength rises (rotate ±12deg, 400ms down to 180ms).

SECTIONS
- Header text.
- Dog illustration (SVG, three groups).
- Input + strength label.
- Reset and Cancel.

IMPLEMENTATION
- SVG with three groups; drive the middle segment's scaleX from input length; Framer Motion springs.
- Announce strength changes with aria-live for screen readers.
- prefers-reduced-motion: skip the animation and show the end state.

ADAPT TO THE PROJECT
- Reuse the project's existing tokens, components and fonts; map colors to the closest existing tokens.
- Do not copy logos, brand names, characters or artwork from the reference. Use neutral placeholders.

SUCCESS CHECK
- Typing one character always produces visible growth.
- Deleting shrinks the dog back smoothly.
- The input stays usable and the dog never overlaps it.