Open AI Skill Studio in Browser →
The premier 100% offline builder to configure, audit, and export production-grade steering instructions for Claude Code (SKILL.md), Cursor IDE (.cursor/rules/*.mdc), Anthropic (CLAUDE.md), and Multi-Agent frameworks (AGENTS.md).

• 📦 Manifest Auto-Detection: Drop your package.json, Cargo.toml, pyproject.toml, or go.mod to auto-detect your stack and generate tailored rules in seconds.
• 🩺 Static Analysis Audit Panel: Real-time scoring across 5 critical dimensions (Trigger Specificity, Rule Density, Negative Guardrails, Format Compliance, Architectural Boundaries) with one-click ⚡ Auto-Fix.
• 🏷️ Trigger Tagging & Heuristic Validation: Real-time activation trigger chips with heuristic warning feedback for broad catch-all words to prevent context token bloat.
• 💻 Terminal One-Liner Stream: Native curl, PowerShell, wget, and CLI installation endpoints (/api/raw/[formatSlug]/[presetSlug]) to install rule files directly from terminal into local project roots.
• ⚡ Curated Production Presets: Statically pre-rendered presets ready for immediate use:
  • Next.js 15 App Router Cursor Rules
  • .NET 8 & C# 12 Minimal APIs Rules
  • Spring Boot 3 & Java 21 Rules
  • Django 5 & Ninja Cursor Rules
  • Bun & Elysia TypeBox Rules
  • Playwright E2E Browser Testing Rules
  • Expo & React Native Rules
  • Kubernetes & Helm Manifest Rules
  • Terraform & OpenTofu IaC Rules
  • Cursor Rules Pro (.mdc)
  • React 19 SPA Cursor Rules
  • FastAPI Python Cursor Rules
  • Codebase Auditor Claude Skill
  • Security Vulnerability Guard
• 🔗 Zero-Backend State Sharing: Ultra-compact permalink generation with LZ compression or canonical SEO URLs with zero server storage.
• 🗜️ Export Unified AI Kit (.zip): Download an all-in-one ZIP archive pre-structured for immediate placement into your project's repository.

Interactive Web Simulator & Documentation →
Scaffold, audit, and install battle-tested AI agent and IDE rulebooks into your project workspace with zero npm dependencies and 100% offline privacy.

# Browse all available formats and tech presets
npx devscratchpad list

# Install Next.js 15 App Router rules for Cursor (.cursor/rules/nextjs-15.mdc)
npx devscratchpad add cursor-rules/nextjs-15

# Install FastAPI & Pydantic v2 skill for Claude Code (.claude/skills/fastapi/SKILL.md)
npx devscratchpad add fastapi -f claude-skills

# Scan and score repository AI rule health (0-100)
npx devscratchpad audit

# Scaffold universal multi-agent starter guidelines (.mdc + CLAUDE.md)
npx devscratchpad init

# Modern package runners are fully supported:
pnpm dlx devscratchpad add tailwind-v4 -f windsurf
bunx devscratchpad add typescript-strict -f copilot

• 🚀 Zero Dependency Bloat: Operates purely on native Node.js standard libraries (node:fs, node:path, node:https). Installs in under 1.5s via npx.
• 🩺 Static Rule Quality Audit: npx devscratchpad audit statically scans existing repository rules for missing negative guardrails, broad globs, and token density issues.
• 🔒 100% Client-Side Confined: Zero telemetry, zero analytics, zero prompt tracking. Run with --dry-run to inspect exact local filesystem actions.
• 🔄 Reciprocal Studio Integration: Every CLI command outputs deep links to the visual AI Skill Studio for interactive editing.

Why DevScratchpad? Most online formatters and decoders secretly transmit your sensitive API keys, JWT tokens, environment secrets, and customer payloads to remote tracking servers.

DevScratchpad is 100% client-side:

• Zero API Endpoints: Every formatter, parser, hash generator, and converter executes in pure browser JavaScript & WASM.
• Zero Telemetry on Payloads: Your inputs never touch a server or database.
• Auditable & Source-Available: Inspect the network tab or the source code in this repository to verify that no network requests leave your machine.

• ⚡ Next.js 16 & Turbopack: 100% Static Site Generated (SSG) with sub-millisecond TTFB.
• 🎨 Unified Spatial Dark UI: High-contrast pitch-black canvas (#09090B), elevated cards (#121215), and standardized monospace inputs.
• 💻 Monaco Code Editor: VS Code's editor engine built-in with syntax highlighting, auto-wrap, error lines, and dual-pane diff comparison.
• ⏱️ Local Status Bars: Embedded 32px Monaco status footers displaying real-time execution speeds (ms), character volume, and syntax error lines.
• ⌨️ Command Palette: Global Ctrl + K / Cmd + K navigation to jump between tools in milliseconds.
• 🔗 Zero-Backend Sharing: Payloads are serialized directly into URL hash fragments (#data=...), enabling private sharing with no server storage.
• 💾 Local Workspace History: FIFO 15-entry local history buffer and workspace snapshot bookmarking.

• Node.js 18.17+ or 20+
• npm, yarn, or pnpm

# 1. Clone the repository
git clone https://github.com/Saad-web-spec/DevScratchPad.git

# 2. Enter the project directory
cd DevScratchPad

# 3. Install dependencies
npm install

# 4. Start the Turbopack development server
npm run dev

Open http://localhost:3000 in your browser.

Run DevScratchpad locally on your machine for personal use and security verification:

git clone https://github.com/Saad-web-spec/DevScratchPad.git
cd DevScratchPad
npm install
npm run dev

Contributions, feature ideas, and new utility tools are very welcome! Please check out our Contributing Guide to get started.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingNewTool)
3. Commit your Changes (git commit -m 'feat: add amazing new developer tool')
4. Push to the Branch (git push origin feature/AmazingNewTool)
5. Open a Pull Request

If DevScratchpad has saved you time or improved your workflow, consider starring ⭐ this repository and supporting its ongoing development!

DevScratchpad is distributed under the Business Source License 1.1 (BSL 1.1).

• ✅ Free for Personal, Research & Educational Use: Anyone may view, audit, run locally, and contribute to the source code.
• 🛡️ Commercial & Competitor Restrictions: Publicly hosting DevScratchpad (or any derivative) as a competing website, SaaS, API, or commercial platform is strictly prohibited without prior written commercial licensing agreement.
• See the full legal terms in LICENSE.