Layout skills
Grids, spacing, alignment and page structure: the skills that decide where things go and how much room they get.
203 skills, page 2 of 6
Skills
Web Design Guidelinesby vercel-labs
Review UI code for Web Interface Guidelines compliance. Audit design, accessibility, and UX against Vercel's best practices.
VisualExternalGitHub stars: 33.2K
Frontend Slidesby zarazhangrui
Create animation-rich HTML presentations from scratch or convert PPT/PPTX files into polished web slides.
MotionExternalGitHub stars: 31.6K
Bragby latent-spaces
Turn a finished project into a short shareable launch video with motion, music, and copy.
MotionExternalGitHub stars: 19.5K
Gsap Coreby greensock
Official GSAP core API guidance for gsap.to(), from(), easing, stagger, matchMedia, and responsive or reduced-motion animation patterns.
MotionExternalGitHub stars: 17.5K
Gsap Frameworksby greensock
Official GSAP guidance for Vue, Nuxt, Svelte, and SvelteKit lifecycle setup, scoped selectors, and cleanup on unmount.
MotionExternalGitHub stars: 17.5K
Gsap Performanceby greensock
Official GSAP performance guidance for compositor-friendly transforms, quickTo, stagger batching, and smooth 60fps animation.
MotionExternalGitHub stars: 17.5K
Gsap Pluginsby greensock
Official GSAP plugin guidance for Flip, Draggable, ScrollSmoother, SplitText, SVG tools, CustomEase, and gsap.registerPlugin() usage.
MotionExternalGitHub stars: 17.5K
Gsap Reactby greensock
Official GSAP guidance for React and Next.js with useGSAP, refs, gsap.context(), contextSafe callbacks, and SSR-safe cleanup.
MotionExternalGitHub stars: 17.5K
Gsap Scrolltriggerby greensock
Official ScrollTrigger guidance for scroll-linked animation, pinning, scrub, batch triggers, and horizontal containerAnimation patterns.
MotionExternalGitHub stars: 17.5K
Gsap Timelineby greensock
Official GSAP timeline guidance for sequencing, position parameters, labels, nesting, and playback control with gsap.timeline().
MotionExternalGitHub stars: 17.5K
Gsap Utilsby greensock
Official gsap.utils guidance for clamp, mapRange, snap, distribute, selector scoping, and other animation math helpers.
MotionExternalGitHub stars: 17.5K
Improve Reactby millionco
Survey a React codebase using React Doctor's findings, then produce prioritized audits and self-contained implementation plans without modifying source code.
PerformanceExternalGitHub stars: 15.1K
React Doctorby millionco
Run React Doctor to detect regressions in security, performance, correctness, and architecture, with score-based quality checks.
PerformanceExternalGitHub stars: 15.1K
Playwright Cliby microsoft
Official Playwright CLI skill for browser automation, test generation, tracing, and session-driven end-to-end testing workflows.
LayoutExternalGitHub stars: 14.8K
Landing Page Designby elayadesign
Build high-converting landing pages with intake questions, page structure, conversion copy, SEO, and a disciplined visual system.
VisualExternalGitHub stars: 12K
Scroll Worldby oso95
Build an immersive scroll-scrubbed 3D world landing page for any brand with Higgsfield-generated scenes, seamless camera clips, and a portable scroll-scrub engine.
VisualExternalGitHub stars: 10.7K
Fixing Accessibilityby ibelick
Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.
AccessibilityExternalGitHub stars: 10.4K
Fixing Metadataby ibelick
Audit and fix page metadata including titles, meta descriptions, Open Graph, Twitter cards, canonical URLs, and JSON-LD structured data. Use when shipping new pages or fixing SEO and social preview issues.
Design SystemsExternalGitHub stars: 10.4K
Fixing Motion Performanceby ibelick
Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.
MotionExternalGitHub stars: 10.4K
Improve Uiby ibelick
Audit an existing product surface against its own design evidence, identify verified UI problems, and write self-contained implementation plans for another agent without modifying product source.
VisualExternalGitHub stars: 10.4K
Better Layoutby jakubkrehel
Improve interface structure through grouping, alignment, reading order, progressive disclosure, and adaptive responsive layouts.
Design SystemsExternalGitHub stars: 9.2K
Better Writingby jakubkrehel
Improve UX writing for interface labels, errors, empty states, settings, notifications, and product voice consistency.
LayoutExternalGitHub stars: 9.2K
Breakby jakubkrehel
Answers "does this survive?" for one component. Renders it on a page in every state real use can put it in, and hands that page over as a visual report of what broke.
LayoutExternalGitHub stars: 9.2K
Explain Interfaceby jakubkrehel
Answers how was this built about an interface. Give it a URL and name the thing you're curious about, and it reads the layers that produce the effect. Reads the whole frontend instead when you don't name a thing. From a screenshot it reconstructs rather than reads and says so.
TasteExternalGitHub stars: 9.2K
Variantby jakubkrehel
Answers which of these rather than is this right. Builds several genuinely different versions of one piece of UI behind a picker in the real page, so you can flip between them and promote the one that wins.
VisualExternalGitHub stars: 9.2K
Animation on Scrollby MengTo
Use when you need scroll-driven motion that feels intentional instead of noisy or overdone.
MotionExternalGitHub stars: 7.1K
Animation Systemsby MengTo
Use when building a coherent animation system instead of one-off motion tweaks.
MotionExternalGitHub stars: 7.1K
Beautiful Shadowsby MengTo
Use when a UI needs better depth, elevation, and shadow treatment without looking muddy.
VisualExternalGitHub stars: 7.1K
Cobejsby MengTo
Use when building lightweight animated globe or orb visuals with Cobe.
VisualExternalGitHub stars: 7.1K
Company Logosby MengTo
Use when laying out logos, trust rows, or brand collections in a clean and balanced way.
Design SystemsExternalGitHub stars: 7.1K
Container Linesby MengTo
Use when using borders and container structure as part of the visual system.
Design SystemsExternalGitHub stars: 7.1K
Design First Ui Promptingby MengTo
Use when you want to turn a product goal into a design-first UI prompt with clear layout, type, color, and constraint choices.
VisualExternalGitHub stars: 7.1K
Gsapby MengTo
Use when implementing motion with GSAP and you want practical animation structure and sequencing guidance.
MotionExternalGitHub stars: 7.1K
Gsap Scrolltrigger Storytellingby MengTo
Use when building scroll-based storytelling sections with GSAP ScrollTrigger.
MotionExternalGitHub stars: 7.1K
Landing Pageby MengTo
Use when designing or implementing a landing page with strong hierarchy, conversion flow, and visual pacing.
VisualExternalGitHub stars: 7.1K
Marquee Loopby MengTo
Use when building looping marquees that need steady rhythm, spacing, and performance awareness.
MotionExternalGitHub stars: 7.1K
Masked Revealby MengTo
Use when revealing content with masked motion, clipped transitions, or layered entrances.
MotionExternalGitHub stars: 7.1K
Matterjsby MengTo
Use when building physics-driven interactions and layout behaviors with Matter.js.
MotionExternalGitHub stars: 7.1K
Pricing Pageby MengTo
Use when building a pricing page with clear plan comparison, emphasis, and conversion-oriented layout.
VisualExternalGitHub stars: 7.1K
Progressive Blurby MengTo
Use when applying blur transitions or layered depth effects that need to feel smooth and controlled.
VisualExternalGitHub stars: 7.1K