171 lines
8.8 KiB
TypeScript
171 lines
8.8 KiB
TypeScript
import { Link } from 'react-router-dom';
|
|
import { specializedPlugins } from '../data/specializedPlugins';
|
|
import { usePageMeta } from '../hooks/usePageMeta';
|
|
import { buildPluginsMeta } from '../utils/seo';
|
|
|
|
const repoBaseUrl = 'https://github.com/sickn33/antigravity-awesome-skills';
|
|
|
|
function pluginFolderUrl(pluginId: string): string {
|
|
return `${repoBaseUrl}/tree/main/plugins/antigravity-bundle-${pluginId}`;
|
|
}
|
|
|
|
function pluginDocUrl(): string {
|
|
return `${repoBaseUrl}/blob/main/docs/users/plugins.md`;
|
|
}
|
|
|
|
function bundleDocUrl(): string {
|
|
return `${repoBaseUrl}/blob/main/docs/users/bundles.md`;
|
|
}
|
|
|
|
export function Plugins(): React.ReactElement {
|
|
usePageMeta(buildPluginsMeta(specializedPlugins.length));
|
|
|
|
const tierOne = specializedPlugins.filter((plugin) => plugin.priority === 'tier-1');
|
|
const tierTwo = specializedPlugins.filter((plugin) => plugin.priority === 'tier-2');
|
|
|
|
return (
|
|
<div className="relative min-h-[calc(100vh-8rem)]">
|
|
<div className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-[28rem] bg-[radial-gradient(circle_at_20%_12%,rgba(15,23,42,0.12),transparent_48%),radial-gradient(circle_at_84%_8%,rgba(99,102,241,0.16),transparent_54%)] dark:bg-[radial-gradient(circle_at_20%_12%,rgba(148,163,184,0.15),transparent_45%),radial-gradient(circle_at_84%_8%,rgba(129,140,248,0.2),transparent_52%)]" />
|
|
|
|
<div className="space-y-8 p-5 sm:p-7">
|
|
<section className="rounded-2xl border border-slate-200/80 bg-white p-6 shadow-[0_20px_55px_-32px_rgba(15,23,42,0.55)] sm:p-8 dark:border-slate-800/80 dark:bg-slate-900">
|
|
<p className="mb-3 text-xs font-semibold uppercase tracking-[0.22em] text-slate-500 dark:text-slate-400">
|
|
Specialized Plugins
|
|
</p>
|
|
<h1 className="max-w-[24ch] text-3xl font-bold tracking-tight text-slate-900 [text-wrap:balance] sm:text-[3.25rem] sm:leading-[0.97] dark:text-slate-100">
|
|
Choose the focused AAS plugin for your AI coding workflow
|
|
</h1>
|
|
<p className="mt-4 max-w-4xl text-sm leading-relaxed text-slate-600 sm:text-base dark:text-slate-300">
|
|
AAS specialized plugins are focused, domain-specific distributions of the 1,550+ skill library.
|
|
Start here when you know the job: web apps, security, data analytics, documents, DevOps, QA,
|
|
OSS maintenance, mobile apps, automation, or agent and MCP systems.
|
|
</p>
|
|
<div className="mt-6 flex flex-col gap-3 sm:flex-row sm:flex-wrap">
|
|
<a
|
|
href={pluginDocUrl()}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="inline-flex items-center justify-center rounded-lg bg-slate-900 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white"
|
|
>
|
|
Read plugin install guide
|
|
</a>
|
|
<Link
|
|
to="/"
|
|
className="inline-flex items-center justify-center rounded-lg border border-slate-400/80 bg-white/80 px-4 py-2.5 text-sm font-semibold text-slate-900 shadow-[inset_0_1px_0_rgba(255,255,255,0.9),0_10px_20px_-16px_rgba(15,23,42,0.7)] transition-colors hover:border-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800/70 dark:text-slate-100 dark:hover:bg-slate-700"
|
|
>
|
|
Browse full skill catalog
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-2xl border border-slate-200/80 bg-white p-6 shadow-sm sm:p-7 dark:border-slate-800 dark:bg-slate-900">
|
|
<p className="mb-3 text-xs font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400">
|
|
Quick Answer
|
|
</p>
|
|
<h2 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-slate-100">
|
|
Plugins, bundles, and workflows serve different decisions
|
|
</h2>
|
|
<div className="mt-5 grid gap-4 md:grid-cols-3">
|
|
<article className="rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950">
|
|
<h3 className="text-base font-semibold text-slate-900 dark:text-slate-100">Plugin</h3>
|
|
<p className="mt-2 text-sm leading-relaxed text-slate-600 dark:text-slate-300">
|
|
What should I install or activate for this domain?
|
|
</p>
|
|
</article>
|
|
<article className="rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950">
|
|
<h3 className="text-base font-semibold text-slate-900 dark:text-slate-100">Bundle</h3>
|
|
<p className="mt-2 text-sm leading-relaxed text-slate-600 dark:text-slate-300">
|
|
Which skills naturally belong together for a role?
|
|
</p>
|
|
</article>
|
|
<article className="rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950">
|
|
<h3 className="text-base font-semibold text-slate-900 dark:text-slate-100">Workflow</h3>
|
|
<p className="mt-2 text-sm leading-relaxed text-slate-600 dark:text-slate-300">
|
|
What order should the assistant follow to get a result?
|
|
</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<PluginSection title="Tier 1 Plugins" plugins={tierOne} />
|
|
<PluginSection title="Tier 2 Plugins" plugins={tierTwo} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PluginSection({
|
|
title,
|
|
plugins,
|
|
}: {
|
|
title: string;
|
|
plugins: typeof specializedPlugins;
|
|
}): React.ReactElement {
|
|
return (
|
|
<section className="space-y-4">
|
|
<div>
|
|
<p className="mb-2 text-xs font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400">
|
|
AAS plugin catalog
|
|
</p>
|
|
<h2 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-slate-100">{title}</h2>
|
|
</div>
|
|
<div className="grid gap-4 xl:grid-cols-2">
|
|
{plugins.map((plugin) => (
|
|
<article
|
|
key={plugin.id}
|
|
id={plugin.id}
|
|
className="rounded-xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900"
|
|
>
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
|
<div>
|
|
<h3 className="text-xl font-bold tracking-tight text-slate-900 dark:text-slate-100">{plugin.name}</h3>
|
|
<p className="mt-2 text-sm leading-relaxed text-slate-600 dark:text-slate-300">{plugin.audience}</p>
|
|
</div>
|
|
<span className="w-fit rounded-full border border-slate-200 bg-slate-100 px-3 py-1 text-xs font-semibold uppercase tracking-[0.14em] text-slate-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300">
|
|
{plugin.priority}
|
|
</span>
|
|
</div>
|
|
<p className="mt-4 text-sm leading-relaxed text-slate-600 dark:text-slate-300">{plugin.why}</p>
|
|
<div className="mt-4 flex flex-wrap gap-2">
|
|
{plugin.skills.slice(0, 6).map((skillId) => (
|
|
<Link
|
|
key={skillId}
|
|
to={`/skill/${encodeURIComponent(skillId)}`}
|
|
className="rounded-full border border-slate-200 bg-slate-50 px-2.5 py-1 text-xs font-medium text-slate-700 transition-colors hover:border-slate-400 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-300 dark:hover:border-slate-500"
|
|
>
|
|
@{skillId}
|
|
</Link>
|
|
))}
|
|
{plugin.skills.length > 6 && (
|
|
<span className="rounded-full border border-slate-200 bg-slate-50 px-2.5 py-1 text-xs font-medium text-slate-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-400">
|
|
+{plugin.skills.length - 6} more
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="mt-5 flex flex-col gap-2 sm:flex-row sm:flex-wrap">
|
|
<a
|
|
href={pluginFolderUrl(plugin.id)}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="inline-flex items-center justify-center rounded-lg border border-slate-300 px-3 py-2 text-sm font-semibold text-slate-800 transition-colors hover:bg-slate-100 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
|
|
>
|
|
View plugin folder
|
|
</a>
|
|
<a
|
|
href={bundleDocUrl()}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="inline-flex items-center justify-center rounded-lg border border-slate-300 px-3 py-2 text-sm font-semibold text-slate-800 transition-colors hover:bg-slate-100 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
|
|
>
|
|
Read bundle notes
|
|
</a>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default Plugins;
|