UI Skillbook
2

Frame

A muted surface that groups raised panels with an optional header, descriptions and footer.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-frame and follow the Siteplane Frame skill it prints for this task.

Paste this into your agent.

Frame gathers a few related panels on one shared surface, such as a settings group or a summary with stacked sections. It has no state or behavior.

Install

bashnpx shadcn@4.18.0 add @siteplane/frame

Import it from @/siteplane/components/frame. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Card: Pick Card instead for a single surface with its own header, content and actions.
  • vs Separator: Use Separator inside a FramePanel with its padding removed to stack sections in one panel.

Rules

  • Place FramePanel parts as direct children of Frame; Frame spaces them for you.
  • For several sections inside a single panel, drop the panel's padding and put a Separator between sections.
  • Do not add borders or shadows to panels; they already draw the kit hairline.
  • Keep state and behavior in the content you place inside; Frame holds none.

Reference

  • Frame docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Layout & utilities. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-frame

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Antfu Designby antfu

antfu-style design conventions, broadened. UnoCSS-first, class-based semantic tokens with dual light/dark for tooling and devtools UIs, plus design-read, anti-slop, and micro-interaction polish for landing pages and product surfaces. Use when building or refactoring any interface with UnoCSS.

LayoutExternalGitHub stars: 6K

Banner Designby nextlevelbuilder

Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.

VisualExternalGitHub stars: 142.5K

Beautiful Shadowsby MengTo

Use when a UI needs better depth, elevation, and shadow treatment without looking muddy.

VisualExternalGitHub stars: 7.1K

Bencium Innovative Ux Designerby bencium

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

VisualExternalGitHub stars: 470

Back to Siteplane UI