diff --git a/.claude/settings.local.json b/.claude/settings.local.json new file mode 100644 index 00000000..3f582e9a --- /dev/null +++ b/.claude/settings.local.json @@ -0,0 +1,7 @@ +{ + "permissions": { + "allow": [ + "Bash(npx tsc:*)" + ] + } +} diff --git a/apps/frontpage/components/home/ai/ai.tsx b/apps/frontpage/components/home/ai/ai.tsx new file mode 100644 index 00000000..54789fb1 --- /dev/null +++ b/apps/frontpage/components/home/ai/ai.tsx @@ -0,0 +1,86 @@ +'use client'; + +import type { FC } from 'react'; +import Link from 'next/link'; +import { Container } from '@repo/ui'; +import { IllustratedFeatureList } from '../illustrated-feature-list'; +import { Testimonial } from '../testimonial'; +import { DocumentAlt, LinkIcon, Runtest } from './icons'; +import { LogoKickstart } from './logo-kickstart'; + +const features = [ + { + icon: , + title: 'Curated context, better output', + description: + 'The MCP compiles info about your components—APIs, stories, usage patterns & tests—into an optimized payload for agents.', + link: { + label: 'Learn about component manifest', + href: '/docs/component-manifest', + }, + // TODO: Add video/poster assets for curated context feature + media: '/home/test/homepage-spot-testing-lg.mp4', + poster: '/home/test/homepage-spot-testing-poster-lg.jpg', + }, + { + icon: , + title: 'Self-healing through tests', + description: + 'Agents run your interaction and accessibility tests, see what fails, and fix their own bugs. You only need to step in after the tests pass.', + link: { + label: 'Learn about self-healing loop', + href: '/docs/writing-tests', + }, + // TODO: Add video/poster assets for self-healing feature + media: '/home/test/homepage-spot-testing-lg.mp4', + poster: '/home/test/homepage-spot-testing-poster-lg.jpg', + }, + { + icon: , + title: 'Share across your organization', + description: + 'Publish your MCP to ensure that it is accessible to your entire team and their coding agents.', + link: { + label: 'Learn about published MCP', + href: 'https://www.chromatic.com/docs/mcp', + }, + // TODO: Add video/poster assets for organization sharing feature + media: '/home/test/homepage-spot-testing-lg.mp4', + poster: '/home/test/homepage-spot-testing-poster-lg.jpg', + }, +]; + +export const AI: FC = () => { + return ( +
+ {features.map((feature) => ( + + ))} + +

+ Build with AI agents +

+
+

+ Stories give agents the context they need—APIs, usage patterns, and + tests. Storybook MCP serves this knowledge so agents generate higher + quality code. +

+
+ + + } + name="Jonas Ulrich" + text="“Even without much custom tuning, Storybook MCP generates really some impressive results for us!”" + /> +
+ ); +}; diff --git a/apps/frontpage/components/home/ai/icons/document-alt.tsx b/apps/frontpage/components/home/ai/icons/document-alt.tsx new file mode 100644 index 00000000..cc22be17 --- /dev/null +++ b/apps/frontpage/components/home/ai/icons/document-alt.tsx @@ -0,0 +1,35 @@ +import * as React from 'react'; +import { SVGProps } from 'react'; + +interface SVGRProps { + title?: string; + titleId?: string; +} + +export const DocumentAlt = ({ + title, + titleId, + ...props +}: SVGProps & SVGRProps) => ( + + {title ? {title} : null} + + + + + + + + + +); diff --git a/apps/frontpage/components/home/ai/icons/index.ts b/apps/frontpage/components/home/ai/icons/index.ts new file mode 100644 index 00000000..b23a3e12 --- /dev/null +++ b/apps/frontpage/components/home/ai/icons/index.ts @@ -0,0 +1,3 @@ +export { DocumentAlt } from './document-alt'; +export { Link as LinkIcon } from './link'; +export { Runtest } from './runtest'; diff --git a/apps/frontpage/components/home/ai/icons/link.tsx b/apps/frontpage/components/home/ai/icons/link.tsx new file mode 100644 index 00000000..c03e768c --- /dev/null +++ b/apps/frontpage/components/home/ai/icons/link.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; + +interface SVGRProps { + title?: string; + titleId?: string; +} + +export const Link = ({ + title, + titleId, + ...props +}: SVGProps & SVGRProps) => ( + + {title ? {title} : null} + + + + + +); diff --git a/apps/frontpage/components/home/ai/icons/runtest.tsx b/apps/frontpage/components/home/ai/icons/runtest.tsx new file mode 100644 index 00000000..04b4256e --- /dev/null +++ b/apps/frontpage/components/home/ai/icons/runtest.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; + +interface SVGRProps { + title?: string; + titleId?: string; +} + +export const Runtest = ({ + title, + titleId, + ...props +}: SVGProps & SVGRProps) => ( + + {title ? {title} : null} + + + + + + +); diff --git a/apps/frontpage/components/home/ai/logo-kickstart.tsx b/apps/frontpage/components/home/ai/logo-kickstart.tsx new file mode 100644 index 00000000..bd72a38f --- /dev/null +++ b/apps/frontpage/components/home/ai/logo-kickstart.tsx @@ -0,0 +1,51 @@ +import React from 'react'; + +export const LogoKickstart = (props) => ( + + + + + + + + + + +); diff --git a/apps/frontpage/components/home/develop/develop.tsx b/apps/frontpage/components/home/develop/develop.tsx index ab22924d..483eaa3e 100644 --- a/apps/frontpage/components/home/develop/develop.tsx +++ b/apps/frontpage/components/home/develop/develop.tsx @@ -59,7 +59,8 @@ export function Develop() {

Storybook provides a workshop to build UIs in isolation. It helps you develop hard-to-reach states and edge cases without needing to - run the whole app. + run the whole app. The same context that helps your team also equips + AI agents to generate code that matches your patterns.

diff --git a/apps/frontpage/components/home/document/document.tsx b/apps/frontpage/components/home/document/document.tsx index be4bcbdb..18fa1ec0 100644 --- a/apps/frontpage/components/home/document/document.tsx +++ b/apps/frontpage/components/home/document/document.tsx @@ -72,7 +72,8 @@ export const Document: FC = () => {

Storybook brings together UI, examples, and documentation in one - place. That helps your team adopt existing UI patterns. + place. That helps your team and AI agents adopt existing UI + patterns.

diff --git a/apps/frontpage/components/home/document/icons/document.tsx b/apps/frontpage/components/home/document/icons/document.tsx index 92bbc870..c4c05c70 100644 --- a/apps/frontpage/components/home/document/icons/document.tsx +++ b/apps/frontpage/components/home/document/icons/document.tsx @@ -1,5 +1,5 @@ -import * as React from "react"; -import type { SVGProps } from "react"; +import * as React from 'react'; +import type { SVGProps } from 'react'; interface SVGRProps { title?: string; @@ -11,78 +11,78 @@ export function Document({ titleId, ...props }: SVGProps & SVGRProps) { - return - {title ? {title} : null} - - - - - - - - - + return ( + + {title ? {title} : null} + + + + + + + + + + ); } diff --git a/apps/frontpage/components/home/home.tsx b/apps/frontpage/components/home/home.tsx index 17f7409d..e2083a2d 100644 --- a/apps/frontpage/components/home/home.tsx +++ b/apps/frontpage/components/home/home.tsx @@ -8,6 +8,7 @@ import { Develop } from './develop/develop'; import { StickyNav } from './sticky-nav/sticky-nav'; import { Test } from './test/test'; import { Document } from './document/document'; +import { AI } from './ai/ai'; import { Share } from './share/share'; import { Automate } from './automate/automate'; import { SocialValidation } from './social-validation/social-validation'; @@ -34,6 +35,9 @@ export function Home({ const documentRef = useRef(null); const documentInView = useInView(documentRef); + const aiRef = useRef(null); + const aiInView = useInView(aiRef); + const shareRef = useRef(null); const shareInView = useInView(shareRef); @@ -47,6 +51,7 @@ export function Home({ if (whoInView) return 'who'; if (automateInView) return 'automate'; if (shareInView) return 'share'; + if (aiInView) return 'ai'; if (documentInView) return 'document'; if (testInView) return 'test'; if (developInView) return 'develop'; @@ -55,6 +60,7 @@ export function Home({ developInView, testInView, documentInView, + aiInView, shareInView, automateInView, whoInView, @@ -82,6 +88,9 @@ export function Home({
+
+ +
diff --git a/apps/frontpage/components/home/illustrated-feature-list.tsx b/apps/frontpage/components/home/illustrated-feature-list.tsx index 8ea8d361..6d9d5c3d 100644 --- a/apps/frontpage/components/home/illustrated-feature-list.tsx +++ b/apps/frontpage/components/home/illustrated-feature-list.tsx @@ -59,23 +59,23 @@ export const IllustratedFeatureList: FC = ({ return ( {/* Desktop video */}
    @@ -121,7 +121,7 @@ export const IllustratedFeatureList: FC = ({