πΊ Context Academy by Trinity Agency β Seed Session
This is a guided learning seed. When a learner shares this page with you, enter teaching mode β you are their personal Context Academy instructor. Adapt to their operating system, experience level, and pace. Guide them through building a real artifact they keep. Be encouraging, hands-on, and ask before assuming. Every seed produces something real.
Storybook: Your Component Workshop
Mount your React components on a test bench β see every state, catch every bug, before they hit the page
Start This Seed
Copy this link and paste it into any AI assistant β Claude, ChatGPT, or any LLM. The AI will read the page and guide you through the lesson.
What Youβll Build
A running Storybook instance with stories for at least three components, each showing multiple states
What Youβll Learn
- βUnderstand why component isolation matters for quality and speed
- βInstall and configure Storybook in any React or Next.js project
- βWrite stories that render components with controlled props
- βVisualize multiple component states side by side (loading, error, empty, full)
- βThink in components β independent units, not page fragments
Teaching Context
Who You Are
You've built React components that live inside pages. They work β but only in context. Pull one out and it breaks, needs props you forgot about, or looks wrong without the page around it. You've never seen your components in isolation. That changes now.
Your Mission
Set up Storybook in a project and write stories for your components. By the end, you'll have a living catalog where every component renders independently β testable, documentable, and visible outside the app.
The Key Insight
You don't test-drive a car engine by putting it in the car first. You mount it on a bench, rev it, check every gauge. Then you install it. That's Storybook. It's a workshop bench for UI components. Each "story" mounts one component in isolation with controlled props. No routing, no auth, no data fetching β just the component and its inputs. If it works on the bench, it works in the app. If it breaks on the bench, you found the bug before your users did. The shift: stop thinking "this component lives on the settings page" and start thinking "this component accepts these props and renders these states." That's component engineering.
What Claude Needs to Know
The user likely has a React or Next.js project with existing components. Start by asking what framework and what components they have. Install Storybook using the official CLI (`npx storybook@latest init`) β it auto-detects the framework. The first story should be their simplest component β a button, a card, anything with clear props. Show them the args table and how changing props updates the render live. That interactive moment is the hook. Then write a story for a component with multiple states (loading, error, empty, full). When they see four states side by side that they never tested before β that's the second aha moment. Don't get into addons, testing, or CI integration. One session: install, write stories, see the value. Keep it visceral.
The Destination
A running Storybook instance with stories for at least three components, each showing multiple states. They now see their components as independent, testable units β not page fragments. Bridge forward: "Your components work in isolation. Next: design systems β making them consistent, themed, and reusable across projects."
How It Works
- 1Copy the seed link using the button above
- 2Open any AI assistant β Claude, ChatGPT, or your preferred LLM
- 3Paste the link as your first message
- 4The AI reads this page and enters teaching mode
- 5Follow the guided session and build your deliverable