{"enrichment":{"faq":[{"a":"Frontend Design teaches production-grade web UI development centered on design tokens, component architecture, and responsive patterns. The skill prioritizes systematic consistency balanced with creative aesthetics, ensuring your interfaces scale reliably across projects while maintaining visual coherence and accessibility compliance.","q":"What are the core principles that Frontend Design emphasizes?"},{"a":"Frontend Design covers responsive frontend design through modern layout techniques, fluid typography, and breakpoint strategies. You'll learn to build interfaces that adapt seamlessly from mobile to desktop, using CSS Grid, Flexbox, and media queries alongside design token systems that maintain consistency across all screen sizes.","q":"How to design frontend interfaces that work across devices?"},{"a":"Frontend Design explores design patterns including component composition, state management patterns, and interaction workflows. The skill covers systematic approaches to building reusable UI components, establishing design systems, and implementing patterns that work across React, Vue, and vanilla JavaScript frameworks.","q":"What frontend design patterns does this skill teach?"},{"a":"Frontend Design addresses tools and frameworks essential to modern web development. The curriculum spans design token systems, component libraries, and framework-specific implementations for React, Vue, and vanilla JavaScript, helping you choose and integrate the right tools for your project's architecture.","q":"Which frontend design tools and frameworks are covered?"},{"a":"Frontend Design integrates accessibility compliance throughout its curriculum, treating it as a core design principle rather than an afterthought. The skill teaches semantic HTML, ARIA patterns, keyboard navigation, color contrast standards, and inclusive component design to ensure your interfaces serve all users effectively.","q":"How does Frontend Design approach accessibility in UI?"},{"a":"Frontend Design outlines a structured design workflow that moves from token definition through component architecture to responsive implementation. The skill emphasizes planning your design system early, establishing consistency rules, testing across browsers and devices, and iterating based on user feedback and accessibility audits.","q":"What workflow does Frontend Design recommend for design projects?"}],"shadow_tags":["ui-development","web-interface","design-systems","user-experience","visual-layout","component-design","interaction-patterns","responsive-layout"],"summary_rewrite":"Frontend Design teaches production-grade web UI development through a tokens-first methodology that balances systematic consistency with creative aesthetics. It covers design token systems, component architecture, accessibility compliance, and responsive patterns across React, Vue, and vanilla frameworks."},"gist":{"api_url":"https://skillfed.io/api/skills/jjyaoao/HelloAgents/frontend-design.json","as_of":"2026-06-08","description":"Frontend Design teaches you to build production-ready web UIs using design tokens, accessibility standards. npx skillfed install jjyaoao/HelloAgents/frontend-design","install":{"manual":["git clone https://github.com/jjyaoao/HelloAgents","cp -r HelloAgents ~/.claude/skills/frontend-design"],"primary":"npx skillfed install jjyaoao/HelloAgents/frontend-design","version":"4a46e08e"},"kind":"skill","mirror_url":"https://skillfed.io/jjyaoao/HelloAgents/frontend-design.md","similar":[{"id":"pascalorg/skills/web-design","name":"Web Design","publisher":"pascalorg/skills","url":"https://skillfed.io/pascalorg/skills/web-design"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-fundamentals-v4","name":"tailwindcss-fundamentals-v4","publisher":"JosiahSiegel/claude-plugin-marketplace","url":"https://skillfed.io/JosiahSiegel/claude-plugin-marketplace/tailwindcss-fundamentals-v4"},{"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":"Pixel-Process-UG/superkit-agents/ui-design-system","name":"ui-design-system","publisher":"Pixel-Process-UG/superkit-agents","url":"https://skillfed.io/Pixel-Process-UG/superkit-agents/ui-design-system"},{"id":"samhvw8/dot-claude/ui-design-system","name":"Ui Design System","publisher":"samhvw8/dot-claude","url":"https://skillfed.io/samhvw8/dot-claude/ui-design-system"}],"title":"Frontend Design by jjyaoao: Learn frontend design principles and best practices \u2014 SkillFed","use":{"when":["Frontend Design covers responsive frontend design through modern layout techniques, fluid typography, and breakpoint strategies.","Frontend Design explores design patterns including component composition, state management patterns, and interaction workflows."]},"what":{"lead":"Frontend Design teaches you to build production-ready web UIs using design tokens, accessibility standards, and creative execution.","rest":"Frontend Design teaches production-grade web UI development through a tokens-first methodology that balances systematic consistency with creative aesthetics. It covers design token systems, component architecture, accessibility compliance, and responsive patterns across React, Vue, and vanilla frameworks."}},"id":"jjyaoao/HelloAgents/frontend-design","install":{"mode":"external","repo":"https://github.com/jjyaoao/HelloAgents"},"links":{"html":"https://skillfed.io/jjyaoao/HelloAgents/frontend-design","md":"https://skillfed.io/jjyaoao/HelloAgents/frontend-design.md","repo":"https://github.com/jjyaoao/HelloAgents"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":597,"language":"Python","last_updated":"2026-06-08","license":"NOASSERTION","name":"Frontend Design","publisher":"jjyaoao","stars":2524},"relations":{"similar":[{"id":"AnswerZhao/agent-skills/frontend-design"},{"id":"pascalorg/skills/web-design"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-fundamentals-v4"},{"id":"patricio0312rev/skills/design-to-component-translator"},{"id":"Pixel-Process-UG/superkit-agents/ui-design-system"},{"id":"HermeticOrmus/LibreUIUX-Claude-Code/prompt-engineering-ui"},{"id":"JuliusBrussee/skills/interface-kit"},{"id":"samhvw8/dot-claude/ui-design-system"},{"id":"jmsktm/claude-settings/ui-builder"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-design-systems"}]},"slug":{"owner":"jjyaoao","repo":"HelloAgents","skill":"frontend-design"},"version":"4a46e08e"}