web-design

Files (1)

• SKILL.md

SKILL.md (first lines)

# Web Design Skill (oh-my-product)

Use this skill when a user requests web design, UI design, or project design work.
Follows the DESIGN.md artifact pattern from the Gemini CLI ecosystem.

## Core Artifact Pattern

This skill produces and maintains three linked documents:

1. **DESIGN.md** — Living design specification (9 sections)
2. **IMPLEMENTATION.md** — 3-5 phase execution plan
3. **MODIFICATION_PLAN.md** — Change tracking for existing designs

## DESIGN.md Template (9 Required Sections)

When creating a new DESIGN.md, include ALL of the following:

### 1. Visual Theme & Atmosphere
- Site density, mood, design philosophy
- Overall aesthetic direction

### 2. Color Palette & Roles
- Semantic color names with hex codes
- Functional roles: background, text, border, accent, error, success
- CSS variable or Tailwind class mappings

### 3. Typography Rules
- Font families, size scale, weight hierarchy
- Line-height and letter-spacing standards

### 4. Component Stylings
- Button, card, input, navigation, modal patterns
- State definitions: hover, active, disabled, focus, loading, error

### 5. Layout Principles
- Grid system, spacing scale, whitespace philosophy
- Container widths and breakpoint strategy

### 6. Depth & Elevation
- Shadow system, z-index layers, surface hierarchy

### 7. Do's and Don'ts
- Design guardrails and anti-patterns to avoid

### 8. Responsive Behavior
- Breakpoints, touch targets, component collapse strategy
- Mobile-first vs desktop-first approach

### 9. Agent Prompt Guide
- Quick reference for AI agents to apply the design system consistently

## Workflow

1. **Clarify** — Gather requirements: target users, brand tone, platform targets
2. **Design** — Create DESIGN.md with all 9 sections
3. **Plan** — Generate IMPLEMENTATION.md with 3-5 execution phases
4. **Review** — Validate against accessibility (WCAG), responsiveness, brand consistency
5. **Iterate** — Update via MODIFICATION_PLAN.md for changes

## Rules

- ALWAYS create DESIGN.md before writing any UI code
- DESIGN.md is the single source of truth for visual decisions
- Every component must reference DESIGN.md tokens (no hardcoded values)
- Validate accessibility: ARIA labels, keyboard nav, color contrast (4.5:1 minimum)
- Test responsive behavior at mobile (375px), tablet (768px), desktop (1280px)

## Output Format

Return structured markdown artifacts. For new projects:
1. DESIGN.md (full 9-section spec)
2. IMPLEMENTATION.md (phased execution plan)

For modifications:
1. MODIFICATION_PLAN.md (change scope + impact analysis)
2. Updated DESIGN.md sections

From jjongguet/oh-my-product, MIT.

More from jjongguet/oh-my-product