@framingui/mcp-server 0.6.19 → 0.6.21

package/dist/cli/agent-md-templates.d.ts

@@ -1,16 +1,4 @@
-/**
- * Agent guidance templates for CLAUDE.md and AGENTS.md
- * Provides framework-specific Framingui workflow instructions
- */
 export type Framework = 'nextjs' | 'vite';
-/**
- * Generate CLAUDE.md section for Claude Code
- * (Claude Code-specific patterns and MCP integration)
- */
 export declare function generateClaudeMdSection(framework: Framework): string;
-/**
- * Generate AGENTS.md section for generic AI agents
- * (Platform-agnostic guidance for OpenAI Codex, Cursor, Windsurf, etc.)
- */
 export declare function generateAgentsMdSection(framework: Framework): string;
 //# sourceMappingURL=agent-md-templates.d.ts.map

package/dist/cli/agent-md-templates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"agent-md-templates.d.ts","sourceRoot":"","sources":["../../src/cli/agent-md-templates.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE1C;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,SAAS,EAAE,SAAS,GAAG,MAAM,CAsHpE;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,SAAS,EAAE,SAAS,GAAG,MAAM,CAoLpE"}
+{"version":3,"file":"agent-md-templates.d.ts","sourceRoot":"","sources":["../../src/cli/agent-md-templates.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE1C,wBAAgB,uBAAuB,CAAC,SAAS,EAAE,SAAS,GAAG,MAAM,CA4EpE;AAED,wBAAgB,uBAAuB,CAAC,SAAS,EAAE,SAAS,GAAG,MAAM,CAoDpE"}

package/dist/cli/agent-md-templates.js

@@ -1,311 +1,129 @@
-/**
- * Agent guidance templates for CLAUDE.md and AGENTS.md
- * Provides framework-specific Framingui workflow instructions
- */
-/**
- * Generate CLAUDE.md section for Claude Code
- * (Claude Code-specific patterns and MCP integration)
- */
 export function generateClaudeMdSection(framework) {
     const importPath = framework === 'nextjs' ? 'app/page.tsx' : 'src/App.tsx';
     return `
-## FramingUI Workflow (Claude Code)
+## FramingUI Workflow
 
-### MCP Server Connection
+### Authentication
 
-Framingui MCP server is configured in \`.mcp.json\`. Claude Code automatically loads 15 tools for screen generation.
-
-### Authentication (Step 1)
-
-Before generating any screens, authenticate:
+Before using licensed themes:
 
 \`\`\`bash
 framingui-mcp login
 \`\`\`
 
-**Important:** All 6 themes require authentication. No free themes are available.
-
-### Screen Generation Workflow (3 Steps)
-
-**Step 1/3:** Gather Context
-- Call \`get-screen-generation-context\` with user's screen description
-- Receive template matches, component suggestions with inline props/variants, and schema
-
-**Step 2/3:** Validate Definition
-- Generate Screen Definition JSON based on context
-- Call \`validate-screen-definition\` to verify structure
-- Apply autoFixPatches or fix any errors before proceeding
-
-**After Validation:** Write React Code Directly
-- Use components and import statements from Step 1 context
-- Apply theme recipes via variant props
-
-**Step 3/3:** Validate Environment (Optional)
-- Call \`validate-environment\` with project path and required packages
-- Verify Tailwind CSS configuration
-- Show user install commands for missing packages
-
-### Component Usage Example
+### Production Screen Flow
+
+1. Decide the style contract:
+   - \`host-utility\`
+   - \`framingui-native\`
+   - \`migrate\`
+2. Inspect the theme when defaults matter:
+   - \`preview-theme\`
+3. Gather generation context:
+   - \`get-screen-generation-context\`
+4. Resolve ambiguity before drafting:
+   - \`preview-component\`
+   - \`list-icon-libraries\` when icons are needed
+5. Validate structure:
+   - \`validate-screen-definition\`
+6. Write React code from the validated definition
+7. Verify project integration:
+   - \`validate-environment\` with \`sourceFiles\`
+
+### Style Contract Rules
+
+- If the project stays \`host-utility\`, keep utility classes explicit.
+- If the project uses \`framingui-native\`, ensure the global stylesheet imports \`@framingui/ui/styles\` before relying on FramingUI default variants.
+
+### Slash Commands
+
+- \`/screen\`
+- \`/draft\`
+- \`/section\`
+- \`/responsive\`
+- \`/a11y\`
+- \`/theme-swap\`
+- \`/doctor\`
+- \`/install-check\`
+- \`/export\`
+- \`/update\`
+
+### Component Rule
+
+Do not claim a FramingUI component is unavailable without checking \`list-components\` or \`preview-component\`.
+
+### Example
 
 \`\`\`tsx
 // ${importPath}
-import { Button, Card, CardHeader, CardTitle, CardContent } from '@framingui/ui';
+import '@framingui/ui/styles';
+import { Button, Card, CardContent, CardHeader, CardTitle } from '@framingui/ui';
 
 export default function Page() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Welcome to Framingui</CardTitle>
+        <CardTitle>Ready for MCP-assisted UI work</CardTitle>
       </CardHeader>
       <CardContent>
-        <Button variant="default" size="lg">Get Started</Button>
+        <Button>Continue</Button>
       </CardContent>
     </Card>
   );
 }
 \`\`\`
-
-### Available Tools
-
-**Discovery (6 tools):**
-- \`list-themes\` - List 6 available themes
-- \`preview-theme\` - Get theme design tokens
-- \`list-components\` - List 30+ UI components
-- \`preview-component\` - Get component props and variants
-- \`list-screen-templates\` - List 13 screen templates
-- \`preview-screen-template\` - Get template structure
-
-**Screen Generation (3 tools):**
-- \`get-screen-generation-context\` - Step 1/3
-- \`validate-screen-definition\` - Step 2/3
-- \`validate-environment\` - Step 3/3 (Optional)
-
-**Legacy Prototyping (3 tools):**
-- \`generate-blueprint\` - Legacy blueprint helper
-- \`export-screen\` - Export to JSX/TSX/Vue
-- \`list_tokens\` - List layout tokens
-
-**Icon Libraries (2 tools):**
-- \`list-icon-libraries\` - List available icon libraries
-- \`preview-icon-library\` - Preview icon library
-
-**Additional:**
-- \`validate_screen\` - Simple validation (use \`validate-screen-definition\` for production)
-
-### MCP Prompts (Universal Guidance)
-
-Claude Code can access built-in prompts for guidance:
-
-- \`getting-started\` - Authentication → Theme → Components → Screen generation
-- \`screen-workflow\` - Detailed 3-step workflow with troubleshooting
-
-These prompts work across all MCP clients, not just Claude Code.
-
-### Common Mistakes to Avoid
-
-1. ❌ Skipping authentication before generating screens
-2. ❌ Using non-existent theme IDs (only 6 exist)
-3. ❌ Skipping validate-screen-definition step
-4. ❌ Delivering code without verifying Tailwind config
-
-### Troubleshooting
-
-**Authentication issues:**
-- Run \`framingui-mcp status\` to check authentication
-- Run \`framingui-mcp login\` to re-authenticate
-
-**Missing styles:**
-- Run \`validate-environment\` to check Tailwind config
-- Verify \`@framingui/ui\` content paths are included
-- Check \`tailwindcss-animate\` plugin is configured
-
-**Component not found:**
-- Use \`list-components\` to verify component exists
-- Use \`preview-component\` to check correct component ID
 `;
 }
-/**
- * Generate AGENTS.md section for generic AI agents
- * (Platform-agnostic guidance for OpenAI Codex, Cursor, Windsurf, etc.)
- */
 export function generateAgentsMdSection(framework) {
     const importPath = framework === 'nextjs' ? 'app/page.tsx' : 'src/App.tsx';
     return `
-## FramingUI Workflow (AI Agents)
-
-### Overview
-
-Framingui MCP server provides 15 tools for screen generation via Model Context Protocol (MCP). This guide is for AI agents on platforms like OpenAI Codex, Cursor, Windsurf, and other MCP-compatible clients.
-
-### Prerequisites
-
-1. **MCP Server Running:** Ensure \`@framingui/mcp-server\` is running and connected
-2. **Authentication:** User must run \`framingui-mcp login\` before generating screens
-3. **Project Setup:** \`@framingui/ui\` and \`tailwindcss-animate\` must be installed
-
-### Required Authentication Flow
-
-**Step 1:** Check authentication status
-\`\`\`bash
-framingui-mcp status
-\`\`\`
-
-**Step 2:** If not authenticated, instruct user:
-\`\`\`bash
-framingui-mcp login
-\`\`\`
-
-**Important:** All 6 themes require valid licenses. There are no free themes available.
-
-### Screen Generation Workflow (3 Steps)
+## FramingUI Workflow
 
-Follow this exact sequence for production-ready screens:
+FramingUI is available in this project through MCP.
 
-#### Step 1/3: Gather Context
+### Required Sequence
 
-**Tool:** \`get-screen-generation-context\`
+1. Confirm authentication if licensed themes are needed.
+2. Decide the style contract before generation.
+3. Use \`preview-theme\` when theme defaults or recipes matter.
+4. Use \`get-screen-generation-context\` as the main entry point.
+5. Use \`preview-component\` for any ambiguous component contract.
+6. Use \`list-icon-libraries\` before adding icons.
+7. Validate structure with \`validate-screen-definition\`.
+8. Write React code directly from the validated definition.
+9. Run \`validate-environment\` with \`sourceFiles\` before final handoff.
 
-**Purpose:** Get all context needed to create Screen Definition
+### Style Contract
 
-**Input:**
-\`\`\`json
-{
-  "description": "user dashboard with profile card",
-  "themeId": "minimal-workspace",
-  "includeExamples": true
-}
-\`\`\`
-
-**Output:** Template matches, component suggestions with inline props/variants, schema, examples
-
-#### Step 2/3: Validate Definition
-
-**Tool:** \`validate-screen-definition\`
-
-**Purpose:** Ensure Screen Definition JSON is correct
-
-**Input:**
-\`\`\`json
-{
-  "definition": {
-    "id": "user-dashboard",
-    "shell": "shell.web.dashboard",
-    "page": "page.dashboard",
-    "sections": [...]
-  },
-  "strict": true
-}
-\`\`\`
-
-**Output:** Validation results with errors, warnings, suggestions, and autoFix patches
-
-**Critical:** Always validate before writing code. Apply autoFixPatches or fix all errors.
-
-#### After Validation: Write React Code Directly
-
-**No tool needed** - Write production-ready React code using components from Step 1 context.
-
-Use the import statements and props provided in the context response.
-
-#### Step 3/3: Validate Environment (Optional)
-
-**Tool:** \`validate-environment\`
-
-**Purpose:** Verify project has required packages and Tailwind config
-
-**Input:**
-\`\`\`json
-{
-  "projectPath": "/path/to/package.json",
-  "requiredPackages": ["@radix-ui/react-slot", "@radix-ui/react-avatar"],
-  "checkTailwind": true
-}
-\`\`\`
-
-**Output:** Missing packages, install commands, Tailwind validation
-
-**Critical:** Always inform user about missing packages and Tailwind config issues.
-
-### Discovery Tools
-
-Before generating screens, explore available resources:
+- \`host-utility\`: keep explicit utility styling
+- \`framingui-native\`: import \`@framingui/ui/styles\` and then rely on FramingUI variants
+- \`migrate\`: stop and clarify the migration path
 
-**Themes (6 total, all require authentication):**
-- \`list-themes\` → See all 6 themes
-- \`preview-theme\` → Get theme design tokens
+### Allowed HTML
 
-**Components (30+ available):**
-- \`list-components\` → Browse component catalog
-- \`preview-component\` → Get component props, variants, examples
+Semantic wrappers such as \`header\`, \`nav\`, \`section\`, and \`footer\` may remain HTML.
+Interactive and form primitives should use FramingUI components when they exist.
 
-**Templates (13 available):**
-- \`list-screen-templates\` → Browse screen templates
-- \`preview-screen-template\` → Get template structure
-
-### Component Usage Example
+### Example
 
 \`\`\`tsx
 // ${importPath}
-import { Button, Card, CardHeader, CardTitle, CardContent } from '@framingui/ui';
+import '@framingui/ui/styles';
+import { Button, Card, CardContent, CardHeader, CardTitle } from '@framingui/ui';
 
 export default function Page() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Welcome</CardTitle>
+        <CardTitle>FramingUI project setup</CardTitle>
       </CardHeader>
       <CardContent>
-        <Button variant="default">Get Started</Button>
+        <Button>Continue</Button>
       </CardContent>
     </Card>
   );
 }
 \`\`\`
-
-### MCP Prompts (Universal Guidance)
-
-Your MCP client may support prompts. If available:
-
-- \`getting-started\` - Complete onboarding guide
-- \`screen-workflow\` - Detailed 3-step workflow
-
-These provide context to help you guide users effectively.
-
-### Error Handling
-
-**Authentication errors:**
-- Instruct user to run \`framingui-mcp login\`
-- Verify with \`framingui-mcp status\`
-
-**Validation errors (Step 2):**
-- Read error messages - they include suggestions
-- Fix errors in Screen Definition
-- Re-run \`validate-screen-definition\`
-
-**Missing dependencies (Step 3):**
-- Always run Step 4 to check environment
-- Show user install commands from \`validate-environment\`
-
-**Missing styles (runtime):**
-- Run \`validate-environment\` to diagnose
-- Check Tailwind config includes \`@framingui/ui\` content paths
-- Check \`tailwindcss-animate\` plugin is configured
-
-### Best Practices
-
-1. ✅ Always authenticate before generating screens
-2. ✅ Follow all 3 workflow steps in order
-3. ✅ Validate before writing code (Step 2)
-4. ✅ Check environment before delivering code (Step 3)
-5. ✅ Inform user about missing dependencies and Tailwind issues
-6. ✅ Use \`strict: true\` for production validation
-
-### Quick Reference: All 15 Tools
-
-**Discovery:** list-themes, preview-theme, list-components, preview-component, list-screen-templates, preview-screen-template
-**Workflow:** get-screen-generation-context, validate-screen-definition, validate-environment
-**Legacy:** generate-blueprint, export-screen, validate_screen, list_tokens
-**Icons:** list-icon-libraries, preview-icon-library
 `;
 }
 //# sourceMappingURL=agent-md-templates.js.map

package/dist/cli/agent-md-templates.js.map

@@ -1 +1 @@
-{"version":3,"file":"agent-md-templates.js","sourceRoot":"","sources":["../../src/cli/agent-md-templates.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH;;;GAGG;AACH,MAAM,UAAU,uBAAuB,CAAC,SAAoB;IAC1D,MAAM,UAAU,GAAG,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC;IAE3E,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwCJ,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0Ed,CAAC;AACF,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,uBAAuB,CAAC,SAAoB;IAC1D,MAAM,UAAU,GAAG,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC;IAE3E,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmHJ,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6Dd,CAAC;AACF,CAAC"}
+{"version":3,"file":"agent-md-templates.js","sourceRoot":"","sources":["../../src/cli/agent-md-templates.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,uBAAuB,CAAC,SAAoB;IAC1D,MAAM,UAAU,GAAG,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC;IAE3E,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuDJ,UAAU;;;;;;;;;;;;;;;;;CAiBd,CAAC;AACF,CAAC;AAED,MAAM,UAAU,uBAAuB,CAAC,SAAoB;IAC1D,MAAM,UAAU,GAAG,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC;IAE3E,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+BJ,UAAU;;;;;;;;;;;;;;;;;CAiBd,CAAC;AACF,CAAC"}

package/dist/cli/guide-template.d.ts

@@ -1,10 +1,3 @@
-/**
- * FRAMINGUI-GUIDE.md 콘텐츠 템플릿
- * 프레임워크별 맞춤 가이드 생성
- */
 export type Framework = 'nextjs' | 'vite';
-/**
- * FRAMINGUI-GUIDE.md 콘텐츠 생성
- */
 export declare function generateGuide(framework: Framework): string;
 //# sourceMappingURL=guide-template.d.ts.map

package/dist/cli/guide-template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"guide-template.d.ts","sourceRoot":"","sources":["../../src/cli/guide-template.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE1C;;GAEG;AACH,wBAAgB,aAAa,CAAC,SAAS,EAAE,SAAS,GAAG,MAAM,CA4L1D"}
+{"version":3,"file":"guide-template.d.ts","sourceRoot":"","sources":["../../src/cli/guide-template.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE1C,wBAAgB,aAAa,CAAC,SAAS,EAAE,SAAS,GAAG,MAAM,CA+F1D"}

package/dist/cli/guide-template.js

@@ -1,195 +1,96 @@
-/**
- * FRAMINGUI-GUIDE.md 콘텐츠 템플릿
- * 프레임워크별 맞춤 가이드 생성
- */
-/**
- * FRAMINGUI-GUIDE.md 콘텐츠 생성
- */
 export function generateGuide(framework) {
-    const importExample = framework === 'nextjs'
-        ? `// app/page.tsx
-import { Button, Card, CardHeader, CardTitle, CardContent } from '@framingui/ui';
-
-export default function HomePage() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Welcome</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <Button variant="default" size="lg">Get Started</Button>
-      </CardContent>
-    </Card>
-  );
-}`
-        : `// src/App.tsx
-import { Button, Card, CardHeader, CardTitle, CardContent } from '@framingui/ui';
-
-function App() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Welcome</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <Button variant="default" size="lg">Get Started</Button>
-      </CardContent>
-    </Card>
-  );
-}
-
-export default App;`;
+    const appFile = framework === 'nextjs' ? 'app/page.tsx' : 'src/App.tsx';
     return `# FramingUI Guide
 
-> AI-powered design system for building production-ready UIs.
-
----
+FramingUI is installed in this project as an MCP-assisted design system for production UI work.
 
 ## Authentication
 
-Before generating screens, authenticate with your Framingui account:
+Authenticate before using licensed themes:
 
 \`\`\`bash
 framingui-mcp login
 \`\`\`
 
-This opens your browser for OAuth authentication. Your credentials are stored in \`~/.framingui/credentials.json\`.
-
-**Why authentication is required:**
-- All 6 themes require valid licenses
-- No free themes are available
-- Authentication verifies your license status
-
-**Check your authentication status:**
+Check the current state with:
 
 \`\`\`bash
 framingui-mcp status
 \`\`\`
 
----
-
-## Screen Generation Workflow
-
-Framingui provides a **3-step workflow** for production-ready screen generation:
-
-### Step 1/3: Get Context
-
-Claude Code calls \`get-screen-generation-context\` with your screen description:
-
-\`\`\`
-"Create a user dashboard with profile card and recent activity"
-\`\`\`
-
-Returns: Template matches, component suggestions with inline props/variants, Screen Definition schema
-
-### Step 2/3: Validate Definition
-
-Claude Code generates a Screen Definition JSON and calls \`validate-screen-definition\`:
-
-Returns: Validation results, errors with auto-fix patches (if any), improvement suggestions
-
-### After Validation: Write Code
-
-Claude Code writes React code directly using the components and props from Step 1 context.
+## Recommended Workflow
 
-### Step 3/3: Validate Environment (Optional)
+1. Decide the style contract for this project:
+   - \`host-utility\`
+   - \`framingui-native\`
+   - \`migrate\`
+2. Inspect theme and component contracts before drafting:
+   - \`preview-theme\`
+   - \`preview-component\`
+   - \`list-icon-libraries\` when icons are needed
+3. Call \`get-screen-generation-context\`
+4. Validate the generated definition with \`validate-screen-definition\`
+5. Write React code from the validated definition
+6. Run \`validate-environment\` with \`sourceFiles\` before handoff
 
-Claude Code calls \`validate-environment\` to check your project:
+## Style Contract Rules
 
-Returns: Missing packages, install commands, Tailwind CSS config validation
+### host-utility
 
-**Important:** Always check the dependencies and Tailwind configuration before running generated code.
+Keep utility classes explicit. Do not rely on FramingUI default variants unless you intentionally migrate.
 
----
+### framingui-native
 
-## Quick Start
+Your global stylesheet should import:
 
-### Using Components
-
-\`\`\`tsx
-${importExample}
+\`\`\`css
+@import '@framingui/ui/styles';
 \`\`\`
 
-### AI Screen Generation
-
-Claude Code에서 MCP 서버가 연결되어 있으면, 자연어로 화면을 생성할 수 있습니다:
+Only use FramingUI default variants after that import is in place.
 
-\`\`\`
-"로그인 화면 만들어줘"
-"대시보드 페이지를 카드 레이아웃으로 만들어줘"
-"사용자 프로필 페이지를 만들어줘"
-\`\`\`
+## Slash Commands
 
----
+FramingUI guidance is available for:
 
-## Components (30+)
+- \`/screen\`
+- \`/draft\`
+- \`/section\`
+- \`/responsive\`
+- \`/a11y\`
+- \`/theme-swap\`
+- \`/doctor\`
+- \`/install-check\`
+- \`/export\`
+- \`/update\`
 
-### Core
-Button, Input, Label, Card, Badge, Avatar, Separator, Checkbox, RadioGroup, Switch, Textarea, Skeleton, ScrollArea, Select, Progress
-
-### Complex
-Dialog, DropdownMenu, Table, Tabs, Toast, Tooltip, Popover, Sheet, AlertDialog, NavigationMenu
-
-### Advanced
-Sidebar, Breadcrumb, Command, Calendar, Form
-
-### Usage
+## Example Component Usage
 
 \`\`\`tsx
-import { Button, Dialog, DialogTrigger, DialogContent } from '@framingui/ui';
-\`\`\`
+// ${appFile}
+import '@framingui/ui/styles';
+import { Button, Card, CardContent, CardHeader, CardTitle } from '@framingui/ui';
 
----
-
-## Screen Templates (13)
-
-프로덕션에서 바로 사용할 수 있는 완성된 화면 템플릿:
-
-| Category | Templates |
-|----------|-----------|
-| Auth | Login, Signup, ForgotPassword, Verification |
-| Core | Landing, Preferences, Profile |
-| Feedback | Loading, Error, Empty, Confirmation, Success |
-| Dashboard | Dashboard |
-
----
-
-## Themes (6)
-
-| Theme ID | Description |
-|----------|-------------|
-| \`classic-magazine\` | Classic magazine style |
-| \`dark-boldness\` | Fitness & wellness |
-| \`minimal-workspace\` | Minimal workspace |
-| \`neutral-workspace\` | Neutral humanism |
-| \`pebble\` | Round minimal |
-| \`square-minimalism\` | Square minimalism |
-
-### Applying a Theme
-
-\`\`\`tsx
-import { themeToCSS, injectThemeCSS } from '@framingui/ui';
-
-// Inject theme CSS at runtime
-injectThemeCSS(themeData);
-\`\`\`
-
----
-
-## Utility: cn()
-
-\`\`\`tsx
-import { cn } from '@framingui/ui';
-
-<div className={cn('p-4 bg-white', isActive && 'bg-blue-500', className)} />
+export default function Page() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>FramingUI is ready</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Button>Continue</Button>
+      </CardContent>
+    </Card>
+  );
+}
 \`\`\`
 
----
-
-## Links
+## Guardrails
 
-- [npm: @framingui/ui](https://www.npmjs.com/package/@framingui/ui)
-- [npm: @framingui/mcp-server](https://www.npmjs.com/package/@framingui/mcp-server)
+- Do not claim that a component is unavailable without checking the catalog.
+- Treat templates as hints, not the final structure.
+- Treat the validated screen definition as the production contract.
+- Keep semantic wrappers as HTML only when there is no FramingUI primitive to replace them.
 `;
 }
 //# sourceMappingURL=guide-template.js.map