A Full-Stack Restaurant Website with AI Agents and Multiple Skills
In the previous tutorials, we learned what AI Agent Skills are, how to create our own Skills, and how to find, inspect, and safely use Skills created by other developers.
Now it is time to put those concepts into practice.
In this tutorial, we will build a full-stack restaurant website with the help of an AI Agent and multiple specialized Skills.
Instead of giving one AI Agent a huge prompt containing every requirement, we will divide the work into specialized Skills.
Our Agent will use Skills for:
UI design
Frontend development
Backend development
Database design
Restaurant reservations
Email integration
Testing
Security review
Deployment
The goal is not only to create a restaurant website. The goal is to understand how multiple Skills can work together as part of a real software-development workflow.
By the end of the tutorial, we will have an architecture similar to:
AI AGENT
│
┌──────────────┼──────────────┐
│ │ │
▼ ▼ ▼
UI Design Backend Database
Skill Skill Skill
│ │ │
├──────────────┼──────────────┤
│ │ │
▼ ▼ ▼
Reservation Email Testing
Skill Skill Skill
│
┌─────┴─────┐
▼ ▼
Security Deployment
Skill Skill
What Are We Going to Build?
We will create a modern restaurant website that can be used as a realistic demonstration project.
The website will contain:
Home page
About section
Restaurant menu
Dish information
Restaurant opening hours
Table reservation form
Reservation confirmation
Email notification
Responsive mobile design
Admin-ready backend structure
Database
Validation
Security checks
Deployment configuration
A customer should be able to visit the website, browse the menu and submit a table reservation.
Our final application will roughly follow this architecture:
Customer
│
▼
Restaurant Website
│
├── Frontend
│ │
│ ├── HTML
│ ├── CSS
│ └── JavaScript
│
▼
Flask Backend
│
├── Reservation validation
├── Business logic
├── Email service
└── API / routes
│
▼
Database
│
├── Reservations
├── Menu
└── Restaurant settings
For this tutorial we will use Python and Flask for the backend because they provide a relatively simple way to demonstrate the complete Agent workflow.
The same Skills concept can later be applied to ASP.NET Core, Node.js, Django, React, Vue, or other technologies.
Why Use Multiple Skills?
We could simply tell an AI:
Build me a restaurant website.
The AI might generate something useful, but this approach has several disadvantages.
The instructions become difficult to control as the application grows.
For example, frontend requirements are very different from database requirements.
A frontend designer needs to think about:
Layout
Typography
Colors
Navigation
Responsive design
Accessibility
User experience
A database designer needs to think about:
Tables
Primary keys
Relationships
Constraints
Indexes
Data integrity
A security reviewer needs another set of instructions.
By separating these responsibilities into Skills, we create something similar to a development team.
Traditional Development Team
UI/UX Designer
Frontend Developer
Backend Developer
Database Developer
QA Engineer
Security Engineer
DevOps Engineer
With an Agent-based workflow we can represent those responsibilities as:
AI Agent
UI Design Skill
Frontend Skill
Backend Skill
Database Skill
Testing Skill
Security Skill
Deployment Skill
The Agent becomes the coordinator.
Step 1 — Create the Project
Create a new folder:
restaurant-agent/
Open it in VS Code.
Our initial project can look like:
restaurant-agent/
│
├── app.py
├── requirements.txt
│
├── templates/
│
├── static/
│ ├── css/
│ └── js/
│
├── database/
│
├── tests/
│
└── skills/
The skills directory will contain our specialized Agent Skills.
Step 2 — Create the Skills Directory
Inside the project create:
skills/
Then create the individual Skills:
skills/
│
├── ui-design/
│ └── SKILL.md
│
├── frontend-development/
│ └── SKILL.md
│
├── backend-development/
│ └── SKILL.md
│
├── database-design/
│ └── SKILL.md
│
├── restaurant-reservation/
│ └── SKILL.md
│
├── email-integration/
│ └── SKILL.md
│
├── testing/
│ └── SKILL.md
│
├── security-review/
│ └── SKILL.md
│
└── deployment/
└── SKILL.md
We now have nine specialized Skills.
But at this stage they do not know anything.
We need to define their responsibilities.
Step 3 — Create the UI Design Skill
Create:
skills/ui-design/SKILL.md
Add:
---
name: restaurant-ui-design
description: Designs modern, elegant and responsive restaurant interfaces.
---
# Restaurant UI Design
When designing restaurant interfaces:
1. Create an elegant and professional restaurant appearance.
2. Use a mobile-first responsive design.
3. Keep navigation simple.
4. Make the Book a Table action easy to find.
5. Use readable typography.
6. Make menu cards visually clear.
7. Display prices clearly.
8. Make forms easy to complete.
9. Follow accessibility principles.
10. Avoid unnecessary visual complexity.
Before finishing, verify:
- desktop layout
- tablet layout
- mobile layout
- navigation
- form usability
- accessibility
This Skill now contains reusable UI rules.
Step 4 — Create the Frontend Development Skill
Create:
skills/frontend-development/SKILL.md
Add:
---
name: restaurant-frontend
description: Implements the restaurant frontend using HTML, CSS and JavaScript.
---
# Restaurant Frontend Development
When implementing the frontend:
1. Use semantic HTML5.
2. Keep CSS in separate stylesheets.
3. Keep JavaScript in separate files.
4. Make the application responsive.
5. Validate forms on the client.
6. Do not rely only on client-side validation.
7. Make navigation keyboard accessible.
8. Optimize images.
9. Avoid unnecessary JavaScript dependencies.
10. Keep the code easy to maintain.
Use this structure:
templates/
static/css/
static/js/
static/images/
Notice that the UI Skill determines how the application should look, while the frontend Skill determines how the interface should be implemented.
Step 5 — Create the Backend Skill
Create:
skills/backend-development/SKILL.md
Add:
---
name: restaurant-backend
description: Implements the restaurant backend using Python and Flask.
---
# Restaurant Backend
Use Python and Flask.
Responsibilities:
1. Create Flask routes.
2. Process reservation requests.
3. Validate all incoming data.
4. Keep business logic separate from presentation.
5. Return useful error messages.
6. Never trust browser validation alone.
7. Use environment variables for secrets.
8. Log errors without exposing sensitive information.
9. Keep the code modular.
10. Prepare the application for production deployment.
Step 6 — Create the Database Skill
Create:
skills/database-design/SKILL.md
Add:
---
name: restaurant-database
description: Designs and maintains the restaurant application database.
---
# Restaurant Database Design
Create a database suitable for restaurant reservations.
The reservation model should contain:
- id
- reservation_reference
- customer_name
- email
- phone
- reservation_date
- reservation_time
- guests
- special_requests
- status
- created_at
Rules:
1. Every reservation must have a unique identifier.
2. Validate required values.
3. Use appropriate data types.
4. Do not store unnecessary sensitive information.
5. Design the schema so it can later support an admin interface.
6. Keep database operations separate from presentation code.
Our Agent now knows what information a reservation should contain.
Step 7 — Create the Reservation Skill
This is an important example because it contains business rules, rather than programming instructions.
Create:
skills/restaurant-reservation/SKILL.md
Add:
---
name: restaurant-reservation
description: Handles restaurant table reservation rules and validation.
---
# Restaurant Reservation
When processing a reservation:
1. Customer name is required.
2. A valid email or phone number is required.
3. Guest count must be valid.
4. Reservation date cannot be in the past.
5. Reservation time must be inside restaurant opening hours.
6. Generate a unique reservation reference.
7. Save the reservation only after server-side validation.
8. Return a clear confirmation to the customer.
9. Never expose internal database IDs as customer booking references.
10. Invalid reservations must not be stored.
This is different from the Backend Skill.
The Backend Skill knows how to build Flask functionality.
The Reservation Skill knows the restaurant’s business rules.
That distinction becomes important in larger AI Agent systems.
Step 8 — Create the Email Skill
Create:
skills/email-integration/SKILL.md
Add:
---
name: restaurant-email
description: Handles restaurant reservation email notifications.
---
# Restaurant Email Integration
After a reservation is successfully created:
1. Prepare a confirmation email.
2. Include the reservation reference.
3. Include customer name.
4. Include reservation date.
5. Include reservation time.
6. Include number of guests.
7. Include special requests when available.
8. Do not include passwords or internal system information.
9. Store email credentials in environment variables.
10. Handle email failures without losing the reservation.
Never hard-code SMTP passwords or API keys.
The last rule is particularly important.
We should never write something such as:
EMAIL_PASSWORD = "mypassword123"
inside the source code.
Instead we use environment variables.
Step 9 — Create the Testing Skill
Create:
skills/testing/SKILL.md
Add:
---
name: restaurant-testing
description: Tests restaurant website functionality before release.
---
# Restaurant Testing
Test:
- home page
- navigation
- menu
- reservation form
- required fields
- invalid email
- invalid phone
- past dates
- invalid opening times
- reservation creation
- reservation reference
- database storage
- email handling
- mobile layout
- error handling
Do not report the application as ready until critical tests pass.
For every failed test:
1. Explain the problem.
2. Identify the likely cause.
3. Recommend or implement a fix.
4. Run the relevant test again.
The last rule creates an important Agent behavior:
Test
↓
Failure
↓
Fix
↓
Retest
instead of simply:
Test
↓
Failure
↓
Stop
Step 10 — Create the Security Skill
Create:
skills/security-review/SKILL.md
Add:
---
name: restaurant-security
description: Reviews the restaurant application for common security problems.
---
# Restaurant Security Review
Check for:
- hard-coded passwords
- exposed API keys
- missing server-side validation
- SQL injection
- unsafe HTML output
- cross-site scripting risks
- insecure dependencies
- excessive error information
- unsafe file operations
- unnecessary permissions
- secrets committed to Git
Before deployment verify:
1. Secrets use environment variables.
2. Debug mode is disabled in production.
3. User input is validated.
4. Database queries are safe.
5. Sensitive information is not logged.
The Security Skill does not need to build the application.
Its job is to challenge the work produced by the other Skills.
Step 11 — Create the Deployment Skill
Finally create:
skills/deployment/SKILL.md
Add:
---
name: restaurant-deployment
description: Prepares the restaurant application for safe production deployment.
---
# Restaurant Deployment
Before deployment:
1. Run all tests.
2. Run the security review.
3. Verify requirements.txt.
4. Verify environment variables.
5. Disable Flask debug mode.
6. Verify database configuration.
7. Verify email configuration.
8. Check static files.
9. Check production logging.
10. Document deployment steps.
Never deploy when critical tests or security checks are failing.
Now our Agent has a complete set of development capabilities.
Step 12 — Give the Agent the Project Goal
Instead of writing hundreds of detailed instructions in one prompt, we can give our Agent the overall objective.
For example:
Build a modern full-stack restaurant website.
Use the available Skills when appropriate.
Requirements:
- responsive restaurant website
- menu with dishes and prices
- table reservation
- Flask backend
- database persistence
- unique reservation reference
- email confirmation
- client and server validation
- automated tests
- security review
- production deployment preparation
Work incrementally.
Before making major changes, determine which Skills are relevant.
After implementing functionality, use the Testing Skill.
Before deployment, use the Security Review and Deployment Skills.
The Agent now has a goal and specialized instructions for accomplishing it.
Step 13 — How the Agent Chooses Skills
Suppose we ask:
Create the reservation form.
The Agent should identify several relevant Skills:
UI Design
│
▼
Frontend Development
│
▼
Restaurant Reservation
If we ask:
Save the reservation.
the relevant Skills change:
Restaurant Reservation
│
▼
Backend Development
│
▼
Database Design
If we ask:
Prepare the application for production.
the workflow becomes:
Testing
│
▼
Security Review
│
▼
Deployment
This demonstrates one of the biggest advantages of Skills:
The entire instruction set does not need to be loaded for every task.
The Agent can use the specialized instructions relevant to the current job.
Step 14 — Build the First Application Structure
Our Agent can now create:
restaurant-agent/
│
├── app.py
├── requirements.txt
├── .env.example
├── .gitignore
│
├── templates/
│ ├── base.html
│ ├── index.html
│ └── reservation_confirmation.html
│
├── static/
│ ├── css/
│ │ └── style.css
│ │
│ ├── js/
│ │ └── app.js
│ │
│ └── images/
│
├── database/
│ └── restaurant.db
│
├── tests/
│ └── test_reservations.py
│
└── skills/
├── ui-design/
├── frontend-development/
├── backend-development/
├── database-design/
├── restaurant-reservation/
├── email-integration/
├── testing/
├── security-review/
└── deployment/
We have now separated:
Application code
Database
Tests
Agent Skills
Configuration
Step 15 — The Complete Development Workflow
Our AI-assisted development process now looks like this:
User Requirement
│
▼
AI Agent
│
▼
Identify Required Skills
│
▼
Plan Implementation
│
▼
UI + Frontend Skills
│
▼
Backend + Database Skills
│
▼
Reservation Business Rules
│
▼
Email Integration
│
▼
Testing Skill
│
├── Failed ──► Fix ──► Retest
│
▼
Security Review
│
├── Problem ──► Fix ──► Review Again
│
▼
Deployment Skill
│
▼
Production
This is much closer to a real software-development lifecycle than simply asking a chatbot to generate a website.
Do We Need to Create Every Skill Ourselves?
No.
This connects directly with the previous tutorial.
For example, instead of creating our own general frontend Skill, we might find an existing high-quality frontend Skill.
Our workflow would be:
Search GitHub
↓
Find Skill
↓
Read SKILL.md
↓
Inspect Scripts
↓
Check Security
↓
Test Skill
↓
Customize It
↓
Add It to Project
We might create the restaurant-specific reservation Skill ourselves while reusing a trusted testing or frontend Skill.
This gives us a combination of:
Community Skills
+
Our Own Skills
=
Project Skill Library
An Important Difference: Skills Are Not Separate AI Models
When we write:
UI Design Skill
Backend Skill
Testing Skill
Security Skill
we are not necessarily running nine separate AI models.
They are specialized sets of instructions and resources that the Agent can use when necessary.
This means:
One Agent
+
Multiple Skills
can behave like a small specialized development team.
Later, we could extend the architecture further by creating multiple Agents, each with its own Skills.
For example:
Manager Agent
│
┌────────────┼────────────┐
▼ ▼ ▼
Frontend Agent Backend Agent Testing Agent
│ │ │
UI Skill Flask Skill Test Skill
Frontend Skill DB Skill Security Skill
That is a more advanced multi-agent architecture.
For our current tutorial, however, one Agent with multiple Skills is easier to understand and maintain.
Where Do MCP, RAG, and Memory Fit?
Our restaurant Agent can later become even more powerful.
For example:
AI AGENT
│
┌──────────────────┼──────────────────┐
│ │ │
▼ ▼ ▼
Skills RAG Memory
│
▼
MCP
│
┌────┼───────────┐
▼ ▼ ▼
Email Database Calendar
Skills
Tell the Agent how to perform tasks.
RAG
Could provide information such as:
Restaurant policies
Menu documentation
Employee instructions
Allergen information
Memory
Could remember useful context from previous interactions.
MCP
Could connect the Agent to real services such as:
Email
Database
Calendar
Reservation system
External APIs
This turns our demonstration website into the foundation for a much more advanced restaurant AI system.
Conclusion
In this tutorial we moved from individual Agent Skills to a complete Skill-based development architecture.
We created Skills for:
UI Design
Frontend Development
Backend Development
Database Design
Restaurant Reservations
Email Integration
Testing
Security
Deployment
Most importantly, we separated responsibilities.
Instead of giving the AI one enormous prompt, we created reusable instructions for specialized tasks.
Our architecture is now:
Goal
↓
AI Agent
↓
Select Skills
↓
Plan
↓
Build
↓
Test
↓
Security Review
↓
Deploy
This approach makes AI-assisted software development easier to understand, reuse, test, and improve.
Next Step — Build the Restaurant Application with the Agent
We have now designed the Agent and its Skills.
The next step is to make the Agent actually use those Skills to build the restaurant application.
→ Build the Restaurant Application with the Agent and skills
← Back to AI Agents – Step-by-Step