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.
Builds UIs with Chameleon web components (ch-*). Use when the user mentions Chameleon, ch- components, or needs enterprise UI patterns like grids, trees, chat, sidebars, accordions, combos, tabs, dialogs, or forms. Also use for: implementing a UI from Figma or images, vibe coding a UI, migrating an existing UI to Chameleon, or auditing Chameleon usage in an application.
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations. --- # Next.js Cache Components > **Auto-activation**: This skill activates automatically in projects with `cacheComponents: true` in next.config. ## Project Detection When starting work in a Next.js project, check if Cache Components are enabled: ```bash # Check next.config.ts or next.config.js for cacheComponents grep -r "cacheComponents" next.config.* 2>/dev/null ``` If `cacheComponents: true` is found, apply this skill's patterns proactively when: - Writing React Server Components - Implementing data fetching - Creating Server Actions with mutations - Optimizing page performance - Reviewing existing component code Cache Components enable **Partial Prerendering (PPR)** - mixing static HTML shells with dynamic streaming content for optimal performance. ## Philosophy: Code Over Configuration Cache Components represents a shift from **segment configuration** to **compositional code**: | Before (Deprecated) | After (Cache Components) | | --------------------------------------- | ----------------------------------------- | | `export const r
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.
Use this skill whenever working with the Tidos Rust component framework.
Use when the user asks for a bug audit of a project or component
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`
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.
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:
