By dkmaker
Guides AI agents to build and maintain React SPA + HTTP API codebases instead of Next.js monoliths. Optimized for non-developer users who rely on AI agents to write and maintain their code.
A Claude Code plugin marketplace — AI-optimized architecture skills for non-developers, by Christian Pedersen (@dkmaker).
David is a collection of Claude Code plugins designed for people who rely on AI agents to write and maintain their code. The skills here give Claude precise, opinionated guidance so it produces consistent, simple, and maintainable output — without you needing to be a developer to get great results.
Add the marketplace and install the skill in one go:
/plugin marketplace add dkmaker/david-the-developer
/plugin install vanilla-spa-architecture@david-the-developer
That's it. Claude will now automatically apply the right architecture patterns when you ask it to build or modify your app.
vanilla-spa-architectureThe problem: Next.js is a powerful framework — but it's designed for developers who understand server components, file-based routing, SSR caching, and framework-specific auth. When an AI agent maintains Next.js code, it has to track all those conventions perfectly on every single edit. One wrong "use client", one missing force-dynamic, and things break silently.
The solution: This skill switches Claude's default architecture to a React SPA + standard HTTP API — the same app, but without the framework complexity:
When Claude activates this skill:
What changes for you (the non-developer):
david-the-developer/
├── .claude-plugin/
│ ├── marketplace.json ← Marketplace catalog
│ └── plugin.json ← Plugin manifest
├── skills/
│ └── vanilla-spa-architecture/
│ └── SKILL.md ← The skill instructions Claude reads
├── README.md
└── LICENSE
This repo is both the marketplace and the plugin — the marketplace entry points to ./ (the repo root) as the plugin source.
When a user installs vanilla-spa-architecture@david-the-developer, Claude Code:
.claude-plugin/plugin.json to discover the skillskills/vanilla-spa-architecture/SKILL.md when the user asks something architecture-relatedPull requests welcome. If you add a new skill:
skills/<skill-name>/SKILL.md with proper frontmatter (name must match folder).claude-plugin/marketplace.jsonplugin.json and marketplace.json# Add the marketplace
claude plugin marketplace add dkmaker/david-the-developer
# Install the skill
claude plugin install vanilla-spa-architecture@david-the-developer
# Reload without restarting
/reload-plugins
MIT — see LICENSE
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
npx claudepluginhub dkmaker/david-the-developer --plugin vanilla-spa-architectureBrowser automation using playwright-cli for web testing, form filling, screenshots, and data extraction
Development toolkit for the my-claude-plugins marketplace repository
Ensures optimal Claude Code defaults and validates required tools. Sets up optimized statusline with GitHub integration, worktree support, and context monitoring.
Parse and analyze Claude Code session transcripts with markdown/HTML output
Cross-platform voice feedback while coding. Claude speaks progress updates aloud via ElevenLabs API.
Next.js development expertise with skills for App Router, Server Components, Route Handlers, Server Actions, and authentication patterns
Reusable better-chatbot patterns for custom deployments. Use for server action validators, tool abstraction, multi-AI providers, or encountering auth validation, FormData parsing, workflow execution errors.
Frontend development skill with design and implementation checklists
Use this agent when building user interfaces, implementing React/Vue/Angular components, handling state management, or optimizing frontend performance. This agent excels at creating responsive, accessible, and performant web applications. Examples:\n\n<example>\nContext: Building a new user interface\nuser: "Create a dashboard for displaying user analytics"\nassistant: "I'll build an analytics dashboard with interactive charts. Let me use the frontend-developer agent to create a responsive, data-rich interface."\n<commentary>\nComplex UI components require frontend expertise for proper implementation and performance.\n</commentary>\n</example>\n\n<example>\nContext: Fixing UI/UX issues\nuser: "The mobile navigation is broken on small screens"\nassistant: "I'll fix the responsive navigation issues. Let me use the frontend-developer agent to ensure it works perfectly across all device sizes."\n<commentary>\nResponsive design issues require deep understanding of CSS and mobile-first development.\n</commentary>\n</example>\n\n<example>\nContext: Optimizing frontend performance\nuser: "Our app feels sluggish when loading large datasets"\nassistant: "Performance optimization is crucial for user experience. I'll use the frontend-developer agent to implement virtualization and optimize rendering."\n<commentary>\nFrontend performance requires expertise in React rendering, memoization, and data handling.\n</commentary>\n</example>
Use this agent for expert assistance with web development tasks using React, Next.js, NestJS, and other modern web frameworks with TypeScript and Tailwind CSS. This includes code analysis, component creation, debugging, performance optimization, and architectural decisions. Examples: <example>Context: User is building a Next.js app and encounters a routing issue. user: 'My dynamic routes in Next.js are not rendering correctly' assistant: 'Let me use the web-dev agent to analyze your Next.js routing setup and provide a solution' <commentary>This is a Next.js-specific routing issue, so the web-dev agent will provide targeted guidance.</commentary></example> <example>Context: User needs a reusable React component with Tailwind CSS. user: 'I need a card component that matches my app's Tailwind-based design system' assistant: 'I'll use the web-dev agent to create a TypeScript-based React card component styled with Tailwind CSS, following your app's design patterns' <commentary>The user requires a component that aligns with their Tailwind CSS design system, so the web-dev agent ensures compatibility.</commentary></example>
Editorial "Full-Stack Developer" bundle for Claude Code from Antigravity Awesome Skills.