yanzyuyuyanzyuyu/min-tok/skills/react-ui-architect/SKILL.md

react-ui-architect

Skill1 starsChanged 47 days agoApache-2.0View on GitHub

Merancang dan memodifikasi komponen antarmuka React/Next.js/Vite. Gunakan saat membangun UI, memperbaiki CSS, atau menyesuaikan layout responsif.

In this repository21 other files it gives its agents.
- min-tokSkill
- academic-scholarSkill
- agent-mcp-craftSkill
- anti-overengineeringSkill
- api-security-reviewerSkill
- data-verifySkill
- deep-researcherSkill
- design-no-slopSkill
- enterprise-teamSkill
- git-craftSkill
- human-codingSkill
- laravel-architectSkill
- markdown-docSkill
- modern-stack-horizonSkill
- modern-web-guidanceSkill
- omni-pilotSkill
- perf-benchmarkSkill
- python-bug-fixerSkill
- reverse-engineer-anythingSkill
- typescript-nodeSkill
- tyw-auditSkill

The file

Create a free account to mount

Files

SKILL.md

React UI Architect (Anti-Slop SOP)

Tujuan

Menghasilkan komponen React fungsional, bersih, dan 100% responsif dengan standar tipografi dan tata letak "Anti-Ugly" tingkat industri.

Workflow Eksekusi

Component Decomposition: Pecah desain UI kompleks menjadi komponen atomik fungsional (SRP).
Tailwind First: Gunakan kelas utilitas Tailwind secara eksklusif. JANGAN membuat file .css terpisah kecuali untuk variabel dasar global.
Mobile-First Validation: Mulai desain struktur dari viewport sm:, lalu tingkatkan ke md: dan lg:.

Aturan Absolut (Guardrails)

Sharp Typography: Teks harus solid. DILARANG menggunakan text-shadow (kecuali efek neon spesifik) atau tulisan dua nada yang tidak kontras. Gunakan text-slate-500 atau text-gray-400 untuk teks sekunder.
Micro-interactions: Border radius maksimum adalah rounded-sm atau rounded (1px - 4px). JANGAN membuat tombol berbentuk pil (rounded-full) kecuali diminta spesifik. Gunakan shadow yang tajam dan minimal (shadow-sm atau border tipis border border-zinc-200).
Layout Safety: WAJIB menerapkan flex-wrap dan gap-* pada container berbasis baris untuk menghindari bentrokan elemen di layar kecil.
Zero HTML Comments: Dilarang menggunakan komentar JSX {/* ... */} yang tidak penting di dalam block render. Kodenya harus mendeskripsikan dirinya sendiri (self-documenting).

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

It worked
Partly
It didn't

What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free