Skip to main content

Documentation Index

Fetch the complete documentation index at: https://herwaka.shesharp.org.nz/llms.txt

Use this file to discover all available pages before exploring further.

Congratulations — you built and deployed your own website without writing a single line of code! Let’s look at what you achieved, how to keep improving, and where to go next.

​
What You Built

A personal website that:
  • Was designed by you and built by AI — using your voice or keyboard
  • Is live on the internet for anyone to visit
  • Can be updated anytime with a single spoken or typed prompt
  • Cost you absolutely nothing

​
What You Learned

The skill that matters most isn’t coding — it’s communication. You learned to describe what you want clearly, review the result, and iterate until it’s right. Whether you spoke your prompts or typed them, the core skill is the same — and it works with any AI tool, in any field.
Here’s what you practised:
  • Using the terminal — running commands and navigating folders
  • Talking to AI — speaking or writing clear prompts that get the result you want
  • Iterating — refining your website step by step
  • Using git and GitHub — storing code and deploying a website
  • Problem solving — describing issues and letting AI help fix them

​
How to Update Your Website

Whenever you want to make changes to your website:
1

Open your terminal in the project folder

Navigate to your my-website folder and open a terminal there (just like you did before).
2

Start Gemini CLI

gemini
3

Describe what you want to change

Say or type what you want to update — just like you did when building.
4

Push your changes

Say this or copy this prompt
I've made changes to my website. Please:
1. Add all changed files to git
2. Create a commit with a descriptive message
3. Push the changes to GitHub
My website should automatically update on GitHub Pages in 1-2 minutes.

​
Ideas to Try

Add a blog

Create a blog section with posts you can update over time.

Custom domain

Use your own domain name (like yourname.com) instead of github.io.

Animations

Add scroll animations and transitions to make your site feel alive.

Dark mode

Let visitors switch between light and dark themes.
Here are ready-to-use prompts for each idea — say them or copy them into Gemini CLI:
Say this or copy this prompt
Add a blog section to my website. I want:
- A "Blog" page linked from the navigation
- A list of blog posts with titles, dates, and short previews
- Create 2 sample blog posts with placeholder content
- Each blog post should have its own page with full content
- Add a "Back to blog" link on each post page
Make it match the existing design of my website.
Say this or copy this prompt
I want to use a custom domain for my GitHub Pages website.
My domain is [your-domain.com]. Please:
1. Create a CNAME file in my repository with my domain
2. Tell me what DNS records I need to set up with my domain provider
3. Explain how to verify it's working
Say this or copy this prompt
Add smooth scroll animations to my website. I want sections to
fade in and slide up as the user scrolls down the page. Use CSS
animations with a JavaScript Intersection Observer — no external
libraries. Keep it subtle and professional.
Say this or copy this prompt
Add a dark mode toggle button in the top-right corner of my website.
When clicked, it should switch the entire website between light and
dark themes. Save the user's preference in localStorage so it
persists when they refresh the page. Make sure all text remains
readable in both modes.

​
Supercharge Your AI: Agent Skills

Think of skills as superpowers you can install to make Gemini CLI even smarter at specific tasks.
Skills are based on the open Agent Skills standard. Gemini automatically detects when a skill is relevant and activates it.

​
How Skills Work

​
Installing Skills

1

Browse available skills

Say this or copy this prompt
Show me how to list and manage Agent Skills in Gemini CLI.
Run the command to list all currently installed skills.
2

Install a skill from a Git repository

Say this or copy this prompt
I want to install an Agent Skill for Gemini CLI. Please help me
install a skill from this repository: [paste skill repo URL here]

Use the "gemini skills install" command.
3

Install a skill from a local directory

Say this or copy this prompt
I have a skill directory on my computer at [path]. Please help me
install it as a Gemini CLI Agent Skill using "gemini skills install".

​
Try It: Install the Frontend Design Skill

Now let’s install a real skill that will make a noticeable difference in your projects. The frontend-design skill teaches Gemini CLI to create distinctive, polished web interfaces instead of generic-looking output. It comes from Anthropic’s open-source skills library.
1

Install the frontend-design skill

Run this command in your terminal:
gemini skills install https://github.com/anthropics/skills.git --path skills/frontend-design
2

Try it out on your website

Now ask Gemini to redesign your personal website using its new skill:
Say this or copy this prompt
Redesign my personal website with a more polished, distinctive look.
Use thoughtful typography, a cohesive color palette, subtle animations,
and creative spatial composition. Avoid generic or cookie-cutter AI aesthetics.
The frontend-design skill focuses on typography choices, color themes, motion and animation, spatial composition, and backgrounds — guiding Gemini to produce designs that feel intentional and crafted rather than template-driven.
Behind the scenes, the skill provides Gemini with design guidelines including:
  • Typography — Use distinctive font pairings instead of defaults; vary weight, size, and spacing for visual hierarchy
  • Color — Build cohesive color themes with purposeful contrast and accent colors, not generic palettes
  • Motion & animation — Add subtle transitions and micro-interactions that feel natural and enhance usability
  • Spatial composition — Use asymmetric layouts, intentional whitespace, and layered depth instead of rigid grids
  • Backgrounds & texture — Incorporate gradients, patterns, or subtle textures to add richness and depth
These guidelines activate automatically whenever Gemini detects a frontend task.
This skill comes from Anthropic’s open-source Agent Skills repository and follows the Agent Skills open standard. You can browse the repository for more skills or even create your own!

​
Managing Skills

gemini skills list

gemini skills install https://github.com/user/repo.git

gemini skills install https://github.com/org/repo.git --path skills/frontend-design

gemini skills install /path/to/my-expertise.skill

gemini skills enable my-skill

gemini skills disable my-skill

gemini skills uninstall my-skill
In-session commands: While chatting with Gemini CLI, you can type /skills list to see all available skills, /skills enable <name> to enable one, or /skills disable <name> to turn one off.

​
Key Concepts

Workspace Skills

.gemini/skills/ — shared with your team via git

User Skills

~/.gemini/skills/ — personal skills across all projects

Extension Skills

Bundled with installed extensions
Skills are like apps for your AI. The more relevant skills you install, the smarter Gemini CLI becomes for your specific needs. Explore agentskills.io for community-shared skills.

​
Reflect

Take a few minutes to think about your experience:
Many people are surprised by how much can be accomplished just by describing what they want clearly — whether spoken or typed. Was there a moment where Gemini CLI’s output exceeded your expectations? What about a moment where you had to refine your prompt?
If you tried Wispr Flow, did speaking your prompts feel different from typing them? Many people find that speaking produces more natural, detailed descriptions — which often leads to better results from AI. Think about where else voice input could speed up your workflow.
Think about your job or job search. Could you use a personal website as an online portfolio? Could you automate parts of your workflow with AI tools? What other projects could you build?
Now that you know the workflow — describe, build, review, iterate — what else could you create? A portfolio for your work? A website for a small business? A tool that helps with your daily tasks?

​
Resources

ResourceDescriptionLink
Gemini CLI docsOfficial documentation for Gemini CLIgithub.com/google-gemini/gemini-cli
Wispr FlowVoice input for any applicationwisprflow.ai
GitHub Pages docsLearn more about hosting websites on GitHubdocs.github.com/pages
Agent SkillsOpen standard for AI agent skillsagentskills.io
UnsplashFree high-quality photos for your websiteunsplash.com
Google FontsFree fonts to customise your website typographyfonts.google.com
CoolorsGenerate beautiful colour schemescoolors.co
Thank you for completing this tutorial! You’ve gone from zero to a live personal website — and more importantly, you’ve learned how to work with AI to build real things, using your voice or keyboard. Take these skills with you into your next project.