# App Creation

> -----

- Skill: `tumiturbi/app-creation` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tumiturbi/app-creation`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tumiturbi/app-creation/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: Tumiturbi (https://skillmd.com/u/tumiturbi)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/tumiturbi/app-creation

---

-----

## name: app-creation
description: >
Guide Claude to build complete, production-quality applications from scratch.
Use this skill whenever the user asks to create, build, or develop an app,
tool, dashboard, web app, mobile app, script, or any software product —
even if they just say “make me something that does X”. Triggers on phrases
like “crea un’app”, “build an app”, “make a tool”, “voglio un programma che”,
“sviluppa un’applicazione”, “create a dashboard”, “build a script for me”.
Always use this skill before writing any application code.

# App Creation Skill / Skill di Creazione App

This skill guides Claude through building complete, well-structured applications
with best practices in mind — from requirements gathering to final delivery.

-----

## 🇮🇹 Italiano

### Fase 1 — Comprensione dei requisiti

Prima di scrivere una riga di codice, chiarisci sempre:

1. **Scopo principale** — Cosa deve fare l’app? Qual è il problema che risolve?
1. **Utenti** — Chi la userà? Livello tecnico?
1. **Piattaforma** — Web, desktop, mobile, CLI, API?
1. **Stack preferito** — Hanno preferenze su linguaggio/framework?
1. **Dati** — Che dati gestisce? Servono persistenza o database?
1. **Vincoli** — Budget, tempi, dipendenze esterne?

Se mancano informazioni critiche, chiedi. Se i requisiti sono chiari, procedi.

### Fase 2 — Pianificazione

Prima di scrivere codice:

- Definisci l’architettura ad alto livello
- Elenca i componenti principali
- Identifica le dipendenze
- Stima la complessità

Presenta il piano all’utente con un breve schema e chiedi conferma.

### Fase 3 — Sviluppo

Segui questi principi:

**Struttura**

- Organizza il codice in moduli/componenti chiari
- Separa logica di business, UI e dati
- Usa nomi descrittivi per variabili e funzioni

**Qualità**

- Gestisci sempre gli errori (try/catch, validazione input)
- Aggiungi commenti dove la logica non è ovvia
- Scrivi codice leggibile prima che ottimizzato

**UX (se applicabile)**

- Feedback visivo per operazioni lente (loading states)
- Messaggi di errore comprensibili per l’utente
- Design responsivo per app web

### Fase 4 — Consegna

Fornisci sempre:

- Il codice completo e funzionante
- Istruzioni di installazione/avvio
- Breve descrizione di come estendere o modificare l’app
- (Opzionale) Idee per miglioramenti futuri

-----

## 🇬🇧 English

### Phase 1 — Requirements Gathering

Before writing any code, always clarify:

1. **Main purpose** — What should the app do? What problem does it solve?
1. **Users** — Who will use it? Technical level?
1. **Platform** — Web, desktop, mobile, CLI, API?
1. **Preferred stack** — Any language/framework preferences?
1. **Data** — What data does it handle? Is persistence needed?
1. **Constraints** — Budget, timeline, external dependencies?

If critical info is missing, ask. If requirements are clear, proceed.

### Phase 2 — Planning

Before writing code:

- Define the high-level architecture
- List the main components
- Identify dependencies
- Estimate complexity

Present the plan to the user with a brief outline and ask for confirmation.

### Phase 3 — Development

Follow these principles:

**Structure**

- Organize code into clear modules/components
- Separate business logic, UI, and data layers
- Use descriptive names for variables and functions

**Quality**

- Always handle errors (try/catch, input validation)
- Add comments where logic isn’t obvious
- Write readable code before optimized code

**UX (if applicable)**

- Visual feedback for slow operations (loading states)
- User-friendly error messages
- Responsive design for web apps

### Phase 4 — Delivery

Always provide:

- Complete, working code
- Installation/startup instructions
- Brief description of how to extend or modify the app
- (Optional) Ideas for future improvements

-----

## 📋 Quick Reference / Riferimento Rapido

|Tipo app          |Stack consigliato                |Note                            |
|------------------|---------------------------------|--------------------------------|
|Web app semplice  |HTML + CSS + JS (single file)    |Ottimo per prototipi rapidi     |
|Web app complessa |React (.jsx artifact)            |Componenti riutilizzabili       |
|Script automazione|Python                           |Leggibile e versatile           |
|CLI tool          |Python (Click) o Node.js         |Argomenti da linea di comando   |
|API REST          |Python (FastAPI) o Node (Express)|Con documentazione auto-generata|
|Dashboard dati    |React + Recharts                 |Grafici interattivi             |

-----

## ⚠️ Common Pitfalls / Errori Comuni

- **Non chiedere abbastanza** → Costruire la cosa sbagliata
- **Over-engineering** → Inizia semplice, aggiungi complessità solo se serve
- **Nessuna gestione errori** → L’app crasha al primo input inatteso
- **UI senza feedback** → L’utente non sa se l’app sta lavorando
- **Codice monolitico** → Difficile da mantenere e modificare