스크립트
00:00:00ShadCN baru saja merilis linter untuk mencoba mengatasi masalah terbesar Tailwind saat ini,
00:00:04yaitu sistem desain. Seiring maraknya agen AI, Tailwind belum punya cara ampuh untuk menerapkannya,
00:00:09sehingga kamu mungkin menyadari AI terkadang menambahkan gayanya sendiri yang tidak kamu inginkan.
00:00:13Itulah alasan utama banyak orang beralih ke alternatif seperti StarLex,
00:00:17namun kini ShadCN punya solusinya. Ini adalah linter berorientasi agen untuk sistem desain
00:00:21Tailwind, jadi mari langsung kita lihat kemampuannya.
00:00:29Mari kita mulai dari fungsi sebenarnya linter ini. Di Tailwind, class name bisa berupa string,
00:00:34TypeScript tidak membatasi apa pun di luar itu, artinya kamu bisa memasukkan padding
00:00:38override pada tombol yang mengatur padding-nya sendiri. Kamu juga bisa menambahkan warna acak seperti background
00:00:43pink 500 ke komponen yang sudah memakai warna bertema, atau asal memakai ukuran padding
00:00:48seperti 13 piksel padahal sistem desainmu sudah punya skala jarak dari 12 ke 16.
00:00:53Saat ini, semua itu tidak memicu error di codebase kamu, dan hanya akan ketahuan saat
00:00:58kamu meninjau kodenya secara langsung, atau menambahkan tumpukan aturan ke file markdown agar
00:01:02agen lain bisa meninjaunya. Namun markdown kurang ampuh menegakkan aturan, tidak seketat
00:01:07linter. ShadCN sendiri telah mengujinya. Dia menyiapkan 8 tugas yang memancing
00:01:12agen melanggar sistem, dengan instruksi seperti "tambahkan tombol hapus, desainnya minta merah muda
00:01:16dengan sudut bulat", "buat kartu statistik presisi dengan maket ini, padding 13 piksel, border radius
00:01:2210 piksel", atau "buat kartu harga sangat menonjol". Bisa dilihat di sini, setiap
00:01:27model menghasilkan banyak pelanggaran sistem desain saat menjalankan tugas tersebut, tetapi saat menggunakan
00:01:31linter, jumlahnya turun menjadi nol. Sekarang kita tahu linter ini efektif, bagaimana cara menggunakannya?
00:01:36Ini adalah plugin untuk Oxlint atau ESLint, dan bisa bekerja di proyek Tailwind V4 mana pun. Kamu tidak harus
00:01:41menggunakan ShadCN UI. Kita bisa mulai dengan satu aturan bernama "no restyle, but allowing layout". Dan ini
00:01:47berarti halaman diizinkan menempatkan komponen dengan properti seperti margin, width, flex,
00:01:51dan hidden, tetapi tidak boleh merubah gaya dasarnya. Mereka tidak bisa menambah padding, warna, tipografi,
00:01:56bentuk, efek, atau animasi. Jika dilakukan, muncul error seperti ini: "P4 tidak diizinkan pada button,
00:02:02button mengatur jaraknya sendiri, gunakan size default atau margin di sini, atau gap pada elemen induknya".
00:02:07"Tambahkan size di dalam komponen hanya jika sistem desain secara eksplisit memintanya".
00:02:11Hal menarik dari pesan error di sini adalah detail seperti daftar ukuran sebenarnya
00:02:15tidak ditentukan oleh linter. Linter membaca pengaturan CVA saya di komponen tombol itu sendiri.
00:02:19Jadi jika saya menambahkan ukuran baru, pesan error akan mendeteksinya sebagai opsi. Hal sama berlaku untuk
00:02:24hampir semua fitur Tailwind yang bisa mengubah gaya. Jika kita mencoba menambah warna di sini, linter memberi tahu kita hanya
00:02:29boleh memakai yang sudah ada di komponen. Keuntungannya adalah kamu mendapatkan pesan error
00:02:33yang sangat jelas, sehingga agen bisa membaca dan memahami cara memperbaikinya. Ini juga bisa menghemat
00:02:37penggunaan token kamu, karena agen tidak perlu memuat seluruh file markdown desain kamu
00:02:41hanya untuk tahu mana yang benar. Linter bisa langsung memberikan petunjuk spesifik.
00:02:45Itulah penggunaan dasar aturan pertama kita, "no restyle", namun ada sangat banyak opsi kustomisasi
00:02:50agar sesuai dengan sistem desainmu, kita akan bahas sebentar lagi. Pertama, mari
00:02:54melihat lima aturan lainnya, karena totalnya ada enam. "No raw colors" adalah aturan
00:02:58untuk mencegah kamu mengetik hal seperti background pink 500, atau warna yang tidak ada maupun
00:03:03salah ketik. Warna harus yang dirancang dalam tema, dan sekali lagi ini membantu agen dengan
00:03:08memberi tahu langsung apa yang diizinkan. Ini bahkan bekerja pada SVG, jika kamu mencoba hardcode isi fill
00:03:13pada path, muncul peringatan agar memakai current color dengan class text color. Berikutnya ada "no
00:03:18arbitrary values", fungsinya sesuai namanya. Nilai seperti padding 13 piksel dalam tanda kurung siku
00:03:24di sini tergolong nilai acak, gunakan p3.25 sebagai gantinya, nilainya sama dalam skala.
00:03:30Atau rounded 10 piksel dalam kurung siku diganti menjadi rounded large,
00:03:35karena linter bisa membaca token radius saya dan tahu itu nilai yang setara dengan 10 piksel.
00:03:40Salah satu contoh keren dari aturan ini memahami sistem desainmu adalah saat kamu mencoba
00:03:44menentukan warna latar acak, pesan error akan memberi tahu token tema terdekat,
00:03:49yang menjadi konteks sangat bagus untuk agen kamu. Aturan sisanya cukup jelas.
00:03:54Ada aturan untuk mencegah inline style, aturan lain melarang class tak dikenal,
00:03:57dan aturan untuk mewajibkan class statis. Ini menarik karena linter tidak bisa
00:04:02melihat bakal seperti apa class ini, karena bersifat dinamis dalam template literal,
00:04:06jadi aturan ini mendorongmu mengubah cara penanganan class ini,
00:04:09agar linter tetap bisa menjalankan tugasnya secara efektif. Itulah keenam aturan linter,
00:04:13namun seperti disebutkan tadi, ada banyak kustomisasi agar benar-benar cocok
00:04:16dengan sistem desainmu. Di sinilah kamu memakai "contracts". Ini adalah aturan per komponen
00:04:21yang dicocokkan dengan regex pada nama komponen, misalnya di sini saya atur bahwa judul card
00:04:25bisa diubah tipografinya, tetapi bukan font family atau weight-nya, dan konten card bisa diubah jaraknya,
00:04:30tetapi bukan tipografinya. Jadi text large pada judul ini lolos tanpa error, dan padding six pada
00:04:36konten juga lolos, namun mencoba mengubah weight pada judul tetap memicu error sesuai dugaan.
00:04:41Opsi hebat lainnya dalam pengaturan ini adalah "custom messages". Setiap aturan dan jenis aturan menerima
00:04:45pesan dengan placeholder yang diisi dari kodedu sendiri, jadi pada kontrak button di sini,
00:04:50saya atur pesannya menjadi "atur lebar pada wadah induk, bukan pada button, untuk tata letak", dan juga
00:04:55"button mengatur padding-nya sendiri, gunakan ukuran button dengan template untuk ukurannya". Itu akan terisi
00:04:59otomatis dari sistem desain saya sendiri. Kamu juga bisa mengatur "global note", sehingga setiap temuan menyertakan
00:05:04pesan ini di bagian akhir. Ini berguna memberi petunjuk atau konteks ekstra kepada agen,
00:05:08mungkin memberi tahu lokasi dokumentasi atau panduanmu. Jika kamu sudah punya sistem
00:05:12desain, mungkin butuh sedikit usaha ekstra untuk mulai menggunakan
00:05:16linter ini, karena kamu harus mengonfigurasinya sesuai sistem desainmu, tapi ini cukup fleksibel untuk
00:05:20menangani sebagian besar sistem desain, dan saya yakin agen AI bisa membantumu memulainya. Hal terakhir yang ingin
00:05:25saya bahas adalah keterbatasan linter ini. Linter tak bisa membaca CSS murni, jadi jika ada warna mentah di
00:05:30file CSS global atau @apply, linter tak bisa menegakkan aturan di situ. Linter juga tak bisa melacak selector induk
00:05:36ke elemen anak, hanya mengikuti nilai class satu tingkat dalam satu file, dan token tema baru secara definisi
00:05:40dianggap sah oleh sistem, jadi agen yang menambahkan warna baru ke sistem desainmu untuk mengakali
00:05:46aturan akan tetap lolos. Ini artinya kamu tetap harus meninjau token dan
00:05:50varian yang ditambahkan oleh agen. Linter hanya memeriksa aturan, linter tak bisa menentukan apakah
00:05:54warna oranye baru pantas masuk ke dalam sistem desainmu. Tugasmu untuk mengeceknya, tetapi semoga
00:05:59linter ini bisa mengurangi sebagian beban kerja tersebut. Hal lain yang perlu dipertimbangkan jika kamu ingin
00:06:03menggunakannya adalah, apakah API komponenmu cukup ketat untuk ditegakkan? Jika tombolmu
00:06:08hanya menerima class name apa saja dan tidak punya varian, tidak ada yang bisa disarankan oleh linter ini.
00:06:13Jadi syarat utamanya adalah kamu sudah punya sistem desain dan memakai varian nyata,
00:06:18yang mana jika kamu memakai ShadCN UI, kamu sudah memilikinya, jadi kebanyakan orang akan baik-baik
00:06:22saja. Kekurangan terakhirnya, untuk saat ini baru tersedia di Oxlint dan ESLint, belum ada
00:06:27plugin Biome untuk ini, tetapi ini adalah issue terbuka di GitHub, semoga kita bisa melihatnya segera.
00:06:31Demikian Linter ShadCN baru, ada enam aturan yang membantumu menegakkan sistem desain,
00:06:36sangat membantu di era di mana AI menulis sebagian besar kode. Saya penasaran apakah ini menyelesaikan masalah
00:06:41yang kamu hadapi, atau kamu masih mempertimbangkan untuk beralih ke sesuatu seperti StarLX,
00:06:45beri tahu saya di kolom komentar di bawah, lalu subscribe, dan seperti biasa, sampai jumpa di video berikutnya.
커뮤니티 글
아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!
이 영상에 대해 글쓰기