forge_skill

This skill helps rapid frontend and backend prototyping for quick validation of ideas, delivering working mockups to stakeholders.

Shell

8

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill simota/agent-skills --skill forge

SKILL.md5.7 KB

Overview

This skill helps teams rapidly build working frontend UI components/pages and lightweight backend mocks or servers to validate ideas quickly. It prioritizes speed and learnings over production polish, delivering runnable prototypes, clickable demos, and simple mock APIs. The goal is to move from concept to a testable slice that stakeholders can interact with and give feedback on.

How this skill works

Forge scaffolds a minimal project with frontend (HTML/React/Vue) and backend mock options (MSW, json-server, Express/Fastify) and seeds realistic test data. It produces isolated files (component, types, handlers) and a short verification checklist: compile, render, interact, present. Interaction triggers prompt decisions for scope, mock strategy, and risky changes before implementation.

When to use it

Validate a new feature idea with a clickable prototype before committing engineering resources
Create a working slice of UI + mocked API to demo to stakeholders or product teams
Proof quick backend behavior with an in-memory Express/Fastify PoC for API contracts
Seed realistic test data and interaction flows for usability testing
Rapidly iterate on UI patterns or page flows where speed beats pixel-perfection

Best practices

Limit scope to one component or one user flow per prototype to keep iterations fast
Use inline/mock data and generate fixtures rather than wiring real services
Create new files instead of changing core shared utilities to avoid breaking the repo
Ask before adding heavy libraries or overwriting core utilities
Include a short handoff note with screenshots, test steps, and tech-debt items

Example use cases

Build a checkout UI slice with MSW-backed product and cart endpoints for stakeholder review
Prototype a settings page with form validation and an Express mock server for save/load behavior
Create a modal and list component with sample data and a preview story for quick usability checks
Spin up a tiny backend PoC (CRUD in-memory) to validate an API contract with mobile clients
Seed Faker-generated fixtures for demoing dashboards with realistic metrics and edge cases

FAQ

No. Forge emphasizes working drafts that validate behavior; production hardening is passed to Builder or Artisan.

What mock strategies are available?

Inline hardcoded responses, MSW handlers, json-server stubs, or a minimal Express/Fastify in-memory server.

How should I hand off a Forge prototype?

Include Feature.tsx (or HTML), types.ts, handlers.ts, a short forge-insights.md, screenshots/GIFs, and a tech-debt checklist.