develop

Name: develop
Availability: InStock
Author: SubframeApp

Implement Subframe designs into production pages with business logic.

425|50|Updated Mar 4, 2024

Search Tags:#mcp #business-logic #design-implementation #component-sync #subframe #get_page_info

Ready to run

npx skills add https://github.com/SubframeApp/subframe --skill develop-subframeapp

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: develop
Source: https://github.com/SubframeApp/subframe/tree/main/plugins/claude/subframe/skills/develop
Command: npx skills add https://github.com/SubframeApp/subframe --skill develop-subframeapp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Implement Subframe designs in the codebase by translating designed layouts into workable production pages with integrated business logic.

Core Features & Use Cases

Fetch designs via MCP using get_page_info with a URL, ID, or name, then create the corresponding page in the codebase.
Sync components only when they do not exist locally, to ensure the latest presentational code blends with your business logic.
Add data fetching, forms, and event handling to make the page interactive and production-ready, following codebase patterns and keeping existing hooks and state in mind.

Quick Start

Fetch the design using get_page_info with the provided URL or ID, then implement the page in the codebase following the project's conventions.

Frequently Asked Questions about develop

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I turn a Subframe design into production code?▼

To turn a Subframe design into production code, fetch the design layout using the get_page_info MCP tool with a URL, ID, or name, then create the corresponding page in your codebase following existing project conventions.

How does component syncing work when implementing Subframe designs?▼

Component syncing fetches the latest presentational code from Subframe only when components do not exist locally, ensuring updated designs blend smoothly with your existing business logic without overwriting local implementations.

Can I wire business logic into Subframe designs during implementation?▼

Yes, you can wire business logic into Subframe designs by adding data fetching, form handling, and event management to the page, making it interactive and production-ready while keeping existing hooks and state in mind.

Do I need MCP tools to fetch Subframe designs into my codebase?▼

Yes, you need MCP tools like get_page_info, list_pages, and get_component_info to locate Subframe designs and components by URL, ID, or name before translating them into codebase pages.

What is the best way to ensure implemented Subframe pages follow codebase conventions?▼

The best way to ensure implemented Subframe pages follow codebase conventions is to fetch designs via MCP, sync components safely, and wire business logic while adhering to existing project patterns, hooks, and state management.

Why are my Subframe components not syncing correctly during implementation?▼

Subframe components only sync when they do not exist locally; if components are already present, syncing is skipped to protect existing presentational code and business logic from being overwritten.