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.