Documentation
v1.0.0
Framework Components

Components

Copy and paste these components into your project. Customize them to fit your vibecoding needs.

Prompt Blocks

Core building blocks for creating structured prompts. Each block serves a specific purpose in the AI conversation flow.

Core AI Blocks

Essential prompt engineering blocks

8 blocks
πŸ€–
AI Role
Define who the AI should be
🎯
Goal
Primary objective
πŸ“„
Context
Background information
πŸ“‹
Instructions
Step-by-step process to follow
⚠️
Constraint
Rules and limitations
⚑
Capability
What the AI can do
πŸ”§
Variable
Dynamic parameter
πŸ’¬
Example
Input/output demonstration

Technical Specs

Technical requirements and specifications

5 blocks
πŸ› οΈ
Tech Stack
Technologies and frameworks to use
πŸ—οΈ
Architecture
System architecture and patterns
🎨
Code Style
Coding conventions and style guide
⚑
Performance
Performance requirements and optimizations
πŸ›‘οΈ
Security
Security requirements and considerations

UI & Design

User interface and design specifications

4 blocks
🎨
Theme
Visual design system and styling
🧩
Component
UI component specification
πŸ“
Layout
Layout patterns and responsive design
β™Ώ
Accessibility
Accessibility requirements and standards

Development Process

Development workflow and processes

4 blocks
πŸ§ͺ
Testing
Testing strategy and requirements
πŸš€
Deployment
Deployment and CI/CD requirements
πŸ“š
Documentation
Documentation requirements
πŸ‘€
Code Review
Code review criteria and standards

Data & Integration

Data structures and external integrations

4 blocks
πŸ—„οΈ
Data Schema
Data structure and model definition
πŸ”Œ
API Spec
API endpoint specification
πŸ”—
Integration
External service integration
βœ…
Validation
Data validation and error handling

Content Blocks

Text and formatting blocks

2 blocks
#
Heading
Section title
ΒΆ
Text
Regular text content

UI Components

React components for building vibecoding interfaces and editors.

Visual Editor
Editor
Drag and drop interface for building prompts
Prompt Block
Block
Individual block component with editing capabilities
Block Palette
Editor
Sidebar component for selecting and adding blocks
Template Picker
Dialog
Dialog for selecting from pre-built templates
Editor Layout
Layout
Container layout with sidebars for the editor

Quick Links