Convert an image (screenshot, mockup, Figma export) into an HTML page styled with Tailwind CSS. Use this skill whenever the user says "image-to-code ...", asks to turn a design image into code, recreate a UI from a screenshot, generate HTML/Tailwind from a mockup, or says things like "이 이미지를 웹페이지로 만들어줘" / "HTML로 바꿔줘" / "Tailwind로 바꿔줘". Result is saved inside ./pages/ /.
EnglishHindsight 장기 기억 시스템을 직접 조작한다. /hindsight retain — 지식을 장기 기억에 저장. /hindsight recall — 과거 기억을 검색. /hindsight reflect — 기억 기반 추론/분석. /hindsight save — 현재 세션의 모든 대화를 있는 그대로 장기 기억에 저장. /hindsight context — 관련 과거 기억을 불러와 작업 맥락으로 사용. /hindsight setup — bank mission 설정 (재귀 발전 최적화, 최초 1회). /hindsight status — bank 상태 확인. 사용자가 "/hindsight", "hindsight에 저장", "hindsight에서 찾아", "hindsight 검색", "장기 기억에 저장", "장기 기억 검색", "세션 저장", "과거 기억 참고", "이전 경험" 등을 말할 때 사용. 반드시 arguments(retain/recall/reflect/save/context/setup/status)로 동작을 결정한다. arguments 없이 호출되면 사용법을 안내한다.
Korean
AGENT SKILLS ATLASIncludes Image to Code and other workflows.
Claude Code
Codex
Cursor
GitHub Copilot
Gemini CLISupported by the Atlas install prompt. Skill-specific requirements vary.
Pack stats
What’s included
Image to Code
Convert an image (screenshot, mockup, Figma export) into an HTML page styled with Tailwind CSS. Use this skill whenever the user says "image-to-code ...", asks to turn a design image into code, recreate a UI from a screenshot, generate HTML/Tailwind from a mockup, or says things like "이 이미지를 웹페이지로 만들어줘" / "HTML로 바꿔줘" / "Tailwind로 바꿔줘". Result is saved inside ./pages/ /.
Hindsight
Hindsight 장기 기억 시스템을 직접 조작한다. /hindsight retain — 지식을 장기 기억에 저장. /hindsight recall — 과거 기억을 검색. /hindsight reflect — 기억 기반 추론/분석. /hindsight save — 현재 세션의 모든 대화를 있는 그대로 장기 기억에 저장. /hindsight context — 관련 과거 기억을 불러와 작업 맥락으로 사용. /hindsight setup — bank mission 설정 (재귀 발전 최적화, 최초 1회). /hindsight status — bank 상태 확인. 사용자가 "/hindsight", "hindsight에 저장", "hindsight에서 찾아", "hindsight 검색", "장기 기억에 저장", "장기 기억 검색", "세션 저장", "과거 기억 참고", "이전 경험" 등을 말할 때 사용. 반드시 arguments(retain/recall/reflect/save/context/setup/status)로 동작을 결정한다. arguments 없이 호출되면 사용법을 안내한다.
Quick start
- Choose your skills. Select individual skills above, or choose the entire pack.
- Copy the install prompt. Use Copy install prompt above the list.
- Send it to your agent. Paste into your coding agent’s chat. Your agent reviews the source and guides the setup.
Try it with your agent
After installation, start with a request like:
Use the Image to Code skill to help with my task.
Ask me for the context you need before getting started.Requirements & license
- A coding agent that can access your project files and install skills.
- Your agent checks each skill’s instructions, dependencies, and permissions during setup.
- License details are not provided in these listings. Check the author’s terms before using the skills.