Layout skills
Grids, spacing, alignment and page structure: the skills that decide where things go and how much room they get.
203 skills, page 5 of 6
Skills
Gsap Webby iart-ai
GSAP guidance for code-driven web motion, including timelines, ScrollTrigger, SplitText, Flip, and smooth-scroll synchronization.
MotionExternalGitHub stars: 64
Lottie Animationby iart-ai
Lottie and dotLottie integration guidance for playback control, interactivity, runtime theming, and cross-platform export workflows.
MotionExternalGitHub stars: 64
Micro Interactionby iart-ai
UI motion guidance for hover and press feedback, toggles, toasts, drawers, modals, list transitions, and shared-element interactions.
InteractionExternalGitHub stars: 64
Page Transition Animationby iart-ai
Page and route transition patterns using the View Transitions API and Framer Motion, including reliable Next.js App Router exits.
MotionExternalGitHub stars: 64
Svg Animationby iart-ai
SVG animation techniques for stroke draw-on effects, path morphing, motion paths, animated icons, gradients, and filters.
MotionExternalGitHub stars: 64
Transitions Devby Jakubantalik
Production-ready CSS transition patterns for web apps, with drop-in snippets for cards, modals, dropdowns, panels, and page transitions.
MotionExternalGitHub stars: 46
Generating Sounds with Aiby raphaelsalaja
Audit Web Audio API code for procedural sound synthesis quality, UX decisions, and parameter best practices.
InteractionExternalGitHub stars: 42
Mastering Animate Presenceby raphaelsalaja
Audit Motion and Framer Motion exit/presence patterns with practical fixes for AnimatePresence usage.
MotionExternalGitHub stars: 42
Morphing Iconsby raphaelsalaja
Build icon components that morph between SVG shapes with smooth, line-based transformation.
MotionExternalGitHub stars: 42
Pseudo Elementsby raphaelsalaja
Audit CSS pseudo-elements and View Transitions usage for hover effects, decorative layers, and transitions.
MotionExternalGitHub stars: 42
Sounds on the Webby raphaelsalaja
Audit interface sound feedback for UX quality, accessibility, and practical implementation patterns.
InteractionExternalGitHub stars: 42
To Spring or Not to Springby raphaelsalaja
Audit animation timing choices to decide when springs versus easing curves produce better motion.
MotionExternalGitHub stars: 42
Compact Landingby Danilaa1
Build compact premium landing pages with clear CTA hierarchy, quiet typography, and minimal visual noise.
VisualExternalGitHub stars: 37
Budgeby millionco
Use when making single-property CSS or Tailwind visual changes in Next.js App Router projects. Presents a floating control widget for live tuning before persisting.
VisualExternalGitHub stars: 34
Cc Figma Componentby nvillapiano
Generate variable-bound Figma component sets from component-contract definitions after the token collections exist.
Design SystemsExternalGitHub stars: 34
Cc Figma Tokensby nvillapiano
Build or update Figma Primitive and Semantic variable collections from component-contracts token files.
Design SystemsExternalGitHub stars: 34
Sync Figma Tokenby firebenders
Sync design tokens between code and Figma variables with drift reporting, approval gates, safe delta apply, and persisted reports.
Design SystemsExternalGitHub stars: 27
Balise Ux Writingby mrstev3n
Reviews, rewrites, creates, harmonizes, and implements user-centered interface copy across design files, screenshots, product specifications, source code, localization catalogs, prototypes, and rendered applications. Use for buttons, navigation, forms, errors, empty states, onboarding, confirmations, settings, consent, notifications, help, and system feedback while preserving product behavior, terminology, voice, accessibility, localization, legal meaning, component structure, and implementation constraints.
TasteExternalGitHub stars: 12
Build Primitiveby PrototyperAI
Build foundational UI primitives from scratch with strong ARIA, keyboard, focus, and state handling.
AccessibilityExternalGitHub stars: 7
Dashboard Information Densityby UI Skillbook
Fit more real information on screen without it reading as cluttered, by controlling hierarchy instead of shrinking everything uniformly.
Layout
Data Table Scannabilityby UI Skillbook
Structure table rows and columns so the eye can scan down and across without losing its place.
Layout
Responsive Breakpoint Strategyby UI Skillbook
Choose breakpoints based on where your content actually breaks, not a fixed device-width list.
Responsive
Siteplane Avatar Groupby UI Skillbook
A facepile: several avatars overlapped in a row with an optional count of the people not shown.
Siteplane UI
Siteplane Bubbleby UI Skillbook
The surface for a chat message's text, with variants for sender, assistant replies and errors.
Siteplane UI
Siteplane Cardby UI Skillbook
A surface that groups related content and actions, with header, panel, footer and framed-section parts.
Siteplane UI
Siteplane Dashboard Shellby UI Skillbook
A responsive app frame that combines the sidebar, a sticky top bar and a scrolling content area.
Siteplane UI
Siteplane Data Listby UI Skillbook
Label and value rows that describe one record, laid out side by side or stacked.
Siteplane UI
Siteplane Detail Drawerby UI Skillbook
A right-side drawer for viewing one record's details beside its list, optionally with an edit form.
Siteplane UI
Siteplane Filter Barby UI Skillbook
A layout strip above a list or table for view tabs, search, filter menus, actions and applied-filter tags.
Siteplane UI
Siteplane Frameby UI Skillbook
A muted surface that groups raised panels with an optional header, descriptions and footer.
Siteplane UI
Siteplane Groupby UI Skillbook
Joins related buttons, or an input and its button, into one segmented frame. The controls share no state.
Siteplane UI
Siteplane Messageby UI Skillbook
The layout of one chat turn: content, footer actions and, between people, an avatar and header.
Siteplane UI
Siteplane Message Scrollerby UI Skillbook
The scroll region of a chat thread: opens at the latest message, follows streaming replies and offers a jump back.
Siteplane UI
Siteplane Native Tableby UI Skillbook
A plain HTML table in the same look as Table, for reports and cells whose controls keep their own tab stops.
Siteplane UI
Siteplane Resource Listby UI Skillbook
A list of entities with a status indicator, title, description and meta slot. Rows can be links.
Siteplane UI
Siteplane Scroll Areaby UI Skillbook
A fixed-size region that scrolls with custom overlay scrollbars, plus optional fades at the edges and control over the gutter.
Siteplane UI
Siteplane Separatorby UI Skillbook
A horizontal or vertical line that divides related sections or controls.
Siteplane UI
Siteplane Settings Listby UI Skillbook
A titled card of settings rows, each pairing a label and help text with a control you supply.
Siteplane UI
Siteplane Sheetby UI Skillbook
A dialog-backed panel that opens from a screen edge for forms and save-or-cancel tasks.
Siteplane UI
Siteplane Sidebarby UI Skillbook
Application navigation in a side column that collapses to an icon rail on desktop and becomes a sheet on mobile.
Siteplane UI