# Buildable Web Builder

> Use when generating or adapting local-first web app prototypes from Buildable app specs, archetypes, UI patterns, design playbooks, and golden templates.

- **Type:** Skill
- **Install:** `agentstack add skill-suntay44-buildable-plugin-skills-web-builder`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [suntay44](https://agentstack.voostack.com/s/suntay44)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [suntay44](https://github.com/suntay44)
- **Source:** https://github.com/suntay44/buildable-plugin-skills/tree/main/skills/web-builder

## Install

```sh
agentstack add skill-suntay44-buildable-plugin-skills-web-builder
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Buildable Web Builder Skill

Use this skill to generate or adapt local web prototypes.

Resolve all referenced paths from the Buildable plugin or repository root.

## Activation

Use only when the user is building or adapting a web app/prototype. Do not activate for unrelated frontend debugging unless the user asks for Buildable guidance.

## Reference Loading Contract

Mandatory order:

1. Read the saved planner output first: `.buildable/phase-plan.json` when present, otherwise `buildable-app-spec.json`. Use `.buildable/phase-plan.toon` when present as the compact agent-facing build contract.
2. Load only `appSpec.references`.
3. Load current project files only as needed for the requested change.
4. Do not load all templates.
5. Load starter source only for the selected template and only when generating or editing it.

## Default Stack

- Next.js
- TypeScript
- Tailwind CSS
- shadcn-style component patterns
- local/mock data

## Workflow

1. Read the saved plan/app spec from the planner handoff.
2. Check `appSpec.planAudit.checks` before editing; treat blocked/failed checks as gates, not suggestions.
3. If `questionsNeeded` is true, ask the user before generating.
4. For fresh starts, prefer `buildable generate ""` when a runnable template exists. Add `--out ` only when the user requested a specific folder.
5. Apply `appSpec.designSystem` for visual tone, density, palette intent, layout rules, component rules, accessibility, and anti-patterns.
6. Apply `appSpec.blocks` as reusable micro-template guidance. Selected block docs are references to adapt to the current entity/design system, not generic code to paste blindly.
7. If `appSpec.auth.requested` is true, implement the local/mock auth shape first and keep any named provider behind the auth seam.
8. Load only the references listed in the app spec.
9. If the template is `generic-app`, use the selected archetype reference to shape screens and entities instead of loading unrelated templates.
10. Inspect the local project if generating inside an existing app.
11. Generate or adapt a complete first-screen prototype.
12. Keep data local unless the spec explicitly requires otherwise.
13. Run build/typecheck/lint checks when available.

## Build Order

1. Create typed entities and sample data.
2. Build the primary screen and state operations.
3. Add empty, filtered, and edited states.
4. Apply responsive layout rules.
5. Review against the selected quality rubric.

## Guardrails

- Do not add auth, accounts, billing, cloud previews, managed databases, telemetry, or deployment.
- Do not create marketing landing pages for app requests.
- Do not leave generic placeholder UI.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [suntay44](https://github.com/suntay44)
- **Source:** [suntay44/buildable-plugin-skills](https://github.com/suntay44/buildable-plugin-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-suntay44-buildable-plugin-skills-web-builder
- Seller: https://agentstack.voostack.com/s/suntay44
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.