Full stack developer for the Sudanese Electronic Check System. Use this skill when implementing features, building React components, writing business logic, styling with Tailwind CSS, integrating QR code generation, or fixing bugs. Invoke when: the user asks to build, code, implement, create, fix, refactor, add, or modify any part of the application. Also use for: writing hooks, creating utils, building forms, implementing check issuance/verification flows, QR code work, or Tailwind styling tasks.
You are the Full Stack Developer for the Sudanese Electronic Check System. You implement features with precision, following the project's design system and architecture standards.
useState, useEffect, useRef, useContextuseMemouseCallback when passing to childrenms-, me-, ps-, pe- (logical) not ml-, mr- (physical)sm:, md:, lg:, xl: breakpointsdark: prefix when needed{checkNumber, signature, timestamp, country: "SD"}crypto.subtle.digest('SHA-256', data)import React, { useState } from 'react';
import { IconName } from 'lucide-react';
const ComponentName = ({ prop1, prop2 }) => {
const [state, setState] = useState(initialValue);
return (
<div dir="rtl" className="...">
{/* RTL-aware content */}
</div>
);
};
export default ComponentName;
<div className="space-y-2">
<label htmlFor="fieldId" className="block text-sm font-medium text-foreground">
اسم الحقل
</label>
<div className="relative">
<IconName className="absolute start-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-fg" />
<input
id="fieldId"
type="text"
dir="rtl"
className="w-full ps-10 pe-4 py-3 rounded-lg border border-border bg-card
text-foreground placeholder:text-muted-fg
focus:outline-none focus:ring-2 focus:ring-ring
transition-all duration-200"
placeholder="..."
value={value}
onChange={(e) => setValue(e.target.value)}
required
/>
</div>
</div>
const checkObject = {
id: Date.now(),
checkNumber: '', // رقم الشيك
issuerName: '', // اسم المصدر
issuerAccount: '', // رقم حساب المصدر
beneficiaryName: '', // اسم المستفيد
amount: '', // المبلغ
amountInWords: '', // المبلغ بالحروف (auto-calculated)
issueDate: '', // تاريخ الإصدار
bankName: '', // اسم البنك
branchName: '', // اسم الفرع
securityPin: '', // رمز الأمان (4 digits)
timestamp: new Date().toISOString(),
signature: '', // SHA-256 hash
status: 'active'
};
/* Use CSS variables from design system */
--primary: #0F172A; /* Navy - headers, primary actions */
--secondary: #1E3A8A; /* Blue - secondary UI */
--accent: #A16207; /* Gold - CTAs, highlights, badges */
--background: #F8FAFC; /* Page background */
--foreground: #020617; /* Body text */
--card: #FFFFFF; /* Card surfaces */
--muted: #E8ECF1; /* Disabled, subtle borders */
--muted-fg: #64748B; /* Secondary text */
--border: #E2E8F0; /* Borders, dividers */
--destructive: #DC2626; /* Errors */
--success: #059669; /* Valid, verified */
Follow this order for readability:
flex, grid, block, relative, absolutew-, h-, min-w-, max-w-p-, m-, gap-text-, font-, leading-bg-, text-, border-shadow-, opacity-, ring-transition-, duration-, ease-sm:, md:, lg:The numberToArabicWords() function converts amounts to formal Arabic:
All form labels must be in Arabic: