Slide.code is a cross-platform Graphical Vibe Coding Environment (VCE) for Claude Code. It enables developers to write, test, and debug code visually. Operations teams benefit from faster development cycles and reduced errors. It connects to various tools and workflows, including databases, APIs, and cloud services.
git clone https://github.com/longtail-labs/slide.code.gitslide.code is a cross-platform Graphical Vibe Coding Environment (VCE) designed specifically for Claude Code users. This automation skill allows developers and AI practitioners to create and manage coding projects in a visually intuitive manner. By leveraging the capabilities of Claude Code, slide.code enhances the coding experience, making it easier to visualize and manipulate code structures. Although the time savings are currently unknown, the streamlined approach can significantly reduce the time spent on coding tasks, especially for complex projects. The key benefits of slide.code include its ability to simplify coding processes and improve productivity. With an intermediate implementation difficulty, users can set up the environment in approximately 30 minutes. This skill is particularly valuable for developers looking to enhance their workflow automation and for product managers who need to oversee coding projects without deep technical expertise. By utilizing slide.code, teams can expect to see improved collaboration and efficiency, as the visual coding environment facilitates better communication and understanding of project requirements. slide.code is best suited for developers, product managers, and AI practitioners who are involved in workflow automation and coding tasks. It is especially beneficial for those working in environments where visual coding can enhance understanding and speed up development cycles. For instance, a team working on a data engineering project can use slide.code to visualize data flows and coding logic, making it easier to identify bottlenecks and optimize processes. Implementation of slide.code requires an intermediate level of coding knowledge, but its user-friendly interface minimizes the learning curve. This skill fits seamlessly into AI-first workflows by allowing users to integrate AI automation into their coding practices. By adopting slide.code, teams can harness the power of AI to automate repetitive tasks, thereby freeing up time for more strategic initiatives. Overall, slide.code represents a significant step toward enhancing productivity in coding environments, making it a valuable addition to any developer's toolkit.
[{"step":"Set Up the Environment","action":"Install the Slide.code extension in Sortd (available in Chrome Web Store). Ensure you have admin access to Sortd’s settings to configure API keys for Gmail and HubSpot (or your CRM of choice).","tip":"Use Slide.code’s built-in API key manager to securely store credentials. Test the connection with a sample API call before proceeding."},{"step":"Design the UI Components","action":"Open Slide.code and create a new project named 'Sortd Lead Scoring'. Use the visual drag-and-drop interface to design the kanban overlay, score details modal, and automation settings panel. Map UI elements to Sortd’s existing components (e.g., cards, columns).","tip":"Leverage Slide.code’s component library to speed up design. For example, use pre-built kanban cards and modals to save time."},{"step":"Implement the Logic and API Integrations","action":"Write the scoring algorithm and API calls directly in Slide.code’s code editor. Use the provided templates for Gmail sentiment analysis and HubSpot CRM sync. Add error handling for API failures and data gaps.","tip":"Start with a minimal viable product (MVP) by scoring leads based on Gmail engagement alone, then layer in CRM data for higher accuracy."},{"step":"Test with Sample Data","action":"Use Slide.code’s testing sandbox to simulate real-world data. Input sample leads with known engagement metrics and CRM data to validate the scoring output. Check that cards move to the correct columns and scores update dynamically.","tip":"Create test cases for edge scenarios (e.g., missing CRM data, negative sentiment, or API timeouts) to ensure robustness."},{"step":"Deploy and Monitor","action":"Publish the module to your Sortd workspace. Monitor error logs and user feedback in Slide.code’s analytics dashboard. Adjust scoring rules and weights based on team feedback and conversion data.","tip":"Schedule a weekly review to refine the scoring algorithm. Use Sortd’s kanban boards to track which leads were successfully converted and correlate them with their scores."}]
No install command available. Check the GitHub repository for manual installation instructions.
git clone https://github.com/longtail-labs/slide.codeCopy the install command above and run it in your terminal.
Launch Claude Code, Cursor, or your preferred AI coding agent.
Use the prompt template or examples below to test the skill.
Adapt the skill to your specific use case and workflow.
Use Slide.code to visually design and implement a [FEATURE] for Sortd (ai-assistant) that integrates [SPECIFIC_TOOL_OR_SERVICE] into its kanban workflow. Create the UI components, logic, and API connections required to [PERFORM_ACTION]. Include error handling for [COMMON_ISSUES]. Generate the code in a modular structure with clear comments. Test the implementation with sample data: [SAMPLE_DATA].
### Visual Implementation of AI-Powered Lead Scoring for Sortd **Context:** The sales team at *Acme Corp* uses Sortd to manage leads in their Gmail shared inbox (`[email protected]`). They want to automate lead scoring based on email engagement, reply sentiment, and CRM data to prioritize high-value leads. We’ll use Slide.code to build a visual vibe-coded module that integrates with HubSpot’s API and Gmail’s AI features. --- #### **1. UI Components Designed in Slide.code** - **Kanban Board Overlay:** A floating panel in Sortd that displays a "Lead Score" column alongside the default "To Do," "In Progress," and "Done" columns. Each card now shows: - **Score (0-100):** Dynamically updated based on engagement metrics. - **Confidence Indicator:** A color-coded bar (green/yellow/red) showing the reliability of the score. - **Quick Actions:** Buttons to "Recalculate Score" or "Sync with HubSpot." - **Score Details Modal:** Clicking a card opens a modal with: - **Engagement Metrics:** Open rate, reply sentiment (positive/neutral/negative), and attachment downloads. - **CRM Data:** HubSpot lead status, deal stage, and last activity date. - **AI-Generated Insights:** Suggested next steps (e.g., "Follow up with a demo request" or "Escalate to Account Executive"). - **Automation Triggers:** A settings panel where admins can configure: - **Scoring Rules:** Weighted factors (e.g., 40% reply sentiment, 30% email opens, 30% HubSpot activity). - **Thresholds:** Auto-move leads to "High Priority" if score > 80. - **Sync Schedule:** Real-time or hourly updates. --- #### **2. Logic and API Connections** - **Gmail AI Integration:** - Uses Gmail’s built-in AI to analyze reply sentiment (via `gmail.googleapis.com/v1/users/me/messages`). - Tracks email opens via pixel tracking (embedded in Sortd’s email templates). - Example API call to fetch sentiment: ```python def analyze_sentiment(email_id): response = gmail_service.users().messages().get( userId='me', id=email_id, format='metadata', metadataHeaders=['Subject', 'From'] ).execute() # Use Gmail's AI to classify sentiment (simplified for example) sentiment = gmail_ai_client.classify_sentiment(response['snippet']) return sentiment ``` - **HubSpot CRM Sync:** - Pulls lead status, deal stage, and activity history via HubSpot’s REST API (`crm.objects.contacts`). - Pushes updated lead scores back to HubSpot as custom properties. - Example API call to fetch CRM data: ```python def get_hubspot_lead_data(contact_id): response = requests.get( f"https://api.hubapi.com/crm/v3/objects/contacts/{contact_id}", headers={"Authorization": f"Bearer {HUBSPOT_API_KEY}"} ) return response.json() ``` - **Scoring Algorithm:** - Combines metrics into a weighted score: ```python def calculate_lead_score(engagement, crm_data): score = ( (engagement['reply_sentiment_score'] * 0.4) + # 40% weight (engagement['open_rate'] * 0.3) + # 30% weight (crm_data['deal_stage_priority'] * 0.2) + # 20% weight (crm_data['last_activity_days'] * -0.1) # -10% weight (older activity = lower score) ) return max(0, min(100, score)) # Clamp between 0-100 ``` --- #### **3. Error Handling** - **API Failures:** - If HubSpot API is down, the module falls back to Gmail-only scoring and logs an error to Sortd’s activity feed. - Retry logic with exponential backoff for transient failures. - **Data Gaps:** - If CRM data is missing, the score defaults to Gmail engagement metrics with a warning icon. - **Rate Limits:** - Implements a debounce mechanism to avoid hitting Gmail/HubSpot API rate limits (e.g., max 10 requests/minute). --- #### **4. Testing with Sample Data** **Input Data:** ```json { "lead_email": "[email protected]", "gmail_metrics": { "open_count": 5, "reply_sentiment": "positive", "attachments_downloaded": 2 }, "hubspot_data": { "deal_stage": "qualified_lead", "last_activity_date": "2023-10-15", "deal_value": 15000 } } ``` **Output:** - **Lead Score:** 87/100 - **Confidence:** High (all data sources available) - **Suggested Action:** "Schedule demo with John Doe. High engagement and positive sentiment." - **Kanban Update:** Card moves to "High Priority" column automatically. --- #### **5. Deployment Steps** 1. **Install Slide.code Extension:** Add the Slide.code extension to Sortd’s Chrome extension. 2. **Configure API Keys:** Enter HubSpot and Gmail API keys in Sortd’s settings. 3. **Set Scoring Rules:** Define weights and thresholds in the automation panel. 4. **Test with Sample Leads:** Run the module on 5-10 historical leads to validate scores. 5. **Roll Out to Team:** Enable for the entire sales team and monitor error logs. --- **Result:** The sales team at *Acme Corp* reduced lead response time by 40% and increased conversion rates by 25% by prioritizing high-scoring leads. The module now handles 200+ leads daily with zero manual intervention.
AI assistant built for thoughtful, nuanced conversation
Get more done every day with Microsoft Teams – powered by AI
Automate security compliance and monitor real-time security posture seamlessly.
Automate your spreadsheet tasks with AI power
Agentic AI Workflow platform
Connected workspace for docs, wikis, and projects
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan