### Subframe CLI Configuration Prompts Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/installation.mdx Guides users through configuring Subframe component sync location, alias, and Tailwind CSS integration. ```bash Where should the Subframe components be synced to? › ./src Configure an alias for the subframe component directory (e.g. @/ui) › @/ui/* Do you want Subframe to configure your Tailwind config? › (Y/n) Would you like to sync all of your Subframe components? › (Y/n) Would you like to install dependencies? › (Y/n) ``` -------------------------------- ### Astro Project Management Commands Source: https://github.com/subframeapp/subframe/blob/main/starter-kits/astro/README.md This table lists common npm commands for managing an Astro project. These include installing dependencies, starting a development server, building for production, and previewing the build. ```sh npm install ``` ```sh npm run dev ``` ```sh npm run build ``` ```sh npm run preview ``` ```sh npm run astro ... ``` ```sh npm run astro -- --help ``` -------------------------------- ### Install Tailwind CSS Dependencies (npm, yarn, pnpm, bun) Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/framework-guides/manual.mdx Installs Tailwind CSS, PostCSS, and Autoprefixer using various package managers. These are essential for styling with Tailwind CSS. ```bash npm install -D tailwindcss@^3 postcss autoprefixer ``` ```bash yarn add -D tailwindcss@^3 postcss autoprefixer ``` ```bash pnpm add -D tailwindcss@^3 postcss autoprefixer ``` ```bash bun add -D tailwindcss@^3 postcss autoprefixer ``` -------------------------------- ### Install Subframe Core Dependency (npm, yarn, pnpm, bun) Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/framework-guides/manual.mdx Installs the `@subframe/core` package, which is a core dependency for Subframe functionality. This command uses various package managers. ```bash npm install @subframe/core@latest ``` ```bash yarn add @subframe/core@latest ``` ```bash pnpm add @subframe/core@latest ``` ```bash bun add @subframe/core@latest ``` -------------------------------- ### Initialize Subframe CLI in Package Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/framework-guides/monorepo.mdx Installs and initializes the Subframe CLI within the '@repo/subframe' package, setting up synchronization and specifying the UI directory. ```bash cd packages/subframe && npx @subframe/cli@latest init --sync --dir ui ``` ```bash cd packages/subframe && yarn dlx @subframe/cli@latest init --sync --dir ui ``` ```bash cd packages/subframe && pnpx @subframe/cli@latest init --sync --dir ui ``` ```bash cd packages/subframe && bunx --bun @subframe/cli@latest init --sync --dir ui ``` -------------------------------- ### Install Subframe CLI Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/installation.mdx Initializes Subframe in your project. Supports npm, yarn, pnpm, and bun. ```bash npx @subframe/cli@latest init ``` ```bash yarn dlx @subframe/cli@latest init ``` ```bash pnpx @subframe/cli@latest init ``` ```bash bunx @subframe/cli@latest init ``` -------------------------------- ### Create Astro Project with Basics Template Source: https://github.com/subframeapp/subframe/blob/main/starter-kits/astro/README.md This command initializes a new Astro project using the 'basics' starter kit. It requires Node.js and npm to be installed. ```sh npm create astro@latest -- --template basics ``` -------------------------------- ### Link Monorepo Dependencies Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/framework-guides/monorepo.mdx Runs the package manager's install command to link local dependencies within the monorepo after adding the '@repo/subframe' package. ```bash npm install ``` ```bash yarn install ``` ```bash pnpm install ``` ```bash bun install ``` -------------------------------- ### Install Subframe with Tailwind CSS v4 (CLI) Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/theme.mdx Commands to install Subframe with experimental support for Tailwind CSS v4 using different package managers. This setup requires the `--css-type tailwind-v4` flag. ```bash npx @subframe/cli@latest init --css-type tailwind-v4 ``` ```bash yarn dlx @subframe/cli@latest init --css-type tailwind-v4 ``` ```bash pnpx @subframe/cli@latest init --css-type tailwind-v4 ``` ```bash bunx @subframe/cli@latest init --css-type tailwind-v4 ``` -------------------------------- ### Install Local Subframe Package to App Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/framework-guides/monorepo.mdx Adds the local '@repo/subframe' package as a dependency to a frontend application's package.json, enabling its use in the app. ```text "@repo/subframe": "*" ``` ```text "@repo/subframe": "workspace:*" ``` -------------------------------- ### Subframe CLI Authentication Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/installation.mdx Prompts for Subframe access token after attempting to find existing credentials. Requires visiting a URL for new credentials. ```bash > No existing credentials found. > To get new credentials, please visit the following URL in your web browser: > https://app.subframe.com/cli/auth > You will need to login then enter the provided credentials below. ? Access token › ``` -------------------------------- ### Create Subframe Sync Configuration Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/framework-guides/manual.mdx Creates a `.subframe/sync.json` file to configure Subframe component syncing. This includes the target directory, import alias, and project ID. ```json { "directory": "./src/ui", "importAlias": "@/ui/*", "projectId": "YOUR_PROJECT_ID" } ``` -------------------------------- ### Install Subframe CLI in Next.js Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/framework-guides/nextjs.mdx Installs the Subframe CLI and initializes the project configuration. This command should be run in the root of your Next.js repository. ```npm npx @subframe/cli@latest init ``` ```yarn yarn dlx @subframe/cli@latest init ``` ```pnpm pnpx @subframe/cli@latest init ``` ```bun bunx --bun @subframe/cli@latest init ``` -------------------------------- ### Initialize Tailwind CSS Configuration (npm, yarn, pnpm, bun) Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/framework-guides/manual.mdx Initializes the Tailwind CSS configuration file, creating `tailwind.config.js`. This command is executed using different package manager runtimes. ```bash npx tailwindcss init -p ``` ```bash yarn dlx tailwindcss init -p ``` ```bash pnpx tailwindcss init -p ``` ```bash bunx tailwindcss init -p ``` -------------------------------- ### Create Subframe Package with Turborepo Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/framework-guides/monorepo.mdx Generates a new workspace package named '@repo/subframe' within a Turborepo monorepo. This package will house the Subframe components. ```bash npx turbo generate workspace --name @repo/subframe --type package ``` ```bash yarn turbo generate workspace --name @repo/subframe --type package ``` ```bash pnpm turbo generate workspace --name @repo/subframe --type package ``` ```bash bunx turbo generate workspace --name @repo/subframe --type package ``` -------------------------------- ### Subframe Package ESLint Configuration Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/framework-guides/monorepo.mdx Configures ESLint for the '@repo/subframe' package using the internal React ESLint configuration provided by the monorepo. ```javascript import { config } from "@repo/eslint-config/react-internal"; /** @type {import("eslint").Linter.Config} */ export default config; ``` -------------------------------- ### Configure Tailwind CSS Content Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/framework-guides/manual.mdx Updates the `tailwind.config.js` file to include the `src` directory for Tailwind CSS to scan for classes. This ensures styles are applied correctly to your components. ```javascript /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./index.html", "./src/**/*.{js,jsx,ts,tsx}" ], theme: { extend: {}, }, plugins: [], presets: [] } ``` -------------------------------- ### Subframe Package tsconfig.json Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/framework-guides/monorepo.mdx Defines the TypeScript configuration for the '@repo/subframe' package, extending a shared React library configuration and specifying output directory and included files. ```json { "extends": "@repo/typescript-config/react-library.json", "compilerOptions": { "outDir": "dist" }, "include": ["ui"], "exclude": ["node_modules", "dist"] } ``` -------------------------------- ### Sync All Components (npm, yarn, pnpm, bun) Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/developing/syncing-components.mdx Syncs all Subframe components to your local codebase. This command fetches the latest component code from Subframe and creates local copies. Ensure you have the Subframe CLI installed before running. ```bash npx @subframe/cli@latest sync --all ``` ```bash yarn dlx @subframe/cli@latest sync --all ``` ```bash pnpx @subframe/cli@latest sync --all ``` ```bash bunx --bun @subframe/cli@latest sync --all ``` -------------------------------- ### Import CSS in Main Application File Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/framework-guides/manual.mdx Imports the main CSS file (`styles.css`) into your application's entry point (`src/main.tsx`). This makes the Tailwind styles available throughout your React application. ```typescript import './styles.css'; ``` -------------------------------- ### Configure Subframe Sync Import Alias Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/framework-guides/monorepo.mdx Specifies the import alias for Subframe components within the monorepo, ensuring correct imports in the UI applications. This file is created by the Subframe CLI. ```json { "directory": "ui", "importAlias": "@repo/subframe/*" } ``` -------------------------------- ### Export Subframe Components in package.json Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/framework-guides/monorepo.mdx Configures the 'exports' field in the '@repo/subframe' package.json to make Subframe components and Tailwind CSS config discoverable by other applications in the monorepo. ```json { "name": "@repo/subframe", "version": "0.0.0", "private": true, "exports": { ".": "./ui/index.ts", "./components/*": "./ui/components/*.tsx", "./layouts/*": "./ui/layouts/*.tsx", "./tailwind-config": "./ui/tailwind.config.js" }, "dependencies": { "@subframe/core": "^1.141.0" }, "devDependencies": { "@repo/eslint-config": "*", "@repo/typescript-config": "*" } } ``` -------------------------------- ### Include Tailwind CSS Directives in CSS Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/framework-guides/manual.mdx Adds the necessary Tailwind CSS directives to your main CSS file (`src/styles.css`). These directives enable Tailwind's base, component, and utility styles. ```css @tailwind base; @tailwind components; @tailwind utilities; ``` -------------------------------- ### Include Subframe Preset in Tailwind Config Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/framework-guides/manual.mdx Adds Subframe's Tailwind CSS preset to your `tailwind.config.js`. This ensures that your Subframe theme settings are applied correctly to your application's styles. ```javascript /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./index.html", "./src/**/*.{js,jsx,ts,tsx}" ], theme: { extend: {}, }, plugins: [], presets: [ require("./src/ui/tailwind.config") ] } ``` -------------------------------- ### Okta IdP Metadata URL Structure Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/sso/okta.mdx The typical structure of the Identity Provider (IdP) metadata URL provided by Okta, which is required by Subframe to finalize SSO setup. ```text https://.okta.com/apps//sso/saml/metadata ``` -------------------------------- ### Configure TypeScript import aliases in tsconfig.app.json Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/framework-guides/vite.mdx Configures TypeScript to understand import aliases, specifically mapping '@/*' to './src/*'. This allows for cleaner import paths in your project. Ensure you have '@types/node' installed. ```json { "compilerOptions": { "baseUrl": "./", "paths": { "@/*": [ "./src/*" ] }, "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", "target": "ES2020", "useDefineForClassFields": true, "lib": ["ES2020", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, /* Bundler mode */ "moduleResolution": "bundler", "allowImportingTsExtensions": true, "isolatedModules": true, "moduleDetection": "force", "noEmit": true, "jsx": "react-jsx", /* Linting */ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, "noUncheckedSideEffectImports": true }, "include": ["src"] } ``` -------------------------------- ### Configure ESLint for Type-Aware Linting in Vite + React + TypeScript Source: https://github.com/subframeapp/subframe/blob/main/starter-kits/vite/README.md This snippet demonstrates how to configure ESLint to enable type-aware linting rules for a React project using TypeScript and Vite. It involves setting parserOptions in the ESLint configuration file and extending specific TypeScript ESLint plugins. ```javascript export default { // other rules... parserOptions: { ecmaVersion: 'latest', sourceType: 'module', project: ['./tsconfig.json', './tsconfig.node.json'], tsconfigRootDir: __dirname, }, } ``` -------------------------------- ### Configure Tailwind CSS with Subframe Preset (JavaScript) Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/framework-guides/monorepo.mdx This snippet shows how to configure your `tailwind.config.js` file to use Subframe's Tailwind CSS preset. It imports the preset and includes the necessary paths for Subframe component files in the `content` array. ```javascript /** @type {import('tailwindcss').Config} */ export default { content: [ "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", "./app/**/*.{js,ts,jsx,tsx}", "./ui/**/*.{js,ts,jsx,tsx}", "../../packages/subframe/ui/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], presets: [require("@repo/subframe/tailwind-config")], }; ``` -------------------------------- ### Subframe TrackCard with Slots Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/developing/props-and-slots.mdx This example showcases customizing a Subframe component using slots for enhanced flexibility. It demonstrates how to pass dynamic content and event handlers, such as an onClick handler for a favorite button and an optimized Image component with alt text via an image slot. ```tsx "use client" import { TrackCardWithSlots } from "@/ui/components/TrackCardWithSlots" import Image from "next/image" function TrackCardWithSlotsExample() { const [isFavorite, setIsFavorite] = useState(false) function handleFavoriteClick() { setIsFavorite((prev) => !prev) } const favoriteIcon = isFavorite ? "FeatherHeartOff" : "FeatherHeart" return ( } imageSlot={ // We can pass an arbitrary React node here // such as Next's component, // allowing us to optimize images and add alt text Tame Impala Currents Cover Art } genre="Disco" /> ) } export default TrackCardWithSlotsExample ``` -------------------------------- ### Subframe TrackCard with Props Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/developing/props-and-slots.mdx This example demonstrates customizing a Subframe component using only props. It shows how to pass static data like title, artist, length, genre, and image URL. Limitations include the inability to pass event handlers or dynamically change elements like a favorite button. ```tsx "use client" import { TrackCardWithProps } from "@/ui/components/TrackCardWithProps" function TrackCardWithPropsExample() { const [isFavorite, setIsFavorite] = useState(false) function handleFavoriteClick() { setIsFavorite((prev) => !prev) } const favoriteIcon = isFavorite ? "FeatherHeartOff" : "FeatherHeart" return ( are not exposed image="/covers/tame_impala-currents.jpg" // We have no way to add an onClick handler or an icon to our // FavoriteButton here, since it's events are not exposed /> ) } export default TrackCardWithPropsExample ``` -------------------------------- ### Astro Project Structure Overview Source: https://github.com/subframeapp/subframe/blob/main/starter-kits/astro/README.md This snippet shows the typical file and folder structure of a basic Astro project. Key directories include 'public' for static assets and 'src' for layouts and pages. ```text / ├── public/ │ └── favicon.svg ├── src/ │ ├── layouts/ │ │ └── Layout.astro │ └── pages/ │ └── index.astro └── package.json ``` -------------------------------- ### Configure Subframe MCP in Gemini CLI Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/ai/mcp-server.mdx This JSON snippet shows how to configure the Gemini CLI to use the Subframe MCP server. The configuration should be added to the 'mcpServers' object in either the global '~/.gemini/settings.json' or local '.gemini/settings.json' file, specifying the 'httpUrl'. ```json { "mcpServers": { "subframe": { "httpUrl": "https://docs.subframe.com/mcp" } } } ``` -------------------------------- ### Okta SAML 2.0 Single Sign-On Configuration Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/sso/okta.mdx Configuration details for setting up SAML 2.0 in Okta for Subframe. This includes the Single sign-on URL, Audience URI, Default RelayState, Name ID format, and attribute mappings required for successful integration. ```text Setting: Single sign-on URL Value: https://api.subframe.com/auth/v1/sso/saml/acs Setting: Use this for Recipient URL and Destination URL Value: ✔️ Setting: Audience URI (SP Entity ID) Value: https://api.subframe.com/auth/v1/sso/saml/metadata Setting: Default RelayState Value: https://app.subframe.com Setting: Name ID format Value: EmailAddress Setting: Application username Value: Email Setting: Update applicate username on Value: Create and update ``` -------------------------------- ### Sync Specific Components (npm, yarn, pnpm, bun) Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/developing/syncing-components.mdx Syncs specified Subframe components (e.g., Alert, Accordion) to your local codebase. This allows for targeted updates of individual components. List the component names after the sync command. ```bash npx @subframe/cli@latest sync Alert Accordion ``` ```bash yarn dlx @subframe/cli@latest sync Alert Accordion ``` ```bash pnpx @subframe/cli@latest sync Alert Accordion ``` ```bash bunx --bun @subframe/cli@latest sync Alert Accordion ``` -------------------------------- ### Astro API Endpoint Configuration Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/ai/export-to-cursor.mdx Demonstrates how to configure Astro to build API endpoints by setting the output mode to 'server' in `astro.config.js`. ```javascript import { defineConfig } from 'astro/config'; export default defineConfig({ // Add this line to enable server-side API endpoints output: 'server' }); ``` -------------------------------- ### Astro Client-Side Directives Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/ai/export-to-cursor.mdx Shows how to integrate React components with client-side directives in Astro for controlling when the component loads and hydrates. ```astro --- import ReactCounter from '../components/ReactCounter'; --- Astro + React

Welcome to Astro!

{/* Loads immediately on the client */} {/* Loads when the browser is idle */} {/* Loads only on the client, no SSR */} ``` -------------------------------- ### Clone Lovable Project Repository Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/ai/export-to-lovable.mdx This command is used to download the repository for your Lovable project to your local machine, allowing you to run and modify the project. ```bash git clone ... ``` -------------------------------- ### Configure Subframe MCP in Cursor Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/ai/mcp-server.mdx This JSON configuration allows Cursor to connect to the Subframe MCP server, making its documentation searchable within the IDE. It requires adding a 'subframe' entry to the 'mcpServers' object in the 'mcp.json' file. ```json { "mcpServers": { "subframe": { "url": "https://docs.subframe.com/mcp" } } } ``` -------------------------------- ### Magic Link Login Form - React (With Logic) Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/developing/adding-business-logic.mdx This React code enhances a magic link login form by adding business logic. It includes state management for submission status and a simulated network request function (`fakeFetch`). The `handleSubmit` function handles form submission, updates the UI to show a loading state, and simulates sending a magic link. ```tsx import { DialogLayout } from "@/ui/layouts/DialogLayout" import { TextField } from "@/ui/components/TextField" import { Button } from "@/ui/components/Button" import { useState, type FormEvent } from "react" const fakeFetch = (email: string | undefined) => { return new Promise((resolve, reject) => { setTimeout(() => { if (!email) { reject(new Response("Email is required", { status: 400 })) } resolve(new Response("Success!", { status: 200 })) }, 1000) }) } function App() { const [submitting, setSubmitting] = useState(false) async function handleSubmit(e: FormEvent) { e.preventDefault() setSubmitting(true) const formData = new FormData(e.currentTarget) const email = formData.get("email")?.toString() try { await fakeFetch(email) } catch (e) { console.error(e) } finally { setSubmitting(false) } } return (
Magic Link Login
) } export default App ``` -------------------------------- ### Import and Use Subframe Alert Component in React Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/developing/using-components.mdx Demonstrates importing the Alert component from Subframe's UI library and using it within a React application. It shows how to pass props like 'variant', 'icon', 'title', and 'description' to customize the alert's appearance and content. ```tsx import { Alert } from "@/ui/components/Alert" function App() { return ( ) } export default App ``` -------------------------------- ### Subframe General Cursor Rules Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/ai/export-to-cursor.mdx Defines general rules for Subframe projects, including how to identify project type (Next.js, Vite, Astro), font configuration using Google Fonts, Subframe component synchronization command, development guidelines (component usage, package manager preference, TypeScript, Tailwind CSS, error handling, testing), and AI interaction best practices. ```markdown # Project Overview This project is built using components generated by a design tool called Subframe. The files for these components are located in the `ui` directory. NEVER EDIT THE FILES IN THE `ui` DIRECTORY. Instead, whem implementing business logic, wrap them in your own components. The `ui` directory may be in different places, so check the codebase first to make sure you find it. If you can't find it on the first try, look harder. It could be in the `src/ui` directory. If you can't find it, ask the user where it is. # General Guidelines Check if this project uses Next.js by looking for a `next.config.(js|mjs|cjs|ts|cts|mts)` file. If so, adhere to the guidelines in @nextjs.mdc. Check if this project uses vite by looking for a `vite.config.(js|mjs|cjs|ts|cts|mts)` file. If so, adhere to the guidelines in @vite.mdc. Check if this project uses astro by looking for a `astro.config.(js|mjs|cjs|ts|cts|mts)` file. If so, adhere to the guidelines in @astro.mdc. Check `ui/tailwind.config.js` for the fonts used in the project. Import them using Google Fonts adhering the to following structure: When the user wants to sync their Subframe components, run `[PACKAGE_MANAGER_COMMAND] exec @subframe/cli@latest sync -all`. # Development Guidelines - When building UI, try using the Subframe components in the `ui` directory first, wrapping them in your own components to implement business logic. - When creating a page layout, try using the layouts in `ui/layouts` first. If you implement your own layout, don't use one from `ui/layouts`. - Respect the user's choice for a package manager. Use `npm` if you find a `package-lock.json` file in the project, `yarn` if you find a `yarn.lock` file, `pnpm` if you find a `pnpm.lock` file and `bun` if you find a `bun.lock` or `bun.lockb` file. If the desired command fails, fall back to `npm`. - Use TypeScript for type safety. - Follow the coding standards defined in the ESLint configuration. - Ensure all components are responsive and accessible. - Make sure the project uses TailwindCSS v3. Subframe is not compatible with TailwindCSS v4 yet. - Use Tailwind CSS for styling, adhering to the defined color palette. You can use all tokens defined in `tailwind.config.js` and `ui/tailwind.config.js`. - Prefer using the libraries already installed within the project instead of installing new ones. Only if necessary, install your own. - If you're not sure how to implement something, use the links provided in additional resources. - Build production ready code. If you have to store data, use a database ORM. Handle user inputs with extreme care, validating and sanitizing any inputs before saving them. For example, use prepared statements in SQL before saving inputs and Zod for validating inputs. - When building business logic, create test files first and run them using the testing library most applicable for the framework the project is using. Iterate until all tests pass and we get no linter errors from TypeScript or ESLint. - After implementing anything, run the project's `build` and `test` (if applicable) commands and iterate until there are no more errors. # AI Interaction Guidelines - When generating code, prioritize TypeScript and React best practices. - Ensure that any new components are reusable and follow the existing design patterns. - Minimize the use of AI generated comments, instead use clearly named variables and functions. - Always validate user inputs and handle errors gracefully. - Use the existing components and pages as a reference for the new components and pages. # Additional Resources - TypeScript Handbook: https://www.typescriptlang.org/docs/handbook/intro.html - TailwindCSS Documentation: https://v3.tailwindcss.com/docs/installation/using-postcss - React Documentation: https://react.dev/reference/react - Supabase Documentation: https://supabase.com/docs - Subframe Help: https://help.subframe.com/en/collections/9444971-developing-with-subframe - Subfame Documentation: https://docs.subframe.com ``` -------------------------------- ### Vite Project Routing with React Router Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/ai/export-to-cursor.mdx Illustrates setting up lazy-loaded pages using React Router in a Vite project. Assumes pages are in `src/pages` and routed through `src/App.tsx`. ```typescript import React from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; // Lazy load pages const HomePage = React.lazy(() => import('./pages/HomePage')); const AboutPage = React.lazy(() => import('./pages/AboutPage')); function App() { return ( Loading...}> } /> } /> ); } ``` -------------------------------- ### Import Theme CSS in Global Styles Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/theme.mdx Instructions for importing the Subframe theme CSS file into your project's global CSS file, typically `index.css`, `styles.css`, or `globals.css`. This ensures the theme is applied correctly. ```css @import "tailwindcss"; @import "../ui/theme.css"; ``` -------------------------------- ### Next.js Client-Side Logic Component Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/ai/export-to-cursor.mdx Demonstrates how to wrap client-side logic in a separate component for Next.js pages, avoiding direct 'use client' directives on pages. ```typescript /* In your page file (e.g., src/app/page.tsx): import ClientSideComponent from '../components/ClientSideComponent'; // In the page's JSX: */ // src/components/ClientSideComponent.tsx 'use client'; export default function ClientSideComponent() { // Your client-side logic here return (
This component handles client-side logic.
); } ``` -------------------------------- ### Add Subframe MCP Server via Claude CLI Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/ai/mcp-server.mdx This bash command adds the Subframe MCP server to Claude's configuration using the 'claude mcp add' command. It specifies the transport protocol as 'http' and provides the server name 'subframe' along with its URL. ```bash claude mcp add --transport http subframe https://docs.subframe.com/mcp ``` -------------------------------- ### Magic Link Login Form - React (No Logic) Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/developing/adding-business-logic.mdx This React code represents a basic magic link login form UI generated by Subframe, without any business logic or interactivity. ```tsx import { DialogLayout } from "@/ui/layouts/DialogLayout" import { TextField } from "@/ui/components/TextField" import { Button } from "@/ui/components/Button" function App() { return (
Magic Link Login
) } export default App ``` -------------------------------- ### Tailwind CSS v3 Configuration with Subframe Theme Tokens Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/theme.mdx This JavaScript configuration file (`tailwind.config.js`) defines the theme tokens for a project using Tailwind CSS v3 and Subframe. It extends Tailwind's default configuration with custom colors, font sizes, font families, and box shadows, enabling a consistent design system. ```javascript module.exports = { // ... theme: { extend: { colors: { brand: { 50: "rgb(250, 250, 250)", 100: "rgb(245, 245, 245)", 200: "rgb(229, 229, 229)", 300: "rgb(212, 212, 212)", 400: "rgb(163, 163, 163)", 500: "rgb(115, 115, 115)", 600: "rgb(38, 38, 38)", 700: "rgb(64, 64, 64)", 800: "rgb(38, 38, 38)", 900: "rgb(23, 23, 23)", }, neutral: { 0: "rgb(255, 255, 255)", 50: "rgb(250, 250, 250)", 100: "rgb(245, 245, 245)", 200: "rgb(229, 229, 229)", 300: "rgb(212, 212, 212)", 400: "rgb(163, 163, 163)", 500: "rgb(115, 115, 115)", 600: "rgb(82, 82, 82)", 700: "rgb(64, 64, 64)", 800: "rgb(38, 38, 38)", 900: "rgb(23, 23, 23)", 950: "rgb(10, 10, 10)", }, error: { 50: "rgb(254, 242, 242)", 100: "rgb(254, 226, 226)", 200: "rgb(254, 202, 202)", 300: "rgb(252, 165, 165)", 400: "rgb(248, 113, 113)", 500: "rgb(239, 68, 68)", 600: "rgb(220, 38, 38)", 700: "rgb(185, 28, 28)", 800: "rgb(153, 27, 27)", 900: "rgb(127, 29, 29)", }, warning: { 50: "rgb(240, 249, 255)", 100: "rgb(224, 242, 254)", 200: "rgb(186, 230, 253)", 300: "rgb(125, 211, 252)", 400: "rgb(56, 189, 248)", 500: "rgb(14, 165, 233)", 600: "rgb(2, 132, 199)", 700: "rgb(3, 105, 161)", 800: "rgb(7, 89, 133)", 900: "rgb(12, 74, 110)", }, success: { 50: "rgb(240, 253, 244)", 100: "rgb(220, 252, 231)", 200: "rgb(187, 247, 208)", 300: "rgb(134, 239, 172)", 400: "rgb(74, 222, 128)", 500: "rgb(34, 197, 94)", 600: "rgb(22, 163, 74)", 700: "rgb(21, 128, 61)", 800: "rgb(22, 101, 52)", 900: "rgb(20, 83, 45)", }, "brand-primary": "rgb(38, 38, 38)", "default-font": "rgb(23, 23, 23)", "subtext-color": "rgb(115, 115, 115)", "neutral-border": "rgb(229, 229, 229)", white: "rgb(255, 255, 255)", "default-background": "rgb(255, 255, 255)", }, fontSize: { caption: [ "12px", { lineHeight: "16px", fontWeight: "400", letterSpacing: "0em", }, ], "caption-bold": [ "12px", { lineHeight: "16px", fontWeight: "500", letterSpacing: "0em", }, ], body: [ "14px", { lineHeight: "20px", fontWeight: "400", letterSpacing: "0em", }, ], "body-bold": [ "14px", { lineHeight: "20px", fontWeight: "500", letterSpacing: "0em", }, ], "heading-3": [ "16px", { lineHeight: "20px", fontWeight: "600", letterSpacing: "0em", }, ], "heading-2": [ "20px", { lineHeight: "24px", fontWeight: "600", letterSpacing: "0em", }, ], "heading-1": [ "30px", { lineHeight: "36px", fontWeight: "600", letterSpacing: "0em", }, ], "monospace-body": [ "14px", { lineHeight: "20px", fontWeight: "400", letterSpacing: "0em", }, ], }, fontFamily: { caption: "Figtree", "caption-bold": "Figtree", body: "Figtree", "body-bold": "Figtree", "heading-3": "Figtree", "heading-2": "Figtree", "heading-1": "Figtree", "monospace-body": "monospace", }, boxShadow: { sm: "0px 1px 2px 0px rgba(0, 0, 0, 0.05)", default: "0px 1px 2px 0px rgba(0, 0, 0, 0.05)", md: "0px 4px 16px -2px rgba(0, 0, 0, 0.08), 0px 2px 4px -1px rgba(0, 0, 0, 0.08)", }, }, }, } ``` -------------------------------- ### Responsive Container Utility in CSS Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/theme.mdx Defines a CSS utility class 'container' that applies responsive horizontal padding based on viewport width. It uses predefined theme breakpoints to adjust padding for different screen sizes, ensuring content is centered and appropriately spaced. ```css @utility container { padding-left: 16px; padding-right: 16px; @media (width >= theme(--breakpoint-sm)) { padding-left: calc((100vw + 16px - 640px) / 2); padding-right: calc((100vw + 16px - 640px) / 2); } @media (width >= theme(--breakpoint-md)) { padding-left: calc((100vw + 16px - 768px) / 2); padding-right: calc((100vw + 16px - 768px) / 2); } @media (width >= theme(--breakpoint-lg)) { padding-left: calc((100vw + 16px - 1024px) / 2); padding-right: calc((100vw + 16px - 1024px) / 2); } @media (width >= theme(--breakpoint-xl)) { padding-left: calc((100vw + 16px - 1280px) / 2); padding-right: calc((100vw + 16px - 1280px) / 2); } @media (width >= theme(--breakpoint-2xl)) { padding-left: calc((100vw + 16px - 1536px) / 2); padding-right: calc((100vw + 16px - 1536px) / 2); } } @custom-variant mobile (@media (max-width: 767px)); ``` -------------------------------- ### Subframe Next.js Cursor Rules Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/ai/export-to-cursor.mdx Specifies rules for Next.js projects within the Subframe context. This rule set is applied when a Next.js configuration file is detected. ```markdown # Project Overview This is a project using Next.js. ``` -------------------------------- ### Okta SAML Attribute Statement Mapping Source: https://github.com/subframeapp/subframe/blob/main/packages/docs/sso/okta.mdx Required and optional attribute statement mappings for Okta to send user information to Subframe. The 'email' to 'user.email' mapping is mandatory for authentication. ```text Required: email to user.email Optional: Other mappings as per Okta setup and screenshot. ```