Guides modernization of legacy codebases while preserving behavior. Use when the user asks to modernize legacy code, migrate COBOL, legacy Java, C++, .NET, procedural PHP, classic ASP, or monolith systems; extract business rules; replatform, refactor, rewrite, or rebuild a legacy module; apply a strangler fig migration; or harden legacy code before migration.
EnglishExtracts the visual theme (colors, typography, radius, spacing, shadows) of a public website provided by the user and produces a shadcn/ui + Tailwind CSS v4 compatible token block, ready to paste into the project's globals.css (or app.css) inside @theme and .dark. Uses the chrome-devtools MCP server to drive a real Chromium instance (no Playwright). Use when the user asks to "extract the theme of ", "reverse-engineer the design tokens of ", "copy the look of into shadcn", "build a tailwind v4 theme from ", or mentions extract-theme / theme extraction / design tokens from a URL.
EnglishGuides building GPU-accelerated visual effects in React / Next.js with the shaders npm package from shaders.com — declarative component trees, composition (stacking, nesting, blend modes, masking), reactive props, dynamic prop drivers (auto-animate, mouse-position, map), shape (SDF) effects, color space, performance budget (RTT / generator vs filter), and SSR safety. Use when the user asks to add a "shader background", "WebGPU effect", "aurora / plasma / swirl / glass / cursor-trail" hero, mentions shaders.com, the shaders/react package, the component, or wants animated GPU-rendered visuals in a React or Next.js app. Not for raw GLSL / WebGL / Three.js / react-three-fiber work — those use different APIs.
EnglishBest practices for Vite+ (vp), the unified web toolchain combining Vite, Vitest, Oxlint, Oxfmt, Rolldown, tsdown, and Vite Task. Covers the vp command surface (dev, build, check, test, run, pack, install), unified vite.config.ts blocks, monorepo overrides, task caching, commit hooks, library packaging, and migrating existing Vite/Vitest/ESLint/Prettier projects. Use when the user mentions Vite+, vite-plus, the vp CLI, Oxlint/Oxfmt in a Vite context, tsdown, Vite Task, or asks to configure, migrate, or upgrade a Vite+ project.
English
AGENT SKILLS ATLASIncludes Code Modernization, Extract Theme, Vite Plus Best Practices, 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
Code Modernization
Guides modernization of legacy codebases while preserving behavior. Use when the user asks to modernize legacy code, migrate COBOL, legacy Java, C++, .NET, procedural PHP, classic ASP, or monolith systems; extract business rules; replatform, refactor, rewrite, or rebuild a legacy module; apply a strangler fig migration; or harden legacy code before migration.
Extract Theme
Extracts the visual theme (colors, typography, radius, spacing, shadows) of a public website provided by the user and produces a shadcn/ui + Tailwind CSS v4 compatible token block, ready to paste into the project's globals.css (or app.css) inside @theme and .dark. Uses the chrome-devtools MCP server to drive a real Chromium instance (no Playwright). Use when the user asks to "extract the theme of ", "reverse-engineer the design tokens of ", "copy the look of into shadcn", "build a tailwind v4 theme from ", or mentions extract-theme / theme extraction / design tokens from a URL.
Shaders
Guides building GPU-accelerated visual effects in React / Next.js with the shaders npm package from shaders.com — declarative component trees, composition (stacking, nesting, blend modes, masking), reactive props, dynamic prop drivers (auto-animate, mouse-position, map), shape (SDF) effects, color space, performance budget (RTT / generator vs filter), and SSR safety. Use when the user asks to add a "shader background", "WebGPU effect", "aurora / plasma / swirl / glass / cursor-trail" hero, mentions shaders.com, the shaders/react package, the component, or wants animated GPU-rendered visuals in a React or Next.js app. Not for raw GLSL / WebGL / Three.js / react-three-fiber work — those use different APIs.
Vite Plus Best Practices
Best practices for Vite+ (vp), the unified web toolchain combining Vite, Vitest, Oxlint, Oxfmt, Rolldown, tsdown, and Vite Task. Covers the vp command surface (dev, build, check, test, run, pack, install), unified vite.config.ts blocks, monorepo overrides, task caching, commit hooks, library packaging, and migrating existing Vite/Vitest/ESLint/Prettier projects. Use when the user mentions Vite+, vite-plus, the vp CLI, Oxlint/Oxfmt in a Vite context, tsdown, Vite Task, or asks to configure, migrate, or upgrade a Vite+ project.
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 Code Modernization 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.
- Reported license for the skills shown: MIT. The author’s terms apply.