mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 20:35:07 +03:00
6153497500
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Docs update — Rewrite the Agent Skills documentation as a single flat page with a skills table. ## What is the current behavior? The Agent Skills docs have a nested structure with an index page and individual dynamic pages for each skill (fetched from the `supabase/agent-skills` repo). Skills also inject sub-items into the sidebar navigation. ## What is the new behavior? This PR replaces the nested skill pages with a single, flat Agent Skills page that: - Lists all skills in a **table** with name, description, and a **copy-to-install button** (fetched dynamically from the [supabase/agent-skills](https://github.com/supabase/agent-skills) repo) - Includes **installation commands** for both the skills CLI (`npx skills add`) and Claude Code plugins - Links skill names directly to their source on GitHub instead of rendering full skill content inline - Removes the dynamic `[slug]` route, sidebar nav injection, and local skill example files ### Navigation Structure ``` Start > AI Tools > Agent Skills (new) > Prompts (existing) > Supabase MCP server (existing) ``` Closes [AI-361](https://linear.app/supabase/issue/AI-361/create-skills-documentation-page-in-ai-tooling-docs) --------- Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
112 lines
3.9 KiB
TypeScript
112 lines
3.9 KiB
TypeScript
import { ArrowDown, Check, X } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { Badge, Button } from 'ui'
|
|
import { Admonition, type AdmonitionProps } from 'ui-patterns/admonition'
|
|
import { GlassPanel } from 'ui-patterns/GlassPanel'
|
|
import { IconPanel } from 'ui-patterns/IconPanel'
|
|
import SqlToRest from 'ui-patterns/SqlToRest'
|
|
import { Heading } from 'ui/src/components/CustomHTMLElements'
|
|
import { AiPromptsIndex } from '~/app/guides/getting-started/ai-prompts/[slug]/AiPromptsIndex'
|
|
import { AiSkillsIndex } from '~/app/guides/getting-started/ai-skills/AiSkillsIndex'
|
|
import { AppleSecretGenerator } from '~/components/AppleSecretGenerator'
|
|
import AuthProviders from '~/components/AuthProviders'
|
|
import { AuthSmsProviderConfig } from '~/components/AuthSmsProviderConfig'
|
|
import { CostWarning } from '~/components/AuthSmsProviderConfig/AuthSmsProviderConfig.Warnings'
|
|
import ButtonCard from '~/components/ButtonCard'
|
|
import { Extensions } from '~/components/Extensions'
|
|
import Image, { type ImageProps } from '~/components/Image'
|
|
import { JwtGenerator, JwtGeneratorSimple } from '~/components/JwtGenerator'
|
|
import { MetricsStackCards } from '~/components/MetricsStackCards'
|
|
import { NavData } from '~/components/NavData'
|
|
import { Price } from '~/components/Price'
|
|
import { ProjectConfigVariables } from '~/components/ProjectConfigVariables'
|
|
import { RealtimeLimitsEstimator } from '~/components/RealtimeLimitsEstimator'
|
|
import { ComputeDiskLimitsTable } from '~/components/ComputeDiskLimitsTable'
|
|
import { RegionsList, SmartRegionsList } from '~/components/RegionsList'
|
|
import { SharedData } from '~/components/SharedData'
|
|
import StepHikeCompact from '~/components/StepHikeCompact'
|
|
import { CodeSampleDummy, CodeSampleWrapper } from '~/features/directives/CodeSample.client'
|
|
import { NamedCodeBlock } from '~/features/directives/CodeTabs.components'
|
|
import { Accordion, AccordionItem } from '~/features/ui/Accordion'
|
|
import { CodeBlock } from '~/features/ui/CodeBlock/CodeBlock'
|
|
import InfoTooltip from '~/features/ui/InfoTooltip'
|
|
import { ShowUntil } from '~/features/ui/ShowUntil'
|
|
import { TabPanel, Tabs } from '~/features/ui/Tabs'
|
|
import { ErrorCodes } from '../ui/ErrorCodes'
|
|
import { McpConfigPanel } from '../ui/McpConfigPanel'
|
|
|
|
// Wrap Admonition for Docs-specific styling (within MDX prose, requires a margin-bottom)
|
|
const AdmonitionWithMargin = (props: AdmonitionProps) => {
|
|
return <Admonition {...props} className="mb-8" />
|
|
}
|
|
|
|
const components = {
|
|
Accordion,
|
|
AccordionItem,
|
|
Admonition: AdmonitionWithMargin,
|
|
AiPromptsIndex,
|
|
AiSkillsIndex,
|
|
AuthSmsProviderConfig,
|
|
AppleSecretGenerator,
|
|
AuthProviders,
|
|
Badge,
|
|
Button,
|
|
ButtonCard,
|
|
CodeSampleDummy,
|
|
CodeSampleWrapper,
|
|
ComputeDiskLimitsTable,
|
|
CostWarning,
|
|
ErrorCodes,
|
|
Extensions,
|
|
GlassPanel,
|
|
IconArrowDown: ArrowDown,
|
|
IconCheck: Check,
|
|
IconPanel,
|
|
IconX: X,
|
|
Image: (props: ImageProps) => <Image className="rounded-md w-full" {...props} />,
|
|
JwtGenerator,
|
|
JwtGeneratorSimple,
|
|
Link,
|
|
McpConfigPanel,
|
|
MetricsStackCards,
|
|
NamedCodeBlock,
|
|
NavData,
|
|
ProjectConfigVariables,
|
|
RealtimeLimitsEstimator,
|
|
RegionsList,
|
|
SmartRegionsList,
|
|
SharedData,
|
|
ShowUntil,
|
|
SqlToRest,
|
|
StepHikeCompact,
|
|
Tabs,
|
|
TabPanel,
|
|
InfoTooltip,
|
|
h2: (props: any) => (
|
|
<Heading tag="h2" {...props}>
|
|
{props.children}
|
|
</Heading>
|
|
),
|
|
h3: (props: any) => (
|
|
<Heading tag="h3" {...props}>
|
|
{props.children}
|
|
</Heading>
|
|
),
|
|
h4: (props: any) => (
|
|
<Heading tag="h4" {...props}>
|
|
{props.children}
|
|
</Heading>
|
|
),
|
|
pre: CodeBlock,
|
|
/**
|
|
* Force inline code tags to go sync, this prevents Heading anchor resolution fail due to
|
|
* our CodeBlock component being async. We need to find a better solution for more future
|
|
* proof MDX rendering. Definitely improving the anchors utility in the ui/Heading component
|
|
* plus having a more resilient highlighting strategy.
|
|
*/
|
|
code: (props: any) => <code {...props}>{props.children}</code>,
|
|
Price,
|
|
}
|
|
|
|
export { components }
|