RocksDev Tools Development Guide

Expert full-stack development guidelines for building optimized, maintainable developer tools using Next.js, TypeScript, React, and modern UI frameworks. This skill provides comprehensive best practices for creating standardized, high-performance tool components.

Instructions

Follow these principles and patterns when building developer tool components:

1. Code Style and Structure

**TypeScript Best Practices:**

**Standard Tool Component Structure:**

```

components/tools/[tool-name]/

├── index.tsx # Main tool component

├── guide-section.tsx # Tool documentation and guides

├── schema.ts # Zod validation schemas

└── types.ts # TypeScript definitions

```

2. Next.js Optimization

**Performance First:**

**Standard Tool Layout Pattern:**

```typescript

<ToolLayout

translationKey="tools.[tool-name]"

guideSection={<GuideSection />}

>

<MainTool />

</ToolLayout>

```

3. Error Handling and Validation

**Implement robust error handling:**

**Standard Error Class:**

```typescript

export class ToolError extends Error {

constructor(

message: string,

public code: string,

public context?: Record<string, any>

) {

super(message);

this.name = "ToolError";

}

}

```

**Validation:**

4. UI and Styling

**Framework Guidelines:**

**Guide Section Structure:**

Structure all guide sections with standardized tabs:

5. State Management and Data Fetching

**Modern State Solutions:**

**Translation Structure:**

```json

{

"tools": {

"[tool-name]": {

"title": "Tool Name",

"guide": {

"title": "Guide",

"features": {

"title": "Features"

},

"tips": {

"title": "Tips & Tricks"

}

}

}

}

}

```

6. Security and Performance

**Security Measures:**

**Performance Optimization:**

7. Testing and Documentation

**Testing Requirements:**

**Documentation Standards:**

- Usage examples

- Feature documentation

- Common pitfalls and solutions

8. Development Methodology

**System 2 Thinking:**

Break down requirements into smaller, manageable parts. Thoroughly consider each step before implementation.

**Tree of Thoughts:**

Evaluate multiple possible solutions and their consequences. Use structured approach to explore different paths and select the optimal one.

**Iterative Refinement:**

Before finalizing, consider improvements, edge cases, and optimizations. Iterate through potential enhancements.

9. Development Process

Follow this workflow for each tool component:

1. **Deep Dive Analysis**

- Conduct thorough requirements analysis

- Consider technical constraints

- Identify potential challenges

2. **Planning**

- Develop architectural structure

- Map out solution flow

- Create component hierarchy

3. **Implementation**

- Follow best practices outlined above

- Implement step-by-step

- Maintain code quality standards

4. **Review and Optimize**

- Review code quality

- Identify optimization opportunities

- Refactor as needed

5. **Finalization**

- Ensure all requirements are met

- Verify security measures

- Check performance metrics

6. **Documentation**

- Complete guide sections

- Add comprehensive usage documentation

- Include inline code comments

Usage Examples

Creating a New Tool Component

```typescript

// components/tools/json-formatter/index.tsx

'use client';

import { useState } from 'react';

import { ToolLayout } from '@/components/layout/tool-layout';

import { GuideSection } from './guide-section';

import { formatJsonSchema } from './schema';

import { ToolError } from '@/lib/errors';

export default function JsonFormatter() {

const [input, setInput] = useState('');

const [output, setOutput] = useState('');

const handleFormat = () => {

try {

const validated = formatJsonSchema.parse({ json: input });

const formatted = JSON.stringify(JSON.parse(validated.json), null, 2);

setOutput(formatted);

} catch (error) {

throw new ToolError(

'Invalid JSON input',

'INVALID_JSON',

{ input }

);

}

};

return (

<ToolLayout

translationKey="tools.json-formatter"

guideSection={<GuideSection />}

>

{/* Tool implementation */}

</ToolLayout>

);

}

```

Implementing Validation Schema

```typescript

// components/tools/json-formatter/schema.ts

import { z } from 'zod';

export const formatJsonSchema = z.object({

json: z.string().min(1, 'JSON input is required'),

});

export type FormatJsonInput = z.infer<typeof formatJsonSchema>;

```

Key Principles