apehost-mikrotik-controller: Instructions file for Claude Code

MikroTik Dashboard Design Guidelines

CRITICAL: This document defines the design system and UI implementation rules for this project. All code must follow these guidelines.

Design System Architecture

This application uses a custom design system with selective Ant Design integration. It is NOT a pure Ant Design application.

Component Hierarchy

Atoms (Basic Components)
├── Input
├── Button
├── Toggle
└── Textarea

Molecules (Composite Components)
├── FormField (wraps Input/Textarea with label, helpText, error)
├── ToggleField (wraps Toggle with label, description)
└── [other molecules as needed]

Organisms (Complex Components)
├── SettingsSection (groups related settings)
└── [other organisms as needed]

Ant Design (Selective Use Only)
├── Tabs (has token overrides)
├── Slider (has token overrides)
├── Card (has token overrides)
├── Alert (has token overrides)
├── Spin (has token overrides)
├── Progress (has token overrides)
├── Badge (has token overrides)
├── Tag (has token overrides)
├── Statistic (has token overrides)
└── Modal (has token overrides)

Core Rules

Rule 0: No Emojis

NEVER use emojis in any code, documentation, comments, commit messages, or UI text unless explicitly instructed by the user.

This includes but is not limited to:

• Code comments
• README files
• Documentation
• UI labels and text
• Error messages
• Log messages
• Commit messages
• Component names or descriptions

Use plain text equivalents instead:

• Instead of "✅ Success", use "Success" or "[OK]"
• Instead of "❌ Error", use "Error" or "[FAILED]"
• Instead of "🚀 Deploy", use "Deploy"
• Instead of "⚠️ Warning", use "Warning" or "[WARN]"

Rule 1: Use Custom Components for Form Elements

ALWAYS use our custom components instead of Ant Design equivalents:

Correct:

import { Input } from '../../components/atoms/Input/Input';
import { Button } from '../../components/atoms/Button/Button';
import { Toggle } from '../../components/atoms/Toggle/Toggle';
import { Textarea } from '../../components/atoms/Textarea/Textarea';

<Input value={value} onChange={setValue} />
<Button variant="primary">Save</Button>
<Toggle checked={enabled} onChange={setEnabled} />
<Textarea value={text} onChange={setText} />