page-layout-builder

Ui Builder guides you through constructing accessible, responsive interfaces with React and Tailwind CSS. It covers mobile-first design, semantic HTML, performance optimization, and reusable component patterns including buttons, cards, inputs, dialogs, and forms.

Responsive Layout Builder guides you through constructing layouts that adapt seamlessly to any device. It covers Grid and Flexbox techniques, mobile-first strategies, and practical patterns like sidebars, card grids, and hero sections.

Create layouts that adapt seamlessly across devices using mobile-first principles and Tailwind CSS. This skill covers breakpoint configuration, fluid typography with CSS clamp, container queries for component-level responsiveness, and production-ready layout patterns.

This skill covers Tailwind CSS, a utility-first framework that lets you compose designs from low-level utility classes instead of writing CSS. Learn responsive design patterns, dark mode implementation, configuration options, and how to integrate Tailwind into modern component frameworks.

This skill teaches the CSS constraint models that make shadcn/Tailwind layouts work—height inheritance chains, flex overflow gotchas, grid parent/child separation, and scroll container sizing. Use it when building layouts, debugging height or scroll failures, or fixing flex and grid issues in React and Next.js projects.

Efecto lets you create professional graphic assets—from pitch decks and event posters to business cards and infographics—through natural language commands. The skill pairs your agent with Efecto's design canvas, letting you iterate live as the tool builds layouts, applies images, and refines visuals in real time.