Wireframe Kit & Getting Started
Everything you need to start building prototypes with Claude, Cursor, or ChatGPT. Download the kit, copy a prompt, and start creating.
Quick Start
Download the wireframe kit zip and extract it to your projects folder.
npm install && npm run devOpen localhost:3000 to see the experiment index.
Tell Claude: "Use the wireframe kit to build [your idea]" — copy prompts below for inspiration.
Context Handoff with CLAUDE.md
Automatic context syncing between Claude sessions
VibeSharing automatically imports CLAUDE.md files when you deploy, keeping your project context in sync without manual copy/paste.
Claude writes CLAUDE.md
Maintains context automatically
You deploy
ZIP upload or GitHub
Context syncs
Auto-imported to VibeSharing
Team picks up
Full context available
Option 1: Ask Claude directly
At the end of each session, tell Claude:
"Update CLAUDE.md with where we left off"Option 2: Cursor Rule (automatic)
Add the .cursor/rules/claude-context.mdc rule to your project. Claude will proactively update CLAUDE.md at natural stopping points.
# Project Name - Context for Claude ## Current State - Version: 0.1 - Last updated: 1/29/2026 ## What Was Built - Feature summary here - Key changes made ## Key Decisions - Why we chose this approach - Tradeoffs considered ## Known Issues - Bugs or incomplete items ## Next Steps - What to work on next --- *Updated on 1/29/2026*
Keep it concise
CLAUDE.md is a handoff doc, not full documentation. Focus on what the next person needs to know.
Update at stopping points
End of session, after completing a feature, or before handing off to a teammate.
Include technical notes
File structure, patterns used, gotchas — things Claude needs to understand the codebase.
Create .github/copilot-instructions.md in your repo root. Copilot will use these instructions for all suggestions and chat responses.
Create .github/copilot-instructions.md:
# Copilot Instructions ## CLAUDE.md Context File This project uses CLAUDE.md for context handoff between sessions. **Before ending a session or when asked to wrap up:** 1. Create or update CLAUDE.md at the project root 2. Include: what was built, key decisions, known issues, next steps 3. Keep it concise — this is a handoff doc **CLAUDE.md Template:** ```markdown # [Project Name] - Context for Claude ## Current State - Version: X.X - Last updated: [date] ## What Was Built - [changes this session] ## Key Decisions - [why things were done this way] ## Known Issues - [bugs, incomplete items] ## Next Steps - [what to work on next] ``` When deployed to VibeSharing, CLAUDE.md is automatically imported.
Note: Copilot instructions are less proactive than Cursor rules. You may still need to ask: "Update CLAUDE.md before we finish"
The auto-import on deploy works the same — you just need to manually ask the AI to update CLAUDE.md.
Add this to your README.md:
## For AI Assistants (Claude, Replit AI, etc.) This project uses CLAUDE.md for context handoff between sessions. **Before ending a session, please:** 1. Create or update CLAUDE.md at the project root 2. Include: what was built, key decisions, known issues, next steps 3. Keep it concise — this is a handoff doc, not full documentation **Template:** ```markdown # [Project Name] - Context for Claude ## Current State - Version: X.X - Last updated: [date] ## What Was Built - [changes this session] ## Key Decisions - [why things were done this way] ## Known Issues - [bugs, incomplete items] ## Next Steps - [what to work on next] ``` When this project is deployed to VibeSharing, CLAUDE.md is automatically imported as a context entry.
Tip: At the end of each Replit session, tell the AI:"Update CLAUDE.md with where we left off"
What's Inside
Simple, grayscale components designed for rapid prototyping:
Reference patterns you can study and extend:
- • agentic-hero — Agent status, incident response
- • ca-books — List view with detail panel
- • ca-bookbuilder — Editor with smart assists
Design Principles
Grayscale Only
No brand colors — forces focus on UX
Self-Contained
No external dependencies beyond React/Next
Local Mock Data
Everything defined inline in each file
Simple State
useState only, no complex hooks
Example Prompts for Claude
Copy these prompts to quickly create new experiments with AI tools.
Create a new experiment in wireframe-kit/app/experiments/approvals/page.tsx. Show a list of pending approvals with: requester name, request type, date, status. Include a search input and status filter tabs. Clicking a row opens a right-side detail panel. Use the existing Card, Button, Input, Divider primitives. Keep it grayscale, single file, local mock data (10–15 items).
In the approvals experiment, add a contextual nudge that appears after the user views 3+ items. The nudge should say "You're reviewing manually — want me to surface the highest-risk items first?" Clicking the nudge opens a right-side assist panel with suggested actions. Use useState for all interactivity. No animation libraries.
Create wireframe-kit/app/experiments/settings/page.tsx. Show a form with sections: General, Notifications, Security. Each section is a Card with form fields (Input, toggles, dropdowns). Include a "Save changes" button that shows a success message. Keep styling minimal and grayscale.
Add a "Create new book" flow to the ca-books experiment. Clicking "Create book" opens a modal with steps: 1. Enter book name and meeting date 2. Select organization from dropdown 3. Confirm and create Use useState for step tracking. Close modal on completion or backdrop click. Keep it in the same file unless a component is truly reusable.