Hikkywannafly
34 verified skills
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
development
shadcn-ui
Install and use shadcn/ui components in vibe-kit projects. Covers Button, Card, Form, Table, Dialog, Toast, and navigation patterns. Activated when building UI components in Next.js App Router with Tailwind.
development
nextjs-app-router
Next.js 14 App Router conventions for vibe-kit projects. Covers file-based routing, layouts, Server Components, Client Components, API route handlers, and middleware. Reference for fullstack-dev agent during code generation.
tools
error-to-vi
Translate common Next.js, TypeScript, Supabase, and npm build errors into plain Vietnamese with actionable fix hints. Used by vibe-fix and vibe-deploy so non-dev users never see raw English error messages.
development
debug
Systematic error analysis for vibe-kit projects. Reads stack traces, greps relevant source files, identifies root cause, and proposes a targeted fix. Activated by vibe-fix. Uses sequential-thinking for multi-cause errors.
development
form-builder
Build contact, lead capture, and booking forms that save submissions to Supabase. Uses react-hook-form + zod validation. Vietnamese field labels and error messages. Activated by vibe and vibe-add for any form feature request.
development
preview-tunnel
Run Next.js dev server and expose it via localtunnel for live preview sharing. Returns a public URL the user can send to clients or view on mobile. Activated after scaffold to let user see their site before deploy.
tools
docs-seeker
Fetch up-to-date documentation for a framework, library, or API that vibe-kit uses. Invoke when the orchestrator hits an unfamiliar feature (new Next.js version, Supabase RLS syntax, Polar webhook shape). Vietnamese trigger phrases: "tra tài liệu", "xem docs mới nhất", "tìm hướng dẫn <tên lib>".
development
approval-plan
Render a 3-5 bullet plan to the user in Vietnamese and wait for confirmation before proceeding. Accepts "OK", "co", "duoc", "chay di" as approval signals. Used by vibe, vibe-add, and vibe-fix before any code changes are made.
development
skills/auth-magic-link
--- Working name: auth-magic-link description: > Implement Supabase magic-link email authentication for vibe-kit projects. No password required — user enters email, receives a login link. Includes middleware-based route protection and session management. argument-hint: "[setup | protect-route | check-session]" --- # auth-magic-link — Passwordless Auth ## Purpose Add email magic-link authentication to a vibe-kit project using Supabase Auth. Non-devs' users never need to remember a passwo
development
building-native-ui
Complete guide for building beautiful native UIs with Expo Router (file-based routing, like Next.js App Router but for mobile). Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs. Mobile counterpart of `nextjs-app-router` skill — fullstack-dev consults THIS for mobile projects, `nextjs-app-router` for web. User-visible strings match the user's input language (Vietnamese by default for VN users). Trigger phrases (EN + VN): "expo router", "react native ui", "build mobile screen", "tao man hinh app", "navigation mobile".
development
env-manager
Generate and validate .env.local and .env.example files for vibe-kit projects. Ensures all required secrets are present before build or deploy. Never logs secret values. Activated at project init and before vibe-deploy.
development
expo-deployment
Deploy Expo (React Native) apps to iOS App Store, Android Play Store, and web via EAS Build + Submit. Mobile-equivalent of `vibe-deploy` (which targets Vercel / Docker / VPS for Next.js). Use this when a vibe-kit project's intent is mobile. User-visible strings match the user's input language (Vietnamese by default for VN users). Trigger phrases (EN + VN): "deploy expo app", "publish to app store", "eas build", "day app len store", "deploy app mobile", "len app store".
development
expo-dev-client
Build and distribute Expo development clients (custom Expo Go) locally or via TestFlight when a vibe-kit mobile project requires native modules (camera, BLE, etc.) beyond stock Expo Go. User-visible strings match the user's input language (Vietnamese by default for VN users). Trigger phrases (EN + VN): "expo dev client", "custom expo go", "tao dev client", "test native module".
tools
expo-tailwind-setup
Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling across iOS / Android / Web. Used by fullstack-dev when a vibe-kit project targets mobile (React Native / Expo) instead of, or in addition to, Next.js. User-visible strings match the user's input language (Vietnamese by default for VN users). Trigger phrases (EN + VN): "expo tailwind", "nativewind setup", "style react native", "tao app mobile voi tailwind", "cai dat nativewind".
development
git-auto-commit
Stage changed files and write a conventional commit so every change is traceable back to the vibe phase, feature, or fix that produced it. Format is strict: `type(scope): subject [P<phase>]`. Used by vibe, vibe-add, vibe-fix after a successful build. User never types git commands.
development
git-pro
Advanced git workflows for vibe-kit users who have graduated beyond /vibe auto-commit: create branches, open pull requests via `gh`, merge, and recover from common mistakes. Complements `git-auto-commit` (single commits) and `git-trace` (history lookup). User-visible strings match the user's input language (Vietnamese by default for VN users); raw git/gh commands always shown verbatim so power users can learn. Based on public specs (conventionalcommits.org, gh CLI docs).
tools
git-trace
Look up vibe-kit git history without needing to know git. Find which commit added a feature, changed a file, or ran during which phase. Reads the strict format written by `git-auto-commit` (type(scope): subject [P<n>]). Vietnamese trigger phrases: "xem lich su", "ai sua cai nay", "khi nao them", "commit nao lam hong", "tra lai phase".
development
seo-basic
Add essential SEO to vibe-kit projects: meta tags, Open Graph, sitemap.xml, robots.txt, and structured data. Optimised for Vietnamese content and Google search in Vietnam market.
development
mermaidjs-v11
Generate Mermaid v11 diagrams for architecture, data flow, or user journey when a picture explains faster than prose. Used by planner when rendering phase files. Vietnamese trigger phrases: "vẽ sơ đồ", "vẽ flow", "diagram kiến trúc".
data-ai
payment-integration
Integrate Polar checkout for digital products and subscriptions, plus Vietnamese payment fallbacks (SePay/MoMo QR). Activated by vibe when payment is part of the product description.
testing
vibe
One-shot orchestrator. Turns the prose after /vibe into a shipped product by clarifying intent, rendering a plan, gating on approval, then spawning planner+researcher+fullstack-dev+tester+reviewer agents in sequence. User-visible strings match the user's input language (Vietnamese by default for VN users). Two modes: SAFE (default — clarify + show plan + wait for approval, max 1 round-trip) and YOLO (skip clarify+approval, run full auto with smart defaults — for demos and power users). YOLO triggers: prose contains `yolo`, `nhanh nha`, `lam luon`, `khoi hoi`, `auto`, or args start with `yolo`. Trigger phrases (EN + VN): "build me a site", "make me a landing page", "create a shop", "I need an app", "vibe lam website", "tao cho toi mot", "xay dung shop online", "lam landing page", "can mot app".
development
sequential-thinking
Break a multi-step task into numbered reasoning steps before acting. Used by vibe-kit planner agent to decompose ambiguous Vietnamese prompts into executable phases. Vietnamese trigger phrases: "suy nghĩ từng bước", "phân tích kĩ", "chia nhỏ ra".
data-ai
supabase-setup
Spin up Supabase project schema, run migrations, and configure Row Level Security (RLS) for vibe-kit projects. Activated when a new database table or auth flow is needed. Non-dev safe — generates SQL, does not require user to understand SQL syntax.
development
terse-internal
Caveman-style terse output rules for AGENT-INTERNAL work only (planner, researcher, fullstack-dev, tester, reviewer, debug). Cuts ~60-70% of output tokens by killing preamble, postamble, tool narration, and filler. Never activates for user-facing Vietnamese output (vibe, vibe-add, vibe-new, approval-plan, vietnamese-copy, error-to-vi hints shown to user). Inspired by JuliusBrussee/caveman but scoped so non-dev VN users still get friendly hand-holding in their language.
tools
tiktok-shop-embed
Embed TikTok Shop product cards and affiliate links into vibe-kit Next.js pages. Supports product widget, video embed, and shop affiliate link generation. For Vietnamese sellers who also sell on TikTok Shop.
content-media
vibe-add
Add a feature to an existing vibe-kit project. Reads current project state from .vibe/intent.json and git, clarifies scope (≤3 Qs), gates on approval, spawns fullstack-dev scoped to the new feature only. User-visible strings match the user's input language (Vietnamese by default for VN users). Trigger phrases (EN + VN): "add a feature", "I want to add", "extend with", "them tinh nang", "toi muon them".
development
vibe-codex
Codex-native vibe-kit orchestrator for turning a plain-language product request into an implemented web or mobile project using this repository's existing vibe-kit templates, presets, skills, and agent markdown as references. Use when a user invokes $vibe-codex, says /vibe in a Codex session, asks Codex to create/build a site, app, shop, CRM, dashboard, landing page with vibe-kit, or asks to port/operate Claude-only vibe-kit workflows in Codex.
development
vibe-deploy
One-command deploy for vibe-kit projects. Supports three targets: Vercel (default, cloud), Docker (container image for any host), and VPS (self-managed server via SSH + systemd + nginx). User-visible strings match the user's input language (Vietnamese by default for VN users). Trigger phrases (EN + VN): "deploy this", "publish the site", "go live", "push to vercel", "dockerize", "deploy to my vps", "deploy di", "day len vercel".
development
vibe-fix
Diagnose and auto-fix broken builds or runtime errors in vibe-kit projects. Reads .vibe/checkpoint.json for last error, runs build, parses output, applies fix, re-runs build. Retries up to 3 times total. User-visible messages match the user's input language (Vietnamese by default for VN users). Trigger phrases (EN + VN): "fix it", "build fail", "it's broken", "something's wrong", "loi roi", "bi loi", "khong chay duoc", "fix giup toi", "website bi hong", "co loi xuat hien", "sua loi giup toi".
development
vibe-new
Scaffold a new vibe-kit project from a named preset. Loads presets/<name>.md, injects pre-filled intent into /vibe context, skips classification (Step 1), jumps straight to clarify (Step 2) with preset questions. User-visible strings match the user's input language (Vietnamese by default for VN users). Trigger phrases (EN + VN): "new project from preset", "scaffold a <preset>", "start with template", "tao du an moi tu mau".
data-ai
vibe-rn-supabase
Wire Supabase JS client into a React Native (Expo) vibe-kit project: session persistence via AsyncStorage, magic-link OAuth callback via expo-linking deep links, Realtime subscriptions on RN, and shared TypeScript types with the Next.js webapp twin (vibe-kit's typical web<->mobile pair pattern). This is the mobile counterpart of `auth-magic-link` (web). User-visible strings match the user's input language (Vietnamese by default for VN users). Trigger phrases (EN + VN): "supabase react native", "supabase mobile", "auth mobile expo", "magic link mobile", "tich hop supabase vao app", "supabase deep link".
tools
vibe-security
On-demand security audit for vibe-kit projects. Stack-aware checks for Next.js App Router + Supabase + Polar: secrets leak, RLS gaps, service-role key in client bundle, missing webhook signature verification, unprotected API routes, weak headers, dependency vulns. Outputs a Vietnamese P0/P1/P2 report with file:line + fix hints. User-visible strings match the user's input language (Vietnamese by default for VN users). Trigger phrases (EN + VN): "check security", "audit it", "security scan", "is this safe to launch", "kiem tra bao mat", "quet bao mat", "audit du an", "co an toan khong", "scan bao mat truoc khi deploy".
tools
vietnamese-copy
Generate Vietnamese marketing copy, UI strings, CTAs, error messages, and email templates for vibe-kit projects. Tone: friendly, conversational, Southern Vietnamese style. Activated for any user-visible text generation.
data-ai