Your next site starts here.

1// You: "Add a Pricing page and put it in the nav."
2// The velocity-add-page skill guides your agent through:
3 
4src/views/PricingView.astro          // page content
5src/pages/pricing.astro              // default locale
6src/pages/[lang]/[...pricing].astro  // localized URLs
7src/config/nav.config.ts             // route and menu
8src/i18n/translations/en.ts          // page copy

1/* src/styles/themes/default.css — swap this file to re-theme */
2:root {
3  /* Semantic Tokens - Light Mode */
4  --background: var(--gray-0);
5  --foreground: var(--gray-900);
6  --border: var(--gray-200);
7  --primary: var(--gray-900);
8  --primary-foreground: var(--gray-0);
9  --accent: var(--brand-500);
10  --card: var(--gray-0);
11  --ring: var(--gray-900);
12}
13 
14/* Dark Mode */
15.dark {
16  --background: var(--gray-950);
17  --foreground: var(--gray-50);
18  --border: var(--gray-800);
19  --primary: var(--gray-0);
20  --primary-foreground: var(--gray-900);
21}

1---
2// src/components/seo/SEO.astro
3import siteConfig from '@/config/site.config';
4 
5interface Props {
6  title?: string;
7  description?: string;
8  image?: string;
9}
10 
11const { title, description, image } = Astro.props;
12const canonicalURL = new URL(Astro.url.pathname, Astro.site);
13 
14// Auto-generate OG image if none provided
15const ogImage = image || `/og/${Astro.url.pathname}.png`;
16---
17 
18<title>{title}</title>
19<meta name="description" content={description} />
20<link rel="canonical" href={canonicalURL.toString()} />
21<meta property="og:title" content={title} />
22<meta property="og:image" content={ogImage} />

1---
2// src/pages/index.astro
3import LandingLayout from '@/layouts/LandingLayout.astro';
4import { Hero } from '@/components/hero';
5import { TerminalDemo } from '@/components/ui/marketing/TerminalDemo';
6import FeatureTabs from '@/components/landing/FeatureTabs.tsx';
7import TechStack from '@/components/landing/TechStack.astro';
8---
9 
10<!-- Static Astro components - ships 0kb JS -->
11<Hero layout="split" size="lg">
12  <!-- React component - hydrates immediately -->
13  <TerminalDemo slot="aside" client:load />
14</Hero>
15 
16<!-- Static HTML, no JS -->
17<TechStack />
18 
19<!-- React component - hydrates when scrolled into view -->
20<FeatureTabs client:visible />

1// src/components/ui/form/Button/Button.tsx
2import { type Ref } from 'react';
3import { cn } from '@/lib/cn';
4import { isExternalUrl } from '@/lib/utils';
5import { buttonVariants, type ButtonVariants } from './button.variants';
6 
7interface BaseProps {
8  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;
9  variant?: ButtonVariants['variant'];
10  size?: ButtonVariants['size'];
11  loading?: boolean;
12  href?: string;
13  children: React.ReactNode;
14}
15 
16export function Button({ ref, variant = 'primary', size = 'md', href, ...rest }: BaseProps) {
17  const classes = cn(buttonVariants({ variant, size }), rest.className);
18  const isExternal = href ? isExternalUrl(href) : false;
19 
20  if (href) {
21    return <a ref={ref} href={href} className={classes} target={isExternal ? '_blank' : undefined} />;
22  }
23  return <button ref={ref} className={classes} {...rest} />;
24}

1// src/i18n/config.ts (with --i18n flag)
2export const languages = {
3  en: 'English',
4  es: 'Español',
5  fr: 'Français',
6} as const;
7 
8export const defaultLang = 'en';
9 
10// src/i18n/translations/en.ts
11export default {
12  'nav.home': 'Home',
13  'nav.about': 'About',
14  'hero.title': 'Ship faster with Velocity',
15  'hero.subtitle': 'The modern Astro starter',
16} as const;
17 
18// Usage in components
19import { t } from '@/i18n';
20const title = t('hero.title'); // "Ship faster..."

1// src/content.config.ts
2import { defineCollection } from 'astro:content';
3import { z } from 'astro/zod';
4import { glob } from 'astro/loaders';
5 
6const blog = defineCollection({
7  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/blog' }),
8  schema: ({ image }) =>
9    z.object({
10      title: z.string().max(100),
11      description: z.string().max(200),
12      publishedAt: z.coerce.date(),
13      updatedAt: z.coerce.date().optional(),
14      author: z.string().default('Team'),
15      image: image().optional(),
16      tags: z.array(z.string()).default([]),
17      featured: z.boolean().default(false),
18      draft: z.boolean().default(false),
19      locale: z.enum(['en', 'es', 'fr']).default('en'),
20    }),
21});
22 
23export const collections = { blog, pages, authors, faqs };
24// + Pagefind indexes all content at build time