vibe-frontend-designlisted
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