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.
Generate UI components using 21st.dev Magic MCP. Actions: create component, generate UI, build interface, design element, make button, create card, build navbar, generate form, create modal, design layout, create hero section, build sidebar, generate table, create dashboard widget. Triggers on requests for polished UI components when 21st.dev Magic MCP tools are available.
Generate UI components using 21st.dev Magic MCP. Actions: create component, generate UI, build interface, design element, make button, create card, build navbar, generate form, create modal, design layout, create hero section, build sidebar, generate table, create dashboard widget. Triggers on requests for polished UI components when 21st.dev Magic MCP tools are available.
Export/patch/import Oracle APEX components via SQLcl CLI (Bash). Covers pages, regions, items, buttons, processes, DAs, validations, LOVs, auth schemes, templates, IR, IG, charts, maps, cards, and all shared components.
Generate UI components using 21st.dev Magic MCP. Actions: create component, generate UI, build interface, design element, make button, create card, build navbar, generate form, create modal, design layout, create hero section, build sidebar, generate table, create dashboard widget. Triggers on requests for polished UI components when 21st.dev Magic MCP tools are available.
Build MATLAB apps programmatically using uifigure, uigridlayout, UI components, callbacks, and uihtml for web integration. Use when creating GUIs, dashboards, interactive tools, apps with sliders/buttons/dropdowns, or embedding HTML/JavaScript components.
How to develop Pi extensions. Discovery workflow for TUI components, available APIs, composition patterns and common mistakes. Use when building or modifying extensions. --- # Pi Extension Development ## Discovery Workflow Before building any UI, follow this sequence: 1. **Read Pi's TUI docs** for patterns and available components. The main Pi documentation is listed in the system prompt under "Pi documentation" — read `docs/tui.md` from there. Follow links to related docs as needed. 2. **Read the type declarations** for the specific component you need. The `@mariozechner/pi-tui` package's `dist/index.d.ts` and `dist/components/*.d.ts` files show the exact API surface. 3. **Read the higher-level components** exported by `@mariozechner/pi-coding-agent` in its `dist/modes/interactive/components/index.d.ts`. 4. **Check this project's `lib/ui/`** for existing abstractions built on top of Pi's primitives. The barrel at `lib/ui/index.ts` shows the public surface. Don't duplicate what's already there. 5. **Browse Pi's examples** for working implementations. The examples directory is listed in the system prompt. ## Architecture: Extensions vs Library Extensions and library code serve different roles. See AGENTS.md's "Integration Architecture" section for the full pattern. The short version: - **`lib/`** holds domain logic: API clients, authentication, renderers, types and UI components. This is reusable code that other Pi packages can import. - **`extensions/`** holds Pi-specific wiring: tool registration, `renderCall`/`renderResult`, slash commands, confirmation gates, session state and lifecycle. When building an integration, the extension should be a thin consumer of its library. Caching belongs in the extension; the library stays stateless. When building a guardian or workflow, shared logic goes in `lib/internal/`. See AGENTS.md for the full guidelines on public vs internal code. ## What's Available (Orientation Only; Verify Against Source) **From `@mariozechner/pi-tui`
../../../skills/components/iblai-add-account.md
Base UI unstyled React components. Covers forms, menus, overlays, composition. Use when building accessible, unstyled React UI components with @base-ui/react, composing with render props, or implementing custom-styled form controls, menus, and overlays. Keywords: @base-ui/react, render props, unstyled components.
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.
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.
Use when the user asks about codebase structure, architecture, what a project does, how components relate, or needs project-wide context to answer a question.
skill-sample/ ├─ SKILL.md ⭐ Required: skill entry doc (purpose / usage / examples / deps) ├─ manifest.sample.json ⭐ Recommended: machine-readable metadata (index / validation / autofill) ├─ LICENSE.sample ⭐ Recommended: license & scope (open source / restriction / commercial) ├─ scripts/ │ └─ example-run.py ✅ Runnable example script for quick verification ├─ assets/ │ ├─ example-formatting-guide.md 🧩 Output conventions: layout / structure / style │ └─ example-template.tex 🧩 Templates: quickly generate standardized output └─ references/ 🧩 Knowledge base: methods / guides / best practices ├─ example-ref-structure.md 🧩 Structure reference ├─ example-ref-analysis.md 🧩 Analysis reference └─ example-ref-visuals.md 🧩 Visual reference
More Agent Skills specs Anthropic docs: https://agentskills.io/home
├─ ⭐ Required: YAML Frontmatter (must be at top) │ ├─ ⭐ name : unique skill name, follow naming convention │ └─ ⭐ description : include trigger keywords for matching │ ├─ ✅ Optional: Frontmatter extension fields │ ├─ ✅ license : license identifier │ ├─ ✅ compatibility : runtime constraints when needed │ ├─ ✅ metadata : key-value fields (author/version/source_url...) │ └─ 🧩 allowed-tools : tool whitelist (experimental) │ └─ ✅ Recommended: Markdown body (progressive disclosure) ├─ ✅ Overview / Purpose ├─ ✅ When to use ├─ ✅ Step-by-step ├─ ✅ Inputs / Outputs ├─ ✅ Examples ├─ 🧩 Files & References ├─ 🧩 Edge cases ├─ 🧩 Troubleshooting └─ 🧩 Safety notes
Skill files are scattered across GitHub and communities, difficult to search, and hard to evaluate. SkillWink organizes open-source skills into a searchable, filterable library you can directly download and use.
We provide keyword search, version updates, multi-metric ranking (downloads / likes / comments / updates), and open SKILL.md standards. You can also discuss usage and improvements on skill detail pages.
Quick Start:
Import/download skills (.zip/.skill), then place locally:
~/.claude/skills/ (Claude Code)
~/.codex/skills/ (Codex CLI)
One SKILL.md can be reused across tools.
Everything you need to know: what skills are, how they work, how to find/import them, and how to contribute.
A skill is a reusable capability package, usually including SKILL.md (purpose/IO/how-to) and optional scripts/templates/examples.
Think of it as a plugin playbook + resource bundle for AI assistants/toolchains.
Skills use progressive disclosure: load brief metadata first, load full docs only when needed, then execute by guidance.
This keeps agents lightweight while preserving enough context for complex tasks.
Use these three together:
Note: file size for all methods should be within 10MB.
Typical paths (may vary by local setup):
One SKILL.md can usually be reused across tools.
Yes. Most skills are standardized docs + assets, so they can be reused where format is supported.
Example: retrieval + writing + automation scripts as one workflow.
Some skills come from public GitHub repositories and some are uploaded by SkillWink creators. Always review code before installing and own your security decisions.
Most common reasons:
We try to avoid that. Use ranking + comments to surface better skills:
