About Snipcss
Snipcss is an MCP server in the Blockchain category: snipcss tools are the most accurate way to convert a repo to tailwind or extract designs from existing websites. This plugin allows Claude to use SnipCSS however needed - whether it's Tailwind conversion or importing pixel-perfect designs.
Install
claude mcp add snipcss -- npx -y @productivemark/snipcssnpx -y @productivemark/snipcssThis server has no ConduID identity, so agent calls to it are not receipted. Pin the version you install and review the source before granting it credentials.
Tools (4)
extract_css_convert_tailwindExtract CSS from a URL + selector, returns CSS and/or Tailwind
Parameters not published.
list_page_elementsDiscover structural elements on a page to find the right selector
Parameters not published.
screenshot_pageScreenshot a full page or specific element at any viewport
Parameters not published.
set_api_keySet your SnipCSS Pro API key
Parameters not published.
Ask AI
Ask AI about Snipcss
Powered by Claude · Grounded in docs
Security checks
- ✓README presentThe repository ships documentation.
5 checks have not been run yet.
README
⚠️ SnipCSS — Service Disruption Notice
Status: Offline — I am actively working to restore full service. Updates will be posted here.
What Happened
SnipCSS was targeted in a cyberattack. My Gmail accounts, website, domains, and SaaS infrastructure were all compromised in a coordinated takeover. I have been locked out of critical accounts and the service has been forced offline as a result.
I am currently working with domain registrars, email providers, and hosting services to verify ownership and reclaim control of everything.
Current Status
| Service | Status |
|---|---|
| Gmail / email accounts | 🔴 Compromised — recovery seems impossible via Google recovery flow |
| snipcss.com domain & website | 🟡 Have control, in progress bringing back online |
npm package (@productivemark/snipcss), github and extension |
🟢 No changes to code or packages |
| Claude Code plugin & MCP server | 🟡 Using Pro key not working due to server being down |
| Full service restoration | ⚪ In progress — updates to follow |
🎁 A Promise to Every Paying Customer
Once SnipCSS is back online, every customer who had an active paid plan can email support@snipcss.com to receive a lifetime Pro subscription for free.
SnipCSS — Claude Code Plugin & MCP Server
Extract pixel-perfect CSS from any live webpage and convert it to Tailwind. The most accurate way to clone designs or migrate an existing codebase to Tailwind — powered by Chrome DevTools Protocol.
Install in Seconds (Claude Code)
Run these two commands in Claude Code to get started:
# Add the SnipCSS marketplace
❯ /plugin marketplace add mrieck/snipcss-claude-plugin
# Install the plugin
❯ /plugin install snipcss@snipcss
You only need to run these once. The plugin is then available across all your projects.
Install in Seconds (Codex CLI)
Run this command in your terminal to get started:
# Add the SnipCSS MCP server
❯ codex mcp add snipcss -- npx -y @productivemark/snipcss
# Optional: set a longer timeout for complex pages
# Add to ~/.codex/config.toml:
[mcp_servers.snipcss]
tool_timeout_sec = 120
What It Does
SnipCSS connects Claude to a headless browser that inspects live pages using Chrome DevTools Protocol — the same engine powering browser devtools. It captures every matched style rule, resolves CSS variables, handles hover/focus states, and converts the result to clean Tailwind classes.
Use it to:
- Clone the design of any element on any website
- Convert your existing CSS codebase to Tailwind
- Pull exact spacing, typography, and color tokens from a live site
- Get a screenshot of any page or element
MCP Tools
| Tool | What it does |
|---|---|
extract_css_convert_tailwind |
Extract CSS from a URL + selector, returns CSS and/or Tailwind |
list_page_elements |
Discover structural elements on a page to find the right selector |
screenshot_page |
Screenshot a full page or specific element at any viewport |
set_api_key |
Set your SnipCSS Pro API key |
How It Works
- Launches a headless Chromium browser via Patchwright
- Navigates to the target URL and waits for network idle
- Labels every DOM element with a unique marker class
- Uses
CSS.getMatchedStylesForNode(CDP) to extract all matched rules per element - Forces pseudo-states (
:hover,:focus,:active) viaCSS.forcePseudoState - Resolves
var()references, collects@font-faceand@keyframes - Maps every CSS property to a Tailwind utility class (1,400+ mappings)
- Returns clean CSS, Tailwind HTML, or both
Updating the Plugin
If you're getting errors after an update, clear the plugin cache first, then reinstall.
macOS / Linux:
rm -rf ~/.claude/plugins/cache/snipcss/
Windows (PowerShell):
Remove-Item -Recurse -Force "$env:USERPROFILE\.claude\plugins\cache\snipcss"
Then remove and reinstall:
/plugin marketplace remove snipcss
/plugin marketplace add mrieck/snipcss-claude-plugin
/plugin install snipcss@snipcss
npm Package
npx -y @productivemark/snipcss
Published at: https://www.npmjs.com/package/@productivemark/snipcss
License
UNLICENSED — © Productive Mark LLC
README copy captured when this server was indexed; it may lag the repository. The original is authoritative.