{"enrichment":{"faq":[{"a":"frontend-design generates working frontend code guided by named design philosophies including Scandinavian warmth, Swiss typographic objectivity, Japanese minimalism with ma spacing, Brutalist raw structure, Neo-Memphis playful color, and Art Deco geometry. You choose or describe a visual style, and the skill produces code that reflects that philosophy through intentional typography, color, layout, and motion choices rather than generic defaults.","q":"What design philosophies does frontend-design support?"},{"a":"Yes. frontend-design creates production-grade components with exceptional aesthetic attention to detail. Describe your desired design philosophy\u2014whether Scandinavian, Swiss, Japanese, Brutalist, or another named aesthetic\u2014and receive working code that avoids generic AI output through deliberate design choices grounded in that philosophy's principles.","q":"Can I build a beautiful frontend component with design style using this skill?"},{"a":"frontend-design implements responsive, accessible interfaces with mobile-first and dark mode support built in. Your generated code respects both viewport constraints and color-scheme preferences, ensuring your design philosophy translates consistently across devices and user preferences.","q":"Does frontend-design support responsive and dark mode design?"},{"a":"frontend-design scans your codebase first to respect existing components, design tokens, and component libraries. It integrates new builds with your established design system rather than replacing it, preserving consistency across your frontend while adding distinctive aesthetic direction.","q":"How does frontend-design handle existing design systems?"},{"a":"frontend-design generates working code through deliberate design choices anchored in named aesthetic philosophies. By grounding decisions in specific design movements\u2014Swiss grids, Japanese restraint, Brutalist structure\u2014rather than default patterns, the skill produces interfaces that feel designed with intention, not assembled from generic templates.","q":"What makes frontend-design output avoid generic AI interfaces?"},{"a":"frontend-design can create editorial magazine-style layouts grounded in Japanese design principles, emphasizing ma (negative space), restraint, and typographic hierarchy. Describe your content and aesthetic direction, and receive code that reflects that philosophy's approach to layout, spacing, and visual rhythm.","q":"Can I design a page that feels like a Japanese magazine with this skill?"}],"shadow_tags":["aesthetic-philosophy","design-system-integration","typography-pairing","mobile-first-responsive","dark-mode-support","spatial-composition","motion-design","design-token-driven","production-quality-code","anti-generic-output"],"summary_rewrite":"frontend-design generates working frontend code with intentional aesthetic direction, grounded in named design philosophies. Choose or describe a visual style\u2014Scandinavian warmth, Swiss objectivity, Japanese restraint, Brutalist rawness, or others\u2014and receive code that reflects that philosophy through typography, color, layout, and motion. The skill scans your codebase first to respect existing components and tokens."},"files":[{"bytes":11821,"path":"frontend-design/SKILL.md","sha256":"6a078fa3e5a5cef2656d621a90c8dff8191bd9d8a3724df1b98760262c88ef60","url":"https://skillfed.io/files/julianoczkowski/designer-skills/frontend-design/db978340/SKILL.md"}],"id":"julianoczkowski/designer-skills/frontend-design","links":{"html":"https://skillfed.io/julianoczkowski/designer-skills/frontend-design","md":"https://skillfed.io/julianoczkowski/designer-skills/frontend-design.md","repo":"https://github.com/julianoczkowski/designer-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":35,"language":null,"last_updated":"2026-07-06","license":"Apache-2.0","name":"frontend-design","publisher":"julianoczkowski","stars":461},"relations":{"similar":[{"id":"HermeticOrmus/LibreUIUX-Claude-Code/design-movements"},{"id":"julianoczkowski/designer-skills/design-tokens"},{"id":"Ilm-Alan/frontend-design/frontend-design"},{"id":"julianoczkowski/designer-skills/design-review"},{"id":"gooseworks-ai/goose-skills/visual-brand-extractor"},{"id":"bencium/bencium-marketplace/bencium-impact-designer"},{"id":"educlopez/ui-craft/ui-craft-minimal"},{"id":"julianoczkowski/designer-skills/design-brief"},{"id":"julianoczkowski/designer-skills/design-flow"},{"id":"bear2u/my-skills/landing-page-guide-v2"}]},"slug":{"owner":"julianoczkowski","repo":"designer-skills","skill":"frontend-design"},"version":"db978340"}