Turn a plain-text README into a visually rich showcase with a theme-aware hero image, a feature tour grid, an optional animated guided-tour GIF, and updated tech badges. Captures live screenshots via Playwright MCP in both dark and light mode at hero-quality 1600x1000, pairs them with for auto theme-swap, and inlines them into the README using GitHub-supported HTML. Optionally records a guided-tour .gif (autoplays inline on github.com via record-readme-tour.mjs) for an animated demo above the static screenshots. Works with any web app that has a live URL or local dev server. Use when asked to "enhance README", "make README prettier", "add screenshots to README", "showcase the app in README", "design the README", "add hero image", "spice up README", "make README more fun", "add animated demo to README", "record a tour GIF", or "make a README GIF".
Install with
Claude CodeCodexCursorGitHub CopilotGemini CLI
Supported by the Atlas install prompt. Skill-specific requirements vary.
Skill stats
Skills1CategoryDeveloper toolsStars0
About this skill
Turn a plain-text README into a visually rich showcase with a theme-aware hero image, a feature tour grid, an optional animated guided-tour GIF, and updated tech badges. Captures live screenshots via Playwright MCP in both dark and light mode at hero-quality 1600x1000, pairs them with for auto theme-swap, and inlines them into the README using GitHub-supported HTML. Optionally records a guided-tour .gif (autoplays inline on github.com via record-readme-tour.mjs) for an animated demo above the static screenshots. Works with any web app that has a live URL or local dev server. Use when asked to "enhance README", "make README prettier", "add screenshots to README", "showcase the app in README", "design the README", "add hero image", "spice up README", "make README more fun", "add animated demo to README", "record a tour GIF", or "make a README GIF".
Quick start
Copy the install prompt. Use the green button above this README.
Send it to your agent. Paste it into your coding agent’s chat and send.
Review the setup. Your agent checks the skill’s instructions, requirements, and installation scope.
Turn a plain-text README into a visually rich showcase with a theme-aware hero image, a feature tour grid, an optional animated guided-tour GIF, and updated tech badges. Captures live screenshots via Playwright MCP in both dark and light mode at hero-quality 1600x1000, pairs them with `<picture>` for auto theme-swap, and inlines them into the README using GitHub-supported HTML. Optionally records a guided-tour `.gif` (autoplays inline on github.com via `record-readme-tour.mjs`) for an animated demo above the static screenshots. Works with any web app that has a live URL or local dev server. Use when asked to "enhance README", "make README prettier", "add screenshots to README", "showcase the app in README", "design the README", "add hero image", "spice up README", "make README more fun", "add animated demo to README", "record a tour GIF", or "make a README GIF".
About this listing
Category
Developer tools
Reported license
MIT
Listing language (estimated)
English
Review status
Not individually reviewed
Agent compatibility
Atlas installation supports Claude Code, Codex, and Cursor. Skill-specific dependencies and features are checked during setup.