natureco-cli 5.18.2 → 5.19.0
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/package.json +1 -1
- package/skills/airunway-aks-setup/SKILL.md +73 -0
- package/skills/algorithmic-art/SKILL.md +405 -0
- package/skills/appinsights-instrumentation/SKILL.md +76 -0
- package/skills/azure-ai/SKILL.md +71 -0
- package/skills/azure-aigateway/SKILL.md +129 -0
- package/skills/azure-cloud-migrate/SKILL.md +52 -0
- package/skills/azure-compliance/SKILL.md +108 -0
- package/skills/azure-compute/SKILL.md +46 -0
- package/skills/azure-cost/SKILL.md +45 -0
- package/skills/azure-deploy/SKILL.md +97 -0
- package/skills/azure-diagnostics/SKILL.md +151 -0
- package/skills/azure-enterprise-infra-planner/SKILL.md +54 -0
- package/skills/azure-hosted-copilot-sdk/SKILL.md +89 -0
- package/skills/azure-kubernetes/SKILL.md +153 -0
- package/skills/azure-kusto/SKILL.md +231 -0
- package/skills/azure-messaging/SKILL.md +57 -0
- package/skills/azure-prepare/SKILL.md +165 -0
- package/skills/azure-quotas/SKILL.md +276 -0
- package/skills/azure-rbac/SKILL.md +17 -0
- package/skills/azure-reliability/SKILL.md +387 -0
- package/skills/azure-resource-lookup/SKILL.md +108 -0
- package/skills/azure-resource-visualizer/SKILL.md +183 -0
- package/skills/azure-storage/SKILL.md +100 -0
- package/skills/azure-upgrade/SKILL.md +91 -0
- package/skills/azure-validate/SKILL.md +72 -0
- package/skills/brainstorming/SKILL.md +159 -0
- package/skills/brand-guidelines/SKILL.md +73 -0
- package/skills/brandkit/SKILL.md +798 -0
- package/skills/brutalist-skill/SKILL.md +92 -0
- package/skills/canvas-design/SKILL.md +130 -0
- package/skills/cavecrew/SKILL.md +82 -0
- package/skills/caveman-commit/SKILL.md +65 -0
- package/skills/caveman-help/SKILL.md +63 -0
- package/skills/caveman-review/SKILL.md +55 -0
- package/skills/caveman-stats/SKILL.md +10 -0
- package/skills/claude-api/SKILL.md +356 -0
- package/skills/composition-patterns/SKILL.md +89 -0
- package/skills/decision-mapping/SKILL.md +84 -0
- package/skills/deploy-to-vercel/SKILL.md +296 -0
- package/skills/design-an-interface/SKILL.md +94 -0
- package/skills/design-doc-mermaid/SKILL.md +498 -0
- package/skills/develop-userscripts/SKILL.md +84 -0
- package/skills/doc-coauthoring/SKILL.md +375 -0
- package/skills/documentation/SKILL.md +109 -0
- package/skills/docx/SKILL.md +590 -0
- package/skills/edit-article/SKILL.md +15 -0
- package/skills/entra-agent-id/SKILL.md +356 -0
- package/skills/entra-app-registration/SKILL.md +191 -0
- package/skills/faceless-explainer/SKILL.md +202 -0
- package/skills/fastify/SKILL.md +75 -0
- package/skills/general-video/SKILL.md +143 -0
- package/skills/git-guardrails-claude-code/SKILL.md +95 -0
- package/skills/github-actions-docs/SKILL.md +98 -0
- package/skills/gpt-tasteskill/SKILL.md +74 -0
- package/skills/grill-me/SKILL.md +7 -0
- package/skills/grilling/SKILL.md +10 -0
- package/skills/handoff/SKILL.md +16 -0
- package/skills/hyperframes/SKILL.md +152 -0
- package/skills/hyperframes-animation/SKILL.md +82 -0
- package/skills/hyperframes-cli/SKILL.md +109 -0
- package/skills/hyperframes-core/SKILL.md +78 -0
- package/skills/hyperframes-creative/SKILL.md +68 -0
- package/skills/hyperframes-media/SKILL.md +97 -0
- package/skills/image-to-code-skill/SKILL.md +1228 -0
- package/skills/imagegen-frontend-mobile/SKILL.md +1465 -0
- package/skills/imagegen-frontend-web/SKILL.md +987 -0
- package/skills/implement/SKILL.md +15 -0
- package/skills/init/SKILL.md +91 -0
- package/skills/internal-comms/SKILL.md +32 -0
- package/skills/lark-approval/SKILL.md +56 -0
- package/skills/lark-base/SKILL.md +157 -0
- package/skills/lark-doc/SKILL.md +81 -0
- package/skills/lark-shared/SKILL.md +168 -0
- package/skills/lark-workflow-meeting-summary/SKILL.md +122 -0
- package/skills/linting-neostandard-eslint9/SKILL.md +64 -0
- package/skills/loop-me/SKILL.md +32 -0
- package/skills/microsoft-foundry/SKILL.md +262 -0
- package/skills/migrate-to-shoehorn/SKILL.md +118 -0
- package/skills/minimalist-skill/SKILL.md +85 -0
- package/skills/motion-graphics/SKILL.md +170 -0
- package/skills/music-to-video/SKILL.md +197 -0
- package/skills/node/SKILL.md +94 -0
- package/skills/nodejs-core/SKILL.md +156 -0
- package/skills/oauth/SKILL.md +186 -0
- package/skills/obsidian-vault/SKILL.md +59 -0
- package/skills/octocat/SKILL.md +93 -0
- package/skills/openclaw-secure-linux-cloud/SKILL.md +157 -0
- package/skills/opensource-guide-coach/SKILL.md +218 -0
- package/skills/output-skill/SKILL.md +49 -0
- package/skills/pdf/SKILL.md +314 -0
- package/skills/pptx/SKILL.md +232 -0
- package/skills/pr-to-video/SKILL.md +235 -0
- package/skills/product-launch-video/SKILL.md +205 -0
- package/skills/python-appservice-deploy/SKILL.md +36 -0
- package/skills/qa/SKILL.md +130 -0
- package/skills/react-best-practices/SKILL.md +149 -0
- package/skills/react-native-skills/SKILL.md +121 -0
- package/skills/react-view-transitions/SKILL.md +320 -0
- package/skills/readme-i18n/SKILL.md +176 -0
- package/skills/redesign-skill/SKILL.md +178 -0
- package/skills/remotion/SKILL.md +364 -0
- package/skills/request-refactor-plan/SKILL.md +68 -0
- package/skills/resolving-merge-conflicts/SKILL.md +14 -0
- package/skills/running-claude-code-via-litellm-copilot/SKILL.md +263 -0
- package/skills/scaffold-exercises/SKILL.md +106 -0
- package/skills/secure-linux-web-hosting/SKILL.md +162 -0
- package/skills/setup-pre-commit/SKILL.md +91 -0
- package/skills/shadcn/SKILL.md +267 -0
- package/skills/simple/SKILL.md +52 -0
- package/skills/skill-creator/SKILL.md +485 -0
- package/skills/skill-optimizer/SKILL.md +47 -0
- package/skills/skills-cli/SKILL.md +281 -0
- package/skills/slack-gif-creator/SKILL.md +254 -0
- package/skills/snipgrapher/SKILL.md +58 -0
- package/skills/soft-skill/SKILL.md +98 -0
- package/skills/stitch-skill/SKILL.md +184 -0
- package/skills/supabase/SKILL.md +135 -0
- package/skills/supabase-postgres-best-practices/SKILL.md +64 -0
- package/skills/systematic-debugging/SKILL.md +296 -0
- package/skills/talking-head-recut/SKILL.md +1191 -0
- package/skills/taste-skill/SKILL.md +1206 -0
- package/skills/taste-skill-v1/SKILL.md +226 -0
- package/skills/tdd/SKILL.md +108 -0
- package/skills/teach/SKILL.md +140 -0
- package/skills/test-driven-development/SKILL.md +371 -0
- package/skills/theme-factory/SKILL.md +59 -0
- package/skills/to-prd/SKILL.md +75 -0
- package/skills/typescript-magician/SKILL.md +117 -0
- package/skills/tzst/SKILL.md +68 -0
- package/skills/ubiquitous-language/SKILL.md +93 -0
- package/skills/use-my-browser/SKILL.md +110 -0
- package/skills/using-superpowers/SKILL.md +121 -0
- package/skills/vercel-cli-with-tokens/SKILL.md +353 -0
- package/skills/vercel-optimize/SKILL.md +322 -0
- package/skills/viral-instagram-reels/SKILL.md +180 -0
- package/skills/viral-short-form/SKILL.md +147 -0
- package/skills/viral-short-form-ideas/SKILL.md +184 -0
- package/skills/viral-tiktok-content/SKILL.md +180 -0
- package/skills/web-artifacts-builder/SKILL.md +74 -0
- package/skills/web-design-guidelines/SKILL.md +39 -0
- package/skills/webapp-testing/SKILL.md +96 -0
- package/skills/website-to-video/SKILL.md +145 -0
- package/skills/writing-beats/SKILL.md +67 -0
- package/skills/writing-fragments/SKILL.md +79 -0
- package/skills/writing-great-skills/SKILL.md +82 -0
- package/skills/writing-guidelines/SKILL.md +39 -0
- package/skills/writing-plans/SKILL.md +174 -0
- package/skills/writing-shape/SKILL.md +79 -0
- package/skills/xdrop/SKILL.md +78 -0
- package/skills/xget/SKILL.md +87 -0
- package/skills/xlsx/SKILL.md +292 -0
- package/src/tools/browser_use.js +2 -1
- package/src/tools/skills_download.js +217 -0
- package/src/utils/tools.js +2 -2
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: high-end-visual-design
|
|
3
|
+
description: Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Agent Skill: Principal UI/UX Architect & Motion Choreographer (Awwwards-Tier)
|
|
7
|
+
|
|
8
|
+
## 1. Meta Information & Core Directive
|
|
9
|
+
- **Persona:** `Vanguard_UI_Architect`
|
|
10
|
+
- **Objective:** You engineer $150k+ agency-level digital experiences, not just websites. Your output must exude haptic depth, cinematic spatial rhythm, obsessive micro-interactions, and flawless fluid motion.
|
|
11
|
+
- **The Variance Mandate:** NEVER generate the exact same layout or aesthetic twice in a row. You must dynamically combine different premium layout archetypes and texture profiles while strictly adhering to the elite "Apple-esque / Linear-tier" design language.
|
|
12
|
+
|
|
13
|
+
## 2. THE "ABSOLUTE ZERO" DIRECTIVE (STRICT ANTI-PATTERNS)
|
|
14
|
+
If your generated code includes ANY of the following, the design instantly fails:
|
|
15
|
+
- **Banned Fonts:** Inter, Roboto, Arial, Open Sans, Helvetica. (Assume premium fonts like `Geist`, `Clash Display`, `PP Editorial New`, or `Plus Jakarta Sans` are available).
|
|
16
|
+
- **Banned Icons:** Standard thick-stroked Lucide, FontAwesome, or Material Icons. Use only ultra-light, precise lines (e.g., Phosphor Light, Remix Line).
|
|
17
|
+
- **Banned Borders & Shadows:** Generic 1px solid gray borders. Harsh, dark drop shadows (`shadow-md`, `rgba(0,0,0,0.3)`).
|
|
18
|
+
- **Banned Layouts:** Edge-to-edge sticky navbars glued to the top. Symmetrical, boring 3-column Bootstrap-style grids without massive whitespace gaps.
|
|
19
|
+
- **Banned Motion:** Standard `linear` or `ease-in-out` transitions. Instant state changes without interpolation.
|
|
20
|
+
|
|
21
|
+
## 3. THE CREATIVE VARIANCE ENGINE
|
|
22
|
+
Before writing code, silently "roll the dice" and select ONE combination from the following archetypes based on the prompt's context to ensure the output is uniquely tailored but always premium:
|
|
23
|
+
|
|
24
|
+
### A. Vibe & Texture Archetypes (Pick 1)
|
|
25
|
+
1. **Ethereal Glass (SaaS / AI / Tech):** Deepest OLED black (`#050505`), radial mesh gradients (e.g., subtle glowing purple/emerald orbs) in the background. Vantablack cards with heavy `backdrop-blur-2xl` and pure white/10 hairlines. Wide geometric Grotesk typography.
|
|
26
|
+
2. **Editorial Luxury (Lifestyle / Real Estate / Agency):** Warm creams (`#FDFBF7`), muted sage, or deep espresso tones. High-contrast Variable Serif fonts for massive headings. Subtle CSS noise/film-grain overlay (`opacity-[0.03]`) for a physical paper feel.
|
|
27
|
+
3. **Soft Structuralism (Consumer / Health / Portfolio):** Silver-grey or completely white backgrounds. Massive bold Grotesk typography. Airy, floating components with unbelievably soft, highly diffused ambient shadows.
|
|
28
|
+
|
|
29
|
+
### B. Layout Archetypes (Pick 1)
|
|
30
|
+
1. **The Asymmetrical Bento:** A masonry-like CSS Grid of varying card sizes (e.g., `col-span-8 row-span-2` next to stacked `col-span-4` cards) to break visual monotony.
|
|
31
|
+
- **Mobile Collapse:** Falls back to a single-column stack (`grid-cols-1`) with generous vertical gaps (`gap-6`). All `col-span` overrides reset to `col-span-1`.
|
|
32
|
+
2. **The Z-Axis Cascade:** Elements are stacked like physical cards, slightly overlapping each other with varying depths of field, some with a subtle `-2deg` or `3deg` rotation to break the digital grid.
|
|
33
|
+
- **Mobile Collapse:** Remove all rotations and negative-margin overlaps below `768px`. Stack vertically with standard spacing. Overlapping elements cause touch-target conflicts on mobile.
|
|
34
|
+
3. **The Editorial Split:** Massive typography on the left half (`w-1/2`), with interactive, scrollable horizontal image pills or staggered interactive cards on the right.
|
|
35
|
+
- **Mobile Collapse:** Converts to a full-width vertical stack (`w-full`). Typography block sits on top, interactive content flows below with horizontal scroll preserved if needed.
|
|
36
|
+
|
|
37
|
+
**Mobile Override (Universal):** Any asymmetric layout above `md:` MUST aggressively fall back to `w-full`, `px-4`, `py-8` on viewports below `768px`. Never use `h-screen` for full-height sections — always use `min-h-[100dvh]` to prevent iOS Safari viewport jumping.
|
|
38
|
+
|
|
39
|
+
## 4. HAPTIC MICRO-AESTHETICS (COMPONENT MASTERY)
|
|
40
|
+
|
|
41
|
+
### A. The "Double-Bezel" (Doppelrand / Nested Architecture)
|
|
42
|
+
Never place a premium card, image, or container flatly on the background. They must look like physical, machined hardware (like a glass plate sitting in an aluminum tray) using nested enclosures.
|
|
43
|
+
- **Outer Shell:** A wrapper `div` with a subtle background (`bg-black/5` or `bg-white/5`), a hairline outer border (`ring-1 ring-black/5` or `border border-white/10`), a specific padding (e.g., `p-1.5` or `p-2`), and a large outer radius (`rounded-[2rem]`).
|
|
44
|
+
- **Inner Core:** The actual content container inside the shell. It has its own distinct background color, its own inner highlight (`shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)]`), and a mathematically calculated smaller radius (e.g., `rounded-[calc(2rem-0.375rem)]`) for concentric curves.
|
|
45
|
+
|
|
46
|
+
### B. Nested CTA & "Island" Button Architecture
|
|
47
|
+
- **Structure:** Primary interactive buttons must be fully rounded pills (`rounded-full`) with generous padding (`px-6 py-3`).
|
|
48
|
+
- **The "Button-in-Button" Trailing Icon:** If a button has an arrow (`↗`), it NEVER sits naked next to the text. It must be nested inside its own distinct circular wrapper (e.g., `w-8 h-8 rounded-full bg-black/5 dark:bg-white/10 flex items-center justify-center`) placed completely flush with the main button's right inner padding.
|
|
49
|
+
|
|
50
|
+
### C. Spatial Rhythm & Tension
|
|
51
|
+
- **Macro-Whitespace:** Double your standard padding. Use `py-24` to `py-40` for sections. Allow the design to breathe heavily.
|
|
52
|
+
- **Eyebrow Tags:** Precede major H1/H2s with a microscopic, pill-shaped badge (`rounded-full px-3 py-1 text-[10px] uppercase tracking-[0.2em] font-medium`).
|
|
53
|
+
|
|
54
|
+
## 5. MOTION CHOREOGRAPHY (FLUID DYNAMICS)
|
|
55
|
+
Never use default transitions. All motion must simulate real-world mass and spring physics. Use custom cubic-beziers (e.g., `transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]`).
|
|
56
|
+
|
|
57
|
+
### A. The "Fluid Island" Nav & Hamburger Reveal
|
|
58
|
+
- **Closed State:** The Navbar is a floating glass pill detached from the top (`mt-6`, `mx-auto`, `w-max`, `rounded-full`).
|
|
59
|
+
- **The Hamburger Morph:** On click, the 2 or 3 lines of the hamburger icon must fluidly rotate and translate to form a perfect 'X' (`rotate-45` and `-rotate-45` with absolute positioning), not just disappear.
|
|
60
|
+
- **The Modal Expansion:** The menu should open as a massive, screen-filling overlay with a heavy glass effect (`backdrop-blur-3xl bg-black/80` or `bg-white/80`).
|
|
61
|
+
- **Staggered Mask Reveal:** The navigation links inside the expanded state do not just appear. They fade in and slide up from an invisible box (`translate-y-12 opacity-0` to `translate-y-0 opacity-100`) with a staggered delay (`delay-100`, `delay-150`, `delay-200` for each item).
|
|
62
|
+
|
|
63
|
+
### B. Magnetic Button Hover Physics
|
|
64
|
+
- Use the `group` utility. On hover, do not just change the background color.
|
|
65
|
+
- Scale the entire button down slightly (`active:scale-[0.98]`) to simulate physical pressing.
|
|
66
|
+
- The nested inner icon circle should translate diagonally (`group-hover:translate-x-1 group-hover:-translate-y-[1px]`) and scale up slightly (`scale-105`), creating internal kinetic tension.
|
|
67
|
+
|
|
68
|
+
### C. Scroll Interpolation (Entry Animations)
|
|
69
|
+
- Elements never appear statically on load. As they enter the viewport, they must execute a gentle, heavy fade-up (`translate-y-16 blur-md opacity-0` resolving to `translate-y-0 blur-0 opacity-100` over 800ms+).
|
|
70
|
+
- For JavaScript-driven scroll reveals, use `IntersectionObserver` or Framer Motion's `whileInView`. Never use `window.addEventListener('scroll')` — it causes continuous reflows and kills mobile performance.
|
|
71
|
+
|
|
72
|
+
## 6. PERFORMANCE GUARDRAILS
|
|
73
|
+
- **GPU-Safe Animation:** Never animate `top`, `left`, `width`, or `height`. Animate exclusively via `transform` and `opacity`. Use `will-change: transform` sparingly and only on elements that are actively animating.
|
|
74
|
+
- **Blur Constraints:** Apply `backdrop-blur` only to fixed or sticky elements (navbars, overlays). Never apply blur filters to scrolling containers or large content areas — this causes continuous GPU repaints and severe mobile frame drops.
|
|
75
|
+
- **Grain/Noise Overlays:** Apply noise textures exclusively to fixed, `pointer-events-none` pseudo-elements (`position: fixed; inset: 0; z-index: 50`). Never attach them to scrolling containers.
|
|
76
|
+
- **Z-Index Discipline:** Do not use arbitrary `z-50` or `z-[9999]`. Reserve z-indexes strictly for systemic layers: sticky nav, modals, overlays, tooltips.
|
|
77
|
+
|
|
78
|
+
## 7. EXECUTION PROTOCOL
|
|
79
|
+
When generating UI code, follow this exact sequence:
|
|
80
|
+
1. **[SILENT THOUGHT]** Roll the Variance Engine (Section 3). Choose your Vibe and Layout Archetypes based on the prompt's context to ensure a unique output.
|
|
81
|
+
2. **[SCAFFOLD]** Establish the background texture, macro-whitespace scale, and massive typography sizes.
|
|
82
|
+
3. **[ARCHITECT]** Build the DOM strictly using the "Double-Bezel" (Doppelrand) technique for all major cards, inputs, and feature grids. Use exaggerated squircle radii (`rounded-[2rem]`).
|
|
83
|
+
4. **[CHOREOGRAPH]** Inject the custom `cubic-bezier` transitions, the staggered navigation reveals, and the button-in-button hover physics.
|
|
84
|
+
5. **[OUTPUT]** Deliver flawless, pixel-perfect React/Tailwind/HTML code. Do not include basic, generic fallbacks.
|
|
85
|
+
|
|
86
|
+
## 8. PRE-OUTPUT CHECKLIST
|
|
87
|
+
Evaluate your code against this matrix before delivering. This is the last filter.
|
|
88
|
+
- [ ] No banned fonts, icons, borders, shadows, layouts, or motion patterns from Section 2 are present
|
|
89
|
+
- [ ] A Vibe Archetype and Layout Archetype from Section 3 were consciously selected and applied
|
|
90
|
+
- [ ] All major cards and containers use the Double-Bezel nested architecture (outer shell + inner core)
|
|
91
|
+
- [ ] CTA buttons use the Button-in-Button trailing icon pattern where applicable
|
|
92
|
+
- [ ] Section padding is at minimum `py-24` — the layout breathes heavily
|
|
93
|
+
- [ ] All transitions use custom cubic-bezier curves — no `linear` or `ease-in-out`
|
|
94
|
+
- [ ] Scroll entry animations are present — no element appears statically
|
|
95
|
+
- [ ] Layout collapses gracefully below `768px` to single-column with `w-full` and `px-4`
|
|
96
|
+
- [ ] All animations use only `transform` and `opacity` — no layout-triggering properties
|
|
97
|
+
- [ ] `backdrop-blur` is only applied to fixed/sticky elements, never to scrolling content
|
|
98
|
+
- [ ] The overall impression reads as "$150k agency build", not "template with nice fonts"
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: stitch-design-taste
|
|
3
|
+
description: Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Stitch Design Taste — Semantic Design System Skill
|
|
7
|
+
|
|
8
|
+
## Overview
|
|
9
|
+
This skill generates `DESIGN.md` files optimized for Google Stitch screen generation. It translates the battle-tested anti-slop frontend engineering directives into Stitch's native semantic design language — descriptive, natural-language rules paired with precise values that Stitch's AI agent can interpret to produce premium, non-generic interfaces.
|
|
10
|
+
|
|
11
|
+
The generated `DESIGN.md` serves as the **single source of truth** for prompting Stitch to generate new screens that align with a curated, high-agency design language. Stitch interprets design through **"Visual Descriptions"** supported by specific color values, typography specs, and component behaviors.
|
|
12
|
+
|
|
13
|
+
## Prerequisites
|
|
14
|
+
- Access to Google Stitch via [labs.google/stitch](https://labs.google/stitch)
|
|
15
|
+
- Optionally: Stitch MCP Server for programmatic integration with Cursor, Antigravity, or Gemini CLI
|
|
16
|
+
|
|
17
|
+
## The Goal
|
|
18
|
+
Generate a `DESIGN.md` file that encodes:
|
|
19
|
+
1. **Visual atmosphere** — the mood, density, and design philosophy
|
|
20
|
+
2. **Color calibration** — neutrals, accents, and banned patterns with hex codes
|
|
21
|
+
3. **Typographic architecture** — font stacks, scale hierarchy, and anti-patterns
|
|
22
|
+
4. **Component behaviors** — buttons, cards, inputs with interaction states
|
|
23
|
+
5. **Layout principles** — grid systems, spacing philosophy, responsive strategy
|
|
24
|
+
6. **Motion philosophy** — animation engine specs, spring physics, perpetual micro-interactions
|
|
25
|
+
7. **Anti-patterns** — explicit list of banned AI design clichés
|
|
26
|
+
|
|
27
|
+
## Analysis & Synthesis Instructions
|
|
28
|
+
|
|
29
|
+
### 1. Define the Atmosphere
|
|
30
|
+
Evaluate the target project's intent. Use evocative adjectives from the taste spectrum:
|
|
31
|
+
- **Density:** "Art Gallery Airy" (1–3) → "Daily App Balanced" (4–7) → "Cockpit Dense" (8–10)
|
|
32
|
+
- **Variance:** "Predictable Symmetric" (1–3) → "Offset Asymmetric" (4–7) → "Artsy Chaotic" (8–10)
|
|
33
|
+
- **Motion:** "Static Restrained" (1–3) → "Fluid CSS" (4–7) → "Cinematic Choreography" (8–10)
|
|
34
|
+
|
|
35
|
+
Default baseline: Variance 8, Motion 6, Density 4. Adapt dynamically based on user's vibe description.
|
|
36
|
+
|
|
37
|
+
### 2. Map the Color Palette
|
|
38
|
+
For each color provide: **Descriptive Name** + **Hex Code** + **Functional Role**.
|
|
39
|
+
|
|
40
|
+
**Mandatory constraints:**
|
|
41
|
+
- Maximum 1 accent color. Saturation below 80%
|
|
42
|
+
- The "AI Purple/Blue Neon" aesthetic is strictly BANNED — no purple button glows, no neon gradients
|
|
43
|
+
- Use absolute neutral bases (Zinc/Slate) with high-contrast singular accents
|
|
44
|
+
- Stick to one palette for the entire output — no warm/cool gray fluctuation
|
|
45
|
+
- Never use pure black (`#000000`) — use Off-Black, Zinc-950, or Charcoal
|
|
46
|
+
|
|
47
|
+
### 3. Establish Typography Rules
|
|
48
|
+
- **Display/Headlines:** Track-tight, controlled scale. Not screaming. Hierarchy through weight and color, not just massive size
|
|
49
|
+
- **Body:** Relaxed leading, max 65 characters per line
|
|
50
|
+
- **Font Selection:** `Inter` is BANNED for premium/creative contexts. Force unique character: `Geist`, `Outfit`, `Cabinet Grotesk`, or `Satoshi`
|
|
51
|
+
- **Serif Ban:** Generic serif fonts (`Times New Roman`, `Georgia`, `Garamond`, `Palatino`) are BANNED. If serif is needed for editorial/creative contexts, use only distinctive modern serifs: `Fraunces`, `Gambarino`, `Editorial New`, or `Instrument Serif`. Serif is always BANNED in dashboards or software UIs
|
|
52
|
+
- **Dashboard Constraint:** Use Sans-Serif pairings exclusively (`Geist` + `Geist Mono` or `Satoshi` + `JetBrains Mono`)
|
|
53
|
+
- **High-Density Override:** When density exceeds 7, all numbers must use Monospace
|
|
54
|
+
|
|
55
|
+
### 4. Define the Hero Section
|
|
56
|
+
The Hero is the first impression and must be creative, striking, and never generic:
|
|
57
|
+
- **Inline Image Typography:** Embed small, contextual photos or visuals directly between words or letters in the headline. Images sit inline at type-height, rounded, acting as visual punctuation. This is the signature creative technique
|
|
58
|
+
- **No Overlapping:** Text must never overlap images or other text. Every element occupies its own clean spatial zone
|
|
59
|
+
- **No Filler Text:** "Scroll to explore", "Swipe down", scroll arrow icons, bouncing chevrons are BANNED. The content should pull users in naturally
|
|
60
|
+
- **Asymmetric Structure:** Centered Hero layouts BANNED when variance exceeds 4
|
|
61
|
+
- **CTA Restraint:** Maximum one primary CTA. No secondary "Learn more" links
|
|
62
|
+
|
|
63
|
+
### 5. Describe Component Stylings
|
|
64
|
+
For each component type, describe shape, color, shadow depth, and interaction behavior:
|
|
65
|
+
- **Buttons:** Tactile push feedback on active state. No neon outer glows. No custom mouse cursors
|
|
66
|
+
- **Cards:** Use ONLY when elevation communicates hierarchy. Tint shadows to background hue. For high-density layouts, replace cards with border-top dividers or negative space
|
|
67
|
+
- **Inputs/Forms:** Label above input, helper text optional, error text below. Standard gap spacing
|
|
68
|
+
- **Loading States:** Skeletal loaders matching layout dimensions — no generic circular spinners
|
|
69
|
+
- **Empty States:** Composed compositions indicating how to populate data
|
|
70
|
+
- **Error States:** Clear, inline error reporting
|
|
71
|
+
|
|
72
|
+
### 6. Define Layout Principles
|
|
73
|
+
- No overlapping elements — every element occupies its own clear spatial zone. No absolute-positioned content stacking
|
|
74
|
+
- Centered Hero sections are BANNED when variance exceeds 4 — force Split Screen, Left-Aligned, or Asymmetric Whitespace
|
|
75
|
+
- The generic "3 equal cards horizontally" feature row is BANNED — use 2-column Zig-Zag, asymmetric grid, or horizontal scroll
|
|
76
|
+
- CSS Grid over Flexbox math — never use `calc()` percentage hacks
|
|
77
|
+
- Contain layouts using max-width constraints (e.g., 1400px centered)
|
|
78
|
+
- Full-height sections must use `min-h-[100dvh]` — never `h-screen` (iOS Safari catastrophic jump)
|
|
79
|
+
|
|
80
|
+
### 7. Define Responsive Rules
|
|
81
|
+
Every design must work across all viewports:
|
|
82
|
+
- **Mobile-First Collapse (< 768px):** All multi-column layouts collapse to single column. No exceptions
|
|
83
|
+
- **No Horizontal Scroll:** Horizontal overflow on mobile is a critical failure
|
|
84
|
+
- **Typography Scaling:** Headlines scale via `clamp()`. Body text minimum `1rem`/`14px`
|
|
85
|
+
- **Touch Targets:** All interactive elements minimum `44px` tap target
|
|
86
|
+
- **Image Behavior:** Inline typography images (photos between words) stack below headline on mobile
|
|
87
|
+
- **Navigation:** Desktop horizontal nav collapses to clean mobile menu
|
|
88
|
+
- **Spacing:** Vertical section gaps reduce proportionally (`clamp(3rem, 8vw, 6rem)`)
|
|
89
|
+
|
|
90
|
+
### 8. Encode Motion Philosophy
|
|
91
|
+
- **Spring Physics default:** `stiffness: 100, damping: 20` — premium, weighty feel. No linear easing
|
|
92
|
+
- **Perpetual Micro-Interactions:** Every active component should have an infinite loop state (Pulse, Typewriter, Float, Shimmer)
|
|
93
|
+
- **Staggered Orchestration:** Never mount lists instantly — use cascade delays for waterfall reveals
|
|
94
|
+
- **Performance:** Animate exclusively via `transform` and `opacity`. Never animate `top`, `left`, `width`, `height`. Grain/noise filters on fixed pseudo-elements only
|
|
95
|
+
|
|
96
|
+
### 9. List Anti-Patterns (AI Tells)
|
|
97
|
+
Encode these as explicit "NEVER DO" rules in the DESIGN.md:
|
|
98
|
+
- No emojis anywhere
|
|
99
|
+
- No `Inter` font
|
|
100
|
+
- No generic serif fonts (`Times New Roman`, `Georgia`, `Garamond`) — distinctive modern serifs only if needed
|
|
101
|
+
- No pure black (`#000000`)
|
|
102
|
+
- No neon/outer glow shadows
|
|
103
|
+
- No oversaturated accents
|
|
104
|
+
- No excessive gradient text on large headers
|
|
105
|
+
- No custom mouse cursors
|
|
106
|
+
- No overlapping elements — clean spatial separation always
|
|
107
|
+
- No 3-column equal card layouts
|
|
108
|
+
- No generic names ("John Doe", "Acme", "Nexus")
|
|
109
|
+
- No fake round numbers (`99.99%`, `50%`)
|
|
110
|
+
- No AI copywriting clichés ("Elevate", "Seamless", "Unleash", "Next-Gen")
|
|
111
|
+
- No filler UI text: "Scroll to explore", "Swipe down", scroll arrows, bouncing chevrons
|
|
112
|
+
- No broken Unsplash links — use `picsum.photos` or SVG avatars
|
|
113
|
+
- No centered Hero sections (for high-variance projects)
|
|
114
|
+
|
|
115
|
+
## Output Format (DESIGN.md Structure)
|
|
116
|
+
|
|
117
|
+
```markdown
|
|
118
|
+
# Design System: [Project Title]
|
|
119
|
+
|
|
120
|
+
## 1. Visual Theme & Atmosphere
|
|
121
|
+
(Evocative description of the mood, density, variance, and motion intensity.
|
|
122
|
+
Example: "A restrained, gallery-airy interface with confident asymmetric layouts
|
|
123
|
+
and fluid spring-physics motion. The atmosphere is clinical yet warm — like a
|
|
124
|
+
well-lit architecture studio.")
|
|
125
|
+
|
|
126
|
+
## 2. Color Palette & Roles
|
|
127
|
+
- **Canvas White** (#F9FAFB) — Primary background surface
|
|
128
|
+
- **Pure Surface** (#FFFFFF) — Card and container fill
|
|
129
|
+
- **Charcoal Ink** (#18181B) — Primary text, Zinc-950 depth
|
|
130
|
+
- **Muted Steel** (#71717A) — Secondary text, descriptions, metadata
|
|
131
|
+
- **Whisper Border** (rgba(226,232,240,0.5)) — Card borders, 1px structural lines
|
|
132
|
+
- **[Accent Name]** (#XXXXXX) — Single accent for CTAs, active states, focus rings
|
|
133
|
+
(Max 1 accent. Saturation < 80%. No purple/neon.)
|
|
134
|
+
|
|
135
|
+
## 3. Typography Rules
|
|
136
|
+
- **Display:** [Font Name] — Track-tight, controlled scale, weight-driven hierarchy
|
|
137
|
+
- **Body:** [Font Name] — Relaxed leading, 65ch max-width, neutral secondary color
|
|
138
|
+
- **Mono:** [Font Name] — For code, metadata, timestamps, high-density numbers
|
|
139
|
+
- **Banned:** Inter, generic system fonts for premium contexts. Serif fonts banned in dashboards.
|
|
140
|
+
|
|
141
|
+
## 4. Component Stylings
|
|
142
|
+
* **Buttons:** Flat, no outer glow. Tactile -1px translate on active. Accent fill for primary, ghost/outline for secondary.
|
|
143
|
+
* **Cards:** Generously rounded corners (2.5rem). Diffused whisper shadow. Used only when elevation serves hierarchy. High-density: replace with border-top dividers.
|
|
144
|
+
* **Inputs:** Label above, error below. Focus ring in accent color. No floating labels.
|
|
145
|
+
* **Loaders:** Skeletal shimmer matching exact layout dimensions. No circular spinners.
|
|
146
|
+
* **Empty States:** Composed, illustrated compositions — not just "No data" text.
|
|
147
|
+
|
|
148
|
+
## 5. Layout Principles
|
|
149
|
+
(Grid-first responsive architecture. Asymmetric splits for Hero sections.
|
|
150
|
+
Strict single-column collapse below 768px. Max-width containment.
|
|
151
|
+
No flexbox percentage math. Generous internal padding.)
|
|
152
|
+
|
|
153
|
+
## 6. Motion & Interaction
|
|
154
|
+
(Spring physics for all interactive elements. Staggered cascade reveals.
|
|
155
|
+
Perpetual micro-loops on active dashboard components. Hardware-accelerated
|
|
156
|
+
transforms only. Isolated Client Components for CPU-heavy animations.)
|
|
157
|
+
|
|
158
|
+
## 7. Anti-Patterns (Banned)
|
|
159
|
+
(Explicit list of forbidden patterns: no emojis, no Inter, no pure black,
|
|
160
|
+
no neon glows, no 3-column equal grids, no AI copywriting clichés,
|
|
161
|
+
no generic placeholder names, no broken image links.)
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
## Best Practices
|
|
165
|
+
- **Be Descriptive:** "Deep Charcoal Ink (#18181B)" — not just "dark text"
|
|
166
|
+
- **Be Functional:** Explain what each element is used for
|
|
167
|
+
- **Be Consistent:** Same terminology throughout the document
|
|
168
|
+
- **Be Precise:** Include exact hex codes, rem values, pixel values in parentheses
|
|
169
|
+
- **Be Opinionated:** This is not a neutral template — it enforces a specific, premium aesthetic
|
|
170
|
+
|
|
171
|
+
## Tips for Success
|
|
172
|
+
1. Start with the atmosphere — understand the vibe before detailing tokens
|
|
173
|
+
2. Look for patterns — identify consistent spacing, sizing, and styling
|
|
174
|
+
3. Think semantically — name colors by purpose, not just appearance
|
|
175
|
+
4. Consider hierarchy — document how visual weight communicates importance
|
|
176
|
+
5. Encode the bans — anti-patterns are as important as the rules themselves
|
|
177
|
+
|
|
178
|
+
## Common Pitfalls to Avoid
|
|
179
|
+
- Using technical jargon without translation ("rounded-xl" instead of "generously rounded corners")
|
|
180
|
+
- Omitting hex codes or using only descriptive names
|
|
181
|
+
- Forgetting functional roles of design elements
|
|
182
|
+
- Being too vague in atmosphere descriptions
|
|
183
|
+
- Ignoring the anti-pattern list — these are what make the output premium
|
|
184
|
+
- Defaulting to generic "safe" designs instead of enforcing the curated aesthetic
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: supabase
|
|
3
|
+
description: "Use when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge Functions, Realtime, Storage, Vectors, Cron, Queues); client libraries and SSR integrations (supabase-js, @supabase/ssr) in Next.js, React, SvelteKit, Astro, Remix; auth issues (login, logout, sessions, JWT, cookies, getSession, getUser, getClaims, RLS); Supabase CLI or MCP server; schema changes, migrations, security audits, Postgres extensions (pg_graphql, pg_cron, pg_vector)."
|
|
4
|
+
metadata:
|
|
5
|
+
author: supabase
|
|
6
|
+
version: "0.1.2"
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# Supabase
|
|
10
|
+
|
|
11
|
+
## Core Principles
|
|
12
|
+
|
|
13
|
+
**1. Supabase changes frequently — verify against changelog and current docs before implementing.**
|
|
14
|
+
Do not rely on training data for Supabase features. Function signatures, config.toml settings, and API conventions change between versions.
|
|
15
|
+
|
|
16
|
+
First, fetch `https://supabase.com/changelog.md` (a lightweight summary index — not a heavy pull), scan for `breaking-change` tags relevant to your task, and follow the linked page for any that apply. Then look up the relevant topic using the documentation access methods below.
|
|
17
|
+
|
|
18
|
+
**2. Verify your work.**
|
|
19
|
+
After implementing any fix, run a test query to confirm the change works. A fix without verification is incomplete.
|
|
20
|
+
|
|
21
|
+
**3. Recover from errors, don't loop.**
|
|
22
|
+
If an approach fails after 2-3 attempts, stop and reconsider. Try a different method, check documentation, inspect the error more carefully, and review relevant logs when available. Supabase issues are not always solved by retrying the same command, and the answer is not always in the logs, but logs are often worth checking before proceeding.
|
|
23
|
+
|
|
24
|
+
**4. Exposing tables to the Data API:** Depending on the user's [Data API settings](https://supabase.com/dashboard/project/<ref>/integrations/data_api/settings), newly created tables may not be automatically exposed via the Data (REST) API. If this is the case, `anon` and `authenticated` roles will need to be explicitly granted access.
|
|
25
|
+
|
|
26
|
+
> Note that this is separate from RLS, which controls which _rows_ are visible once a table is accessible, not whether the table is accessible at all.
|
|
27
|
+
|
|
28
|
+
When a user reports a SQL-created table is unexpectedly inaccessible, check their Data API settings and whether the roles have been granted access via explicit `GRANT` SQL. When granting public (`anon`/`authenticated`) access, always enable RLS too. See [Exposing a Table to the Data API](https://supabase.com/docs/guides/api/securing-your-api.md) for the full setup workflow.
|
|
29
|
+
|
|
30
|
+
**5. RLS in exposed schemas.**
|
|
31
|
+
Enable RLS on every table in any exposed schema, which includes `public` by default. This is critical in Supabase because tables in exposed schemas can be reachable through the Data API when the `anon`/`authenticated` roles have access (see [Exposing a Table to the Data API](https://supabase.com/docs/guides/api/securing-your-api.md)). For private schemas, prefer RLS as defense in depth. After enabling RLS, create policies that match the actual access model rather than defaulting every table to the same `auth.uid()` pattern.
|
|
32
|
+
|
|
33
|
+
**6. Security checklist.**
|
|
34
|
+
When working on any Supabase task that touches auth, RLS, views, storage, or user data, run through this checklist. These are Supabase-specific security traps that silently create vulnerabilities:
|
|
35
|
+
|
|
36
|
+
- **Auth and session security**
|
|
37
|
+
- **Never use `user_metadata` claims in JWT-based authorization decisions.** In Supabase, `raw_user_meta_data` is user-editable and can appear in `auth.jwt()`, so it is unsafe for RLS policies or any other authorization logic. Store authorization data in `raw_app_meta_data` / `app_metadata` instead.
|
|
38
|
+
- **Deleting a user does not invalidate existing access tokens.** Sign out or revoke sessions first, keep JWT expiry short for sensitive apps, and for strict guarantees validate `session_id` against `auth.sessions` on sensitive operations.
|
|
39
|
+
- **If you use `app_metadata` or `auth.jwt()` for authorization, remember JWT claims are not always fresh until the user's token is refreshed.**
|
|
40
|
+
|
|
41
|
+
- **API key and client exposure**
|
|
42
|
+
- **Never expose the `service_role` or secret key in public clients.** Prefer publishable keys for frontend code. Legacy `anon` keys are only for compatibility. In Next.js, any `NEXT_PUBLIC_` env var is sent to the browser.
|
|
43
|
+
|
|
44
|
+
- **RLS, views, and privileged database code**
|
|
45
|
+
- **Views bypass RLS by default.** In Postgres 15 and above, use `CREATE VIEW ... WITH (security_invoker = true)`. In older versions of Postgres, protect your views by revoking access from the `anon` and `authenticated` roles, or by putting them in an unexposed schema.
|
|
46
|
+
- **UPDATE requires a SELECT policy.** In Postgres RLS, an UPDATE needs to first SELECT the row. Without a SELECT policy, updates silently return 0 rows — no error, just no change.
|
|
47
|
+
- **`auth.role()` is deprecated — use the `TO` clause instead.** Supabase has deprecated `auth.role()` in favour of specifying the target role directly on the policy with `TO authenticated` or `TO anon`. Beyond deprecation, `auth.role() = 'authenticated'` breaks silently when anonymous sign-ins are enabled, because anonymous users carry the `authenticated` Postgres role and pass the check regardless of whether the user is genuinely signed in.
|
|
48
|
+
```sql
|
|
49
|
+
-- Deprecated (do not use)
|
|
50
|
+
create policy "example" on table_name for select
|
|
51
|
+
using ( auth.role() = 'authenticated' );
|
|
52
|
+
```
|
|
53
|
+
- **`TO authenticated` alone is authentication without authorization (BOLA / IDOR).** Using `TO authenticated` only checks the role — it does not restrict which rows a user can access. The correct pattern combines `TO authenticated` with an ownership predicate in `USING`:
|
|
54
|
+
```sql
|
|
55
|
+
create policy "example" on table_name for select
|
|
56
|
+
to authenticated
|
|
57
|
+
using ( (select auth.uid()) = user_id );
|
|
58
|
+
```
|
|
59
|
+
- **UPDATE policies require both `USING` and `WITH CHECK`.** Without `WITH CHECK`, a user can reassign a row's `user_id` to another user:
|
|
60
|
+
```sql
|
|
61
|
+
create policy "example" on table_name for update
|
|
62
|
+
to authenticated
|
|
63
|
+
using ( (select auth.uid()) = user_id )
|
|
64
|
+
with check ( (select auth.uid()) = user_id );
|
|
65
|
+
```
|
|
66
|
+
- **`SECURITY DEFINER` functions bypass RLS.** A `SECURITY DEFINER` function runs with its creator's privileges — typically a role with `bypassrls` (e.g., `postgres`). Never add `SECURITY DEFINER` to resolve a permission error; it silently removes access control without fixing the underlying cause. Prefer `SECURITY INVOKER`.
|
|
67
|
+
- **`SECURITY DEFINER` functions in `public` are callable by all roles.** Postgres grants `EXECUTE` to `PUBLIC` by default for every new function, so any `SECURITY DEFINER` function in `public` is a public API endpoint callable by `anon` and `authenticated` (which inherit from `PUBLIC`) without any additional grant. When `SECURITY DEFINER` is genuinely needed (e.g., bypassing RLS on an internal lookup table), keep the function in a non-exposed schema, always include an `auth.uid()` check in the function body, and run `supabase db advisors` after making changes.
|
|
68
|
+
|
|
69
|
+
- **Storage access control**
|
|
70
|
+
- **Storage upsert requires INSERT + SELECT + UPDATE.** Granting only INSERT allows new uploads but file replacement (upsert) silently fails. You need all three.
|
|
71
|
+
|
|
72
|
+
- **Dependency and supply-chain security**
|
|
73
|
+
- **Always pin package versions and commit lockfiles** when installing Supabase packages (`supabase-js`, `@supabase/ssr`, `supabase-py`, etc.). See the [npm security guide](https://supabase.com/docs/guides/security/npm-security.md) for the full checklist.
|
|
74
|
+
|
|
75
|
+
For any security concern not covered above, fetch the Supabase product security index: `https://supabase.com/docs/guides/security/product-security.md`
|
|
76
|
+
|
|
77
|
+
## Supabase CLI
|
|
78
|
+
|
|
79
|
+
Always discover commands via `--help` — never guess. The CLI structure changes between versions.
|
|
80
|
+
|
|
81
|
+
```bash
|
|
82
|
+
supabase --help # All top-level commands
|
|
83
|
+
supabase <group> --help # Subcommands (e.g., supabase db --help)
|
|
84
|
+
supabase <group> <command> --help # Flags for a specific command
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
**Supabase CLI Known gotchas:**
|
|
88
|
+
|
|
89
|
+
- `supabase db query` requires **CLI v2.79.0+** → use MCP `execute_sql` or `psql` as fallback
|
|
90
|
+
- `supabase db advisors` requires **CLI v2.81.3+** → use MCP `get_advisors` as fallback
|
|
91
|
+
- When you need a new migration SQL file, **always** create it with `supabase migration new <name>` first. Never invent a migration filename or rely on memory for the expected format.
|
|
92
|
+
|
|
93
|
+
**Version check and upgrade:** Run `supabase --version` to check. For CLI changelogs and version-specific features, consult the [CLI documentation](https://supabase.com/docs/reference/cli/introduction) or [GitHub releases](https://github.com/supabase/cli/releases).
|
|
94
|
+
|
|
95
|
+
## Supabase MCP Server
|
|
96
|
+
|
|
97
|
+
For setup instructions, server URL, and configuration, see the [MCP setup guide](https://supabase.com/docs/guides/getting-started/mcp).
|
|
98
|
+
|
|
99
|
+
**Troubleshooting connection issues** — follow these steps in order:
|
|
100
|
+
|
|
101
|
+
1. **Check if the server is reachable:**
|
|
102
|
+
`curl -so /dev/null -w "%{http_code}" https://mcp.supabase.com/mcp`
|
|
103
|
+
A `401` is expected (no token) and means the server is up. Timeout or "connection refused" means it may be down.
|
|
104
|
+
|
|
105
|
+
2. **Check `.mcp.json` configuration:**
|
|
106
|
+
Verify the project root has a valid `.mcp.json` with the correct server URL. If missing, create one pointing to `https://mcp.supabase.com/mcp`.
|
|
107
|
+
|
|
108
|
+
3. **Authenticate the MCP server:**
|
|
109
|
+
If the server is reachable and `.mcp.json` is correct but tools aren't visible, the user needs to authenticate. The Supabase MCP server uses OAuth 2.1 — tell the user to trigger the auth flow in their agent, complete it in the browser, and reload the session.
|
|
110
|
+
|
|
111
|
+
## Supabase Documentation
|
|
112
|
+
|
|
113
|
+
Before implementing any Supabase feature, find the relevant documentation. Use these methods in priority order:
|
|
114
|
+
|
|
115
|
+
1. **MCP `search_docs` tool** (preferred — returns relevant snippets directly)
|
|
116
|
+
2. **Fetch docs pages as markdown** — any docs page can be fetched by appending `.md` to the URL path.
|
|
117
|
+
3. **Web search** for Supabase-specific topics when you don't know which page to look at.
|
|
118
|
+
|
|
119
|
+
## Making and Committing Schema Changes
|
|
120
|
+
|
|
121
|
+
**To make schema changes, use `execute_sql` (MCP) or `supabase db query` (CLI).** These run SQL directly on the database without creating migration history entries, so you can iterate freely and generate a clean migration when ready.
|
|
122
|
+
|
|
123
|
+
Do NOT use `apply_migration` to change a local database schema — it writes a migration history entry on every call, which means you can't iterate, and `supabase db diff` / `supabase db pull` will produce empty or conflicting diffs. If you use it, you'll be stuck with whatever SQL you passed on the first try.
|
|
124
|
+
|
|
125
|
+
**When ready to commit** your changes to a migration file:
|
|
126
|
+
|
|
127
|
+
1. **Run advisors** → `supabase db advisors` (CLI v2.81.3+) or MCP `get_advisors`. Fix any issues.
|
|
128
|
+
2. **Review the Security Checklist above** if your changes involve views, functions, triggers, or storage.
|
|
129
|
+
3. **Generate the migration** → `supabase db pull <descriptive-name> --local --yes`
|
|
130
|
+
4. **Verify** → `supabase migration list --local`
|
|
131
|
+
|
|
132
|
+
## Reference Guides
|
|
133
|
+
|
|
134
|
+
- **Skill Feedback** → [references/skill-feedback.md](references/skill-feedback.md)
|
|
135
|
+
**MUST read when** the user reports that this skill gave incorrect guidance or is missing information.
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: supabase-postgres-best-practices
|
|
3
|
+
description: Postgres performance optimization and best practices from Supabase. Use this skill when writing, reviewing, or optimizing Postgres queries, schema designs, or database configurations.
|
|
4
|
+
license: MIT
|
|
5
|
+
metadata:
|
|
6
|
+
author: supabase
|
|
7
|
+
version: "1.1.1"
|
|
8
|
+
organization: Supabase
|
|
9
|
+
date: January 2026
|
|
10
|
+
abstract: Comprehensive Postgres performance optimization guide for developers using Supabase and Postgres. Contains performance rules across 8 categories, prioritized by impact from critical (query performance, connection management) to incremental (advanced features). Each rule includes detailed explanations, incorrect vs. correct SQL examples, query plan analysis, and specific performance metrics to guide automated optimization and code generation.
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# Supabase Postgres Best Practices
|
|
14
|
+
|
|
15
|
+
Comprehensive performance optimization guide for Postgres, maintained by Supabase. Contains rules across 8 categories, prioritized by impact to guide automated query optimization and schema design.
|
|
16
|
+
|
|
17
|
+
## When to Apply
|
|
18
|
+
|
|
19
|
+
Reference these guidelines when:
|
|
20
|
+
- Writing SQL queries or designing schemas
|
|
21
|
+
- Implementing indexes or query optimization
|
|
22
|
+
- Reviewing database performance issues
|
|
23
|
+
- Configuring connection pooling or scaling
|
|
24
|
+
- Optimizing for Postgres-specific features
|
|
25
|
+
- Working with Row-Level Security (RLS)
|
|
26
|
+
|
|
27
|
+
## Rule Categories by Priority
|
|
28
|
+
|
|
29
|
+
| Priority | Category | Impact | Prefix |
|
|
30
|
+
|----------|----------|--------|--------|
|
|
31
|
+
| 1 | Query Performance | CRITICAL | `query-` |
|
|
32
|
+
| 2 | Connection Management | CRITICAL | `conn-` |
|
|
33
|
+
| 3 | Security & RLS | CRITICAL | `security-` |
|
|
34
|
+
| 4 | Schema Design | HIGH | `schema-` |
|
|
35
|
+
| 5 | Concurrency & Locking | MEDIUM-HIGH | `lock-` |
|
|
36
|
+
| 6 | Data Access Patterns | MEDIUM | `data-` |
|
|
37
|
+
| 7 | Monitoring & Diagnostics | LOW-MEDIUM | `monitor-` |
|
|
38
|
+
| 8 | Advanced Features | LOW | `advanced-` |
|
|
39
|
+
|
|
40
|
+
## How to Use
|
|
41
|
+
|
|
42
|
+
Read individual rule files for detailed explanations and SQL examples:
|
|
43
|
+
|
|
44
|
+
```
|
|
45
|
+
references/query-missing-indexes.md
|
|
46
|
+
references/query-partial-indexes.md
|
|
47
|
+
references/_sections.md
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
Each rule file contains:
|
|
51
|
+
- Brief explanation of why it matters
|
|
52
|
+
- Incorrect SQL example with explanation
|
|
53
|
+
- Correct SQL example with explanation
|
|
54
|
+
- Optional EXPLAIN output or metrics
|
|
55
|
+
- Additional context and references
|
|
56
|
+
- Supabase-specific notes (when applicable)
|
|
57
|
+
|
|
58
|
+
## References
|
|
59
|
+
|
|
60
|
+
- https://www.postgresql.org/docs/current/
|
|
61
|
+
- https://supabase.com/docs
|
|
62
|
+
- https://wiki.postgresql.org/wiki/Performance_Optimization
|
|
63
|
+
- https://supabase.com/docs/guides/database/overview
|
|
64
|
+
- https://supabase.com/docs/guides/auth/row-level-security
|