setup

Initialize Subframe CLI in projects with Node.js and Tailwind.

425|50|Updated Mar 4, 2024
One-click install
npx skills add https://github.com/SubframeApp/subframe --skill setup-subframeapp
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: setup
Source: https://github.com/SubframeApp/subframe/tree/main/plugins/claude/subframe/skills/setup
Command: npx skills add https://github.com/SubframeApp/subframe --skill setup-subframeapp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Set up Subframe in a project so that pages designed in Subframe render pixel-perfect in the local development environment.

Core Features & Use Cases

  • Initialize the Subframe CLI in a project (new or existing) to configure and sync components.
  • Configure fonts and Tailwind, ensuring consistent styling and project structure for pixel-perfect previews.
  • Validate setup by starting the dev server and verifying that Subframe pages render as designed.

Quick Start

Use the Subframe CLI to initialize the setup in a new or existing project.

Frequently Asked Questions about setup

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

FAQPage Schema
How do I set up Subframe to render pages pixel-perfect in local development?

To set up Subframe for pixel-perfect rendering, initialize the Subframe CLI in your project, configure fonts and Tailwind, then sync components to ensure local pages match the design.

Can I use Subframe with an existing Tailwind project?

Yes, Subframe setup works with both new and existing Tailwind projects, applying font configuration and component syncing to ensure consistent styling and pixel-perfect previews during local development.

What do I need to configure Subframe CLI for component syncing?

Subframe CLI setup requires an authentication token and project ID, a working development environment with Node.js, and Tailwind installed to sync components and configure fonts for pixel-perfect rendering.

Why does my Subframe page not render pixel-perfect after setup?

Subframe pages may not render pixel-perfect if fonts and Tailwind are misconfigured; validate setup by starting the dev server and verifying that synced components and styling match the designed pages.

Does Subframe CLI setup require Node.js and Tailwind installed first?

Yes, Subframe CLI setup requires a working development environment with Node.js and Tailwind installed, along with an authentication token and project ID, to initialize and sync components correctly.

What is Subframe CLI initialization for project setup?

Subframe CLI initialization configures a new or existing project by syncing components, applying font configuration, and integrating Tailwind to ensure designed pages render pixel-perfect locally.