jal-co

Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.

Build terminal UIs with Ink (React for CLIs). Use for interactive CLI apps, dashboards, menus, forms, progress indicators, and terminal-based interfaces. Use proactively when user says "build TUI", "terminal UI", "CLI interface", "ink component", "ink spinner", "ink select", "terminal dashboard", or mentions React-style terminal apps. Examples: - user: "Create an interactive CLI menu" → build with Ink + ink-select-input - user: "Add a progress bar to my CLI" → implement with ink-progress-bar or @inkjs/ui - user: "Build a terminal dashboard" → compose Box/Text with hooks and ecosystem components - user: "Make a multi-step wizard CLI" → ink-stepper or multi-screen pattern - user: "Add keyboard navigation to my CLI" → useInput, useFocus, useFocusManager

Find, install, and configure OpenCode plugins from the catalog or community. Use proactively when user asks about plugins, requests new capabilities, or mentions extending OpenCode functionality. Examples: - user: "Is there a plugin for Tailwind CSS?" → list catalog, read tailwind plugin details, install if available - user: "How do I add a custom slash command?" → suggest command-creator skill or guide through opencode.json setup - user: "What plugins are available for database work?" → list catalog, filter for database-related plugins - user: "Install the playwright plugin" → read plugin file, add to opencode.json, verify installation

Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.

Generate AGENTS.md for AI agent navigation. Covers build/test commands, coding conventions, task routing, and codebase structure. Use for /init workflow or when creating agent-readable repository documentation. Examples: - user: "/init" → full AI navigation AGENTS.md + skill recommendations - user: "/init basic" → minimal AGENTS.md structure only - user: "Create AGENTS.md for this repo" → assess complexity, generate navigation doc - user: "Document codebase for AI agents" → structured AGENTS.md with task routing

Apply the formal standard for React component engineering focusing on accessibility, composition, and styling. Use for building professional, composable React artifacts. Use proactively when creating or reviewing React components. Examples: - user: "/component-create Button trigger" → build accessible button with asChild and keyboard map - user: "/component-review src/components/Input.tsx" → audit for accessibility and composition compliance - user: "Build a responsive slider" → select taxonomy type and implement with data attributes - user: "Review my layout component" → check for monolithic patterns vs composition

Create OpenCode plugins using the @opencode-ai/plugin SDK. Use for building custom tools, event hooks, auth providers, or tool execution interception. Use proactively when developing new plugins in .opencode/plugin/ or ~/.config/opencode/plugin/. Examples: - user: "Create a plugin to block dangerous commands" → implement tool execution before hook with blocking logic - user: "Add a custom tool for jira" → design tool schema and implementation using SDK context - user: "Show toast on file edit" → react to file edit events and display status message - user: "Build a custom auth provider" → implement auth flow for new model provider - user: "Intercept git commits" → add hook to validate commit messages before execution

Git and GitHub CLI mastery for version control operations. Use proactively for commits, branches, PRs, rebases, conflict resolution, and git history management. Covers conventional commits, branching strategies, and GitHub workflows. Examples: - user: "Commit these changes" → stage files, create conventional commit - user: "Create a PR" → push branch, use gh pr create with proper template - user: "Rebase on main" → fetch, rebase, handle conflicts - user: "Fix merge conflict" → identify conflicts, resolve, complete merge - user: "Squash my commits" → interactive rebase guidance - user: "What's the git history?" → git log with appropriate flags

Create, review, and document jalco ui registry items with shadcn-style ergonomics, strong variants, and docs-to-registry alignment. Use for adding jalco ui components or blocks, updating registry.json, writing component docs, reviewing API and composition quality, or navigating the jalco-ui docs and registry structure. Use proactively when working in /Users/justin/Documents/Github/jalco-ui or when the user asks to create a component, improve variants, write docs, or audit registry readiness.

The canonical standard for building React components. Covers composition, accessibility, typing, styling, state, polymorphism, asChild, data attributes, design tokens, and artifact taxonomy from the components.build specification by Hayden Bleasel and shadcn. Use for building any React component, reviewing component architecture, auditing accessibility and keyboard navigation, choosing between as/asChild, designing variant APIs with CVA, applying data-attribute-driven styling, classifying artifacts (primitive/component/block/pattern/template/utility), extending HTML types, and managing controlled/uncontrolled state. Use proactively when creating or reviewing React components, designing component APIs, building design systems, implementing keyboard navigation, adding ARIA support, structuring compound components, choosing element flexibility patterns, or applying Tailwind styling systems. Examples: - user: "Build an accessible dialog" → semantic HTML, focus trap, keyboard map, ARIA, asChild trigger - user: "Re

Build jalco ui components through a deliberate workflow: clarify requirements, judge scope and file boundaries, prefer strong default states and restrained variants, implement with shadcn-style ergonomics, and ship aligned docs. Use when the user asks to create a component, build a component, make a new UI component, add a registry component, create a docs component, add variants, refactor a component, or review public components, demos, or docs-facing UI.

Build and maintain the jalco ui shadcn-compatible registry. Use when creating or reviewing registry items, editing registry.json, choosing registry item types, configuring namespaced registries, planning authentication, adding docs metadata, or ensuring MCP/open-in-v0 compatibility.

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.

Write and review jalco ui component documentation with consistent structure, concise descriptions, realistic examples, and registry-aligned metadata. Use when creating new component docs, updating existing docs, reviewing doc quality, or syncing registry-backed component copy.

Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.

Create, update, migrate, and debug MCP server configuration for Pi using pi-mcp-adapter. Use when adding an MCP server, editing ~/.pi/agent/mcp.json, importing MCP configs, switching from legacy MCPorter workflows, or documenting MCP setup. Use proactively when auth, server wiring, direct tools, or environment-variable based config is involved.

Create, structure, and refine Agent Skills (OpenClaw format) — the open standard for extending AI agents with specialized knowledge. Use when asked to create a SKILL.md, build an agent skill, write an OpenClaw skill, make a skill for Cursor/VS Code/Claude Code/Copilot/Gemini CLI, or package reusable agent instructions. Triggers include "create a skill", "agent skill", "SKILL.md", "openclaw", ".agents/skills", "skills for my repo", "package this workflow as a skill".

Set up GitHub repo CI with Husky git hooks, commit-check-action, conventional commits, and conventional branch naming. Handles greenfield and existing repos intelligently — detects existing CI, package managers, and config before making changes. Use when setting up CI, adding git hooks, enforcing commit conventions, or standardizing branch naming. Examples: - user: "Set up CI for this repo" → assess repo, install husky + commit-check - user: "Add conventional commits" → configure local hooks + GitHub Action - user: "Enforce branch naming" → add commit-check branch validation - user: "/setup-ci" → full CI pipeline setup with interactive questions - user: "Add husky to this project" → install and configure husky hooks

Web search, content crawling, code context lookup, company research, and deep AI research via Exa. Use when the user needs to search the web, fetch page content from a URL, find code examples or documentation, research a company, or run a deep research report on a complex topic.

Create and manage pi skills with proper SKILL.md format, frontmatter, and organization. Use for skill creation, naming conventions, bundled resources (scripts/references/assets), progressive disclosure patterns, MCP-related skill documentation, and deciding when to use skills vs Pi MCP servers. Use proactively when user says "create a skill", "SKILL.md", "add a skill", "document this workflow", "add MCP server docs", or asks about skill structure.

Search for real-world code examples across a million GitHub repositories. Use when you need to find actual code patterns, library usage examples, or implementation patterns. Triggers include "search GitHub for", "find code examples of", "how do developers use", "show real-world usage of", or any need to see production code patterns.

RFC 2119 keywords and XML tag structure guide for agent prompts, skill definitions, and internal documentation. Use when writing, reviewing, or refactoring markdown files that instruct AI agents — including skills, prompt templates, system prompts, and workflow docs. Provides keyword semantics, XML tag catalog, nesting best practices, and before/after examples. Examples: - user: "Refactor this skill to use RFC keywords" → apply RFC 2119 keyword conventions - user: "Add XML structure to this prompt" → wrap sections in semantic XML tags - user: "Review my SKILL.md formatting" → audit RFC keyword usage and XML structure - user: "Convert this doc to RFC+XML style" → full transformation with style guide - user: "/refactor-rfc-xml ./prompts" → batch refactor all markdown in a folder

Interactive browser automation via Chrome DevTools Protocol using Brave. Use when you need to interact with web pages, test frontends, or when user interaction with a visible browser is required.

Add beautiful shadcn/ui-styled README badges to projects using shieldcn. Use when adding badges, shields, or status indicators to README files, docs, or markdown. Triggers include "add badges", "add shields", "readme badges", "npm badge", "GitHub stars badge", "CI badge", "shieldcn", or any request to add project status badges to documentation.

Hermes Agent plugin that replaces the bundled Firecrawl plugin with native WebClaw v1 API support — search, scrape/extract, and crawl. Install when the user wants to use WebClaw as their web backend in Hermes, set up WEBCLAW_API_KEY, or switch from Firecrawl to WebClaw.