# Interactive Prototype Builder

> Builds interactive prototypes with real data, navigation flows, and user interactions. Supports rapid iteration from concept to testable prototype.

- Skill: `fadil369/interactive-prototype-builder` (Agent Skill)
- Install (CLI): `npx skillmds@latest add fadil369/interactive-prototype-builder`
- Raw SKILL.md: https://api.skillmd.com/api/skills/fadil369/interactive-prototype-builder/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: fadil369 (https://skillmd.com/u/fadil369)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/fadil369/interactive-prototype-builder

---


# Interactive Prototype Builder

Builds interactive prototypes with real data, navigation flows, and user interactions. Supports rapid iteration from concept to testable prototype.

## Decision Framework

### When to Apply
Use when: Rapid prototyping, user testing, concept validation, stakeholder demos

### When NOT to Apply
Don't use when: Production code (refactor after validation)

## Anti-Patterns

### 1. Prototype Becomes Production
Prototypes skip error handling, accessibility, and testing. Always refactor before shipping.

### 2. No Mock Data Strategy
```javascript
// BAD: Hardcoded values everywhere
const user = { name: 'John', email: 'john@example.com' };

// GOOD: Factory functions
const createMockUser = (overrides = {}) => ({
  id: faker.string.uuid(),
  name: faker.person.fullName(),
  email: faker.internet.email(),
  ...overrides
});
```


## Trigger Phrases

- "Create prototype"
- "Quick mockup"
- "User testing"
- "Interactive demo"
- "Concept validation"

## Patterns

### Prototype Router
```javascript
const PrototypeApp = ({ screens }) => {
  const [currentScreen, setCurrentScreen] = useState('home');
  const [sharedState, setSharedState] = useState({});

  const Screen = screens[currentScreen];
  return (
    <Screen
      state={sharedState}
      setState={setSharedState}
      navigate={setCurrentScreen}
    />
  );
};
```

## Integration
- Works with: form-pattern-engine, component-lifecycle-manager