Starasia Skills

Skills untuk AI-assisted development di aplikasi internal Star Perkasa Technology yang menggunakan design system @starasia/*. Berisi cheat sheet, pattern, dan playbook biar developer (manusia atau AI) cepat productive tanpa harus baca source code design system.

⚠️ Audience: consumer team internal SPT — developer yang pakai @starasia/* untuk bangun aplikasi (admin dashboard, internal tools). Bukan untuk maintainer design system itu sendiri.

Daftar Skill

| Skill | Deskripsi | Kapan dipakai | |---|---|---| | starasia-component-usage | Cheat sheet komponen umum: Box, Button, Text, Icon, Flex, Toast, Alert, Dialog, Tabs, Badges, Skeleton, Tooltip, Input, Dropdown | Saat membangun fitur — compose UI dengan komponen yang sudah ada | | starasia-color-usage | Cara pakai warna: Box bg/borderColor cheat sheet, semantic vs primitive, dark mode | Saat styling layout, set background/border, atau implement dark mode | | starasia-table-pattern | <TableSection> lengkap: pagination, filter, sorting, frozen columns, server-side data | Saat menampilkan list data dalam tabel | | starasia-page-templates | Template halaman: list page, detail page, form page, dashboard, two-column. <PageLayout>, <Section>, <HorizontalField>, <FloatingFooter> | Saat membuat halaman baru | | starasia-theming | Custom brand color via <ThemeProvider>, dark mode toggle, multi-tenant theme | Saat client butuh brand custom atau implement dark mode |

Quick Start

Untuk yang baru pertama kali pakai design system Starasia, baca urutan ini:

1. starasia-component-usage — kenalan dengan komponen umum
2. starasia-color-usage — pahami pakai warna dengan benar
3. starasia-page-templates — bikin halaman pertama
4. starasia-table-pattern — saat butuh tabel
5. starasia-theming — saat butuh brand custom / dark mode

Install untuk Claude Code

Project-level (rekomendasi)

Skills aktif hanya di repo target:

git clone [email protected]:Star-Perkasa-Technology/starasia-skills.git
cd starasia-skills
./install.sh --project /path/to/your-app

User-level (semua project di mesin)

git clone [email protected]:Star-Perkasa-Technology/starasia-skills.git ~/starasia-skills
~/starasia-skills/install.sh --user

Update

cd ~/starasia-skills && git pull
# Symlink otomatis pick-up update

Pakai tanpa Claude

SKILL.md adalah markdown biasa. Bisa dipakai di mana saja:

Cursor / Windsurf

cat skills/*/SKILL.md > /path/to/your-app/.cursorrules

GitHub Copilot

mkdir -p /path/to/your-app/.github
cat skills/*/SKILL.md > /path/to/your-app/.github/copilot-instructions.md

Aider

cp skills/starasia-component-usage/SKILL.md /path/to/your-app/CONVENTIONS.md
# Lalu di project: aider --read CONVENTIONS.md

ChatGPT / Claude.ai web

Copy isi skills/<nama>/SKILL.md ke field "System Prompt" atau "Project Instructions" di UI tool.

Pakai untuk manusia

Browse langsung di GitHub atau pakai glow/mdcat di terminal sebagai onboarding doc untuk developer baru.

Contoh Pemakaian Real

Saat developer pakai skill ini di Claude Code:

User: "Bikin halaman list users dengan search dan filter role"

→ Claude auto-load:
  - starasia-page-templates  (template list page)
  - starasia-table-pattern   (TableSection lengkap)
  - starasia-component-usage (Input, Button, Icon, Badges)

→ Langsung generate kode yang ngikut convention design system,
  no reinvent, no inconsistent style.

Struktur Repo

starasia-skills/
├── skills/                              # Source of truth (untuk Claude Code)
│   ├── starasia-component-usage/SKILL.md
│   ├── starasia-color-usage/SKILL.md
│   ├── starasia-table-pattern/SKILL.md
│   ├── starasia-page-templates/SKILL.md
│   └── starasia-theming/SKILL.md
├── ai-rules/                            # Format untuk tool AI lain (optional)
├── install.sh                           # Installer ke .claude/skills/
├── package.json                         # NPM-publishable
├── README.md
├── LICENSE
└── .github/workflows/lint.yml           # Markdown linting di PR

Kontribusi

1. Edit/tambah skill di folder skills/
2. Buka PR — markdown linter di GitHub Actions akan validate format
3. Setelah merge, bump version di package.json kalau ada breaking change
4. Internal tim auto-pick-up update via git pull di ~/starasia-skills

Lisensi

ISC © Star Perkasa Technology