360 Secure SkillHub
360 安全技能中心

Rapid Prototyper

面向从零构建 Web 应用、原型或 MVP 的开发类 Skill,默认采用 Next.js 14、Supabase、Clerk、shadcn/ui、Prisma、Zustand 等技术栈,按定义核心、脚手架、搭建主流程、收集反馈、部署五个阶段推进,强调速度优先、复用现成组件与后端服务,并以部署上线和可被真实用户测试作为完成标准。不适用于现有代码库的小修小改。

bullkis1
bullkis1
热度 84.05
最近更新 2026-05-11 17:29:56
分类:开发依赖:代码执行 / 读写文件 / 第三方 API应用场景:代码生成 / API 集成 / 工作流 / 模板

安装技能

复制下面的话术发给你的 Agent,它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill: npx secure-skills-cli add rapid-prototyper
Metadata
name
rapid-prototyper
description
Ultra-fast proof-of-concept and MVP development. Use when building new web apps, prototypes, or MVPs from scratch where speed matters over perfection. Specializes in the canonical fast-stack: Next.js 14 + Supabase + Clerk + shadcn/ui + Prisma. Triggers when user asks to "build", "prototype", "create a quick app", "spin up an MVP", or wants a working thing fast. NOT for small one-liner fixes or edits to existing codebases.

Rapid Prototyper

Build working MVPs in days, not weeks. Speed-first. No over-engineering.

Mindset

  • Ship working code over elegant architecture
  • Use pre-built components and BaaS over custom infra
  • Validate the idea first — optimize later
  • Include analytics and feedback hooks from day one

The Stack

Always default to this unless there's a specific reason not to:

Layer Tool Why
Framework Next.js 14 (App Router) Full-stack, fast setup
Database Supabase (PostgreSQL) Instant DB + realtime + storage
Auth Clerk Drop-in auth in minutes
UI shadcn/ui + Tailwind Beautiful components, no design needed
ORM Prisma Type-safe DB access
State Zustand Simple, no boilerplate
Forms React Hook Form + Zod Validation out of the box
Animation Framer Motion Polish when needed

See references/stack-setup.md for full setup commands and boilerplate.

Workflow

Phase 1 — Define the core (5 min)

  1. What is the ONE thing users do in this app?
  2. What does success look like? (define metric now, not later)
  3. What's the minimum to test the hypothesis?

Phase 2 — Scaffold (15–30 min)

npx create-next-app@latest my-app --typescript --tailwind --eslint --app
cd my-app
npx shadcn@latest init

Then: add Prisma, Supabase client, Clerk provider. See references/stack-setup.md.

Phase 3 — Build core user flow only

  • One happy path first
  • Skip edge cases, error states, loading states until core works
  • Use shadcn components — don't style from scratch

Phase 4 — Add feedback collection

  • Always add a simple feedback mechanism (textarea + submit)
  • Add Vercel Analytics or PostHog from day one
  • Log key actions

Phase 5 — Deploy

npx vercel --prod
# or: push to GitHub → auto-deploy on Vercel

Critical Rules

  • Never spend more than 1 hour on auth — use Clerk
  • Never design a custom DB schema without checking if Supabase can handle it with defaults
  • Always deploy to a URL (even dev preview) before calling it done
  • Always ask: "Is this feature necessary to test the core hypothesis?"

Success Metrics

  • Working app deployed to URL: ✅ done
  • Core user flow completable end-to-end: ✅ done
  • At least one real user can test it: ✅ done
  • Feedback collection in place: ✅ done

References

  • references/stack-setup.md — Full setup commands, env vars, boilerplate code
  • references/patterns.md — Common patterns: auth routes, DB queries, API routes, forms