Web Design

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.

Efecto Social Media lets you design platform-specific graphics—Instagram, YouTube, TikTok, Twitter/X, LinkedIn, Pinterest, and Facebook—directly in your agent. Create artboards, add styled content with JSX, and iterate in real-time as your agent pushes changes to the canvas. Includes image search, animations, shader effects, and batch editing for carousel slides.

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.

Master Tailwind CSS, the utility-first framework that lets you build custom interfaces by composing single-purpose classes directly in your markup. This skill covers responsive design, dark mode, theme customization, component patterns, and production-ready optimization techniques.

Master advanced Tailwind component architecture using class-variance-authority for variant management, compound patterns for complex states, and utility helpers like cn for safe class composition. Learn context-based component systems, data-attribute styling, and polymorphic design patterns used in production design systems.

Tailwind Coder styles Rails applications with Tailwind CSS utility classes and responsive breakpoints. It provides patterns for common Rails elements like forms, links, cards, grids, and tables, plus helper methods to reduce repetition across views.