skills.rest
dtyq
dtyqOFFICIAL
Explore all skills by this author →
GitHub

micro-app-architect

Generates interactive HTML micro-apps with file persistence and agent-dispatched workspace skills.

5.0k|557|Updated May 14, 2025
Search Tags:#crud#agent dispatch#HTML generation#file persistence#micro-app#workspace skill#window.magic
One-click install
npx skills add https://github.com/dtyq/magic --skill micro-app-architect
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: micro-app-architect
Source: https://github.com/dtyq/magic/tree/main/backend/super-magic/agents/skills/micro-app-architect
Command: npx skills add https://github.com/dtyq/magic --skill micro-app-architect

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Turning a plain-language request like "make a CRM" or "build a data dashboard" into a working interactive web app requires coordinating frontend UI, data persistence, and backend AI workflows. This Skill automates that entire process inside the Super Magic platform, producing a complete micro-app folder instead of disconnected code snippets.

Core Features & Use Cases

  • Three-Layer Architecture Generation: Produces an HTML frontend, file-based JSON data layer, and optional companion workspace skills acting as the backend, all wired together via window.Magic APIs.
  • Complexity-Based Decision Tree: Classifies requests as Simple (pure HTML), Medium (HTML plus companion skill), or Complex (multi-agent orchestration) and generates the matching structure with app.json, magic.project.js, and index.html.
  • Agent and Skill Dispatch: Triggers backend workflows through createTopicAndSend with @file or @skill mentions, including agent and model selector UI patterns.
  • Use Case: Ask for a customer management system with AI follow-up suggestions, and receive a CRUD app with per-record JSON files, a suggestion_writer companion skill, and progress tracking via watched status files.

Quick Start

Ask the agent to build an interactive tool such as a todo list, dashboard, or CRM, and confirm the proposed design review to receive the complete micro-app.

Frequently Asked Questions about micro-app-architect

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build an interactive web app with an AI agent?▼

Describe the app you want, such as a todo list or CRM, and the agent decomposes requirements, picks an architecture tier, and generates the full micro-app folder. Medium and complex apps include a design review step for your confirmation before code generation.

How does a generated HTML app persist data without a database?▼

Apps store data as JSON files through the window.Magic.fs API, with one file per record under directories like data/tasks/. List pages read directory entries via listDir and watchDir, while detail views load individual record files on demand.

When does a micro-app need a companion workspace skill?▼

A companion skill is generated when backend logic exceeds what fits in inline JavaScript, such as multi-step LLM pipelines, data analysis, or report generation. The HTML triggers it by creating a new topic with the SKILL.md attached as a file mention.

Can generated apps dispatch tasks to different AI agents?▼

Yes, complex apps call window.Magic.agent.getAgents to list available agents and dispatch tasks via createTopicAndSend with a chosen agentId. The UI includes agent and model selectors, defaulting to general mode and the auto model.

What are the limitations of file-name projections for record lists?▼

File names encode only sort key, status, shortId, and a truncated title slug under 120 UTF-8 bytes, suitable for list display and simple filters. Queries across multiple detail fields, ranges, or over 500 records require an index file or bucketed directory strategy.

Related Skills

Explore More Software Engineering Skills→
bennybennisonbennybennison

workflow-discovery

Identify and document user workflows into a structured WorkflowBrief before design work.

Community
Basic
weside-aiweside-ai

council

Convene a council of role-based agents for live shared team deliberation.

Official
Advanced
andreadellacorteandreadellacorte
5

groove-admin-install

Install Groove backend services, companion skills, and IDE symlinks.

Community
Intermediate
bakwankawabakwankawa

using-git-worktrees

Create and use Git worktrees to isolate feature development in Cursor.

Community
Intermediate