원클릭으로 Manus에서 모든 스킬 실행

ui-design-mvp

스타5

포크2

업데이트2026년 4월 15일 12:20

Clean MVP UI with shadcn/ui + Tailwind: simplicity, consistency, mobile-first, spacing. Use when the user asks for prettier UI, dark mode, responsive layout, or visual polish on TSX/CSS work.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

ccivlcid

ccivlcid/VibeHarness

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

UI Design — Clean MVP Design

Check docs/biz/ for screen flow before designing. Update Progress.md after UI completion.

Principles

Keep it simple: Fewer elements look more professional. Only what's necessary
Stay consistent: Unify colors, fonts, spacing. Use shadcn/ui default theme
Mobile first: Start with small screens, expand with md: lg: prefixes
Generous spacing: Use ample padding and gap values

Responding to Non-Developer Requests

"Make it prettier" — Apply shadcn/ui components + fix spacing and colors
"It looks too plain" — Add gradients, hover effects, icons
"Change to ~ color" — Modify the --primary color variable
"Text is too small" — Increase from text-base to text-lg

이 저장소의 다른 Skills

같은 저장소

database-prisma-sqlite

ccivlcid/VibeHarness

Sets up and maintains SQLite with Prisma in Node.js/TypeScript projects: prisma init, singleton PrismaClient pattern, schema conventions, db push, gitignore for dev.db, bcrypt for passwords. Use when working with Prisma, schema.prisma, prisma/ folder, SQLite data layer, or db.ts in TS/JS apps. For Python stacks, use SQLAlchemy + SQLite instead — do not apply this skill.

2026-04-155

deploy-vercel

ccivlcid/VibeHarness

Deploys Next.js/web MVPs to Vercel (build check, env vars, vercel CLI). Use only after P0 features are done and tests pass — never during active development. Trigger when the user wants to go live, asks to put the app online, or confirms after "ready to publish?"

2026-04-155

dev-environment-setup

ccivlcid/VibeHarness

Step-by-step install guidance for Node.js, Python, and Git for beginners. Use when the user cannot run npm/python, says they are new, or asks how to install tools.

2026-04-155

frontend-nextjs

ccivlcid/VibeHarness

Next.js App Router + TypeScript + Tailwind + shadcn/ui setup, folder layout, and patterns (component size, mobile-first, Zustand when needed). Use for web app/service projects using Next.js — not for Python-only stacks. Trigger: .tsx/.ts, next.config, new web UI.

2026-04-155

mobile-react-native

ccivlcid/VibeHarness

React Native + Expo + Expo Router + NativeWind setup, folder layout, and patterns (component size, FlatList, navigation). Use for mobile app projects using React Native — not for web-only stacks. Trigger: mobile app request, .tsx with View/Text, app.json, expo config, React Native components.

2026-04-155

python-stack

ccivlcid/VibeHarness

Python stacks for FastAPI, Streamlit, Gradio, LangChain, scraping (BeautifulSoup/Playwright), typed code and venv/requirements. Use for AI/RAG, data apps, API servers, automation — not for Node.js web MVPs. Trigger: .py, requirements.txt.

2026-04-155

원클릭으로 모든 스킬 실행

name	ui-design-mvp
description	Clean MVP UI with shadcn/ui + Tailwind: simplicity, consistency, mobile-first, spacing. Use when the user asks for prettier UI, dark mode, responsive layout, or visual polish on TSX/CSS work.