Skip to content

/vt-c-kw-prototype

Generate a deployable HTML/React prototype following VisiTrans Corporate Design

Plugin: core-standards
Usage: /vt-c-kw-prototype

/vt-c-kw-prototype

Create production-quality HTML/React prototypes that developers can reuse (95% code retention).

Usage

/vt-c-kw-prototype                      # Create new prototype project
/vt-c-kw-prototype --feature NAME       # Add feature to existing prototype
/vt-c-kw-prototype --deploy             # Deploy for sharing

What It Does

  1. Creates Git repo in [Project]/04-prototyp/
  2. Applies VisiTrans CD:
  3. Colors: Black #1F1F1F, Orange #FF6600, White, Magenta #E6007E
  4. Font: Inter (all weights)
  5. Component patterns
  6. Generates structure:
  7. Next.js + TypeScript setup
  8. Tailwind CSS with CD tokens
  9. Mock data fixtures
  10. Responsive layouts
  11. Creates components following PRD features
  12. Deploys (optional) for stakeholder/user sharing

Output Structure

04-prototyp/
├── src/
│   ├── app/           # Next.js pages
│   ├── components/    # Reusable components
│   └── lib/           # Mock data, utilities
├── tailwind.config.js # VisiTrans tokens
└── package.json

Development Handoff

Prototype code is designed for 95% reuse: - Components follow production patterns - Mock data matches API contracts - Styling aligns with production needs

Execution

Invoke the kw-prototype skill: → Load skill from skills/vt-c-kw-prototype/SKILL.md