LogoClawIndex
CasesSkillsAbout
LogoClawIndex

ClawIndex

OpenClaw Skills & Use Case Index

ClawIndex is an ecosystem-driven index of OpenClaw skills and real-world use cases.

Index

Skills·
Cases

Meta

About·
Disclaimer·
Email·
GitHub
© 2026 ClawIndex All Rights Reserved.

Skills tagged: layout

Browse skills that share this tag.

  • Layout Designer - Design responsive page layouts and grid systems.
    layoutgriddesigncomposition

    ★ 0 · Updated 2026-09-22

    Creates functional page layouts and grid systems using spacing, design theory, and visual hierarchy principles.

    ⚙ Design landing page layouts⚙ Design dashboard application layouts⚙ Design editorial content layouts
  • withseismic-grid - Layout system for web pages using a twelve-unit grid
    withseismicgridlayoutreact

    ★ 0 · Updated 2026-09-22

    Builds web page layouts and UIs using @withseismic/grid components based on arithmetic grid rules and ladder fractions.

    ⚙ Install @withseismic/grid layout package⚙ Render grid layout primitives⚙ Compose page movements and rows
  • ui-ux-frontend-basics - UI/UX basics for frontend pages and components
    ui-uxfrontendlayouttypography

    ★ 0 · Updated 2026-09-21

    Applies practical UI/UX guidelines when designing or polishing frontend pages and components.

    ⚙ Classify UI surface types⚙ Establish visual hierarchy⚙ Apply spacing scales
  • frontend-design - Guidance for distinctive visual frontend design.
    frontenddesignuitypography

    ★ 0 · Updated 2026-09-19

    Provides principles and process for designing distinctive UIs with custom typography, color palettes, layouts, and copy without default templates.

    ⚙ Brainstorm design plans⚙ Establish custom token systems⚙ Define distinct typography pairings
  • h-frontend-design - Frontend UI/UX design reference and guidance
    frontendui-designux-designtypography

    ★ 0 · Updated 2026-09-19

    Provides UI/UX design guidance across typography, color, spatial layout, motion, interaction, responsive design, and UX writing.

    ⚙ Establish project context and constraints⚙ Provide typography design guidance⚙ Provide color and contrast guidance
  • bolder - Amplify safe or boring designs to increase visual impact
    designuifrontendtypography

    ★ 0 · Updated 2026-09-18

    Amplifies safe or boring designs to create distinct, high-impact user experiences while preserving functionality and accessibility.

    ⚙ Gather brand context and audience⚙ Assess visual weakness sources⚙ Plan distinct amplification strategy
  • bolder - Amplify safe or boring designs for visual impact
    ui-designtypographycolor-palettelayout

    ★ 0 · Updated 2026-09-17

    Amplifies safe or boring designs to increase visual impact and character while maintaining usability.

    ⚙ Invoke impeccable design protocol⚙ Assess current design weaknesses⚙ Plan design amplification strategy
  • placeholder-images - Generate SVG placeholder images for HTML prototypes
    placeholdersvgprototypelayout

    ★ 1 · Updated 2026-09-17

    Generates simple, labeled, and brand-aware SVG placeholder images for prototype layouts and mockups.

    ⚙ Generate simple SVG placeholders⚙ Generate labeled SVG placeholders⚙ Generate brand-aware SVG placeholders
  • makepad-font - Makepad text and font rendering
    makepadfonttextsdf

    ★ 1 · Updated 2026-09-15

    Provides font configuration, text layout, and SDF-based GPU text rendering for Makepad.

    ⚙ Configure font families and styles⚙ Layout and shape text⚙ Render text using GPU SDF
  • spacing - Consistent spacing system for layouts and components
    spacinglayoutgridtailwind

    ★ 1 · Updated 2026-09-15

    Defines and enforces spacing rules based on a 4px and 8px grid system for responsive layouts and components.

    ⚙ Enforce 4px and 8px grid scale⚙ Apply responsive padding and margin rules⚙ Format section and card layout spacing
  • sico-bell-rtl-layout - SICO Bell RTL and layout system
    rtllayoutreact-nativesico-bell

    ★ 0 · Updated 2026-09-13

    Enforces the useRTLStyles hook, text alignment, and layout patterns for SICO Bell screens and components.

    ⚙ Enforce useRTLStyles hook usage⚙ Apply layout helper functions⚙ Set text alignment rules
  • ui-page - Scaffold mobile-first pages with StyleSeed Toss patterns.
    uipage-designmobilelayout

    ★ 3 · Updated 2026-09-13

    Scaffold a new mobile-first page using StyleSeed Toss layout patterns, section rhythm, and existing shell components.

    ⚙ Inspect existing page shell patterns⚙ Define page purpose and primary actions⚙ Organize layout using information pyramid
  • ui-handler - Implement UI with Shadcn MCP and 21st.dev MCP
    uishadcn21st-devcomponents

    ★ 602 · Updated 2026-09-10

    Implements standard UI components, complex sections, layouts, and themes using Shadcn MCP and 21st.dev MCP.

    ⚙ Install standard UI components⚙ Generate complex page sections⚙ Update application themes and styles
  • react-layout - React Layout with BAIFlex and Theme Tokens
    layoutspacingflexboxresponsive

    ★ 128 · Updated 2026-05-11

    Use BAIFlex for flex layouts and theme tokens for consistent spacing in React components

    ⚙ create BAIFlex layout⚙ set gap values⚙ apply theme tokens
  • arrange - Improve Layout and Visual Rhythm
    frontend-designlayoutspacingvisual-hierarchy

    ★ 3 · Updated 2026-03-26

    Assess and improve layout, spacing, and visual hierarchy for better compositions

    ⚙ analyze current layout⚙ assess spacing consistency⚙ evaluate visual hierarchy
  • aksel - Aksel - Nav's Design System
    design systemReact componentsUI developmentaccessibility

    ★ 0 · Updated 2026-03-26

    Build UI with React components, design tokens, and layout primitives following Nav's accessibility guidelines

    ⚙ select React components⚙ apply design tokens⚙ use layout primitives
  • ux-designer - Create UX Design Documentation
    UX designwireframedesign systemlayout

    ★ 1 · Updated 2026-03-24

    Create UX design documentation, layout specs, interaction flows, and style guides without implementation code.

    ⚙ gather design requirements⚙ map information architecture⚙ compose responsive layouts
  • i-bolder - Make designs more visually impactful and bold
    designvisual impactui enhancementtypography

    ★ 1 · Updated 2026-03-22

    Amplify safe or boring designs to make them more visually interesting and stimulating

    ⚙ replace fonts⚙ adjust color saturation⚙ create spatial drama
  • i-bolder - Amplify Design Visual Impact
    designvisual-designui-enhancementtypography

    ★ 0 · Updated 2026-03-22

    Amplify safe designs to create visually interesting interfaces while maintaining usability

    ⚙ analyze design⚙ identify weakness⚙ understand context
  • i-bolder - Bold Design Enhancement for Visual Impact
    designvisual-impactui-enhancementtypography

    ★ 602 · Updated 2026-03-22

    Amplify safe or boring designs to increase visual impact while maintaining usability.

    ⚙ analyze design state⚙ identify weakness sources⚙ replace generic fonts

Scroll to load more