← ClaudeAtlas

vibe-frontend-designlisted

Design and implement distinctive, production-grade screen UI for vibe-coding workflows: loose prompts, taste-driven iteration, and fast frontend polishing that still respects usability, layout discipline, and real code constraints. Use this skill whenever the user wants a frontend to feel more polished, modern, premium, cohesive, bold, or simply "better", including landing pages, dashboards, app screens, forms, lists, onboarding, settings, and component restyling. Also use it for vague requests like "make this UI nicer", "give this more personality", "make it feel expensive", or "vibe code this screen." Preserve existing design systems when they are good; introduce a clearer visual and interaction system when they are weak or absent.
bayeslearner/bayeslearner-skills · ★ 0 · Web & Frontend · score 65
Install: claude install-skill bayeslearner/bayeslearner-skills
# Vibe Frontend Design This skill helps an agent turn vague frontend taste requests into usable, screen-first UI decisions and working code. It combines three things: - human-centered interaction patterns - disciplined layout and sizing defaults - practical implementation judgment inside a real codebase It is for vibe coders: users who often describe the desired feel before they describe the exact structure. The job of the agent is to convert that taste signal into concrete hierarchy, layout, states, and implementation choices without flattening everything into generic component-library UI. Use it for screen interfaces only. Do not stretch it to voice UX, chatbots, AR/VR, or other non-graphical interaction models unless the user explicitly wants crossover guidance. ## Scope In scope: - web apps, marketing sites, dashboards, mobile web, app screens - flows such as onboarding, auth, checkout, search, settings, CRUD, detail/list views - component and page restyling - translating visual direction into React, Next.js, Tailwind, CSS, or similar frontend code - improving hierarchy, navigation, forms, commands, lists, and data display Out of scope by default: - voice and conversational UX - AR/VR or spatial interfaces - backend-only work - branding-only work with no screen interaction model ## Operating stance - Start with people and tasks, not pixels. - Organize content and actions before styling them. - Treat component libraries as a floor, not a ceiling. - Preserve existi