Documentation
v1.0.0GitHub
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
π€
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
π οΈ
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
π¨
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
π§ͺ
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
ποΈ
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
#
Heading
Section title
ΒΆ
Text
Regular text content
UI Components
React components for building vibecoding interfaces and editors.
Visual Editor
EditorDrag and drop interface for building prompts
Prompt Block
BlockIndividual block component with editing capabilities
Block Palette
EditorSidebar component for selecting and adding blocks
Template Picker
DialogDialog for selecting from pre-built templates
Editor Layout
LayoutContainer layout with sidebars for the editor