ワンクリックで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.