Communitygithub.com

mattpocock/prototype

Erstelle ein wegwerfbares Prototyp, um ein Design auszuarbeiten — eine ausführbare Terminal-App für Zustands-/Geschäftslogik-Fragen oder mehrere radikal unterschiedliche UI-Varianten, die über eine Route umschaltbar sind.

Was ist prototype?

Diese Fähigkeit hilft dir, schnell und ohne großen Aufwand interaktive Prototypen zu erstellen, um Designideen zu erkunden oder geschäftliche Entscheidungen zu validieren. Du kannst entweder eine Terminal-basierte Anwendung für Zustands- und Geschäftslogik-Fragen bauen oder mehrere, radikal unterschiedliche UI-Varianten entwickeln, die über eine einzelne Route umschaltbar sind. Der Fokus liegt auf Geschwindigkeit und Iteration – der Code ist als Wegwerf-Code gedacht, um Ideen zu testen, bevor man sich auf eine endgültige Implementierung festlegt. Die Fähigkeit ist für jede Entwicklungsumgebung geeignet, die die Ausführung von Node.js oder ähnlichen Skripten unterstützt, und eignet sich hervorragend für frühe Entwurfs- und Entscheidungsphasen.

Funktioniert mit~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/mattpocock/skills/tree/main/skills/prototype
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Was macht prototype?

Erstelle einen wegwerfbaren Prototyp, um ein Design auszuarbeiten — eine ausführbare Terminal-App für Zustands-/Geschäftslogik-Fragen oder mehrere radikal unterschiedliche UI-Varianten, die über eine Route umschaltbar sind.

Überblick

Diese Skill ermöglicht es dir, schnell interaktive Prototypen zu bauen, ohne dich um langfristige Code-Qualität oder Wartbarkeit kümmern zu müssen. Du hast zwei Hauptoptionen:

  1. Terminal-App: Eine textbasierte Anwendung, die Zustands-/Geschäftslogik-Fragen beantwortet. Ideal zum Testen von Algorithmen, Datenflüssen oder Entscheidungsbäumen.
  2. UI-Varianten: Mehrere, radikal unterschiedliche visuelle Darstellungen derselben Komponente, die über eine Route umschaltbar sind. Perfekt für A/B-Tests von Designs oder Präsentation von Alternativen.

Verwendung

  1. Klone oder erstelle ein neues Projekt mit dieser Vorlage.
  2. Wähle deinen Ansatz: Entscheide, ob du eine Terminal-App oder UI-Varianten erstellen möchtest.
  3. Implementiere deinen Prototyp: Schreibe den Code in src/index.js (für Terminal) oder erstelle verschiedene Komponenten in src/variants/ (für UI).
  4. Starte den Prototyp:
    • Für Terminal: node src/index.js
    • Für UI: npm start und navigiere zu /variants
  5. Iteriere schnell: Mache Änderungen, beobachte das Ergebnis und verwerfe den Code, wenn du fertig bist.

Konfiguration

Keine spezielle Konfiguration erforderlich. Nur Node.js (Version 14 oder höher) und ein Paketmanager (npm oder yarn).

Beispiel

node src/index.js
> Willkommen zum Prototyp!
> Was möchtest du testen?
> 1) Benutzeranmeldung
> 2) Zahlungsabwicklung
> 3) Beenden

Lizenz

MIT

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

mattpocock/ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

mattpocock/caveman

Ultra-compressed communication mode. Cuts token usage ~75% by dropping filler, articles, and pleasantries while keeping full technical accuracy. Use when user says "caveman mode", "talk like caveman", "use caveman", "less tokens", "be brief", or invokes /caveman.

mattpocock/claude-handoff

Hand the current conversation off to a fresh background agent that picks up the work immediately.

mattpocock/codebase-design

Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

mattpocock/diagnose

Disciplined diagnosis loop for hard bugs and performance regressions. Reproduce → minimise → hypothesise → instrument → fix → regression-test. Use when user says "diagnose this" / "debug this", reports a bug, says something is broken/throwing/failing, or describes a performance regression.

mattpocock/diagnosing-bugs

Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.

mattpocock/domain-modeling

Build and sharpen a project's domain model. Use when the user wants to pin down domain terminology or a ubiquitous language, record an architectural decision, or when another skill needs to maintain the domain model.

mattpocock/edit-article

Edit and improve articles by restructuring sections, improving clarity, and tightening prose. Use when user wants to edit, revise, or improve an article draft.

mattpocock/git-guardrails-claude-code

Set up Claude Code hooks to block dangerous git commands (push, reset --hard, clean, branch -D, etc.) before they execute. Use when user wants to prevent destructive git operations, add git safety hooks, or block git push/reset in Claude Code.

mattpocock/grilling

Grill the user relentlessly about a plan or design. Use when the user wants to stress-test a plan before building, or uses any 'grill' trigger phrases.

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

mattpocock/grill-with-docs

Grilling session that challenges your plan against the existing domain model, sharpens terminology, and updates documentation (CONTEXT.md, ADRs) inline as decisions crystallise. Use when user wants to stress-test a plan against their project's language and documented decisions.

mattpocock/handoff

Compact the current conversation into a handoff document for another agent to pick up.

mattpocock/implement

Implement a piece of work based on a PRD or set of issues.

mattpocock/implement-spec

Implement a specification in code.

mattpocock/improve-codebase-architecture

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

mattpocock/loop-me

Grill me about specs for the workflows I want to build, within this workspace.

mattpocock/migrate-to-shoehorn

Migrate test files from `as` type assertions to @total-typescript/shoehorn. Use when user mentions shoehorn, wants to replace `as` in tests, or needs partial test data.

mattpocock/obsidian-vault

Search, create, and manage notes in the Obsidian vault with wikilinks and index notes. Use when user wants to find, create, or organize notes in Obsidian.

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community

shadcn-ui/ui

A set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.

community