{"enrichment":{"faq":[{"a":"Web Design is a skill that lets you design web pages and app interfaces programmatically through an AI agent. You create sessions, build layouts using JSX and Tailwind CSS, and watch changes render live in the browser as you work. The skill provides 68 MCP tools for artboards, animations, styling, and structural organization to streamline your design workflow.","q":"What is Web Design and how does it work?"},{"a":"Web Design enables you to design websites by working programmatically with an AI agent. Start by creating a session, then use JSX and Tailwind CSS to build your layouts. As you make changes, the browser renders them live so you can see results immediately. The 68 available MCP tools support artboards, animations, styling, and structural organization throughout your design process.","q":"How to design a website using Web Design?"},{"a":"Web Design offers 68 MCP tools covering artboards, animations, styling, and structural organization. These tools enable programmatic design work through an AI agent, allowing you to build layouts with JSX and Tailwind CSS while viewing live browser rendering. The comprehensive toolset supports both beginners and professionals in creating responsive, modern web interfaces.","q":"What web design tools does this skill provide?"},{"a":"Yes, Web Design supports responsive and modern web design techniques. By using JSX and Tailwind CSS within the skill's programmatic framework, you can create layouts that adapt across devices. The live browser rendering lets you test responsiveness in real time, and the 68 MCP tools include styling capabilities essential for building responsive interfaces.","q":"Can Web Design help with responsive web design?"},{"a":"Web Design is accessible for beginners. The skill provides an AI agent that guides you through creating sessions and building layouts with JSX and Tailwind CSS. Live browser rendering helps you learn by seeing changes instantly, and the 68 MCP tools are organized to support structural organization and styling\u2014making it easier to grasp web design fundamentals.","q":"Is Web Design suitable for beginners?"}],"shadow_tags":["visual-layout","user-experience","frontend-fundamentals","design-methodology","interface-creation"],"summary_rewrite":"Efecto lets you design web pages and app interfaces programmatically through an AI agent. Create sessions, build layouts with JSX and Tailwind CSS, and watch changes render live in the browser as you work. The skill provides 68 MCP tools for artboards, animations, styling, and structural organization."},"gist":{"api_url":"https://skillfed.io/api/skills/pablostanley/efecto-plugin/web-design.json","as_of":"2026-05-26","description":"Efecto Web Design enables you to build web pages and UIs with AI agents using real-time JSX and Tailwind CSS.","install":{"manual":["git clone https://github.com/pablostanley/efecto-plugin","cp -r efecto-plugin ~/.claude/skills/web-design"],"primary":"npx skillfed install pablostanley/efecto-plugin/web-design","version":"1af758dc"},"kind":"skill","mirror_url":"https://skillfed.io/pablostanley/efecto-plugin/web-design.md","similar":[{"id":"pablostanley/efecto-plugin/graphic-design","name":"Graphic Design","publisher":"pablostanley/efecto-plugin","url":"https://skillfed.io/pablostanley/efecto-plugin/graphic-design"},{"id":"pablostanley/efecto-plugin/social-media","name":"Social Media","publisher":"pablostanley/efecto-plugin","url":"https://skillfed.io/pablostanley/efecto-plugin/social-media"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-components","name":"tailwindcss-advanced-components","publisher":"JosiahSiegel/claude-plugin-marketplace","url":"https://skillfed.io/JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-components"},{"id":"majesticlabs-dev/majestic-marketplace/tailwind-coder","name":"Tailwind Coder","publisher":"majesticlabs-dev/majestic-marketplace","url":"https://skillfed.io/majesticlabs-dev/majestic-marketplace/tailwind-coder"},{"id":"bobmatnyc/claude-mpm-skills/tailwind","name":"tailwind","publisher":"bobmatnyc/claude-mpm-skills","url":"https://skillfed.io/bobmatnyc/claude-mpm-skills/tailwind"}],"title":"Web Design by pablostanley: Learn web design principles and best practices \u2014 SkillFed","use":{"when":["Web Design enables you to design websites by working programmatically with an AI agent.","Web Design offers 68 MCP tools covering artboards, animations, styling, and structural organization."]},"what":{"lead":"Efecto Web Design enables you to build web pages and UIs with AI agents using real-time JSX and Tailwind CSS.","rest":"Efecto lets you design web pages and app interfaces programmatically through an AI agent. Create sessions, build layouts with JSX and Tailwind CSS, and watch changes render live in the browser as you work. The skill provides 68 MCP tools for artboards, animations, styling, and structural organization."}},"id":"pablostanley/efecto-plugin/web-design","install":{"mode":"external","repo":"https://github.com/pablostanley/efecto-plugin"},"links":{"html":"https://skillfed.io/pablostanley/efecto-plugin/web-design","md":"https://skillfed.io/pablostanley/efecto-plugin/web-design.md","repo":"https://github.com/pablostanley/efecto-plugin"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":1,"language":null,"last_updated":"2026-05-26","license":null,"name":"Web Design","publisher":"pablostanley","stars":18},"relations":{"similar":[{"id":"pablostanley/efecto-plugin/graphic-design"},{"id":"pablostanley/efecto-plugin/social-media"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-components"},{"id":"OpenClaudia/openclaudia-skills/write-landing"},{"id":"jmsktm/claude-settings/landing-page-designer"},{"id":"majesticlabs-dev/majestic-marketplace/tailwind-coder"},{"id":"bobmatnyc/claude-mpm-skills/tailwind"},{"id":"manutej/luxor-claude-marketplace/tailwind-css"},{"id":"jmsktm/claude-settings/ui-builder"},{"id":"Cap-go/capgo-skills/tailwind-capacitor"}]},"slug":{"owner":"pablostanley","repo":"efecto-plugin","skill":"web-design"},"version":"1af758dc"}