Contribute to DevKit

DevKit is open source. Anyone can contribute new tools, fix bugs, improve documentation, or suggest features.

Quick Start

1. Fork the repo: github.com/ganoolmovie5th-cell/dev-tools-claude
2. Clone your fork locally
3. Run npm install then npm run dev
4. Create a branch: git checkout -b feat/my-new-tool
5. Make changes, commit, push, and open a PR

Adding a New Tool

Each tool is a self-contained React component. Here is the structure:

1. Create the component

// src/tools/MyNewTool.tsx
'use client'

import { useState } from 'react'
import CopyButton from '@/components/CopyButton'

export default function MyNewTool() {
  const [input, setInput] = useState('')
  const [output, setOutput] = useState('')

  const process = () => {
    // Your tool logic here (client-side only!)
    setOutput(input.toUpperCase())
  }

  return (
    <div className="space-y-4">
      <textarea
        value={input}
        onChange={e => setInput(e.target.value)}
        placeholder="Enter input..."
        className="w-full h-36 p-3 border border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-white rounded-lg"
      />
      <button onClick={process} className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
        Process
      </button>
      {output && (
        <div className="relative">
          <pre className="p-3 bg-gray-50 dark:bg-gray-800 border rounded-lg">{output}</pre>
          <div className="absolute top-2 right-2"><CopyButton text={output} /></div>
        </div>
      )}
    </div>
  )
}

2. Register the tool

Add an entry to src/tools/registry.ts:

{ slug: 'my-new-tool', name: 'My New Tool', description: '...', category: 'Converter', keywords: ['...'] }

3. Add to ToolRenderer

Add a dynamic import in src/tools/ToolRenderer.tsx:

'my-new-tool': dynamic(() => import('./MyNewTool')),

4. Test locally

npm run dev
# Visit http://localhost:3000/tools/my-new-tool

Tool Guidelines

• Client-side only. No server calls for processing user data. Privacy is our core promise.
• Minimal dependencies. Use browser APIs when possible. If a library is needed, keep it small.
• Dark mode support. Use dark: Tailwind variants on all elements.
• Responsive. Must work on mobile screens.
• Copy button. Every output should have a copy button.
• No external data for processing. External APIs only for reference data (like DNS lookup), never for user input processing.

Other Ways to Contribute

• Bug reports: Open a bug report
• Feature suggestions: Suggest a tool
• Documentation: Fix typos, improve How-to guides, add examples
• Translations: Help translate tool descriptions to other languages
• Design: Improve UI/UX, accessibility, or visual design

Code of Conduct

Be respectful, constructive, and inclusive. We welcome contributors of all experience levels. There are no stupid questions — if something is unclear, it is a documentation bug.

Recognition

All contributors are credited in the changelog and will be listed on the About page once we set up a contributors section. Significant contributors get a shoutout on our social channels.