{"enrichment":{"faq":[{"a":"Frontend Design covers core principles for creating intentional, visually striking web interfaces. Key practices include thoughtful typography pairing, cohesive color systems, and spatial rhythm that avoids generic patterns. The skill emphasizes bold aesthetic choices grounded in purpose, helping you build production-grade components and pages that feel memorable rather than AI-generated or formulaic.","q":"What are frontend design best practices?"},{"a":"Frontend Design teaches you to structure code alongside design thinking. It guides you through organizing components and pages with clarity and intention, ensuring your codebase reflects the visual and functional hierarchy you've established. This approach helps maintain consistency across your interface while keeping code maintainable and scalable.","q":"How do I structure and organize frontend code effectively?"},{"a":"Frontend Design introduces you to design patterns and reusable UI components that form the foundation of modern web apps. Rather than relying on generic solutions, the skill helps you identify and build components that serve your specific design system and user needs, creating cohesive interfaces that feel intentional and professional.","q":"What design patterns and reusable components should I use?"},{"a":"Frontend Design provides guidance on responsive and accessible design practices. It teaches you to create interfaces that adapt gracefully across devices while remaining usable for all users, including those with accessibility needs. These principles ensure your frontends are both beautiful and inclusive.","q":"How can I make my web interfaces responsive and accessible?"},{"a":"Frontend Design offers a structured workflow for beginners starting with design fundamentals. It walks you through the process of making bold, purposeful aesthetic choices\u2014from color and typography to spacing and component design\u2014building your confidence in creating professional web UI that stands out from generic templates.","q":"What's the best frontend design workflow for beginners?"},{"a":"Frontend Design focuses on elevating visual design and interface quality through intentional choices in color systems, typography, spatial rhythm, and component design. By learning to avoid generic patterns and apply design principles with precision, you'll create frontends that feel polished, memorable, and production-ready.","q":"How do I improve the visual quality of my user interfaces?"}],"shadow_tags":["ui-design","web-interfaces","design-systems","responsive-layout","user-experience","visual-hierarchy","design-patterns","frontend-standards"],"summary_rewrite":"Frontend Design teaches you to create visually striking web interfaces with purpose and precision. It guides you through bold aesthetic choices, typography pairing, cohesive color systems, and spatial rhythm while explicitly avoiding the generic patterns that mark AI-generated work. Use this skill to build production-grade components and pages that feel intentional and memorable."},"gist":{"api_url":"https://skillfed.io/api/skills/tech-leads-club/agent-skills/frontend-design.json","as_of":"2026-07-24","description":"Frontend Design teaches you to build distinctive web interfaces with intentional aesthetics and avoid generic.","install":{"manual":["git clone https://github.com/tech-leads-club/agent-skills","cp -r agent-skills ~/.claude/skills/frontend-design"],"primary":"npx skillfed install tech-leads-club/agent-skills/frontend-design","version":"285975ea"},"kind":"skill","mirror_url":"https://skillfed.io/tech-leads-club/agent-skills/frontend-design.md","similar":[{"id":"holaboss-ai/holaOS/frontend-design","name":"Frontend Design","publisher":"holaboss-ai/holaOS","url":"https://skillfed.io/holaboss-ai/holaOS/frontend-design"},{"id":"AkaraChen/aghub/frontend-design","name":"frontend-design","publisher":"AkaraChen/aghub","url":"https://skillfed.io/AkaraChen/aghub/frontend-design"},{"id":"dawiddutoit/custom-claude/frontend-design","name":"Frontend Design","publisher":"dawiddutoit/custom-claude","url":"https://skillfed.io/dawiddutoit/custom-claude/frontend-design"},{"id":"elophanto/EloPhanto/frontend-design","name":"Frontend Design","publisher":"elophanto/EloPhanto","url":"https://skillfed.io/elophanto/EloPhanto/frontend-design"}],"title":"Frontend Design by tech-leads-club: Learn frontend design principles and best practices \u2014 SkillFed","use":{"when":["Frontend Design teaches you to structure code alongside design thinking.","Frontend Design introduces you to design patterns and reusable UI components that form the foundation of modern web apps."]},"what":{"lead":"Frontend Design teaches you to build distinctive web interfaces with intentional aesthetics and avoid generic AI-generated styles.","rest":"Frontend Design teaches you to create visually striking web interfaces with purpose and precision. It guides you through bold aesthetic choices, typography pairing, cohesive color systems, and spatial rhythm while explicitly avoiding the generic patterns that mark AI-generated work. Use this skill to build production-grade components and pages that feel intentional and memorable."}},"id":"tech-leads-club/agent-skills/frontend-design","install":{"mode":"external","repo":"https://github.com/tech-leads-club/agent-skills"},"links":{"html":"https://skillfed.io/tech-leads-club/agent-skills/frontend-design","md":"https://skillfed.io/tech-leads-club/agent-skills/frontend-design.md","repo":"https://github.com/tech-leads-club/agent-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":448,"language":"TypeScript","last_updated":"2026-07-24","license":"NOASSERTION","name":"Frontend Design","publisher":"tech-leads-club","stars":4951},"relations":{"similar":[{"id":"holaboss-ai/holaOS/frontend-design"},{"id":"AkaraChen/aghub/frontend-design"},{"id":"fengshao1227/ccg-workflow/frontend-design"},{"id":"mitsuhiko/agent-stuff/frontend-design"},{"id":"dawiddutoit/custom-claude/frontend-design"},{"id":"secondsky/claude-skills/frontend-design"},{"id":"johnlindquist/claude/frontend-design"},{"id":"bear2u/my-skills/frontend-design"},{"id":"elophanto/EloPhanto/frontend-design"},{"id":"6BNBN/FlowPilot/frontend-design"}]},"slug":{"owner":"tech-leads-club","repo":"agent-skills","skill":"frontend-design"},"version":"285975ea"}