opencode-skills-collection 3.0.35 → 3.0.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundled-skills/.antigravity-install-manifest.json +15 -1
- package/bundled-skills/accesslint-audit/SKILL.md +115 -0
- package/bundled-skills/accesslint-diff/SKILL.md +81 -0
- package/bundled-skills/accesslint-scan/SKILL.md +47 -0
- package/bundled-skills/composition-patterns/SKILL.md +87 -0
- package/bundled-skills/composition-patterns/rules/_sections.md +29 -0
- package/bundled-skills/composition-patterns/rules/_template.md +24 -0
- package/bundled-skills/composition-patterns/rules/architecture-avoid-boolean-props.md +100 -0
- package/bundled-skills/composition-patterns/rules/architecture-compound-components.md +112 -0
- package/bundled-skills/composition-patterns/rules/patterns-children-over-render-props.md +87 -0
- package/bundled-skills/composition-patterns/rules/patterns-explicit-variants.md +100 -0
- package/bundled-skills/composition-patterns/rules/react19-no-forwardref.md +42 -0
- package/bundled-skills/composition-patterns/rules/state-context-interface.md +191 -0
- package/bundled-skills/composition-patterns/rules/state-decouple-implementation.md +113 -0
- package/bundled-skills/composition-patterns/rules/state-lift-state.md +125 -0
- package/bundled-skills/debugging-toolkit/SKILL.md +35 -0
- package/bundled-skills/deploy-to-vercel/SKILL.md +304 -0
- package/bundled-skills/deploy-to-vercel/resources/deploy-codex.sh +301 -0
- package/bundled-skills/deploy-to-vercel/resources/deploy.sh +301 -0
- package/bundled-skills/docs/integrations/jetski-cortex.md +3 -3
- package/bundled-skills/docs/integrations/jetski-gemini-loader/README.md +1 -1
- package/bundled-skills/docs/maintainers/backups/README-2026-06-02.md +687 -0
- package/bundled-skills/docs/maintainers/repo-growth-seo.md +4 -4
- package/bundled-skills/docs/maintainers/skills-update-guide.md +1 -1
- package/bundled-skills/docs/users/bundles.md +245 -1
- package/bundled-skills/docs/users/claude-code-skills.md +1 -1
- package/bundled-skills/docs/users/gemini-cli-skills.md +1 -1
- package/bundled-skills/docs/users/getting-started.md +1 -1
- package/bundled-skills/docs/users/kiro-integration.md +1 -1
- package/bundled-skills/docs/users/plugins.md +21 -13
- package/bundled-skills/docs/users/specialized-plugin-roadmap.md +95 -0
- package/bundled-skills/docs/users/usage.md +4 -4
- package/bundled-skills/docs/users/visual-guide.md +4 -4
- package/bundled-skills/polis-protocol/SKILL.md +93 -0
- package/bundled-skills/python-development/SKILL.md +35 -0
- package/bundled-skills/radix-ui-design-system/SKILL.md +2 -2
- package/bundled-skills/react-native-skills/SKILL.md +120 -0
- package/bundled-skills/react-native-skills/rules/_sections.md +86 -0
- package/bundled-skills/react-native-skills/rules/_template.md +28 -0
- package/bundled-skills/react-native-skills/rules/animation-derived-value.md +53 -0
- package/bundled-skills/react-native-skills/rules/animation-gesture-detector-press.md +95 -0
- package/bundled-skills/react-native-skills/rules/animation-gpu-properties.md +65 -0
- package/bundled-skills/react-native-skills/rules/design-system-compound-components.md +66 -0
- package/bundled-skills/react-native-skills/rules/fonts-config-plugin.md +71 -0
- package/bundled-skills/react-native-skills/rules/imports-design-system-folder.md +68 -0
- package/bundled-skills/react-native-skills/rules/js-hoist-intl.md +61 -0
- package/bundled-skills/react-native-skills/rules/list-performance-callbacks.md +44 -0
- package/bundled-skills/react-native-skills/rules/list-performance-function-references.md +132 -0
- package/bundled-skills/react-native-skills/rules/list-performance-images.md +53 -0
- package/bundled-skills/react-native-skills/rules/list-performance-inline-objects.md +97 -0
- package/bundled-skills/react-native-skills/rules/list-performance-item-expensive.md +94 -0
- package/bundled-skills/react-native-skills/rules/list-performance-item-memo.md +82 -0
- package/bundled-skills/react-native-skills/rules/list-performance-item-types.md +104 -0
- package/bundled-skills/react-native-skills/rules/list-performance-virtualize.md +67 -0
- package/bundled-skills/react-native-skills/rules/monorepo-native-deps-in-app.md +46 -0
- package/bundled-skills/react-native-skills/rules/monorepo-single-dependency-versions.md +63 -0
- package/bundled-skills/react-native-skills/rules/navigation-native-navigators.md +188 -0
- package/bundled-skills/react-native-skills/rules/react-compiler-destructure-functions.md +50 -0
- package/bundled-skills/react-native-skills/rules/react-compiler-reanimated-shared-values.md +48 -0
- package/bundled-skills/react-native-skills/rules/react-state-dispatcher.md +91 -0
- package/bundled-skills/react-native-skills/rules/react-state-fallback.md +56 -0
- package/bundled-skills/react-native-skills/rules/react-state-minimize.md +65 -0
- package/bundled-skills/react-native-skills/rules/rendering-no-falsy-and.md +74 -0
- package/bundled-skills/react-native-skills/rules/rendering-text-in-text-component.md +36 -0
- package/bundled-skills/react-native-skills/rules/scroll-position-no-state.md +82 -0
- package/bundled-skills/react-native-skills/rules/state-ground-truth.md +80 -0
- package/bundled-skills/react-native-skills/rules/ui-expo-image.md +66 -0
- package/bundled-skills/react-native-skills/rules/ui-image-gallery.md +104 -0
- package/bundled-skills/react-native-skills/rules/ui-measure-views.md +78 -0
- package/bundled-skills/react-native-skills/rules/ui-menus.md +174 -0
- package/bundled-skills/react-native-skills/rules/ui-native-modals.md +77 -0
- package/bundled-skills/react-native-skills/rules/ui-pressable.md +61 -0
- package/bundled-skills/react-native-skills/rules/ui-safe-area-scroll.md +65 -0
- package/bundled-skills/react-native-skills/rules/ui-scrollview-content-inset.md +45 -0
- package/bundled-skills/react-native-skills/rules/ui-styling.md +87 -0
- package/bundled-skills/skill-issue/SKILL.md +73 -0
- package/bundled-skills/tdd-workflows/SKILL.md +35 -0
- package/bundled-skills/vercel-cli-with-tokens/SKILL.md +361 -0
- package/bundled-skills/vercel-optimize/CONTRIBUTING.md +41 -0
- package/bundled-skills/vercel-optimize/SKILL.md +331 -0
- package/bundled-skills/vercel-optimize/lib/auth-route.mjs +23 -0
- package/bundled-skills/vercel-optimize/lib/budget-summary.mjs +182 -0
- package/bundled-skills/vercel-optimize/lib/citations.mjs +139 -0
- package/bundled-skills/vercel-optimize/lib/cost-coverage.mjs +143 -0
- package/bundled-skills/vercel-optimize/lib/dedup-recs.mjs +325 -0
- package/bundled-skills/vercel-optimize/lib/deep-dive.mjs +350 -0
- package/bundled-skills/vercel-optimize/lib/display-labels.mjs +185 -0
- package/bundled-skills/vercel-optimize/lib/extract-claims.mjs +550 -0
- package/bundled-skills/vercel-optimize/lib/framework-support.mjs +67 -0
- package/bundled-skills/vercel-optimize/lib/gates/build-minutes-fanout.mjs +69 -0
- package/bundled-skills/vercel-optimize/lib/gates/cold-start.mjs +66 -0
- package/bundled-skills/vercel-optimize/lib/gates/contract.mjs +79 -0
- package/bundled-skills/vercel-optimize/lib/gates/cwv-poor.mjs +87 -0
- package/bundled-skills/vercel-optimize/lib/gates/external-api-slow.mjs +55 -0
- package/bundled-skills/vercel-optimize/lib/gates/hard-gates.mjs +73 -0
- package/bundled-skills/vercel-optimize/lib/gates/index.mjs +45 -0
- package/bundled-skills/vercel-optimize/lib/gates/isr-overrevalidation.mjs +62 -0
- package/bundled-skills/vercel-optimize/lib/gates/middleware-heavy.mjs +51 -0
- package/bundled-skills/vercel-optimize/lib/gates/observability-events-attribution.mjs +56 -0
- package/bundled-skills/vercel-optimize/lib/gates/platform-bot-protection.mjs +115 -0
- package/bundled-skills/vercel-optimize/lib/gates/platform-fluid-compute.mjs +83 -0
- package/bundled-skills/vercel-optimize/lib/gates/region-misconfig.mjs +64 -0
- package/bundled-skills/vercel-optimize/lib/gates/route-errors.mjs +80 -0
- package/bundled-skills/vercel-optimize/lib/gates/scanner-driven.mjs +122 -0
- package/bundled-skills/vercel-optimize/lib/gates/select-candidates.mjs +134 -0
- package/bundled-skills/vercel-optimize/lib/gates/slow-route.mjs +88 -0
- package/bundled-skills/vercel-optimize/lib/gates/types.d.ts +38 -0
- package/bundled-skills/vercel-optimize/lib/gates/uncached-route.mjs +93 -0
- package/bundled-skills/vercel-optimize/lib/gates/usage-spike-triage.mjs +121 -0
- package/bundled-skills/vercel-optimize/lib/grade-recommendation.mjs +155 -0
- package/bundled-skills/vercel-optimize/lib/impact-label.mjs +126 -0
- package/bundled-skills/vercel-optimize/lib/impact-magnitude.mjs +60 -0
- package/bundled-skills/vercel-optimize/lib/investigation-brief.mjs +610 -0
- package/bundled-skills/vercel-optimize/lib/observation-safety.mjs +174 -0
- package/bundled-skills/vercel-optimize/lib/project-facts.mjs +99 -0
- package/bundled-skills/vercel-optimize/lib/queries.mjs +315 -0
- package/bundled-skills/vercel-optimize/lib/reconcile-candidates.mjs +372 -0
- package/bundled-skills/vercel-optimize/lib/render-report.mjs +955 -0
- package/bundled-skills/vercel-optimize/lib/repo-root.mjs +86 -0
- package/bundled-skills/vercel-optimize/lib/route-normalize.mjs +220 -0
- package/bundled-skills/vercel-optimize/lib/sanitizers/bot-protection-certainty.mjs +38 -0
- package/bundled-skills/vercel-optimize/lib/sanitizers/cache-tag-invalidation-certainty.mjs +30 -0
- package/bundled-skills/vercel-optimize/lib/sanitizers/count-correct.mjs +52 -0
- package/bundled-skills/vercel-optimize/lib/sanitizers/function-duration-invocations.mjs +38 -0
- package/bundled-skills/vercel-optimize/lib/sanitizers/index.mjs +79 -0
- package/bundled-skills/vercel-optimize/lib/sanitizers/middleware-conflict.mjs +36 -0
- package/bundled-skills/vercel-optimize/lib/sanitizers/missing-citation.mjs +16 -0
- package/bundled-skills/vercel-optimize/lib/sanitizers/pre-release.mjs +74 -0
- package/bundled-skills/vercel-optimize/lib/sanitizers/rate-limit.mjs +67 -0
- package/bundled-skills/vercel-optimize/lib/sanitizers/rendering-mode-mislabel.mjs +38 -0
- package/bundled-skills/vercel-optimize/lib/sanitizers/undeclared-dep.mjs +78 -0
- package/bundled-skills/vercel-optimize/lib/sanitizers/vercel-directive-strip.mjs +37 -0
- package/bundled-skills/vercel-optimize/lib/sanitizers/window-units.mjs +32 -0
- package/bundled-skills/vercel-optimize/lib/scanners/cache-components-suspense-dedupe.mjs +109 -0
- package/bundled-skills/vercel-optimize/lib/scanners/edge-heavy-import.mjs +94 -0
- package/bundled-skills/vercel-optimize/lib/scanners/force-dynamic.mjs +42 -0
- package/bundled-skills/vercel-optimize/lib/scanners/headers-in-page.mjs +44 -0
- package/bundled-skills/vercel-optimize/lib/scanners/index.mjs +35 -0
- package/bundled-skills/vercel-optimize/lib/scanners/large-static-asset.mjs +92 -0
- package/bundled-skills/vercel-optimize/lib/scanners/max-age-without-s-maxage.mjs +42 -0
- package/bundled-skills/vercel-optimize/lib/scanners/middleware-broad-matcher.mjs +55 -0
- package/bundled-skills/vercel-optimize/lib/scanners/missing-cache-headers.mjs +90 -0
- package/bundled-skills/vercel-optimize/lib/scanners/prisma-include-tree.mjs +42 -0
- package/bundled-skills/vercel-optimize/lib/scanners/region-pin-in-config.mjs +88 -0
- package/bundled-skills/vercel-optimize/lib/scanners/source-maps-production.mjs +36 -0
- package/bundled-skills/vercel-optimize/lib/scanners/sveltekit-prerender-missing.mjs +43 -0
- package/bundled-skills/vercel-optimize/lib/scanners/turbo-force-bypass.mjs +129 -0
- package/bundled-skills/vercel-optimize/lib/scanners/unoptimized-image.mjs +113 -0
- package/bundled-skills/vercel-optimize/lib/scanners/use-cache-date-stamp.mjs +106 -0
- package/bundled-skills/vercel-optimize/lib/support-topics.mjs +355 -0
- package/bundled-skills/vercel-optimize/lib/throttle.mjs +273 -0
- package/bundled-skills/vercel-optimize/lib/util.mjs +17 -0
- package/bundled-skills/vercel-optimize/lib/vercel.mjs +784 -0
- package/bundled-skills/vercel-optimize/lib/verify-claim.mjs +1296 -0
- package/bundled-skills/vercel-optimize/lib/workspace-resolver.mjs +521 -0
- package/bundled-skills/vercel-optimize/references/candidates.md +176 -0
- package/bundled-skills/vercel-optimize/references/data-collection.md +218 -0
- package/bundled-skills/vercel-optimize/references/docs-library.json +683 -0
- package/bundled-skills/vercel-optimize/references/doctrine.md +105 -0
- package/bundled-skills/vercel-optimize/references/observability-plus.md +108 -0
- package/bundled-skills/vercel-optimize/references/playbooks/README.md +53 -0
- package/bundled-skills/vercel-optimize/references/playbooks/ai-application.md +32 -0
- package/bundled-skills/vercel-optimize/references/playbooks/api-service.md +30 -0
- package/bundled-skills/vercel-optimize/references/playbooks/content-site.md +30 -0
- package/bundled-skills/vercel-optimize/references/playbooks/ecommerce.md +30 -0
- package/bundled-skills/vercel-optimize/references/playbooks/marketing.md +30 -0
- package/bundled-skills/vercel-optimize/references/playbooks/saas.md +31 -0
- package/bundled-skills/vercel-optimize/references/playbooks/sveltekit.md +75 -0
- package/bundled-skills/vercel-optimize/references/recommendations.md +203 -0
- package/bundled-skills/vercel-optimize/references/scanner-patterns.md +251 -0
- package/bundled-skills/vercel-optimize/references/scoring.md +205 -0
- package/bundled-skills/vercel-optimize/references/support-topics/README.md +46 -0
- package/bundled-skills/vercel-optimize/references/support-topics/astro-edge-middleware-scope.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/astro-output-mode-and-isr.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/auth-preserving-parallelization.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/bot-protection-product-guardrails.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/build-minutes-monorepo-fanout.md +23 -0
- package/bundled-skills/vercel-optimize/references/support-topics/cache-components-static-shell-boundaries.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/cache-components-suspense-dedupe-pitfall.md +23 -0
- package/bundled-skills/vercel-optimize/references/support-topics/cdn-cache-auth-safety.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/cold-start-initialization-bundle.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/core-web-vitals-client-bottlenecks.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/database-egress-pooling-region.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/dynamic-rendering-traps.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/external-api-critical-path-platform.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/external-api-critical-path.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/fast-data-transfer-payloads.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/fluid-compute-caveats.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/function-duration-io-and-after.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/function-invocation-reduction.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/function-region-misconfiguration-ttfb.md +23 -0
- package/bundled-skills/vercel-optimize/references/support-topics/image-optimization-cost-control.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/isr-revalidation-static-generation.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/middleware-proxy-edge-cost.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/next-fetch-revalidate-floor.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/next-font-cls-self-hosting.md +23 -0
- package/bundled-skills/vercel-optimize/references/support-topics/next-heavy-ui-lazy-load-boundaries.md +23 -0
- package/bundled-skills/vercel-optimize/references/support-topics/next-image-lcp-preload-sizes.md +23 -0
- package/bundled-skills/vercel-optimize/references/support-topics/next-route-handler-get-cache-defaults.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/next-script-third-party-strategy.md +23 -0
- package/bundled-skills/vercel-optimize/references/support-topics/nextjs-version-cache-semantics.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/not-found-catchall-request-waste.md +23 -0
- package/bundled-skills/vercel-optimize/references/support-topics/nuxt-route-rules-cache-isr.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/observability-events-cost-attribution.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/post-response-work-waituntil.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/route-error-durable-offload.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/route-error-runtime-limits.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/runtime-cache-reusable-data.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/sveltekit-isr-prerender-safety.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/sveltekit-split-cold-start-tradeoff.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/usage-spike-triage.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/use-cache-date-stamp-isr-write-amplifier.md +23 -0
- package/bundled-skills/vercel-optimize/references/support-topics/use-cache-remote-shared-origin-data.md +22 -0
- package/bundled-skills/vercel-optimize/references/support-topics/workflow-resumable-stream-routes.md +23 -0
- package/bundled-skills/vercel-optimize/references/verification.md +102 -0
- package/bundled-skills/vercel-optimize/references/voice.md +76 -0
- package/bundled-skills/vercel-optimize/scripts/budget-summary.mjs +56 -0
- package/bundled-skills/vercel-optimize/scripts/build-docs.mjs +74 -0
- package/bundled-skills/vercel-optimize/scripts/check-citations.mjs +81 -0
- package/bundled-skills/vercel-optimize/scripts/check-docs-fresh.mjs +93 -0
- package/bundled-skills/vercel-optimize/scripts/collect-signals.mjs +576 -0
- package/bundled-skills/vercel-optimize/scripts/collect-sub-agent-outputs.mjs +296 -0
- package/bundled-skills/vercel-optimize/scripts/deep-dive.mjs +319 -0
- package/bundled-skills/vercel-optimize/scripts/gate-investigations.mjs +166 -0
- package/bundled-skills/vercel-optimize/scripts/merge-signals.mjs +192 -0
- package/bundled-skills/vercel-optimize/scripts/prepare-investigation-brief.mjs +231 -0
- package/bundled-skills/vercel-optimize/scripts/reconcile-candidates.mjs +62 -0
- package/bundled-skills/vercel-optimize/scripts/render-report.mjs +437 -0
- package/bundled-skills/vercel-optimize/scripts/scan-codebase.mjs +313 -0
- package/bundled-skills/vercel-optimize/scripts/verify-and-regen.mjs +346 -0
- package/bundled-skills/vercel-optimize/scripts/verify-finding.mjs +19 -0
- package/bundled-skills/vercel-react-view-transitions/SKILL.md +327 -0
- package/bundled-skills/vercel-react-view-transitions/references/css-recipes.md +242 -0
- package/bundled-skills/vercel-react-view-transitions/references/implementation.md +182 -0
- package/bundled-skills/vercel-react-view-transitions/references/nextjs.md +176 -0
- package/bundled-skills/vercel-react-view-transitions/references/patterns.md +262 -0
- package/package.json +2 -2
- package/skills_index.json +312 -0
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: polis-protocol
|
|
3
|
+
description: "Coordinate multi-vendor AI agents as a self-improving team — a learning router assigns work by track record and citizens can amend the protocol's own rules."
|
|
4
|
+
category: orchestration
|
|
5
|
+
risk: safe
|
|
6
|
+
source: community
|
|
7
|
+
source_repo: yehudalevy-collab/polis-protocol
|
|
8
|
+
source_type: community
|
|
9
|
+
date_added: "2026-06-02"
|
|
10
|
+
author: yehudalevy-collab
|
|
11
|
+
tags: [multi-agent, coordination, routing, orchestration, governance, vendor-agnostic]
|
|
12
|
+
tools: [claude, cursor, gemini, codex, antigravity]
|
|
13
|
+
license: "MIT"
|
|
14
|
+
license_source: "https://github.com/yehudalevy-collab/polis-protocol/blob/main/LICENSE"
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
# Polis Protocol — a team of agents that develops
|
|
18
|
+
|
|
19
|
+
## Overview
|
|
20
|
+
|
|
21
|
+
Most agent coordination is a passive board: claim a task, do it, mark it done. It records, but it never gets smarter, and its rules are frozen. Polis Protocol is the active alternative — a folder of markdown where each agent is a "citizen" with a capability card, work is routed by a learning bandit to whoever has the best track record on the task's tags, settled work files lessons that update the routing, and citizens can propose and vote on amendments to the protocol itself. It is vendor-agnostic: Antigravity, Claude, Codex, and Gemini agents can all share one `_polis/`.
|
|
22
|
+
|
|
23
|
+
In Antigravity specifically, this turns Manager View's fixed pipeline into a team that learns who is actually best at each kind of work, instead of running the same roles in the same order every time.
|
|
24
|
+
|
|
25
|
+
## When to Use This Skill
|
|
26
|
+
|
|
27
|
+
- Use when 2+ agents (especially across vendors) work on one project and "who should do this" is a real question.
|
|
28
|
+
- Use when you want the team to measurably improve over time — routing that adapts from outcomes, not static role labels.
|
|
29
|
+
- Use when you need a durable, git-auditable record of who did what, what was learned, and which rules changed.
|
|
30
|
+
- Use when Antigravity's default orchestration is too rigid and you want routing + governance on top of it.
|
|
31
|
+
|
|
32
|
+
## How It Works
|
|
33
|
+
|
|
34
|
+
### Step 1: Found a polis
|
|
35
|
+
|
|
36
|
+
Clone the repo and run the scaffolder directly (review `install.sh` first if you prefer the one-line installer):
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
git clone https://github.com/yehudalevy-collab/polis-protocol.git
|
|
40
|
+
python3 polis-protocol/scripts/init_polis.py \
|
|
41
|
+
--project-root . \
|
|
42
|
+
--agent-id gemini-antigravity-yourproject \
|
|
43
|
+
--vendor google --model gemini-3 --tool antigravity
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
This writes `_polis/` plus the skill into `.antigravity/skills/`, and bridge pointers (`GEMINI.md`, `AGENTS.md`) that point every tool at `_polis/CONSTITUTION.md`. Tip: add `--dry-run` to preview every file before anything is written.
|
|
47
|
+
|
|
48
|
+
### Step 2: Register citizens and open contracts
|
|
49
|
+
|
|
50
|
+
Each agent publishes a capability card under `_polis/citizens/`. Work is opened as a contract with `required_tags`, not assigned to a fixed role.
|
|
51
|
+
|
|
52
|
+
### Step 3: Route by track record
|
|
53
|
+
|
|
54
|
+
```bash
|
|
55
|
+
python3 polis-protocol/scripts/route_contract.py --polis-root _polis \
|
|
56
|
+
--contract _polis/contracts/open/your-task.md --explain
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
The router prints a score breakdown (history / self-rating / cost / availability) and recommends the citizen with the strongest record on the task's tags.
|
|
60
|
+
|
|
61
|
+
### Step 4: Settle, learn, and amend
|
|
62
|
+
|
|
63
|
+
A settled contract files a lesson; `--reconcile` folds it into `routing_stats.yml` so the next similar task routes better. When a rule stops working, a citizen proposes an amendment and the others vote.
|
|
64
|
+
|
|
65
|
+
## Examples
|
|
66
|
+
|
|
67
|
+
### Example 1: See the team learn (no install, 30 seconds)
|
|
68
|
+
|
|
69
|
+
```bash
|
|
70
|
+
git clone https://github.com/yehudalevy-collab/polis-protocol.git
|
|
71
|
+
cd polis-protocol && bash scripts/demo.sh
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
The router recommends Gemini for a Spanish-translation contract — because settled work taught it she has the best record on that tag, not because anyone reassigned it.
|
|
75
|
+
|
|
76
|
+
### Example 2: Explain any routing decision
|
|
77
|
+
|
|
78
|
+
```bash
|
|
79
|
+
python3 scripts/route_contract.py --polis-root examples/research-team/_polis \
|
|
80
|
+
--contract examples/research-team/_polis/contracts/open/parent-newsletter-issue-3.md --explain
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
## Notes
|
|
84
|
+
|
|
85
|
+
- No server, no runtime, no database — the whole protocol is markdown plus two small Python scripts.
|
|
86
|
+
- Vendor-agnostic by design; a Claude or Codex agent can join the same polis an Antigravity agent created.
|
|
87
|
+
- Full Antigravity integration guide: https://github.com/yehudalevy-collab/polis-protocol/blob/main/docs/antigravity.md
|
|
88
|
+
|
|
89
|
+
## Limitations
|
|
90
|
+
|
|
91
|
+
- Routing quality depends on accurate citizen capability cards and enough settled work history to learn from.
|
|
92
|
+
- The protocol coordinates agent work but does not replace review, tests, or explicit maintainer approval.
|
|
93
|
+
- Multi-agent voting and amendments can add process overhead for small, single-owner tasks.
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: python-development
|
|
3
|
+
description: "You are a Python project architecture expert specializing in scaffolding production-ready Python applications. Generate complete project structures with modern tooling (uv, FastAPI, Django), type hint (Alias for python-development-python-scaffold)"
|
|
4
|
+
risk: critical
|
|
5
|
+
source: "alias"
|
|
6
|
+
date_added: "2026-06-02"
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# Python Development
|
|
10
|
+
|
|
11
|
+
> **This is an alias.** The canonical skill is **`python-development-python-scaffold`**.
|
|
12
|
+
|
|
13
|
+
This skill redirects to `python-development-python-scaffold`. Load it from the vault:
|
|
14
|
+
|
|
15
|
+
`skill-libraries/development/python-development-python-scaffold/SKILL.md`
|
|
16
|
+
|
|
17
|
+
## When to Use
|
|
18
|
+
- Use this skill when the task matches this description: You are a Python project architecture expert specializing in scaffolding production-ready Python applications. Generate complete project structures with modern tooling (uv, FastAPI, Django), type hint (Alias for python-development-python-scaffold).
|
|
19
|
+
|
|
20
|
+
## Why this alias exists
|
|
21
|
+
|
|
22
|
+
Users commonly search for `python-development` but the full skill name in this collection is `python-development-python-scaffold`. This alias ensures discoverability.
|
|
23
|
+
|
|
24
|
+
## Limitations
|
|
25
|
+
- Use this skill only when the task clearly matches the scope described above.
|
|
26
|
+
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
|
|
27
|
+
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
|
|
28
|
+
|
|
29
|
+
## Examples
|
|
30
|
+
```text
|
|
31
|
+
Use @python-development for this task: You are a Python project architecture expert specializing in scaffolding production-ready Python applications. Generate complete project structures with modern tooling (uv, FastAPI, Django), type hint (Alias for python-development-python-scaffold).
|
|
32
|
+
|
|
33
|
+
Apply the skill to my current work and walk me through the safest next steps,
|
|
34
|
+
key checks, and the concrete output I should produce.
|
|
35
|
+
```
|
|
@@ -768,8 +768,8 @@ const SelectItems = memo(({ items }) => (
|
|
|
768
768
|
shadcn/ui is a collection of copy-paste components built with Radix + Tailwind.
|
|
769
769
|
|
|
770
770
|
```bash
|
|
771
|
-
npx shadcn
|
|
772
|
-
npx shadcn
|
|
771
|
+
npx shadcn@latest init
|
|
772
|
+
npx shadcn@latest add dialog
|
|
773
773
|
```
|
|
774
774
|
|
|
775
775
|
**When to use shadcn vs raw Radix**:
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: react-native-skills
|
|
3
|
+
description: "Use when working with react-native-skills tasks or workflows"
|
|
4
|
+
risk: safe
|
|
5
|
+
source: "https://github.com/vercel-labs/agent-skills"
|
|
6
|
+
date_added: "2026-06-02"
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# React Native Skills
|
|
10
|
+
|
|
11
|
+
Comprehensive best practices for React Native and Expo applications. Contains
|
|
12
|
+
rules across multiple categories covering performance, animations, UI patterns,
|
|
13
|
+
and platform-specific optimizations.
|
|
14
|
+
|
|
15
|
+
## When to Use
|
|
16
|
+
Reference these guidelines when:
|
|
17
|
+
|
|
18
|
+
- Building React Native or Expo apps
|
|
19
|
+
- Optimizing list and scroll performance
|
|
20
|
+
- Implementing animations with Reanimated
|
|
21
|
+
- Working with images and media
|
|
22
|
+
- Configuring native modules or fonts
|
|
23
|
+
- Structuring monorepo projects with native dependencies
|
|
24
|
+
|
|
25
|
+
## Rule Categories by Priority
|
|
26
|
+
|
|
27
|
+
| Priority | Category | Impact | Prefix |
|
|
28
|
+
| -------- | ---------------- | -------- | -------------------- |
|
|
29
|
+
| 1 | List Performance | CRITICAL | `list-performance-` |
|
|
30
|
+
| 2 | Animation | HIGH | `animation-` |
|
|
31
|
+
| 3 | Navigation | HIGH | `navigation-` |
|
|
32
|
+
| 4 | UI Patterns | HIGH | `ui-` |
|
|
33
|
+
| 5 | State Management | MEDIUM | `react-state-` |
|
|
34
|
+
| 6 | Rendering | MEDIUM | `rendering-` |
|
|
35
|
+
| 7 | Monorepo | MEDIUM | `monorepo-` |
|
|
36
|
+
| 8 | Configuration | LOW | `fonts-`, `imports-` |
|
|
37
|
+
|
|
38
|
+
## Quick Reference
|
|
39
|
+
|
|
40
|
+
### 1. List Performance (CRITICAL)
|
|
41
|
+
|
|
42
|
+
- `list-performance-virtualize` - Use FlashList for large lists
|
|
43
|
+
- `list-performance-item-memo` - Memoize list item components
|
|
44
|
+
- `list-performance-callbacks` - Stabilize callback references
|
|
45
|
+
- `list-performance-inline-objects` - Avoid inline style objects
|
|
46
|
+
- `list-performance-function-references` - Extract functions outside render
|
|
47
|
+
- `list-performance-images` - Optimize images in lists
|
|
48
|
+
- `list-performance-item-expensive` - Move expensive work outside items
|
|
49
|
+
- `list-performance-item-types` - Use item types for heterogeneous lists
|
|
50
|
+
|
|
51
|
+
### 2. Animation (HIGH)
|
|
52
|
+
|
|
53
|
+
- `animation-gpu-properties` - Animate only transform and opacity
|
|
54
|
+
- `animation-derived-value` - Use useDerivedValue for computed animations
|
|
55
|
+
- `animation-gesture-detector-press` - Use Gesture.Tap instead of Pressable
|
|
56
|
+
|
|
57
|
+
### 3. Navigation (HIGH)
|
|
58
|
+
|
|
59
|
+
- `navigation-native-navigators` - Use native stack and native tabs over JS navigators
|
|
60
|
+
|
|
61
|
+
### 4. UI Patterns (HIGH)
|
|
62
|
+
|
|
63
|
+
- `ui-expo-image` - Use expo-image for all images
|
|
64
|
+
- `ui-image-gallery` - Use Galeria for image lightboxes
|
|
65
|
+
- `ui-pressable` - Use Pressable over TouchableOpacity
|
|
66
|
+
- `ui-safe-area-scroll` - Handle safe areas in ScrollViews
|
|
67
|
+
- `ui-scrollview-content-inset` - Use contentInset for headers
|
|
68
|
+
- `ui-menus` - Use native context menus
|
|
69
|
+
- `ui-native-modals` - Use native modals when possible
|
|
70
|
+
- `ui-measure-views` - Use onLayout, not measure()
|
|
71
|
+
- `ui-styling` - Use StyleSheet.create or Nativewind
|
|
72
|
+
|
|
73
|
+
### 5. State Management (MEDIUM)
|
|
74
|
+
|
|
75
|
+
- `react-state-minimize` - Minimize state subscriptions
|
|
76
|
+
- `react-state-dispatcher` - Use dispatcher pattern for callbacks
|
|
77
|
+
- `react-state-fallback` - Show fallback on first render
|
|
78
|
+
- `react-compiler-destructure-functions` - Destructure for React Compiler
|
|
79
|
+
- `react-compiler-reanimated-shared-values` - Handle shared values with compiler
|
|
80
|
+
|
|
81
|
+
### 6. Rendering (MEDIUM)
|
|
82
|
+
|
|
83
|
+
- `rendering-text-in-text-component` - Wrap text in Text components
|
|
84
|
+
- `rendering-no-falsy-and` - Avoid falsy && for conditional rendering
|
|
85
|
+
|
|
86
|
+
### 7. Monorepo (MEDIUM)
|
|
87
|
+
|
|
88
|
+
- `monorepo-native-deps-in-app` - Keep native dependencies in app package
|
|
89
|
+
- `monorepo-single-dependency-versions` - Use single versions across packages
|
|
90
|
+
|
|
91
|
+
### 8. Configuration (LOW)
|
|
92
|
+
|
|
93
|
+
- `fonts-config-plugin` - Use config plugins for custom fonts
|
|
94
|
+
- `imports-design-system-folder` - Organize design system imports
|
|
95
|
+
- `js-hoist-intl` - Hoist Intl object creation
|
|
96
|
+
|
|
97
|
+
## How to Use
|
|
98
|
+
|
|
99
|
+
Read individual rule files for detailed explanations and code examples:
|
|
100
|
+
|
|
101
|
+
```
|
|
102
|
+
rules/list-performance-virtualize.md
|
|
103
|
+
rules/animation-gpu-properties.md
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
Each rule file contains:
|
|
107
|
+
|
|
108
|
+
- Brief explanation of why it matters
|
|
109
|
+
- Incorrect code example with explanation
|
|
110
|
+
- Correct code example with explanation
|
|
111
|
+
- Additional context and references
|
|
112
|
+
|
|
113
|
+
## Full Compiled Document
|
|
114
|
+
|
|
115
|
+
For the complete guide with all rules expanded: `AGENTS.md`
|
|
116
|
+
|
|
117
|
+
## Limitations
|
|
118
|
+
- Use this skill only when the task clearly matches the scope described above.
|
|
119
|
+
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
|
|
120
|
+
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
# Sections
|
|
2
|
+
|
|
3
|
+
This file defines all sections, their ordering, impact levels, and descriptions.
|
|
4
|
+
The section ID (in parentheses) is the filename prefix used to group rules.
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## 1. Core Rendering (rendering)
|
|
9
|
+
|
|
10
|
+
**Impact:** CRITICAL
|
|
11
|
+
**Description:** Fundamental React Native rendering rules. Violations cause
|
|
12
|
+
runtime crashes or broken UI.
|
|
13
|
+
|
|
14
|
+
## 2. List Performance (list-performance)
|
|
15
|
+
|
|
16
|
+
**Impact:** HIGH
|
|
17
|
+
**Description:** Optimizing virtualized lists (FlatList, LegendList, FlashList)
|
|
18
|
+
for smooth scrolling and fast updates.
|
|
19
|
+
|
|
20
|
+
## 3. Animation (animation)
|
|
21
|
+
|
|
22
|
+
**Impact:** HIGH
|
|
23
|
+
**Description:** GPU-accelerated animations, Reanimated patterns, and avoiding
|
|
24
|
+
render thrashing during gestures.
|
|
25
|
+
|
|
26
|
+
## 4. Scroll Performance (scroll)
|
|
27
|
+
|
|
28
|
+
**Impact:** HIGH
|
|
29
|
+
**Description:** Tracking scroll position without causing render thrashing.
|
|
30
|
+
|
|
31
|
+
## 5. Navigation (navigation)
|
|
32
|
+
|
|
33
|
+
**Impact:** HIGH
|
|
34
|
+
**Description:** Using native navigators for stack and tab navigation instead of
|
|
35
|
+
JS-based alternatives.
|
|
36
|
+
|
|
37
|
+
## 6. React State (react-state)
|
|
38
|
+
|
|
39
|
+
**Impact:** MEDIUM
|
|
40
|
+
**Description:** Patterns for managing React state to avoid stale closures and
|
|
41
|
+
unnecessary re-renders.
|
|
42
|
+
|
|
43
|
+
## 7. State Architecture (state)
|
|
44
|
+
|
|
45
|
+
**Impact:** MEDIUM
|
|
46
|
+
**Description:** Ground truth principles for state variables and derived values.
|
|
47
|
+
|
|
48
|
+
## 8. React Compiler (react-compiler)
|
|
49
|
+
|
|
50
|
+
**Impact:** MEDIUM
|
|
51
|
+
**Description:** Compatibility patterns for React Compiler with React Native and
|
|
52
|
+
Reanimated.
|
|
53
|
+
|
|
54
|
+
## 9. User Interface (ui)
|
|
55
|
+
|
|
56
|
+
**Impact:** MEDIUM
|
|
57
|
+
**Description:** Native UI patterns for images, menus, modals, styling, and
|
|
58
|
+
platform-consistent interfaces.
|
|
59
|
+
|
|
60
|
+
## 10. Design System (design-system)
|
|
61
|
+
|
|
62
|
+
**Impact:** MEDIUM
|
|
63
|
+
**Description:** Architecture patterns for building maintainable component
|
|
64
|
+
libraries.
|
|
65
|
+
|
|
66
|
+
## 11. Monorepo (monorepo)
|
|
67
|
+
|
|
68
|
+
**Impact:** LOW
|
|
69
|
+
**Description:** Dependency management and native module configuration in
|
|
70
|
+
monorepos.
|
|
71
|
+
|
|
72
|
+
## 12. Third-Party Dependencies (imports)
|
|
73
|
+
|
|
74
|
+
**Impact:** LOW
|
|
75
|
+
**Description:** Wrapping and re-exporting third-party dependencies for
|
|
76
|
+
maintainability.
|
|
77
|
+
|
|
78
|
+
## 13. JavaScript (js)
|
|
79
|
+
|
|
80
|
+
**Impact:** LOW
|
|
81
|
+
**Description:** Micro-optimizations like hoisting expensive object creation.
|
|
82
|
+
|
|
83
|
+
## 14. Fonts (fonts)
|
|
84
|
+
|
|
85
|
+
**Impact:** LOW
|
|
86
|
+
**Description:** Native font loading for improved performance.
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Rule Title Here
|
|
3
|
+
impact: MEDIUM
|
|
4
|
+
impactDescription: Optional description of impact (e.g., "20-50% improvement")
|
|
5
|
+
tags: tag1, tag2
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## Rule Title Here
|
|
9
|
+
|
|
10
|
+
**Impact: MEDIUM (optional impact description)**
|
|
11
|
+
|
|
12
|
+
Brief explanation of the rule and why it matters. This should be clear and concise, explaining the performance implications.
|
|
13
|
+
|
|
14
|
+
**Incorrect (description of what's wrong):**
|
|
15
|
+
|
|
16
|
+
```typescript
|
|
17
|
+
// Bad code example here
|
|
18
|
+
const bad = example()
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
**Correct (description of what's right):**
|
|
22
|
+
|
|
23
|
+
```typescript
|
|
24
|
+
// Good code example here
|
|
25
|
+
const good = example()
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
Reference: [Link to documentation or resource](https://example.com)
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Prefer useDerivedValue Over useAnimatedReaction
|
|
3
|
+
impact: MEDIUM
|
|
4
|
+
impactDescription: cleaner code, automatic dependency tracking
|
|
5
|
+
tags: animation, reanimated, derived-value
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## Prefer useDerivedValue Over useAnimatedReaction
|
|
9
|
+
|
|
10
|
+
When deriving a shared value from another, use `useDerivedValue` instead of
|
|
11
|
+
`useAnimatedReaction`. Derived values are declarative, automatically track
|
|
12
|
+
dependencies, and return a value you can use directly. Animated reactions are
|
|
13
|
+
for side effects, not derivations.
|
|
14
|
+
|
|
15
|
+
**Incorrect (useAnimatedReaction for derivation):**
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import { useSharedValue, useAnimatedReaction } from 'react-native-reanimated'
|
|
19
|
+
|
|
20
|
+
function MyComponent() {
|
|
21
|
+
const progress = useSharedValue(0)
|
|
22
|
+
const opacity = useSharedValue(1)
|
|
23
|
+
|
|
24
|
+
useAnimatedReaction(
|
|
25
|
+
() => progress.value,
|
|
26
|
+
(current) => {
|
|
27
|
+
opacity.value = 1 - current
|
|
28
|
+
}
|
|
29
|
+
)
|
|
30
|
+
|
|
31
|
+
// ...
|
|
32
|
+
}
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
**Correct (useDerivedValue):**
|
|
36
|
+
|
|
37
|
+
```tsx
|
|
38
|
+
import { useSharedValue, useDerivedValue } from 'react-native-reanimated'
|
|
39
|
+
|
|
40
|
+
function MyComponent() {
|
|
41
|
+
const progress = useSharedValue(0)
|
|
42
|
+
|
|
43
|
+
const opacity = useDerivedValue(() => 1 - progress.get())
|
|
44
|
+
|
|
45
|
+
// ...
|
|
46
|
+
}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
Use `useAnimatedReaction` only for side effects that don't produce a value
|
|
50
|
+
(e.g., triggering haptics, logging, calling `runOnJS`).
|
|
51
|
+
|
|
52
|
+
Reference:
|
|
53
|
+
[Reanimated useDerivedValue](https://docs.swmansion.com/react-native-reanimated/docs/core/useDerivedValue)
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Use GestureDetector for Animated Press States
|
|
3
|
+
impact: MEDIUM
|
|
4
|
+
impactDescription: UI thread animations, smoother press feedback
|
|
5
|
+
tags: animation, gestures, press, reanimated
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## Use GestureDetector for Animated Press States
|
|
9
|
+
|
|
10
|
+
For animated press states (scale, opacity on press), use `GestureDetector` with
|
|
11
|
+
`Gesture.Tap()` and shared values instead of Pressable's
|
|
12
|
+
`onPressIn`/`onPressOut`. Gesture callbacks run on the UI thread as worklets—no
|
|
13
|
+
JS thread round-trip for press animations.
|
|
14
|
+
|
|
15
|
+
**Incorrect (Pressable with JS thread callbacks):**
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import { Pressable } from 'react-native'
|
|
19
|
+
import Animated, {
|
|
20
|
+
useSharedValue,
|
|
21
|
+
useAnimatedStyle,
|
|
22
|
+
withTiming,
|
|
23
|
+
} from 'react-native-reanimated'
|
|
24
|
+
|
|
25
|
+
function AnimatedButton({ onPress }: { onPress: () => void }) {
|
|
26
|
+
const scale = useSharedValue(1)
|
|
27
|
+
|
|
28
|
+
const animatedStyle = useAnimatedStyle(() => ({
|
|
29
|
+
transform: [{ scale: scale.value }],
|
|
30
|
+
}))
|
|
31
|
+
|
|
32
|
+
return (
|
|
33
|
+
<Pressable
|
|
34
|
+
onPress={onPress}
|
|
35
|
+
onPressIn={() => (scale.value = withTiming(0.95))}
|
|
36
|
+
onPressOut={() => (scale.value = withTiming(1))}
|
|
37
|
+
>
|
|
38
|
+
<Animated.View style={animatedStyle}>
|
|
39
|
+
<Text>Press me</Text>
|
|
40
|
+
</Animated.View>
|
|
41
|
+
</Pressable>
|
|
42
|
+
)
|
|
43
|
+
}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
**Correct (GestureDetector with UI thread worklets):**
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
import { Gesture, GestureDetector } from 'react-native-gesture-handler'
|
|
50
|
+
import Animated, {
|
|
51
|
+
useSharedValue,
|
|
52
|
+
useAnimatedStyle,
|
|
53
|
+
withTiming,
|
|
54
|
+
interpolate,
|
|
55
|
+
runOnJS,
|
|
56
|
+
} from 'react-native-reanimated'
|
|
57
|
+
|
|
58
|
+
function AnimatedButton({ onPress }: { onPress: () => void }) {
|
|
59
|
+
// Store the press STATE (0 = not pressed, 1 = pressed)
|
|
60
|
+
const pressed = useSharedValue(0)
|
|
61
|
+
|
|
62
|
+
const tap = Gesture.Tap()
|
|
63
|
+
.onBegin(() => {
|
|
64
|
+
pressed.set(withTiming(1))
|
|
65
|
+
})
|
|
66
|
+
.onFinalize(() => {
|
|
67
|
+
pressed.set(withTiming(0))
|
|
68
|
+
})
|
|
69
|
+
.onEnd(() => {
|
|
70
|
+
runOnJS(onPress)()
|
|
71
|
+
})
|
|
72
|
+
|
|
73
|
+
// Derive visual values from the state
|
|
74
|
+
const animatedStyle = useAnimatedStyle(() => ({
|
|
75
|
+
transform: [
|
|
76
|
+
{ scale: interpolate(withTiming(pressed.get()), [0, 1], [1, 0.95]) },
|
|
77
|
+
],
|
|
78
|
+
}))
|
|
79
|
+
|
|
80
|
+
return (
|
|
81
|
+
<GestureDetector gesture={tap}>
|
|
82
|
+
<Animated.View style={animatedStyle}>
|
|
83
|
+
<Text>Press me</Text>
|
|
84
|
+
</Animated.View>
|
|
85
|
+
</GestureDetector>
|
|
86
|
+
)
|
|
87
|
+
}
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
Store the press **state** (0 or 1), then derive the scale via `interpolate`.
|
|
91
|
+
This keeps the shared value as ground truth. Use `runOnJS` to call JS functions
|
|
92
|
+
from worklets. Use `.set()` and `.get()` for React Compiler compatibility.
|
|
93
|
+
|
|
94
|
+
Reference:
|
|
95
|
+
[Gesture Handler Tap Gesture](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/tap-gesture)
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Animate Transform and Opacity Instead of Layout Properties
|
|
3
|
+
impact: HIGH
|
|
4
|
+
impactDescription: GPU-accelerated animations, no layout recalculation
|
|
5
|
+
tags: animation, performance, reanimated, transform, opacity
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## Animate Transform and Opacity Instead of Layout Properties
|
|
9
|
+
|
|
10
|
+
Avoid animating `width`, `height`, `top`, `left`, `margin`, or `padding`. These trigger layout recalculation on every frame. Instead, use `transform` (scale, translate) and `opacity` which run on the GPU without triggering layout.
|
|
11
|
+
|
|
12
|
+
**Incorrect (animates height, triggers layout every frame):**
|
|
13
|
+
|
|
14
|
+
```tsx
|
|
15
|
+
import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated'
|
|
16
|
+
|
|
17
|
+
function CollapsiblePanel({ expanded }: { expanded: boolean }) {
|
|
18
|
+
const animatedStyle = useAnimatedStyle(() => ({
|
|
19
|
+
height: withTiming(expanded ? 200 : 0), // triggers layout on every frame
|
|
20
|
+
overflow: 'hidden',
|
|
21
|
+
}))
|
|
22
|
+
|
|
23
|
+
return <Animated.View style={animatedStyle}>{children}</Animated.View>
|
|
24
|
+
}
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
**Correct (animates scaleY, GPU-accelerated):**
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated'
|
|
31
|
+
|
|
32
|
+
function CollapsiblePanel({ expanded }: { expanded: boolean }) {
|
|
33
|
+
const animatedStyle = useAnimatedStyle(() => ({
|
|
34
|
+
transform: [
|
|
35
|
+
{ scaleY: withTiming(expanded ? 1 : 0) },
|
|
36
|
+
],
|
|
37
|
+
opacity: withTiming(expanded ? 1 : 0),
|
|
38
|
+
}))
|
|
39
|
+
|
|
40
|
+
return (
|
|
41
|
+
<Animated.View style={[{ height: 200, transformOrigin: 'top' }, animatedStyle]}>
|
|
42
|
+
{children}
|
|
43
|
+
</Animated.View>
|
|
44
|
+
)
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
**Correct (animates translateY for slide animations):**
|
|
49
|
+
|
|
50
|
+
```tsx
|
|
51
|
+
import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated'
|
|
52
|
+
|
|
53
|
+
function SlideIn({ visible }: { visible: boolean }) {
|
|
54
|
+
const animatedStyle = useAnimatedStyle(() => ({
|
|
55
|
+
transform: [
|
|
56
|
+
{ translateY: withTiming(visible ? 0 : 100) },
|
|
57
|
+
],
|
|
58
|
+
opacity: withTiming(visible ? 1 : 0),
|
|
59
|
+
}))
|
|
60
|
+
|
|
61
|
+
return <Animated.View style={animatedStyle}>{children}</Animated.View>
|
|
62
|
+
}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
GPU-accelerated properties: `transform` (translate, scale, rotate), `opacity`. Everything else triggers layout.
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Use Compound Components Over Polymorphic Children
|
|
3
|
+
impact: MEDIUM
|
|
4
|
+
impactDescription: flexible composition, clearer API
|
|
5
|
+
tags: design-system, components, composition
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## Use Compound Components Over Polymorphic Children
|
|
9
|
+
|
|
10
|
+
Don't create components that can accept a string if they aren't a text node. If
|
|
11
|
+
a component can receive a string child, it must be a dedicated `*Text`
|
|
12
|
+
component. For components like buttons, which can have both a View (or
|
|
13
|
+
Pressable) together with text, use compound components, such a `Button`,
|
|
14
|
+
`ButtonText`, and `ButtonIcon`.
|
|
15
|
+
|
|
16
|
+
**Incorrect (polymorphic children):**
|
|
17
|
+
|
|
18
|
+
```tsx
|
|
19
|
+
import { Pressable, Text } from 'react-native'
|
|
20
|
+
|
|
21
|
+
type ButtonProps = {
|
|
22
|
+
children: string | React.ReactNode
|
|
23
|
+
icon?: React.ReactNode
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
function Button({ children, icon }: ButtonProps) {
|
|
27
|
+
return (
|
|
28
|
+
<Pressable>
|
|
29
|
+
{icon}
|
|
30
|
+
{typeof children === 'string' ? <Text>{children}</Text> : children}
|
|
31
|
+
</Pressable>
|
|
32
|
+
)
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// Usage is ambiguous
|
|
36
|
+
<Button icon={<Icon />}>Save</Button>
|
|
37
|
+
<Button><CustomText>Save</CustomText></Button>
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
**Correct (compound components):**
|
|
41
|
+
|
|
42
|
+
```tsx
|
|
43
|
+
import { Pressable, Text } from 'react-native'
|
|
44
|
+
|
|
45
|
+
function Button({ children }: { children: React.ReactNode }) {
|
|
46
|
+
return <Pressable>{children}</Pressable>
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
function ButtonText({ children }: { children: React.ReactNode }) {
|
|
50
|
+
return <Text>{children}</Text>
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
function ButtonIcon({ children }: { children: React.ReactNode }) {
|
|
54
|
+
return <>{children}</>
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// Usage is explicit and composable
|
|
58
|
+
<Button>
|
|
59
|
+
<ButtonIcon><SaveIcon /></ButtonIcon>
|
|
60
|
+
<ButtonText>Save</ButtonText>
|
|
61
|
+
</Button>
|
|
62
|
+
|
|
63
|
+
<Button>
|
|
64
|
+
<ButtonText>Cancel</ButtonText>
|
|
65
|
+
</Button>
|
|
66
|
+
```
|