Hofmann 1958f8e17e Initial commit: 7-Skill System for Claude Code

Starter template with requirements, architecture, frontend, backend,
qa, deploy, and help skills — inspired by Alex Sprogis' guide.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-03-01 19:12:09 +01:00

1.7 KiB

Raw Permalink Blame History

PROJ-001: Landing Page

Problem

The project needs an attractive landing page that explains what Agent Skills are and how to use them.

Solution

A single-page marketing site with hero, features section, skill showcase, and getting started guide.

User Stories

As a visitor, I want to understand what Agent Skills are at a glance
As a developer, I want to see example skills and how they work
As a new user, I want clear instructions to get started

Acceptance Criteria

Hero section with headline, subtext, and CTA button
Features section showing the 7 skills with icons
Code example showing a skill file
"Get Started" section with installation steps
Responsive design (mobile, tablet, desktop)
Dark mode support
Page loads in under 2 seconds

Edge Cases

Very long skill names should truncate gracefully
Code blocks should be horizontally scrollable on mobile

Out of Scope

User authentication
Skill marketplace / browser
Backend API

Architecture

Component Tree

Page (Server Component)
├── Header
│   ├── Logo
│   └── Nav (GitHub link, dark mode toggle)
├── Hero
│   ├── Headline
│   ├── Subtext
│   └── CTA Button
├── Features
│   └── SkillCard (x7)
├── CodeExample
│   └── Syntax-highlighted skill file
├── GetStarted
│   └── Step cards (1-2-3)
└── Footer

Key Decisions

Decision	Choice	Reason
Styling	Tailwind	Project standard
Dark mode	CSS `prefers-color-scheme` + toggle	No JS needed for initial load
Code highlighting	Server-side with shiki	No client bundle for syntax

1.7 KiB Raw Permalink Blame History