# Configure Claude Code
Source: https://docs.specstory.com/bearclaude/claudecode

BearClaude works seamlessly with Claude Code.

## Get Claude Code

* Follow these [instructions](https://docs.anthropic.com/en/docs/claude-code/setup) to download and setup Claude Code.
* Make sure you can run Claude Code from a standard Mac terminal.

```
claude --version
```

* Ensure you've got an Anthropic console billing subscription or Claude Pro/Max plan.
* On the first run of `claude` you'll be walked through a configuration and authentication flow. You can do this in BearClaude, but it may be easier to complete these steps in your regular terminal first.

## Claude Code path

<Note>
  Under most circumstances you shouldn't have to change this setting.
</Note>

* If `claude` is not in your default PATH, you can point BearClaude to the executable by using the `BearClaude → Settings...` menu.

To find where Claude Code is installed, run this command in your terminal:

```bash
which claude
```

This will show you the full path to the Claude Code executable (e.g., `/usr/local/bin/claude`), which you can then enter in BearClaude's settings.


# Features
Source: https://docs.specstory.com/bearclaude/features

Everything you can do with BearClaude

## Write Structured Specs

BearClaude is built for the upstream work that defines what you're building and why.

* **Markdown-First Approach** - Write requirements, roadmaps, and workplans in clear, structured Markdown
* **Dual Editor Modes** - Switch between syntax-highlighted editor and live WYSIWYG preview
* **Full Markdown Support** - Headers, bold/italic, code blocks, links, lists, and blockquotes with keyboard shortcuts
* **Focus on Intent** - Describe user needs, edge cases, and behavior before jumping into code
* **Human and AI Readable** - Your specs work for both team collaboration and AI implementation

## Execute Cleanly with Claude Code

Hand off polished specs to Claude Code for fast, high-fidelity implementation.

* **Embedded Terminal** - Claude Code runs directly within the app for seamless workflow
* **Smart Text Insertion** - Select text and press ⌘⇧V to send specifications directly to Claude
* **Seamless Integration** - Run your specs directly in Claude Code with full context preservation
* **No Lost Context** - Your carefully crafted specifications translate directly to implementation
* **Built-in Claude Code** - BearClaude includes Claude Code integration out of the box

## Auto-Save Everything Locally

Your docs and chats are auto-saved the SpecStory way. Always local.

* **Local-First Approach** - All your work stays on your Mac
* **Automatic Backups** - Never lose your thinking or implementation history
* **Version Control Ready** - Files are saved in standard formats that work with Git

## Iterative Workflow

Edit and refine as your product understanding evolves.

### 1. Think

Write requirements, roadmaps, and workplans in Markdown. Focus on the upstream work that defines what you're building and why.

### 2. Execute

Run your polished specs directly with Claude Code. Clean handoff means no lost context or misunderstood requirements.

### 3. Save

Auto-saves, the SpecStory way. Your docs and chats, always local. Never lose your thinking or implementation history.

### 4. Repeat

Edit and refine as your product understanding evolves. Iterative refinement of both specs and implementation.

## Built for Minimalist AI-First Developers

BearClaude is designed for developers who understand that clarity comes before code.

* **Three-Pane Layout** - Document sidebar, editor, and Claude terminal in one unified interface
* **Project-Based Workflow** - Open, create, and manage project directories with quick access to recent projects
* **Requirements First** - Plan before you act, think before you code
* **Stop Building Wrong Things** - Focus on what actually matters
* **Native macOS Experience** - Optimized for focused work on Apple Silicon
* **No IDE Required** - Rethink your development workflow entirely


# Install BearClaude
Source: https://docs.specstory.com/bearclaude/introduction

Get up and running with BearClaude (powered by Claude Code)

BearClaude is a spec-first development tool that helps you think before you code. Write clear requirements and specifications in Markdown, then generate intentional code with Claude.

Perfect for developers who want a simpler alternative to full AI IDEs, BearClaude keeps your specifications and generated code connected while preserving your development intent. [Read why we built this →](https://bearclaude.specstory.com/mindfulmaking)

## Installation

<div className="flex items-start gap-4 mb-6">
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/specstory/bearclaude.svg" alt="BearClaude" className="w-16 h-16 mt-1" />

  <div>
    <a href="https://bearclaude.specstory.com/#download-section" className="inline-flex items-center gap-2 bg-blue-600 text-white px-5 py-2.5 rounded-md hover:bg-blue-700 transition-all font-medium shadow-md hover:shadow-lg" style={{backgroundColor: '#2563eb', color: '#ffffff'}}>
      <span>Download from bearclaude.com</span>
      <span>→</span>
    </a>

    <p className="text-sm text-gray-600 mt-2">Downloads a DMG file. Drag BearClaude to your Applications folder to install.</p>
  </div>
</div>

<Note>
  BearClaude for macOS also installs the `specstory` CLI for Claude Code. No need to install it separately.
</Note>

## Requirements

* Apple Silicon with macOS 15+
* [Claude Code](https://www.anthropic.com/claude-code) (from Anthropic)
* An open mind (do you need an IDE anymore?)

## 🌎 Why this will rock your world

Think of BearClaude as your upstream thinking partner:

* ⚡ **Structured Specs** - Write clear requirements in Markdown that both humans and AI can understand

* 🔄 **Seamless Handoff** - Pass polished specs directly to Claude Code with full context preservation

* 💾 **Local-First** - Auto-saves your specs and implementation history locally

* 🎯 **Focus on What Matters** - Stop building the wrong thing fast, start building what actually matters

Ready to think first and code right? BearClaude puts the clarity back in software development.


# Use BearClaude
Source: https://docs.specstory.com/bearclaude/quickstart

A focused tool, built on Claude Code, for turning specs into software.

## Getting Started with BearClaude

BearClaude provides a three-paned editor designed to streamline your development workflow by combining document management, markdown editing, and AI-powered code assistance in one integrated interface.

## The Three-Pane Interface

When you open BearClaude, you'll see three main sections:

* **Left Pane**: Document browser showing all markdown files in your project
* **Middle Pane**: Markdown editor for writing specs, plans, and documentation
* **Right Pane**: Claude Code terminal for AI-powered development assistance

All three panes are resizable, so you can customize your layout to fit your preferred workflow.

## Opening a Project

BearClaude works with project-based workflows where a project is simply a folder on your Mac.

### Create or Open a Project

1. **New Project**: Create a new folder to start fresh
2. **Open Existing**: Browse and select any existing folder on your Mac
3. **Recent Projects**: Quickly access previously opened projects

Once you open a project folder, BearClaude will:

* Scan for all markdown documents in the project directory and subdirectories
* Display them in the left pane document browser
* Start Claude Code in your project's root directory

## Working with Documents

### Document Management

The left pane shows all markdown files (`.md`, `.mdx`) found within your project. Documents created outside of BearClaude will automatically appear here when saved to the project folder.

### Creating New Documents

1. Use **File > New Document** to create a new document in the markdown editor
2. The document will immediately appear in the left pane browser
3. As you edit, the document auto-saves
4. If you'd like to save an open document as a new file name, use **File > Save As**

### Markdown Editing Features

The middle pane provides a full-featured markdown editor with:

* `## Headings` (`#`, `##`, `###`)
* Lists:

```
- bulleted
and
1. numbered
```

* `[links](https://example.com)`
* `**Bold**` and `_italic_` text
* Code blocks:

````markdown
```js
console.log("Hello, world!");
```
````

Use the formatting toolbar for quick access to many of these.

#### View Modes

Toggle between:

* **Raw Text Mode**: See the raw markdown syntax
* **Stylized Mode**: Preview formatted output while editing

#### Inserting selected document text in your Claude Code prompt

* `Edit→Insert at Cursor (⌘⇧V)`: Insert selected text as your next Claude Code prompt

## Claude Code Integration

The right pane contains a Claude Code terminal that starts in your project directory, giving you AI assistance with full project context.

### Basic Usage

1. Type any prompt or question about your project
2. Reference files with `@filename` or by highlighting text and using the insert commands
3. Ask Claude Code to implement features, update documentation, or analyze your project
4. Use `/` to access the command menu. Type `/help` to see all available Claude Code commands

For more detailed information about Claude Code capabilities and commands, visit the [Anthropic Claude Code documentation](https://docs.anthropic.com/en/docs/claude-code/overview).

### Project Integration Features

* **Restart**: Use the restart button for a fresh Claude Code session
* **Open in Finder**: Quick access to your project files in macOS Finder
* **Open in Terminal**: Launch a terminal session in your project directory

## Chat History

BearClaude automatically saves your AI conversations to preserve your development history and insights:

### Auto-Save Features

* **Automatic Saving**: All Claude Code conversations are automatically saved in your project's `.specstory` folder
* **Individual Files**: Each conversation is saved as a separate markdown file for easy browsing, versioning, and sharing
* **Background Operation**: Works seamlessly without interrupting your workflow
* **Complete History**: Preserves your entire conversation history for future reference
* **Access History**: To view your autosaved chat history, switch the Documents filter to Chat History in the left pane.

Autosave ensures you never lose valuable AI interactions and can always reference previous solutions, explanations, or implementation details.

## Recommended Workflow

1. **Plan First**: Use the markdown editor to write specifications, requirements, and implementation plans
2. **Iterate with AI**: Reference your documentation in Claude Code prompts to get contextual assistance
3. **Review Documentation**: Read and manually update your specs based on your own requirements
4. **Implement**: Let Claude Code handle the technical implementation while you focus on planning and design

## Tips for Success

* Keep your project documentation organized with clear filenames
* Use descriptive headings and structure in your markdown files
* Reference specific parts of your documentation when prompting Claude Code
* Take advantage of the integrated workflow - your specs inform your implementation, and your implementation insights can improve your specs

BearClaude is designed to let you focus on **what** you're building while Claude Code handles the **how**, creating a seamless flow from planning to implementation.


# Settings
Source: https://docs.specstory.com/bearclaude/settings

Configure BearClaude for your workflow

## Settings

BearClaude has simple, focused settings to get you up and running quickly.

### Claude Code Configuration

**Claude Code Path**: This tells BearClaude where to find your Claude Code installation.

* **Default**: `claude` - Works with standard Claude Code installations
* **Custom Path**: If you installed Claude Code somewhere not in your shell PATH, provide the full path here (e.g., `/Applications/Claude Code.app/Contents/MacOS/claude`)

With a normal Claude Code installation, you shouldn't need to change this setting.

### Application Configuration

**Appearance**: Choose your preferred theme

* **Light** - Light mode interface
* **Dark** - Dark mode interface
* **System (Auto)** - Follows your macOS system appearance setting


# FAQs
Source: https://docs.specstory.com/faqs

Frequently asked questions about SpecStory and BearClaude.

<AccordionGroup>
  <Accordion title="What versions of Cursor, Copilot, and Claude Code do you support?">
    SpecStory is tested to work with:

    * Cursor: every version after `v0.43.5`
    * Copilot: every version after `v1.300.0`
    * Claude Code: every version after `v1.0.27`
  </Accordion>

  <Accordion title="Does it cost money to use SpecStory? BearClaude?">
    The SpecStory Extension is [free as in beer 🍺](https://opensource.stackexchange.com/questions/620/what-is-the-difference-between-free-as-in-beer-and-free-as-in-speech). Enjoy!
    BearClaude is available for free during the Alpha, but will have [paid tiers](https://bearclaude.specstory.com/pricing) when we launch.
  </Accordion>

  <Accordion title="How can I support you?">
    Sharing is caring! We'd absolutely love if you could:

    * Tell your friends about SpecStory.

    * Introduce us to a colleague at work.

    * Consider [purchasing](https://bearclaude.specstory.com/pricing) BearClaude when it launches.

    * [Leave a review](https://marketplace.visualstudio.com/items?itemName=SpecStory.specstory-vscode\&ssr=false#review-details) on the VS Code Marketplace

    * Talk about us on [Cursor Reddit](https://www.reddit.com/r/cursor/), [Cursor Forums](https://forum.cursor.com/), [GitHub Copilot Reddit](https://www.reddit.com/r/GithubCopilot/), X.com, BlueSky and  LinkedIn.

    * Follow us on [LinkedIn](https://www.linkedin.com/company/specstory), [X.com](https://www.x.com/specstoryai) and [BlueSky](https://bsky.app/profile/specstory.com). Star us on [GitHub](https://github.com/specstoryai/getspecstory).
  </Accordion>

  <Accordion title="Will you support other AI Code IDEs?">
    We get this question a lot! Each [AI Code IDE](https://specstory.com/editor-tracker) stores chats in differing formats and locations. All are [subject to change](https://forum.cursor.com/t/questions-about-state-vscdb/47299/2) at anytime. We're currently focused on making the best possible extension for GitHub Copilot & Cursor with **SpecStory**.

    **BearClaude** takes a different approach as a standalone macOS app with integrated Claude Code, so it doesn't depend on other editors.

    We would like to make SpecStory available for Windsurf. Tell them your interested in making your chats available on this [issue](https://github.com/Exafunction/codeium/issues/127)!

    Curious about the hype around the different AI code editors? Us too. That's why we created the [AI Editor Tracker](https://specstory.com/editor-tracker) to follow the sentiment.
  </Accordion>

  <Accordion title="How does this extension work?">
    In a nutshell, SpecStory allows you to save and share your AI conversation history.

    For Cursor, it reads your local chat history directly from a `sqlite3` database. This is located in different paths depending on your operating system:

    * Windows: `%APPDATA%\Cursor\User\globalStorage\state.vscdb`

    * MacOS: `~/Library/Application Support/Cursor/User/globalStorage/state.vscdb`

    * Linux: `~/.config/Cursor/User/globalStorage/state.vscdb`

    For GitHub Copilot, it reads your local chat history directly from chat jsons:

    * Windows: `%APPDATA%\Code\User\workspaceStorage\{hash}\chatSessions`

    * MacOS: `~/Library/Application Support/Code/User/workspaceStorage/{hash}/chatSessions`

    * Linux: `~/.config/Code/User/workspaceStorage/{hash}/chatSessions`

    For Claude Code, the SpecStory CLI wrapper acts as a launcher that:

    * Runs Claude Code while capturing your conversations

    * Reads session files from `~/.claude/projects/` (JSONL format)

    * Converts them to markdown and saves to `.specstory/history/` in your project

    * Works on macOS, Linux, and Windows

    **BearClaude** is a standalone macOS application that provides a three-pane interface combining document management, markdown editing, and Claude Code integration. It automatically saves your Claude Code conversations to your project's `.specstory` folder.

    For more detail about each feature check out our feature pages. For insight into what data we collect and access look at [our data privacy page](/privacy).
  </Accordion>

  <Accordion title="If I need help how can I reach you?">
    Don't be shy: we'd absolutely love to hear from you and promise to be extra responsive!

    1. Drop us a line at [support@specstory.com](mailto:support@specstory.com).

    2. Join our [Slack community](https://join.slack.com/t/specstory/shared_invite/zt-2vq0274ck-MYS39rgOpDSmgfE1IeK9gg) and ping us directly

    3. File an [issue on github](https://github.com/specstoryai/getspecstory/issues).
  </Accordion>

  <Accordion title="Will you open source these tools?">
    Both tools are still in active development with rapid iterations. We've talked about this internally but have not made a decision.

    We do strive to be as open as possible in terms of how they work, what data is accessed and stored and [what our policy is](https://specstory.com/privacy).
  </Accordion>

  <Accordion title="Can I import my SpecStory history back into my editor?">
    Not today. We do not conduct write operations on the `state.vscdb` or the [Shadow Workspace](https://www.cursor.com/blog/shadow-workspace) Cursor maintains. We do not modify the `workspaceStorage` directory Copilot maintains.

    You can `@` reference (in Cursor) or `#` reference (Copilot) these files to provide context to your AI though!
  </Accordion>
</AccordionGroup>


# Data Privacy
Source: https://docs.specstory.com/privacy

Transparency into what we collect and access to deliver SpecStory

## Services we use to collect data

We use [PostHog](https://posthog.com/) to collect product analytics. When you install the SpecStory Extension tracking is turned on by default. You may turn it off in settings via: `specstory.helpUsImprove`.

* We log events including: when the extension is activated, when an auto-save occurs, when a manual save occurs, when a share occurs, when a custom rule is derived and when errors occur.

* We use this telemetry to calculate total installs, active user counts and to understand other patterns like user retention.

We also use [PostHog](https://posthog.com/)  to collect web analytics, both on Specstory.com and share.specstory.com.

* We use log events to understand time on site, improve usability in our share experience and monitor our own traffic and traffic to shares.

* If you turn off `specstory.helpUsImprove` in the Extension settings it will not apply to the web analytics we collect.

In SpecStory `v0.7.0` and later for the *optional* and Derived Rules feature, we use:

* [Clerk.com](https://clerk.com/): for authentication and user management.

* [Helicone.com](https://www.helicone.ai/): for LLM observability.

## What data is accessed and collected in the SpecStory extension (by feature)

### Auto-saves and manual saves

<Check>
  Usage of these features *never* transmits your prompts or code in assistant responses to SpecStory.
</Check>

Each of these features read from your local chat history stored in a `sqlite3 state.vscdb`, `chat.jsons`, or Claude Code session files in different folders depending on your OS on your machine.

<Tabs>
  <Tab title="Cursor">
    * Windows: `%APPDATA%\Cursor\User\globalStorage\state.vscdb`

    * MacOS: `~/Library/Application Support/Cursor/User/globalStorage/state.vscdb`

    * Linux: `~/.config/Cursor/User/globalStorage/state.vscdb`
  </Tab>

  <Tab title="VSCode">
    * Windows: `%APPDATA%\Code\User\workspaceStorage\{hash}\chatSessions`

    * MacOS: `~/Library/Application Support/Code/User/workspaceStorage/{hash}/chatSessions`

    * Linux: `~/.config/Code/User/workspaceStorage/{hash}/chatSessions`
  </Tab>

  <Tab title="Claude Code">
    The SpecStory CLI wrapper for Claude Code reads session files from:

    * All platforms: `~/.claude/projects/` (JSONL format)

    The CLI wrapper runs Claude Code while capturing conversations locally. No data is transmitted to SpecStory servers.
  </Tab>
</Tabs>

These saves are then stored in your project's `.specstory` folder.

### Shares

<Note>
  Usage of this features transmits prompts and code in assistant responses to SpecStory.
</Note>

This feature allows you to publish your local chat history to share.specstory.com. We store shares in [Cloudflare R2 Object Storage](https://www.cloudflare.com/developer-platform/products/r2/).

* Shared content is anonymous in the sense that we do not require authentication to share. But it is *public*.

* We generate a non-guessable UUID for every share at the time of creation.

* When you share your history, the request includes a `device_id hash` from your machine. This allows us to allow you to uniquely edit it without being authenticated.

* As an editor, you can delete sensitive information in the share. You may also request full deletion of the object by e-mailing support the URL of the share.

### Derived Rules

<Note>
  Usage of this features transmits prompts, code in assistant responses, markdown header information you supply and your project's metadata to SpecStory.
</Note>

This feature allows you to save time and improve code generation quality.

* When you authenticate into the Extension and turn on the feature, as you prompt we send your prompt history, prior derived rules, file headers and project directory metadata to an LLM.

* We log these requests via Helicone by user to track cost, response quality, error rates and prevent abuse.

* We conduct aggregate analysis on the requests made by users of this feature to improve it.

## What data is accessed and collected in BearClaude Alpha

<Check>
  BearClaude *never* captures or transmits your actual conversations with Claude Code to SpecStory.
</Check>

During the Alpha phase, BearClaude collects usage analytics to help us improve the product and understand how users interact with the application.

### Usage Analytics

We collect telemetry data for project and document management actions, including:

* Project creation, opening, and switching
* Document creation, editing, and saving
* Application launch and usage patterns
* Feature usage and interaction events
* Error occurrences and crash reports

### User Identification

* We capture your registration email address during account creation
* Usage events are associated with your email to enable user-specific analytics
* This helps us understand user behavior patterns and improve the product experience

### Data Storage and Processing

* Usage data is processed through our analytics infrastructure
* Data is used exclusively for product improvement, bug fixes, and feature development
* We do not sell or share personal usage data with third parties

### Opt-Out During Alpha

<Note>
  During the Alpha phase, the only way to opt out of data collection is to uninstall BearClaude.
</Note>

We plan to add granular privacy controls and opt-out options before the full product launch.


# SpecFlow
Source: https://docs.specstory.com/specflow

Whichever AI coding tools you use, it's important to be intentional about what you're building.

## Plan First, Build Better

> "Plan first, act second. Every great building starts with a blueprint. Every successful software project starts with a plan."

**SpecFlow** is an open methodology that transforms how you build software with AI agents. Instead of vibe-driven development that leads to chaos, SpecFlow brings structure, clarity, and predictable results.

## The Problem with Unstructured AI Development

Without structure, building with AI agents often results in:

* **Misaligned outputs** that don't match your intent
* **Wasted time** on iterations that miss the mark
* **Fragmented results** from uncoordinated efforts
* **Lost context** between different development phases

## The SpecFlow Solution

SpecFlow provides a clear 5-step process that turns intent into working software:

**Intent** → **Roadmap** → **Tasks** → **Execute** → **Refine**

This structured approach ensures every prompt, every task, and every output serves your goals through optimal human-AI collaboration.

## Ready to Transform Your Development Process?

### 🚀 **[Learn the Complete SpecFlow Method →](https://www.specflow.com/)**

Discover the full methodology, see real-world examples, and master the art of structured AI-powered development.

### 🤝 **[Contribute Examples on GitHub →](https://github.com/specstoryai/specflow)**

Have your own SpecFlow success stories? We welcome contributions! Open a PR to share your examples and help the community learn from your experience.

### 📄 **[Download: Beyond Code-Centric Development →](https://specstory.com/whitepapers/beyond-code-centric-specstory-2025.pdf)**

Read our white paper on how AI shifts the bottleneck from implementation speed to specification clarity. Learn why SpecFlow and trunk-based development are the future of AI-powered software development.

***

*SpecFlow is the open methodology for better human-AI collaboration in software development.*


# Features
Source: https://docs.specstory.com/specstory/features

Everything you can do with SpecStory

<Tabs>
  <Tab title="Cursor + VSCode" tab-id="cursor-vscode">
    ## Auto-Save Your AI Conversations

    SpecStory automatically saves AI chat history in your project's `.specstory` folder. Each conversation is saved as a separate markdown file, ensuring you never lose valuable AI interactions.

    * **Auto-save is enabled by default** but can be disabled via the setting `specstory.autoSave`.

    * Works seamlessly in the background.

    * Preserves your entire conversation history.

    * Compatible with local and remote workspaces (SSH, DevContainers, WSL).

    ## Manual Save and Export

    Need more control over your saved conversations? Use the command palette (Cmd/Ctrl+Shift+P) and run `SpecStory: Save AI Chat History` to:

    * Select specific conversations to save.

    * Combine multiple conversations into a single markdown file.

    ## Share and Editorialize Your AI Conversations

    Share your AI chat history instantly using the command palette with `SpecStory: Share AI Chat History`.

    Key sharing features:

    * Get a unique, shareable URL instantly.

    * Share anonymously - no signup required.

    * Select specific conversations to include.

    * Add markdown and edit markdown blocks, images and embed videos into to your shares.

    * Add a GitHub URL to "link" your work together.

    * Edit or remove shared content later (cookie-based authentication).

    ## Automatically Derive Rules for AI

    In SpecStory [v0.7.0](https://marketplace.visualstudio.com/items/SpecStory.specstory-vscode/changelog) and later you can turn on an feature via the setting `specstory.derivedRules`.

    <Info>
      To use this feature you must:

      * Have Auto-save enabled.

      * Create an account and sign-in to the Specstory extension.

      This feature is currently free. Each generation makes a call to an LLM and we require authentication to its prevent abuse.
    </Info>

    Key Features

    * Automatically create a `derived-rules.mdc` to `.cursor/rules` or `copilot-instructions.md` to `.github/`.

    * Back-ups your previous versions to the `.specstory/ai_rules_backups` directory.

    * Automatically adds backups to your `.gitignore`.

    * Allows for custom file headers to be modified to customize rule generation through settings.

    ## How Rules Derivation Works

    The system prompt currently in use is:

    ```
    You are an expert software engineer responsible for maintaining a "living" and "evolving" AI coding assistant rules file. This file defines all project rules, coding standards, workflow guidelines, references, documentation structures, and best practices. Each time you receive new user–AI interactions, you must merge any relevant new guidelines, clarifications, or decisions into the file which is stored in the root of the project and is obeyed by the AI coding assistant.

    Rules for Updating:

    1. Retain the structure of the AI coding assistant rules file, which uses the following top-level sections:
    <headers/>

    2. Read the new user–AI interactions carefully. Identify any instructions, new rules, clarifications, or best practices that arise. Incorporate them into the correct sections. If a new rule conflicts with an existing one, note the conflict and either:
       - Resolve it by clarifying the final, decided rule,
       - OR highlight that further user confirmation is needed.

    3. Do not remove or discard existing content unless there is a clear directive to do so, but if a new rule supersedes or modifies old content, replace or annotate the old content accordingly. Don't let the rule file grow too much.

    4. Maintain consistent markdown format, with ## headings for the top-level structure.

    5. If version updates or references to version changes arise record them under the relevant section(s). For example, if it impacts the "TECH STACK" or "PROJECT DOCUMENTATION & CONTEXT SYSTEM", note it there.

    6. If any mention of new coding tools or libraries arises, add them under the correct section (e.g., "TECH STACK") but do not remove previous entries.

    7. If new debugging or workflow rules appear in the saved chat as a result of a user request to the AI, insert them into the correct sections (e.g., "DEBUGGING" or "WORKFLOW & RELEASE RULES").

    8. Look for signals that the user's intent is to make something a permanent rule. This includes words like "don't","must", "should", "always", "never", "all the time", "every time", "every time you see this", etc.

    9. Don't make ANY adjustments to the AI coding assistant rules file unless you are absolutely sure that the user's intent is rule like in nature. Err on the side of making too few adjustments, not too many. It's perfectly fine to leave the file as it is.

    10. After merging all relevant updates, output the entire updated AI coding assistant rules file as a single cohesive markdown document. Do not include extraneous commentary or placeholders, just the final updated file content.

    ---

    TASK: Please merge the new interactions into the AI coding assistant rules file as specified, and return the complete updated file content in markdown format. Ensure all headings remain in order, conflicts are addressed, and the file remains consistent and comprehensive.

    OUTPUT FORMAT:

    You must return the updated AI coding assistant rules file as a single cohesive markdown document. Do not include extraneous commentary.

    You must return the response inside a <rules-file> tag. Example:

    <rules-file>
    Content of the updated AI coding assistant rules file
    </rules-file>

    The MOST IMPORTANT THING is that you must return the response inside a <rules-file> tag.
    ```
  </Tab>

  <Tab title="Claude Code" tab-id="claude-code">
    After installing, run the wrapper and it will start claude code.

    ```bash
    ## By default, specstory launches Claude Code with any additional provided arguments.
    specstory 

    ## Use -h to see help for all available options
    specstory -h
    ```

    ## Auto-Save Your AI Conversations

    SpecStory CLI wrapper automatically captures your Claude Code conversations when you run it. Sessions are saved as markdown files in `.specstory/history/` in your current project directory.

    * **Automatic capture** when running `specstory` (launches Claude Code with session tracking).

    * Sessions are saved with timestamps and descriptive filenames.

    * Preserves complete conversation history including code blocks and outputs.

    * Markdown files are immediately available for version control or sharing.

    ## Export and Organize Conversations

    Simple flags let you manage your Claude Code conversation history:

    ```bash
    # Sync all Claude Code sessions to markdown
    specstory -s

    # Convert a specific session to markdown
    specstory -u <session-uuid>

    # See what's happening with verbose output
    specstory -s --verbose
    ```

    The wrapper reads Claude Code's session files from `~/.claude/projects/` and converts them to clean markdown in your project's `.specstory/history/` directory.

    ## Share Your AI Conversations

    The current CLI wrapper focuses on markdown generation. Your conversations are saved locally and can be shared through:

    * **Git commits** - Add `.specstory/history/` to version control
    * **Direct file sharing** - Send markdown files to teammates
    * **Documentation** - Include conversations in project docs
    * **Manual upload** - Use any markdown hosting service

    <Info>
      Direct sharing to share.specstory.com is currently available in VS Code/Cursor extensions. CLI sharing features are on the roadmap!
    </Info>

    ## Conversation History as Documentation

    The SpecStory CLI wrapper transforms your Claude Code sessions into valuable documentation:

    * **Learning resource** - Review past problem-solving approaches
    * **Knowledge base** - Search through markdown files for solutions
    * **Team sharing** - Commit conversations for team learning
    * **Project context** - Build up domain knowledge over time

    The generated markdown files include:

    * Complete conversation threads with context

    * Code blocks with syntax highlighting

    * Timestamps and session metadata

    * Clean formatting for easy reading
  </Tab>
</Tabs>


# Install our extensions
Source: https://docs.specstory.com/specstory/introduction

Save, search and share your AI chat history with SpecStory.

## Multiplatform support is now here

<Note>
  The SpecStory Extension as of `v0.11.0` [(changelog)](https://marketplace.visualstudio.com/items/SpecStory.specstory-vscode/changelog) supports both [Cursor](https://www.cursor.com/) and [GitHub Copilot](https://github.com/features/copilot). For [Claude Code](https://claude.ai/code), we offer a CLI wrapper `v0.0.2` that captures your sessions.
</Note>

SpecStory saves, organizes, and makes all your AI chats searchable in structured Markdown. Never lose a great solution, easily share interactions, and use conversation history to refine Copilot and Cursor with custom instructions and project rules.

## 🍦 Installation Options

Choose your installation method based on your IDE:

### Extensions for VSCode & Cursor

<Info>
  Our VSIX extension works with both VSCode (with GitHub Copilot) and Cursor. Install directly from the Extension Marketplace in your preferred editor.
</Info>

<Tabs>
  <Tab title="VSCode + Copilot">
    1. Open VSCode with GitHub Copilot installed and activated.
    2. Search for **SpecStory** in the Extensions Marketplace (Ctrl/CMD-Shift-X).
    3. Click **Install**. Consult our [Changelog](https://marketplace.visualstudio.com/items/SpecStory.specstory-vscode/changelog) to make sure you're on the latest version.
    4. Once installed, SpecStory automatically saves your Copilot chats to the `.specstory` folder in your project.
  </Tab>

  <Tab title="Cursor">
    1. Open Cursor.
    2. Search for **SpecStory** in the Extensions Marketplace (Ctrl/CMD-Shift-X).
    3. Click **Install**. Consult our [Changelog](https://marketplace.visualstudio.com/items/SpecStory.specstory-vscode/changelog) to make sure you're on the latest version.
    4. Once installed, SpecStory automatically saves your Cursor chats to the `.specstory` folder in your project.

    <Warning>
      As a Cursor user, if you try to install from the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=SpecStory.specstory-vscode) website banner you might find yourself in a state where VSCode has SpecStory installed but Cursor doesn't. [It makes for a bad time](https://github.com/specstoryai/getspecstory/issues/8). No one wants that.
    </Warning>
  </Tab>

  <Tab title="Manual VSIX Install">
    <Tip>
      The SpecStory extension's VSIX works seamlessly with both GitHub Copilot and Cursor. You'll need to install it separately in each environment.
    </Tip>

    1. Make sure you're on the latest version of [GitHub Copilot](https://github.blog/changelog/label/copilot/) or [Cursor](https://www.cursor.com/changelog).
    2. Download our extension: [specstory-vscode-latest.vsix](https://static.specstory.com/vscode-extension/releases/specstory-vscode-latest.vsix)
    3. From either editor, pop open the Command Palette (Ctrl/CMD-Shift-P) and choose `Extensions: Install from VSIX…`.
    4. To verify the installation, open the Command Palette again (Ctrl/CMD-Shift-P) and type `SpecStory`. You should see the available commands show up.
  </Tab>
</Tabs>

### CLI for Claude Code

<Info>
  SpecStory for Claude Code is a wrapper that auto-generates markdown files from your chat sessions. It runs Claude Code while saving your conversations to `.specstory/history/` in your project.
</Info>

<Tabs>
  <Tab title="Install with Homebrew">
    We recommend using Homebrew to install on Mac

    ```bash
    brew tap specstoryai/tap
    brew update
    brew install specstory
    ```

    Once installed, verify installation with

    ```bash
    specstory --version
    ```

    Start using SpecStory

    ```bash
    # Run Claude Code through SpecStory wrapper
    specstory

    # Or sync existing sessions to markdown
    specstory -s
    ```

    In the future, to upgrade, use Homebrew again

    ```bash
    brew update
    brew upgrade specstory
    ```
  </Tab>

  <Tab title="Download Linux/WSL Binary">
    1. Download the latest release for your platform:
       * [Linux (ARM64)](https://github.com/specstoryai/getspecstory/releases/download/v0.1.0/SpecStoryCLI_Linux_arm64.zip)
       * [Linux (x86)](https://github.com/specstoryai/getspecstory/releases/download/v0.1.0/SpecStoryCLI_Linux_x86_64.zip) (Note: If you're running WSL, download this)
    2. Extract and move to your PATH:

       ```bash
       unzip SpecStoryCLI_*.zip
       sudo mv specstory /usr/local/bin/
       chmod +x /usr/local/bin/specstory
       ```
    3. Verify installation:

       ```bash
       specstory --version
       ```
    4. Start using SpecStory:

       ```bash
       # Run Claude Code through SpecStory wrapper
       specstory

       # Or sync existing sessions to markdown
       specstory -s
       ```

    In the future, to upgrade, just follow these instructions again.
  </Tab>
</Tabs>

## 🌎 Why this will rock your world

Think of [SpecStory](https://specstory.com) as your AI conversation time machine.

* ⚡ Auto-save your conversations into digestible Markdown format (readable by both humans AND machines).
* 🌐 Make your [vibe-coding](https://x.com/karpathy/status/1886192184808149383) adventures shareable via URLs at share.specstory.com.
* 🧪 Auto-magically derive Copilot [custom instructions](https://code.visualstudio.com/docs/copilot/copilot-customization) and Cursor [project rules](https://docs.cursor.com/context/rules-for-ai#project-rules-recommended) to improve agent-first coding performance.

🧠 Your AI companion is about to get significantly less forgetful, and you won't have to lift a finger - let's go!


# Quickstart
Source: https://docs.specstory.com/specstory/quickstart

Give your AI assistant a persistent memory. Best upgrade since coffee ☕

<Tabs>
  <Tab title="Cursor + VSCode" tab-id="cursor-vscode">
    ## 🪄 Your work saves itself, no cloud required!

    When you install SpecStory it begins its work in the background, **automatically saving 🗄️** your AI chat history for your active project in `./specstory/history`.

    You can toggle this on and off in our [settings](/settings).

    <Frame>
      ![Autosave your history](https://share.specstory.com/extension/autosave_your_history.gif)
    </Frame>

    ## 🎯 Cherry pick your save worthy moments

    If you want to combine selected conversations into a single file, you can do that too. Just open the command palette (Cmd/Ctrl+Shift+P) and run `SpecStory: Save AI Chat History`.

    <Frame>
      ![Never lose your chat history](https://share.specstory.com/extension/never_lose_your_composer_history_2.gif)
    </Frame>

    * **📝 Presto!** Run this command and watch your AI conversations transform into a beautiful markdown file right before your eyes!
    * **👀 No waiting around** - it pops open instantly in your editor. (We love instant gratification!)
    * **💾 Like what you see?** Hit that Save button and your AI wisdom is safely tucked into your project files.
    * **🌳 Feeling git-ty?** Commit it to your repo just like any other file - because your AI conversations deserve version control too!

    ## 🌟 Share your history with a story!

    Share your chat history with others by opening the command pallette and running `SpecStory: Share AI Chat History`.

    <Frame>
      ![share your chat history](https://share.specstory.com/extension/share_your_history_2.gif)
    </Frame>

    * **🌎 Ready to share your AI coding adventures with the world?** One command sends your chat history sailing into the cloud, returning a magical URL just for you!
    * **🎭 No signup required** - your shares are anonymous. (But hey, keep those secret API keys and passwords to yourself, okay?)
    * **🔗 Pro tip:** Bookmark that special URL like it's your favorite cat gif - you'll want it later!
    * **✏️ As the creator, you can add a description to your share, paste images, and curate which chats to include.**
    * **📝 Mark it down:** You can add tons of details to your share by adding sections of markdown-formatted text in between any parts of the conversation.
    * **🗑️ Having second thoughts?** Need to make something disappear? Drop us a line at [support@specstory.com](mailto:support@specstory.com) **with a link to the share** and we'll take care of it faster than you can say "delete my search history."

    ## 🧪 Auto-magically derive Rules for AI

    <Frame>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/mN8NzRDGAb4?si=jIHZNmoXC1ICSEwe" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
    </Frame>

    <Info>
      This is a feature that launched in SpecStory [v0.7.0](https://marketplace.visualstudio.com/items/SpecStory.specstory-vscode/changelog) for Cursor. It is updated to support both Copilot and Cursor in `v0.11.0`. Unlike all of the above features, it's use requires you to:

      * Have Auto-save enabled.
      * Create an account and sign-in to the SpecStory extension.
    </Info>

    * **❓ Unfamiliar with what rules for AI are?** Consult their respective docs:
      * Copilot [custom instructions](https://code.visualstudio.com/docs/copilot/copilot-customization)
      * Cursor [project rules](https://docs.cursor.com/context/rules-for-ai#project-rules-recommended) *or* [Cursor101.com](https://cursor101.com/cursor/rules)*.*

    There isn't a palette command for this one. When you chat with AI, SpecStory is like a mystical scribe in the corner, quill poised, noting patterns in:

    * **🧠 Your thinking style:** Do you prefer step-by-step explanations or quick solutions?
    * **🖋️ Your rule file headers:** Those special incantations you set the structure of your derived file with.
    * **🔄 Your iteration cycles:** How you refine code and conversation together with AI.
    * **🏗️ Your project structure:** The architecture of your digital temple.

    Then—abracadabra!—SpecStory transmutes these observations into editor specific rules for AI. Stored in either:

    1. the `.github/` directory as `copilot-instructions.md`
    2. the `.cursor/rules` directory as `derived-rules.mdc`.

    **🌈 Prompt Headers: The Secret Ingredient**

    SpecStory needs your rule file headers to brew the perfect rules. To start you off, we've crafted a default based on distilled knowledge from the community of what tends to work best.

    <Frame>
      ![Headers](https://mintlify.s3.us-west-1.amazonaws.com/specstory/images/headers.png)
    </Frame>

    **🌟 The Benefits of this Sorcery**

    * **🧙‍♀️ Less repetitive incantations:** Reduced need to constantly explain your preferences every time.
    * **⚡ Faster spell-casting:** AI responses align with your project from the start.
    * **🔄 Self-improving magic:** As you work, the rules evolve to match your growing expertise.
  </Tab>

  <Tab title="Claude Code" tab-id="claude-code">
    ## 🪄 Your work saves itself, no cloud required!

    When you run Claude Code through SpecStory, it automatically saves your conversations in `.specstory/history/` in your current project directory. The CLI acts as a wrapper, launching Claude Code while capturing all your chat sessions.

    ## 🎯 Save and organize your conversations

    SpecStory provides simple flags to manage your Claude Code conversations:

    ```bash
    # Run Claude Code through SpecStory wrapper (default)
    specstory

    # Sync all Claude Code sessions to markdown files
    specstory -s

    # Generate markdown for a specific session
    specstory -u <session-uuid>

    # Run with verbose output to see what's happening
    specstory -s --verbose
    ```

    * **📝 Automatic capture:** Running `specstory` launches Claude Code and captures conversations
    * **🗂️ Project-based organization:** Sessions are saved in `.specstory/history/` with timestamps
    * **💾 Batch conversion:** Use `-s` flag to convert all existing sessions to markdown
    * **🌳 Git-friendly:** All output is clean markdown, perfect for version control

    ## 🌟 Share your history with a story!

    Currently, the SpecStory CLI wrapper focuses on capturing and converting your Claude Code sessions to markdown. Sharing features are on the roadmap!

    For now, you can:

    * Generate markdown files with `specstory -s`
    * Find your conversations in `.specstory/history/`
    * Share the markdown files directly or through your preferred method
    * Commit them to git for team collaboration

    <Info>
      The VS Code and Cursor extensions have built-in sharing to share.specstory.com. Similar functionality for the CLI is coming soon!
    </Info>

    ## 🧪 Auto-magically derive Rules for AI

    <Info>
      Rule derivation is currently available in the VS Code and Cursor extensions. The CLI wrapper focuses on session capture and markdown generation.
    </Info>

    While the CLI doesn't generate rules directly, your captured markdown sessions can be:

    * Analyzed manually to identify patterns
    * Used as context when crafting your own rules in (`claude.md`)
    * Shared with team members to establish coding conventions

    <Tip>
      The markdown files generated by `specstory -s` provide a complete history of your Claude Code interactions, making it easy to review and extract best practices.
    </Tip>
  </Tab>
</Tabs>


# Settings
Source: https://docs.specstory.com/specstory/settings

Change how SpecStory works

<Tabs>
  <Tab title="Cursor + VSCode" tab-id="cursor-vscode">
    ## Extension Settings

    Configure SpecStory through VS Code Settings → User → Extensions → SpecStory:

    * Toggle auto-save functionality
    * Toggle Derived Rules
      * Modify the `file headers` used as part of the system prompt to generate Derived Rules for you
    * Opt out of product analytics
    * Enable debug tools and logging

    ### Available Settings

    | Setting                  | Description                                 | Default        |
    | ------------------------ | ------------------------------------------- | -------------- |
    | `specstory.autoSave`     | Enable automatic saving of AI conversations | `true`         |
    | `specstory.derivedRules` | Enable automatic rule generation            | `false`        |
    | `specstory.fileHeaders`  | Custom headers for rule generation          | (see defaults) |
    | `specstory.analytics`    | Enable anonymous usage analytics            | `true`         |
    | `specstory.debug`        | Enable debug mode and verbose logging       | `false`        |

    ## Debugging

    * Browse, search, and copy the raw Workspace Storage and "Composer" Storage state in the left side (primary side bar) file explorer, in the VS CODE STATE panel.
    * View the OUTPUT panel and select the "SpecStory" channel from the dropdown to see debug logs.
  </Tab>

  <Tab title="Claude Code" tab-id="claude-code">
    ## CLI Configuration

    The SpecStory CLI wrapper is designed to work out of the box with minimal configuration:

    ### Available Flags

    | Flag                  | Description                      | Usage                          |
    | --------------------- | -------------------------------- | ------------------------------ |
    | (default)             | Run Claude Code through wrapper  | `specstory`                    |
    | `-s, --sync-markdown` | Convert all sessions to markdown | `specstory -s`                 |
    | `-u, --session-uuid`  | Convert specific session         | `specstory -u <uuid>`          |
    | `-v, --verbose`       | Show detailed output             | `specstory -s -v`              |
    | `-c, --claude-path`   | Custom Claude Code path          | `specstory -c /path/to/claude` |
    | `-h, --help`          | Show help information            | `specstory -h`                 |
    | `-V, --version`       | Show version                     | `specstory -V`                 |

    ### Default Behavior

    * **Session Storage:** `.specstory/history/` in current directory
    * **Session Files:** Read from `~/.claude/projects/`
    * **Output Format:** Markdown files with timestamps
    * **History Tracking:** `.history.json` maintains session metadata

    ### Project Configuration

    When you first run SpecStory in a project, it creates:

    * `.specstory/` directory for storing conversations
    * `.specstory/history/` for markdown files
    * `.specstory/history/.history.json` for session tracking

    <Info>
      Unlike the VS Code/Cursor extensions which have extensive settings, the CLI wrapper follows a "convention over configuration" approach for simplicity.
    </Info>

    ## Debugging

    Use verbose mode to troubleshoot:

    ```bash
    # Run with verbose output
    specstory -s --verbose

    # Check what sessions will be processed
    specstory -s --verbose | grep "Parsing session"
    ```

    The verbose flag shows:

    * Which session files are being parsed
    * Where markdown files are being written
    * Any errors during processing
  </Tab>
</Tabs>


# Getting Started
Source: https://docs.specstory.com/started

You don't write prompts. You author intent. Enhance your AI development workflow with SpecStory.

* **Enhance Current Workflows:** Use our free extensions for [Cursor](/specstory/introduction#cursor), [VSCode](/specstory/introduction#vs-code-copilot), and [Claude Code](/specstory/introduction#cli-for-claude-code) to save, search and share your AI chat history.

* **Spec-first Development:** Our new macOS desktop app [BearClaude](/bearclaude/introduction) helps you write specs to generate code.

Start from where you are today and turn your prompts and AI chats into reusable, sharebale assets.

## We work where you do

<Tabs>
  <Tab title="🚀 Enhance Current Workflow" tab-id="enhance">
    ### Already using AI IDEs? Make them better.

    AI-generated code lacks context. Without preserved prompts, you lose the "why" behind the "what."

    Install our free extensions to save, share, and ship with intent—keeping prompts and code together so AI output makes sense.

    <div className="flex flex-wrap gap-3 mt-6 justify-center md:justify-start">
      <a href="/specstory/introduction#extensions-for-vscode-%26-cursor" className="inline-flex flex-col items-center justify-center gap-1 px-4 py-3 w-44 border border-gray-300 rounded-lg hover:border-gray-400 hover:shadow-sm transition-all">
        <div className="flex items-center gap-2">
          <img src="https://mintlify.s3.us-west-1.amazonaws.com/specstory/cursor.svg" alt="Cursor" className="w-5 h-5" />

          <span className="text-sm font-medium">Cursor</span>
        </div>

        <span className="text-xs text-gray-500">VSIX Extension</span>
      </a>

      <a href="/specstory/introduction#extensions-for-vscode-%26-cursor" className="inline-flex flex-col items-center justify-center gap-1 px-4 py-3 w-44 border border-gray-300 rounded-lg hover:border-gray-400 hover:shadow-sm transition-all">
        <div className="flex items-center gap-2">
          <img src="https://mintlify.s3.us-west-1.amazonaws.com/specstory/copilot.svg" alt="Copilot" className="w-5 h-5" />

          <span className="text-sm font-medium">VSCode + Copilot</span>
        </div>

        <span className="text-xs text-gray-500">VSIX Extension</span>
      </a>

      <a href="/specstory/introduction#cli-for-claude-code" className="inline-flex flex-col items-center justify-center gap-1 px-4 py-3 w-44 border border-gray-300 rounded-lg hover:border-gray-400 hover:shadow-sm transition-all">
        <div className="flex items-center gap-2">
          <img src="https://mintlify.s3.us-west-1.amazonaws.com/specstory/claude.svg" alt="Claude" className="w-5 h-5" />

          <span className="text-sm font-medium">Claude Code</span>
        </div>

        <span className="text-xs text-gray-500">Mac/Linux/WSL Binary</span>
      </a>
    </div>
  </Tab>

  <Tab title="🎯 Spec-First Development" tab-id="spec-first">
    ### Don't quite need an AI Native IDE? Try a simpler way.

    Rushing into code gen without clear intent and requirements leads to wasted effort.

    BearClaude helps you write specs in Markdown, refine them, and generate code with Claude. Your docs and chats are auto-saved locally.

    <div className="inline-block border rounded-lg p-6 mt-6 bg-gradient-to-r from-blue-50 to-purple-50">
      <div className="flex items-start gap-4">
        <img src="https://mintlify.s3.us-west-1.amazonaws.com/specstory/bearclaude.svg" alt="BearClaude" className="w-16 h-16 flex-shrink-0" />

        <div>
          <h4 className="font-semibold mb-2">BearClaude</h4>
          <p className="text-sm text-gray-600 mb-4">Write Specs, Generate Code</p>
          <p className="text-xs text-gray-500 mb-4">macOS 15+ with Apple Silicon</p>
          <a href="/bearclaude/introduction" className="inline-block bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-all font-medium shadow-md hover:shadow-lg" style={{backgroundColor: '#2563eb', color: '#ffffff'}}>Try BearClaude →</a>
        </div>
      </div>
    </div>
  </Tab>
</Tabs>

## Why Preserving Intent Matters

Saving your prompts and specs along with your code isn't just about documentation. It's about unlocking the full potential of AI-first development.

<AccordionGroup>
  <Accordion title="✨ For You" defaultOpen>
    * Never lose context between sessions
    * Build on past work with full understanding
    * Learn from your own prompt evolution
    * Accelerate development with reusable patterns
  </Accordion>

  <Accordion title="👥 For Your Team">
    * Enable meaningful code reviews with context
    * Share AI techniques and best practices
    * Reduce onboarding time for new developers
    * Build collective intelligence over time
  </Accordion>

  <Accordion title="🚀 For Your Future">
    * Create a searchable knowledge base
    * Maintain understanding as you evolve your software with AI
    * Preserve architectural decisions and rationale
    * Future-proof your development workflow
  </Accordion>
</AccordionGroup>

## How Each Works

<Tabs>
  <Tab title="📦 Extensions Workflow" tab-id="extensions-flow">
    <div className="p-6 space-y-4">
      <div className="flex flex-col md:flex-row items-center gap-4 justify-center">
        <div className="bg-white border border-gray-200 rounded-lg p-5 text-center shadow-sm hover:shadow-md transition-shadow w-44 h-44 flex flex-col justify-center">
          <h3 className="font-semibold mb-1 text-sm">💬 Chat with AI</h3>
          <p className="text-xs text-gray-600">Use Cursor, VSCode+Copilot, or Claude Code as usual</p>
        </div>

        <div className="bg-white border border-gray-200 rounded-lg p-5 text-center shadow-sm hover:shadow-md transition-shadow w-44 h-44 flex flex-col justify-center">
          <h3 className="font-semibold mb-1 text-sm">💾 Save</h3>
          <p className="text-xs text-gray-600">SpecStory saves your prompts & AI responses automatically</p>
        </div>

        <div className="bg-white border border-gray-200 rounded-lg p-5 text-center shadow-sm hover:shadow-md transition-shadow w-44 h-44 flex flex-col justify-center">
          <h3 className="font-semibold mb-1 text-sm">📝 Generate Specs</h3>
          <p className="text-xs text-gray-600">Transform conversations into reusable specifications</p>
        </div>

        <div className="bg-white border border-gray-200 rounded-lg p-5 text-center shadow-sm hover:shadow-md transition-shadow w-44 h-44 flex flex-col justify-center">
          <h3 className="font-semibold mb-1 text-sm">🔄 Share & Evolve</h3>
          <p className="text-xs text-gray-600">Build team knowledge & auto-generate AI rules</p>
        </div>
      </div>
    </div>
  </Tab>

  <Tab title="🐻 BearClaude Workflow" tab-id="bearclaude-flow">
    <div className="p-6 space-y-4">
      <div className="flex flex-col md:flex-row items-center gap-4 justify-center">
        <div className="bg-white border border-gray-200 rounded-lg p-5 text-center shadow-sm hover:shadow-md transition-shadow w-44 h-44 flex flex-col justify-center">
          <h3 className="font-semibold mb-1 text-sm">💡 Think</h3>
          <p className="text-xs text-gray-600">Write requirements, roadmaps, and workplans in Markdown</p>
        </div>

        <div className="bg-white border border-gray-200 rounded-lg p-5 text-center shadow-sm hover:shadow-md transition-shadow w-44 h-44 flex flex-col justify-center">
          <h3 className="font-semibold mb-1 text-sm">⚡ Execute</h3>
          <p className="text-xs text-gray-600">Run your polished specs directly with Claude Code</p>
        </div>

        <div className="bg-white border border-gray-200 rounded-lg p-5 text-center shadow-sm hover:shadow-md transition-shadow w-44 h-44 flex flex-col justify-center">
          <h3 className="font-semibold mb-1 text-sm">💾 Save</h3>
          <p className="text-xs text-gray-600">Your docs and chats are auto-saved the SpecStory way. Always local</p>
        </div>

        <div className="bg-white border border-gray-200 rounded-lg p-5 text-center shadow-sm hover:shadow-md transition-shadow w-44 h-44 flex flex-col justify-center">
          <h3 className="font-semibold mb-1 text-sm">🔄 Repeat</h3>
          <p className="text-xs text-gray-600">Edit and refine as your product understanding evolves</p>
        </div>
      </div>
    </div>
  </Tab>
</Tabs>

<Tip>
  **Ready to transform your AI development workflows?**
</Tip>

## Stay Connected

Follow us for updates, tips, and AI development insights:

<div className="flex gap-4 mt-4 justify-center">
  <a href="https://twitter.com/specstoryai" className="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg hover:border-gray-400 hover:shadow-sm transition-all">
    <span>🐦 Twitter</span>
  </a>

  <a href="https://www.linkedin.com/company/specstory" className="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg hover:border-gray-400 hover:shadow-sm transition-all">
    <span>💼 LinkedIn</span>
  </a>
</div>