Snips

A macOS-native snippet management tool designed for building LLM prompts from reusable text snippets.

Quick access via global shortcuts enables efficient search, selection, and combination of multiple snippets.

Background

I often include the same snippets in my prompts (eg. instructions to lint, update checklists, capture screenshots) and needed a way to quickly capture and combine these reusable pieces into comprehensive prompts for LLM interactions.

This project serves as a practical demonstration of my LLM-assisted development workflow. Rather than relying solely on scattered code comments and ad-hoc documentation, I structure projects around four foundational documents that guide both human developers and AI agents:

Documentation Structure

1. VISION.md - Product vision and strategic direction

   • Defines the product's purpose, target users, and core use cases
   • Establishes MVP feature scope and future enhancement roadmap
   • Serves as the north star for all development decisions
   • Helps LLMs understand the "why" behind features and architectural choices

2. STANDARDS.md - Coding standards and quality requirements

   • Comprehensive coding standards for TypeScript and Rust
   • Tooling configuration (ESLint, Prettier, Clippy, rustfmt)
   • Testing requirements, performance targets, and accessibility guidelines
   • Ensures LLMs produce consistent, high-quality code that passes all checks

3. TECH_DESIGN.md - Technical architecture and implementation details

   • Complete system architecture and technology stack decisions
   • Database schema, API design, and component structure
   • Technical constraints, security considerations, and risk mitigation
   • Provides LLMs with the architectural context needed for implementation

4. ROADMAP.md - Phased development plan with concrete tasks

   • Breaks down development into phases with specific, actionable task groups
   • Documents task dependencies to enable parallel work by multiple agents
   • Tracks completion status and provides success criteria for each phase
   • Serves as a coordination layer for both humans and AI assistants

This documentation-first approach enables efficient collaboration with LLM coding assistants by providing comprehensive context upfront, reducing back-and-forth clarifications, and ensuring consistent output aligned with project goals.

Features

• Quick Snippet Capture: Global shortcut (Cmd+Shift+A) to save selected text as a snippet
• Fast Search: Full-text search with FTS5 across snippet names and tags (Cmd+Shift+S)
• Multi-Select: Select and combine multiple snippets into a single clipboard entry
• Usage Analytics: Track snippet usage frequency to improve search ranking
• Menubar Integration: Persistent menubar icon with selection count badge
• Local-First: SQLite storage for fast, offline-ready performance

Technology Stack

• Framework: Tauri 2.x (Rust + Web frontend)
• Frontend: React with TypeScript
• Styling: TailwindCSS
• Database: SQLite with FTS5 full-text search
• State Management: Zustand
• Build Tool: Vite
• Testing: Vitest + React Testing Library

Getting Started

Prerequisites

• Node.js >= 18.0.0
• Rust >= 1.82.0 (⚠️ Important: Tauri dependencies require Rust 1.82+)
• npm >= 9.0.0
• mise (recommended for version management)

Installation

# Clone the repository
git clone [email protected]:utensils/snips.git
cd snips

# Install required tool versions (if using mise)
mise install

# Install npm dependencies
npm install

# IMPORTANT: Restart your shell after mise install to use the correct Rust version
# Then verify Rust version:
rustc --version  # Should show 1.82.0 or higher

Note: If you don't use mise, ensure you have Rust 1.82+ installed manually via rustup.

Development

# Run in development mode with hot-reload
npm run tauri dev

# Build for production
npm run tauri build

The compiled application will be in src-tauri/target/release/.

Common Commands

# Code quality
npm run check-all          # Run all checks before committing
npm run format             # Format code
npm run lint               # Lint TypeScript/React

# Testing
npm run test               # Run tests in watch mode
npm run test:coverage      # Generate coverage report

# Rust
cargo fmt                  # Format Rust code
cargo clippy               # Lint Rust code
cargo test                 # Run Rust tests

Project Structure

snips/
├── src/                    # Frontend source
│   ├── components/        # React components
│   ├── hooks/            # Custom React hooks
│   ├── stores/           # Zustand stores
│   ├── lib/              # Utilities and helpers
│   └── types/            # TypeScript type definitions
├── src-tauri/             # Tauri/Rust backend
│   ├── src/
│   │   ├── commands/     # Tauri command handlers
│   │   ├── services/     # Business logic
│   │   ├── models/       # Data structures
│   │   └── main.rs       # Application entry point
│   └── Cargo.toml
├── public/               # Static assets
└── package.json

Contributing

We welcome contributions! Follow these steps:

1. Fork and clone the repository
2. Create a branch: git checkout -b feature/your-feature-name
3. Make your changes following our coding standards
4. Run quality checks: npm run check-all
5. Commit using Conventional Commits (e.g., feat(search): add fuzzy matching)
6. Push and create a Pull Request

Standards

• All code must pass ESLint/Clippy with no warnings
• All code must be formatted with Prettier/rustfmt
• All tests must pass; new features require tests
• TypeScript strict mode must be satisfied
• No any types or Rust unwrap() in production code

Git hooks automatically run formatting, linting, and type checking on commit.

See STANDARDS.md for complete guidelines.

Documentation

• VISION.md - Product vision and roadmap
• TECH_DESIGN.md - Technical architecture
• STANDARDS.md - Coding standards

Recommended IDE Setup

VS Code with extensions: Tauri, rust-analyzer, ESLint, Prettier

License

MIT License - see LICENSE for details.

Support

For issues or questions, please open an issue on GitHub.