{"enrichment":{"faq":[{"a":"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. The skill enables you to design user interfaces programmatically and build UI components and layouts efficiently.","q":"What is Ui Builder and what can it help me create?"},{"a":"Ui Builder automates interface generation for agent skills, allowing you to develop visual UI elements without manual coding. You can leverage its React and Tailwind CSS foundations to create reusable component patterns and responsive layouts tailored to your agent's needs, following mobile-first design principles.","q":"How to build ui with Ui Builder for agent skills?"},{"a":"Ui Builder emphasizes mobile-first design, semantic HTML, and performance optimization. It teaches accessible and responsive interface construction, ensuring your components work seamlessly across devices. The skill focuses on building reusable patterns for common elements like buttons, cards, inputs, dialogs, and forms.","q":"What design principles does Ui Builder emphasize?"},{"a":"Yes, Ui Builder enables you to create user interface quickly by providing structured guidance on component patterns and layout techniques. With its focus on reusable components and React with Tailwind CSS, you can automate and streamline interface generation rather than coding each element manually.","q":"Can Ui Builder help me create interface elements quickly?"},{"a":"Ui Builder uses React and Tailwind CSS as its core technologies. These tools enable efficient, responsive interface construction with built-in accessibility and performance optimization. The skill leverages these frameworks to help you build semantic HTML and reusable component patterns.","q":"What technologies does Ui Builder use for development?"},{"a":"Ui Builder provides guidance on designing buttons, cards, inputs, dialogs, and forms. These reusable component patterns form the foundation for building complete interfaces. The skill teaches you how to construct these elements with accessibility, responsiveness, and performance in mind using React and Tailwind CSS.","q":"What types of UI components can Ui Builder help design?"}],"shadow_tags":["interface-design","visual-composition","component-assembly","layout-management","ui-automation","frontend-tooling","drag-and-drop","rapid-prototyping"],"summary_rewrite":"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."},"gist":{"api_url":"https://skillfed.io/api/skills/jmsktm/claude-settings/ui-builder.json","as_of":"2026-01-22","description":"Ui Builder helps you create responsive, accessible interfaces using React, Tailwind CSS. npx skillfed install jmsktm/claude-settings/ui-builder","install":{"manual":["git clone https://github.com/jmsktm/claude-settings","cp -r claude-settings ~/.claude/skills/ui-builder"],"primary":"npx skillfed install jmsktm/claude-settings/ui-builder","version":"0d51f6f8"},"kind":"skill","mirror_url":"https://skillfed.io/jmsktm/claude-settings/ui-builder.md","similar":[{"id":"patricio0312rev/skills/page-layout-builder","name":"page-layout-builder","publisher":"patricio0312rev/skills","url":"https://skillfed.io/patricio0312rev/skills/page-layout-builder"},{"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":"patricio0312rev/skills/design-to-component-translator","name":"design-to-component-translator","publisher":"patricio0312rev/skills","url":"https://skillfed.io/patricio0312rev/skills/design-to-component-translator"},{"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":"pablostanley/efecto-plugin/web-design","name":"Web Design","publisher":"pablostanley/efecto-plugin","url":"https://skillfed.io/pablostanley/efecto-plugin/web-design"}],"title":"Ui Builder by jmsktm: Create and design user interfaces programmatically \u2014 SkillFed","use":{"when":["Ui Builder automates interface generation for agent skills, allowing you to develop visual UI elements without manual coding.","Ui Builder emphasizes mobile-first design, semantic HTML, and performance optimization."]},"what":{"lead":"Ui Builder helps you create responsive, accessible interfaces using React, Tailwind CSS, and Shadcn/ui components.","rest":"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."}},"id":"jmsktm/claude-settings/ui-builder","install":{"mode":"external","repo":"https://github.com/jmsktm/claude-settings"},"links":{"html":"https://skillfed.io/jmsktm/claude-settings/ui-builder","md":"https://skillfed.io/jmsktm/claude-settings/ui-builder.md","repo":"https://github.com/jmsktm/claude-settings"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":5,"language":null,"last_updated":"2026-01-22","license":null,"name":"Ui Builder","publisher":"jmsktm","stars":7},"relations":{"similar":[{"id":"patricio0312rev/skills/page-layout-builder"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-components"},{"id":"patricio0312rev/skills/design-to-component-translator"},{"id":"patricio0312rev/skills/modal-drawer-system"},{"id":"majesticlabs-dev/majestic-marketplace/tailwind-coder"},{"id":"pablostanley/efecto-plugin/web-design"},{"id":"bobmatnyc/claude-mpm-skills/headlessui"},{"id":"daffy0208/ai-dev-standards/animation-designer"},{"id":"AsyrafHussin/agent-skills/tailwind-best-practices"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-accessibility"}]},"slug":{"owner":"jmsktm","repo":"claude-settings","skill":"ui-builder"},"version":"0d51f6f8"}