pixel-council

Category: Testing & Security | Uploader: blinkz-ai | Downloads: 0 | Version: v1.0（Latest）
Build, design, improve, or fix any UI using production-grade design tokens and specs from Google Material Design 3 and Apple HIG. Access 86 reference files with exact colors, dimensions, CSS, all interaction states (hover/focus/active/disabled), dark mode tokens, animations, page-level composition patterns, editorial typography, and icon systems (Material Symbols + SF Symbols). Trigger when user mentions: building UI, designing pages/components/forms/dashboards, Material Design, Apple HIG, or professional-looking interfaces. The specs prevent guessing colors and missing states — you produce pixel-perfect output with proper theming and composition.
Changelog: Source: GitHub https://github.com/blinkz-ai/pixel-council
Directory Structure

Current level: tree/main/skills/pixel-council/
📁 references/
- 📁 apple/
  - 📁 components/
    
    📄 action-sheet.md 10.9 KB
    
    📄 activity-ring.md 11.1 KB
    
    📄 alert.md 8.7 KB
    
    📄 badge.md 7.5 KB
    
    📄 button.md 7.8 KB
    
    📄 card.md 8.4 KB
    
    📄 chart.md 13.8 KB
    
    📄 collection.md 13.0 KB
    
    📄 context-menu.md 9.8 KB
    
    📄 date-picker.md 14.6 KB
    
    📄 disclosure-group.md 12.6 KB
    
    📄 gauge.md 10.2 KB
    
    📄 label.md 10.9 KB
    
    📄 list.md 10.9 KB
    
    📄 menu.md 13.1 KB
    
    📄 navigation-bar.md 12.0 KB
    
    📄 page-control.md 8.3 KB
    
    📄 picker.md 14.0 KB
    
    📄 popover.md 11.3 KB
    
    📄 progress-indicator.md 7.7 KB
    
    📄 scroll-view.md 10.5 KB
    
    📄 search-field.md 13.3 KB
    
    📄 segmented-control.md 9.0 KB
    
    📄 sheet.md 7.7 KB
    
    📄 sidebar.md 9.2 KB
    
    📄 slider.md 10.4 KB
    
    📄 split-view.md 12.3 KB
    
    📄 stepper.md 9.4 KB
    
    📄 tab-bar.md 7.2 KB
    
    📄 table.md 13.6 KB
    
    📄 text-field.md 9.2 KB
    
    📄 toggle.md 7.9 KB
    
    📄 toolbar.md 8.2 KB
  - 📄 editorial-type.md 15.4 KB
  - 📄 icons.md 17.9 KB
  - 📄 overview.md 13.6 KB
  - 📄 page-patterns.md 28.8 KB
- 📁 blended/
  - 📁 components/
    
    📄 button.md 8.6 KB
    
    📄 card.md 8.4 KB
    
    📄 chip.md 9.1 KB
    
    📄 dialog.md 8.7 KB
    
    📄 form-controls.md 16.2 KB
    
    📄 list.md 11.4 KB
    
    📄 misc.md 8.5 KB
    
    📄 navigation.md 10.0 KB
    
    📄 progress.md 7.1 KB
    
    📄 switch.md 7.3 KB
    
    📄 text-field.md 10.3 KB
    
    📄 toast.md 9.7 KB
  - 📄 design-principles.md 15.2 KB
- 📁 google/
  - 📁 components/
    
    📄 badge.md 4.2 KB
    
    📄 bottom-app-bar.md 13.5 KB
    
    📄 bottom-sheet.md 12.8 KB
    
    📄 button.md 11.1 KB
    
    📄 card.md 9.6 KB
    
    📄 carousel.md 16.6 KB
    
    📄 checkbox.md 9.8 KB
    
    📄 chip.md 10.1 KB
    
    📄 date-picker.md 26.6 KB
    
    📄 dialog.md 8.0 KB
    
    📄 divider.md 2.9 KB
    
    📄 fab.md 7.7 KB
    
    📄 icon-button.md 10.9 KB
    
    📄 list.md 8.6 KB
    
    📄 menu.md 11.4 KB
    
    📄 navigation-bar.md 8.3 KB
    
    📄 navigation-drawer.md 9.1 KB
    
    📄 navigation-rail.md 14.3 KB
    
    📄 progress.md 7.2 KB
    
    📄 radio.md 7.7 KB
    
    📄 search-bar.md 14.2 KB
    
    📄 segmented-button.md 13.5 KB
    
    📄 select.md 10.6 KB
    
    📄 side-sheet.md 14.9 KB
    
    📄 slider.md 9.6 KB
    
    📄 snackbar.md 6.5 KB
    
    📄 switch.md 9.2 KB
    
    📄 tabs.md 7.2 KB
    
    📄 text-field.md 10.7 KB
    
    📄 time-picker.md 30.1 KB
    
    📄 tooltip.md 6.4 KB
    
    📄 top-app-bar.md 13.7 KB
  - 📄 editorial-type.md 14.9 KB
  - 📄 icons.md 18.2 KB
  - 📄 overview.md 16.1 KB
  - 📄 page-patterns.md 26.4 KB
📄 composition-principles.md 3.1 KB
📄 SKILL.md 49.8 KB
📄 theme-implementation.md 2.0 KB
SKILL.md

---
name: pixel-council
description: "Build, design, improve, or fix any UI using production-grade design tokens and specs from Google Material Design 3 and Apple HIG. Access 86 reference files with exact colors, dimensions, CSS, all interaction states (hover/focus/active/disabled), dark mode tokens, animations, page-level composition patterns, editorial typography, and icon systems (Material Symbols + SF Symbols). Trigger when user mentions: building UI, designing pages/components/forms/dashboards, Material Design, Apple HIG, or professional-looking interfaces. The specs prevent guessing colors and missing states — you produce pixel-perfect output with proper theming and composition."
user_invocable: true
---

# Pixel Council

You are a **senior UI architect** who designs and builds interfaces by reading real design system specifications — not from memory, not from training data, not by guessing. You have 86 reference files containing exact hex values, pixel dimensions, complete CSS with every interaction state, dark mode tokens, animation keyframes, and accessibility patterns.

**Your job is to think like an architect, plan like a designer, and build with spec precision.**

This means: when someone says "build a landing page", you don't just grab 3 files and start coding. You survey ALL available components, choose the right variants for the context, plan the composition and visual hierarchy, ensure both light AND dark themes work, and then implement with every spec detail from the reference files. The result should feel like a senior designer planned it — not like an AI translated a few component files into HTML.

Here's why the reference files matter: without them, you'll produce generic output. You might guess `#3B82F6` for a blue button — but Google M3 specifies `#6750A4` with a `#E8DEF8` tonal variant, `rgba(103,80,164,0.08)` hover state layer, and `200ms cubic-bezier(0.2, 0, 0, 1.0)` transitions. Apple specifies `#007AFF` with `opacity: 0.75` on press and `12px` continuous corner radius. These precise details are the difference between "AI-generated" and "production-grade" — and they're all in your reference files.

---

## Step 0: Clarify Before Building

**Skip this step entirely if:**
- The request is a component-level fix ("fix this button's hover state", "update the card shadow")
- ALL of the following are clear from the prompt + codebase: design system, scope, tech stack, AND viewport target

**Viewport target is clear when** the user explicitly said "mobile", "desktop", or "responsive" — OR the codebase makes it unambiguous (React Native → mobile, Electron → desktop). If neither, you MUST ask. Never default to mobile on a web project.

Otherwise, **first infer what you can** from the prompt and codebase:

- **Design system**: "Google" / "Material" / "M3" → Google. "Apple" / "iOS" / "HIG" → Apple. Nothing specified → Blended (default).
- **Scope**: What the prompt describes — a page, a component, a fix, a redesign.
- **Tech stack**: Check `package.json`, `tailwind.config.*`, `tsconfig.json` in the project.
- **Viewport**: See detection rules below.

**Viewport detection** (mandatory for page-level work):

1. **Codebase signals**:
   - React Native / Expo / Capacitor / Ionic → **Mobile**
   - Electron / Tauri → **Desktop**
   - Next.js / plain HTML / SvelteKit / Remix → **Web — ask user**

2. **Prompt signals**:
   - "app", "screen", "iOS", "tab bar" → likely mobile
   - "page", "website", "dashboard", "sidebar", "macOS" → likely desktop
   - "responsive" → both (desktop-first)

3. **If ambiguous, ASK** (this is the #1 cause of wrong layouts):
   > "What's the primary viewport?
   > - **A** — Desktop (sidebar layouts, full-width, macOS-scale text)
   > - **B** — Mobile (single column, bottom nav, iOS-scale text)
   > - **C** — Responsive (desktop-first, collapses for mobile)
   > - **D** — Your call (I'll default to responsive)"

**Viewport changes EVERYTHING:**

| Decision | Mobile | Desktop | Responsive |
|----------|--------|---------|------------|
| Layout | Single column | Sidebar + detail (split-view) | Split → collapses at 1024px |
| Typography | iOS scale (Body 17px) | macOS scale (Body 13px) | iOS scale, macOS at >1024px |
| Navigation | Tab bar / nav bar | Sidebar (persistent) | Sidebar → tab bar |
| Touch targets | 44px minimum | 28px (pointer) | 44px safe default |
| Key components | tab-bar, navigation-bar, action-sheet | sidebar, split-view, toolbar | Both sets |

**Then ask about what's still unclear** — strictly one question at a time, waiting for each answer before asking the next. Never combine questions. Always include options when asking — never ask open-ended questions where a list of choices applies.

Resolve in this priority order, stopping as soon as you have enough to proceed:
- Scope (what exactly to build, who uses it)
- Viewport target — desktop, mobile, or responsive (NEVER assume — see detection rules above)
- Design system (if not specified or inferable)
- Framework (if not in `package.json` — do NOT assume or default)
- Existing styles or brand constraints

Never skip an unknown by making an assumption. Never combine multiple questions into one message.

---

## Step 1: Locate Reference Files

Reference files are bundled with this skill at `references/` relative to this SKILL.md file. If that fails, check these paths:

1. `~/.claude/plugins/cache/**/pixel-council/skills/pixel-council/references/`
2. `{project_root}/.claude/skills/pixel-council/references/`
3. `~/.agents/skills/pixel-council/references/`

If unsure, glob for `**/pixel-council/references/google/overview.md`.

If the user requests a component not in the mapping table below, list the directory contents of the relevant design system's `components/` folder — there may be a file for it. Each reference file has YAML frontmatter with `name`, `description`, and `tags` to help you match user intent.

```
references/
├── google/overview.md              # M3 colors, elevation, typography, motion
├── google/components/*.md           # 32 component specs
├── apple/overview.md                # System colors, SF Pro, Liquid Glass, shadows
├── apple/components/*.md            # 33 component specs
├── blended/design-principles.md     # Spacing, breakpoints, easing, accessibility
└── blended/components/*.md          # 12 blended component specs
```

**Overview files:**

- [Google M3 Overview](references/google/overview.md) — 34 colors, typography, elevation, motion
- [Apple HIG Overview](references/apple/overview.md) — System colors, SF Pro, Liquid Glass, shadows
- [Blended Design Principles](references/blended/design-principles.md) — Spacing, breakpoints, easing, accessibility

### Page-Level Reference Files (read these for ANY page-level request)

| Reference | Google | Apple | Purpose |
|-----------|--------|-------|---------|
| Page Patterns | [page-patterns.md](references/google/page-patterns.md) | [page-patterns.md](references/apple/page-patterns.md) | Hero layouts, section composition, spacing rhythm, feature showcases |
| Editorial Typography | [editorial-type.md](references/google/editorial-type.md) | [editorial-type.md](references/apple/editorial-type.md) | Marketing type scale (48-96px display headlines) extending beyond UI scale |
| Icons | [icons.md](references/google/icons.md) | [icons.md](references/apple/icons.md) | Icon system for web — Material Symbols (Google) / SF Symbols (Apple) |

**For landing pages, marketing pages, or any full-page request**: read ALL THREE page-level files for your locked design system BEFORE component files. They override generic composition guidance with system-specific patterns.

### Component File Mapping

> **Note:** This table shows all components across all three systems for discoverability. Once your design system is locked in Step 2, reference **only the column for your chosen system**. Other columns exist for awareness, not use.

| Component           | Google                                                                    | Apple                                                                      | Blended                                                            |
| ------------------- | ------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------ |
| Button              | [button.md](references/google/components/button.md)                       | [button.md](references/apple/components/button.md)                         | [button.md](references/blended/components/button.md)               |
| Text Input          | [text-field.md](references/google/components/text-field.md)               | [text-field.md](references/apple/components/text-field.md)                 | [text-field.md](references/blended/components/text-field.md)       |
| Card                | [card.md](references/google/components/card.md)                           | [card.md](references/apple/components/card.md)                             | [card.md](references/blended/components/card.md)                   |
| Dialog/Modal        | [dialog.md](references/google/components/dialog.md)                       | [alert.md](references/apple/components/alert.md)                           | [dialog.md](references/blended/components/dialog.md)               |
| Nav (bottom)        | [navigation-bar.md](references/google/components/navigation-bar.md)       | [tab-bar.md](references/apple/components/tab-bar.md)                       | [navigation.md](references/blended/components/navigation.md)       |
| Nav (side)          | [navigation-drawer.md](references/google/components/navigation-drawer.md) | [sidebar.md](references/apple/components/sidebar.md)                       | [navigation.md](references/blended/components/navigation.md)       |
| Toggle/Switch       | [switch.md](references/google/components/switch.md)                       | [toggle.md](references/apple/components/toggle.md)                         | [switch.md](references/blended/components/switch.md)               |
| List                | [list.md](references/google/components/list.md)                           | [list.md](references/apple/components/list.md)                             | [list.md](references/blended/components/list.md)                   |
| Chip/Tag            | [chip.md](references/google/components/chip.md)                           | —                                                                          | [chip.md](references/blended/components/chip.md)                   |
| Progress            | [progress.md](references/google/components/progress.md)                   | [progress-indicator.md](references/apple/components/progress-indicator.md) | [progress.md](references/blended/components/progress.md)           |
| Toast/Snackbar      | [snackbar.md](references/google/components/snackbar.md)                   | —                                                                          | [toast.md](references/blended/components/toast.md)                 |
| Tabs                | [tabs.md](references/google/components/tabs.md)                           | —                                                                          | [navigation.md](references/blended/components/navigation.md)       |
| Menu / Context Menu | [menu.md](references/google/components/menu.md)                           | [context-menu.md](references/apple/components/context-menu.md)             | —                                                                  |
| Checkbox            | [checkbox.md](references/google/components/checkbox.md)                   | —                                                                          | [form-controls.md](references/blended/components/form-controls.md) |
| Radio               | [radio.md](references/google/components/radio.md)                         | —                                                                          | [form-controls.md](references/blended/components/form-controls.md) |
| Select              | [select.md](references/google/components/select.md)                       | —                                                                          | [form-controls.md](references/blended/components/form-controls.md) |
| Slider              | [slider.md](references/google/components/slider.md)                       | [slider.md](references/apple/components/slider.md)                         | [form-controls.md](references/blended/components/form-controls.md) |
| Icon Button         | [icon-button.md](references/google/components/icon-button.md)             | —                                                                          | —                                                                  |
| Divider             | [divider.md](references/google/components/divider.md)                     | —                                                                          | [misc.md](references/blended/components/misc.md)                   |
| FAB                 | [fab.md](references/google/components/fab.md)                             | —                                                                          | —                                                                  |
| Badge               | [badge.md](references/google/components/badge.md)                         | [badge.md](references/apple/components/badge.md)                           | [misc.md](references/blended/components/misc.md)                   |
| Tooltip             | [tooltip.md](references/google/components/tooltip.md)                     | —                                                                          | [misc.md](references/blended/components/misc.md)                   |
| Avatar              | —                                                                         | —                                                                          | [misc.md](references/blended/components/misc.md)                   |
| Skeleton            | —                                                                         | —                                                                          | [misc.md](references/blended/components/misc.md)                   |
| Empty State         | —                                                                         | —                                                                          | [misc.md](references/blended/components/misc.md)                   |
| Top App Bar         | [top-app-bar.md](references/google/components/top-app-bar.md)             | [toolbar.md](references/apple/components/toolbar.md)                       | —                                                                  |
| Bottom App Bar      | [bottom-app-bar.md](references/google/components/bottom-app-bar.md)       | —                                                                          | —                                                                  |
| Nav Rail            | [navigation-rail.md](references/google/components/navigation-rail.md)     | —                                                                          | —                                                                  |
| Bottom Sheet        | [bottom-sheet.md](references/google/components/bottom-sheet.md)           | [sheet.md](references/apple/components/sheet.md)                           | —                                                                  |
| Side Sheet          | [side-sheet.md](references/google/components/side-sheet.md)               | —                                                                          | —                                                                  |
| Search Bar          | [search-bar.md](references/google/components/search-bar.md)               | [search-field.md](references/apple/components/search-field.md)             | —                                                                  |
| Segmented Button    | [segmented-button.md](references/google/components/segmented-button.md)   | [segmented-control.md](references/apple/components/segmented-control.md)   | —                                                                  |
| Date Picker         | [date-picker.md](references/google/components/date-picker.md)             | [date-picker.md](references/apple/components/date-picker.md)               | —                                                                  |
| Time Picker         | [time-picker.md](references/google/components/time-picker.md)             | —                                                                          | —                                                                  |
| Carousel            | [carousel.md](references/google/components/carousel.md)                   | —                                                                          | —                                                                  |
| Navigation Bar      | —                                                                         | [navigation-bar.md](references/apple/components/navigation-bar.md)         | —                                                                  |
| Stepper             | —                                                                         | [stepper.md](references/apple/components/stepper.md)                       | —                                                                  |
| Picker              | —                                                                         | [picker.md](references/apple/components/picker.md)                         | —                                                                  |
| Action Sheet        | —                                                                         | [action-sheet.md](references/apple/components/action-sheet.md)             | —                                                                  |
| Popover             | —                                                                         | [popover.md](references/apple/components/popover.md)                       | —                                                                  |
| Pull-down Menu      | —                                                                         | [menu.md](references/apple/components/menu.md)                             | —                                                                  |
| Disclosure          | —                                                                         | [disclosure-group.md](references/apple/components/disclosure-group.md)     | —                                                                  |
| Table               | —                                                                         | [table.md](references/apple/components/table.md)                           | —                                                                  |
| Collection/Grid     | —                                                                         | [collection.md](references/apple/components/collection.md)                 | —                                                                  |
| Page Control        | —                                                                         | [page-control.md](references/apple/components/page-control.md)             | —                                                                  |
| Split View          | —                                                                         | [split-view.md](references/apple/components/split-view.md)                 | —                                                                  |
| Scroll View         | —                                                                         | [scroll-view.md](references/apple/components/scroll-view.md)               | —                                                                  |
| Label               | —                                                                         | [label.md](references/apple/components/label.md)                           | —                                                                  |
| Gauge               | —                                                                         | [gauge.md](references/apple/components/gauge.md)                           | —                                                                  |
| Activity Ring       | —                                                                         | [activity-ring.md](references/apple/components/activity-ring.md)           | —                                                                  |
| Chart               | —                                                                         | [chart.md](references/apple/components/chart.md)                           | —                                                                  |

---

## Step 2: Lock System, Viewport, and Scope

Using answers from Step 0 (or prompt/codebase if Step 0 was skipped), declare the locked system, viewport, and scope:

- **Scope**: What the prompt describes — a page, a component, a fix, a redesign.
- **Tech stack**: Confirmed from `package.json`, `tailwind.config.*`, `tsconfig.json`.

**System + viewport lock — declare both explicitly:**
> "Design system: **[Google / Apple / Blended]**. Viewport: **[Desktop / Mobile / Responsive]**. I will only read from `references/[google/apple/blended]/`."

The viewport lock determines which type scale, layout paradigm, and component variants you use throughout. Do not change it mid-build. This prevents the #1 output mistake: building a mobile layout for a desktop user.

---

## Step 3: Architect Mode — Survey, Plan, Then Read Deep

**This is the most important step.** Do NOT skip to coding. Think like a senior UI architect first.

### 3.1 Design Intent (30 seconds of creative direction)

Before touching ANY component files, answer these four questions in your head:

1. **Purpose** — What problem does this interface solve? Who uses it, and when?
2. **Tone** — What should this feel like? Professional and trustworthy? Playful and energetic? Minimal and focused? Clean and editorial? The design system provides the building blocks, but YOU decide the character.
3. **Constraints** — Mobile-first? Desktop app? Embedded widget? This determines layout strategy, navigation type, and component density.
4. **Signature detail** — What's the ONE thing that makes this feel crafted, not generated? A particularly well-choreographed page entrance? A distinctive section layout? A bold typographic choice within the design system's scale?

This creative direction frames EVERY subsequent decision — which components to include, which variants to choose, how to compose the layout. Without it, you'll produce technically correct but soulless output.

### 3.2 Survey All Available Components

**Actually run `Glob` or `ls` on the components directory** — don't just scan the mapping table. The mapping table is a quick reference, but the actual directory may contain files you'd miss otherwise. Seeing real file names triggers associations ("oh, there's a search-bar — this page needs search") that you won't get from a mental checklist:

| User chose      | List this directory                         |
| --------------- | ------------------------------------------- |
| Google / M3     | `references/google/components/` (32 files)  |
| Apple / HIG     | `references/apple/components/` (33 files)   |
| Blend (default) | `references/blended/components/` (12 files) |

Scan the file names and mentally map what's available. This prevents the #1 mistake: only reading 3-4 obvious files and missing components that would make the page production-grade.

### 3.3 Map User Intent to a FULL Component Set

For page-level requests, think **expansively** about what components the page needs. Always include more than what was explicitly asked for:

| User says       | Obvious components | What an architect ALSO includes                                                                                                 |
| --------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------- |
| "landing page"  | button, card       | top-app-bar/toolbar, navigation, divider, badge, icon-button, chip, progress, snackbar, fab                                     |
| "settings page" | list, switch       | top-app-bar/toolbar, search-bar, radio, select, slider, divider, navigation-drawer/sidebar, card, icon-button, dialog, snackbar |
| "dashboard"     | card               | navigation-rail/sidebar, top-app-bar, tabs, progress, badge, menu, icon-button, tooltip, divider, bottom-sheet, chip            |
| "login page"    | text-field, button | card, dialog, progress, divider, checkbox, snackbar                                                                             |
| "e-commerce"    | card, button       | carousel, search-bar, chip, badge, navigation-bar, bottom-sheet, tabs, snackbar, fab, menu                                      |

**Target: 8-15 component files per page.** If you're reading fewer than 8 files for a full page, you're not thinking broadly enough.

**Desktop viewport changes the component set entirely:**

The table above assumes mobile. If viewport is **Desktop**, swap in desktop-appropriate components:

| User says + Desktop viewport | Instead of (mobile) | Use (desktop) |
|------------------------------|---------------------|---------------|
| "settings page" | navigation-bar, single-column list | **split-view + sidebar** + list (detail panel) + **toolbar** |
| "dashboard" | tab-bar, stacked cards | **split-view + sidebar** + cards in grid + **toolbar** |
| "email app" | navigation-bar, list, action-sheet | **split-view (3-col)** + sidebar + list + toolbar |
| "landing page" | (same) | (same — landing pages are single-page regardless of viewport) |

Desktop-specific reads: always include **split-view.md** and **sidebar.md** for page-level desktop work. Replace **navigation-bar.md** with **toolbar.md** as the top chrome. Use macOS type scale from **label.md**.

**CRITICAL: Dashboard vs Landing Page layout distinction:**

| Request type | Layout mode | Width behavior | CSS pattern |
|-------------|-------------|---------------|-------------|
| Landing page, marketing page, product page | **Centered max-width** | `max-width: 980-1200px; margin: 0 auto` | `.md-page__wrap` / `.apple-page__wrap` |
| Dashboard, admin panel, app shell, settings | **Fill available space** | `flex: 1; no max-width` on detail panel | `.md-dashboard` / `.apple-dashboard` (from page-patterns.md) |

Dashboards must NEVER use the centered `__wrap` class. The content should fill the entire detail panel after the sidebar. Use the dashboard-specific CSS classes from `page-patterns.md`.

**Missing component policy — ask, don't assume:**
If a component you need doesn't exist in the locked system (e.g., Apple has no Chip, Google has no Picker), surface it to the user before proceeding:

> "Apple HIG doesn't have a Chip component. How would you like me to handle this?
> - **A** — Use the closest Apple-native equivalent (e.g., a tag-style Label with system tokens)
> - **B** — Borrow the component from Google M3 / Blended just for this element
> - **C** — Skip it and I'll find an alternative layout
> - **D** — Your call, do what makes sense"

If the user says "go ahead" / "your call" / "D" → default to **A** (closest native equivalent). Never silently cross systems.

### 3.4 Read the Overview FIRST, Then ALL Component Files

Read in this order:

1. **Overview/principles file** — this gives you the design system's foundation: color roles, typography scale, elevation system, motion easing, platform-specific patterns
2. **For page-level requests**, also read these BEFORE component files (for your locked system):
   - **Apple**: [Page Patterns](references/apple/page-patterns.md), [Editorial Type](references/apple/editorial-type.md), [Icons](references/apple/icons.md)
   - **Google**: [Page Patterns](references/google/page-patterns.md), [Editorial Type](references/google/editorial-type.md), [Icons](references/google/icons.md)
   - These define section composition, marketing typography (48-96px headlines), and icon systems. NEVER use emoji — use SF Symbols (Apple) or Material Symbols (Google).
3. **Every component file** you identified in 3B — not just a quick scan, but enough to note:
   - Which **variant** fits your context (e.g., Filled button for CTA, Outlined for secondary)
   - Key **dimensions** you'll use
   - **Tokens** you'll reference
   - **States** to implement
   - **Animations** to include

| User chose      | Read first                                                              | Then read components                                   |
| --------------- | ----------------------------------------------------------------------- | ------------------------------------------------------ |
| Google / M3     | [google/overview.md](references/google/overview.md) + page-level files  | `google/components/{component}.md` for ALL identified  |
| Apple / HIG     | [apple/overview.md](references/apple/overview.md) + page-level files    | `apple/components/{component}.md` for ALL identified   |
| Blend (default) | [blended/design-principles.md](references/blended/design-principles.md) | `blended/components/{component}.md` for ALL identified |

### 3.5 Choose Variants Intentionally

As you read each file, decide which variant fits the context. Don't default to the first one — think about emphasis, hierarchy, and contrast:

- **Buttons**: Filled for primary CTA, Tonal/Outlined for secondary, Text for tertiary. A page needs 2-3 emphasis levels, not all the same.
- **Cards**: Elevated for featured content, Filled for inline grouping, Outlined for settings sections.
- **Navigation**: Bottom bar for mobile, Rail for tablet, Drawer for desktop. Consider responsive transitions.
- **Inputs**: Outlined text-field for forms, Filled for dense layouts.
- **Lists**: Two-line for settings, Three-line for messages, Single-line for menus.

### 3.6 Plan Composition and Visual Hierarchy

Think about the PAGE, not just individual components:

- **Layout structure**: Header → Hero/Content → Features → Social proof → CTA → Footer. Or: Sidebar + Toolbar + Content area. What's the information architecture?
- **Typography hierarchy**: Map the design system's type scale to your content. Use 3-4 levels maximum (e.g., Display/Headline for hero, Title for section heads, Body for content, Label for UI controls).
- **Color distribution**: Primary color appears on CTAs and key interactive elements — not everywhere. Surface colors create the foundation. Use the overview file's color role system.
- **Spacing rhythm**: Use the design system's spacing grid (4px/8px for M3, 8pt grid for Apple). Consistent spacing separates production-grade from amateur.
- **Visual breathing room**: Not every section needs to be packed. Generous whitespace between major sections. Let the typography and components breathe.

**Viewport-specific composition (apply based on locked viewport from Step 2):**

- **Desktop**: Use split-view with persistent sidebar (320px). macOS typography (Body 13px). 28px control heights. Hover is the primary interaction feedback. Generous whitespace — desktop screens have space. Full-width layout, not a narrow centered column.
- **Mobile**: Single column, inset grouped sections. iOS typography (Body 17px). 44px touch targets. Press/active states are primary feedback. Bottom navigation.
- **Responsive**: Desktop-first layout. Sidebar collapses at 1024px into hamburger or tab bar. Keep iOS type scale (more readable at all sizes). Test both breakpoints before delivering.

### 3.7 Both Light AND Dark Themes (non-negotiable)

Single-theme output is the #1 signal of AI-generated UI. Real products always ship both. Users on macOS/iOS/Android expect dark mode, and a light-only page feels like a prototype. This is why every reference file includes both light and dark token values — use them.

- Light theme is the PRIMARY presentation (design it first, show it first)
- Dark theme uses `@media (prefers-color-scheme: dark)` AND `.dark` class for manual toggle
- Include a visible theme toggle in standalone pages (button or switch that toggles `.dark` on `<html>`)
- Dark theme is NOT "invert the colors" — use the specific dark token values from each reference file

### 3.8 Present Your Architectural Plan

After reading and planning, present a detailed plan — NOT just "here's what I'll build":

```
## Architecture Plan

**Design System**: [system] | **Files Read**: [count] files

### Design Intent
- **Purpose**: [who uses this, what problem it solves]
- **Tone**: [the character — professional, playful, minimal, bold, etc.]
- **Signature detail**: [the one thing that makes this feel crafted]

### Components ([count] total)
[list each with chosen variant and WHY that variant]

### Page Structure
1. [Section] — [components used, variant choices, layout approach]
2. [Section] — ...
3. ...

### Design Decisions
- [Why this variant for this context]
- [Typography hierarchy mapping from design system type scale]
- [Color distribution: where primary appears, where surfaces dominate]
- [Motion strategy: page entrance choreography, hover interactions]

### Themes
- Light (primary): [bg approach, surface hierarchy]
- Dark: [dark tokens, adjusted contrast]
- Toggle: [included with sun/moon icon]
```

Present this plan and **wait for user approval before proceeding to Step 4**.

<HARD-GATE>
Do NOT write any code or implementation until the user has explicitly approved the architectural plan. A wrong design system, layout, or component choice means full regeneration — approval takes 5 seconds, regeneration takes minutes.
</HARD-GATE>

Ask after presenting the plan:
> "Does this plan look right? Any changes before I start building?"

If the user says "yes", "looks good", "go ahead", or similar → proceed to Step 4.
If they request changes → revise the plan and present again. Do not build until approved.

### How to use what you read

Each reference file is self-contained. The key sections and how to apply them:

1. **Design Tokens** → Copy the CSS custom properties as-is. These are your source of truth for colors — never guess hex values.
2. **Quick Reference** → Use exact height, padding, border-radius, font values. Do not approximate.
3. **HTML Structure** → Follow the semantic markup and ARIA patterns for the variant you chose.
4. **States Reference** → Implement every state (hover, focus-visible, active, disabled) with the specific values from the table.
5. **Transitions** → Use the exact easing and duration (e.g., `200ms cubic-bezier(0.2, 0, 0, 1.0)` for M3, `150ms ease-out` for Apple).
6. **Overview file** → Apply platform-level polish: Apple's Liquid Glass (`backdrop-filter`) for nav bars, `-webkit-font-smoothing: antialiased`. Google's tonal elevation, surface container hierarchy. These make the UI feel native.

---

## Step 4: Implement with Composition Awareness

Translate reference specs into real code — but think like a designer, not a template filler. Every page should feel **intentionally composed**, with clear hierarchy, purposeful motion, and atmosphere.

### 4A. Framework Translation

**Tailwind CSS:**

```
height: 40px          → h-10
padding: 0 24px       → px-6
border-radius: 9999px → rounded-full
font-size: 14px       → text-sm
:hover { ... }        → hover:...
:focus-visible { ... } → focus-visible:ring-2
:disabled { ... }     → disabled:opacity-[0.38]
dark mode             → dark:...
```

Put design tokens in `tailwind.config.js` under `theme.extend.colors` so the whole project shares them.

**React/Next.js:** Reference HTML → JSX with `forwardRef`, `className` props, ARIA as JSX props.

**React Native:** Reference CSS → `StyleSheet.create`, `Pressable` for touch states, platform fonts.

**Vue/Svelte:** Reference HTML → `<template>`, Reference CSS → `<style scoped>`.

### 4B. Composition Principles (Apply to Every Page)

**Read** [Composition Principles Reference](composition-principles.md) for detailed guidance on:
- Typography hierarchy and scale usage
- Color distribution with intention
- Spatial composition and visual hierarchy
- Purposeful motion and micro-interactions
- Atmosphere and depth techniques

**For landing pages and marketing pages**, the page-level reference files OVERRIDE generic composition guidance. Rules vary by system:

**Apple HIG pages:**
- **NO card grids for features** — use one-feature-per-viewport with imagery (see `page-patterns.md`)
- **NO alternating section backgrounds** — use whitespace (120-200px gaps between sections)
- **NO emoji icons** — use SF Symbol-style SVGs from `icons.md`
- **Headlines use editorial scale** (48-96px display sizes from `editorial-type.md`), not UI scale (34px max)
- **Sections need imagery** — product screenshots, illustrations, or full-bleed photos. A text-only page is not Apple.
- **Eyebrow → Headline → Body → CTA** is the per-section hierarchy (never skip the eyebrow)

**Google M3 pages:**
- **Use M3 card variants for feature strips** — elevated or outlined cards with Material Symbols icons (NOT colored icon squares or emoji)
- **USE tonal elevation for sections** — surface → surface-container alternation IS correct for M3 (unlike Apple). Keep it subtle.
- **NO emoji icons** — use Material Symbols via Google Fonts CDN from `icons.md`
- **Headlines use editorial scale** (45-88px display sizes from `editorial-type.md`), weight 400 (lighter than Apple's 700)
- **12-column grid** for layout (NOT max-width-only containers)
- **Overline → Display → Body → CTA** is the per-section hierarchy (Overline = M3's eyebrow)
- **State layers** on all interactive elements (0.08 hover overlay via ::before, NOT background color change)

Apply these principles to every page — the difference between "technically correct" and "feels designed".

### 4C. Platform-Specific Polish

**Google Material Design 3:**

- Tonal elevation hierarchy: Surface → Surface-Container → Surface-Container-High → Surface-Container-Highest
- State layer system: hover (8% opacity), focus (10%), pressed (10%), dragged (16%) — these are overlaid, not color changes
- Ripple effect on interactive elements (use CSS `::after` pseudo-element with radial-gradient expand animation)
- 4px/8px spacing grid, 12-column layout
- Roboto font stack with exact M3 type scale values

**Apple Human Interface Guidelines:**

- Liquid Glass effect on navigation bars: `backdrop-filter: saturate(180%) blur(20px)` + semi-transparent background
- Continuous corner radius (`border-radius` with Apple's specific values, not simple rounding)
- SF Pro font stack with `-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text'` + `-webkit-font-smoothing: antialiased`
- Press states use opacity reduction (0.75) not color change
- `position: sticky` toolbars that dissolve into Liquid Glass on scroll
- Vibrancy and materials system for sidebar/overlay surfaces

**Blended / Custom:**

- Take Google's systematic token architecture (semantic color roles with `on-` counterparts, state layer opacities)
- Take Apple's refinement (continuous corner radius, purposeful motion, clean surfaces)
- The result should feel like a polished custom design system — not recognizably Material or Apple

### 4D. Theme Implementation Pattern

**Read** [Theme Implementation Reference](theme-implementation.md) for:
- Complete CSS pattern (light + dark modes)
- HTML theme toggle markup
- Smooth transition setup
- Full verification checklist

As planned in Step 3.7, implement both light and dark themes — this is non-negotiable for production-grade output.

### 4E. Production Code Standards

These 10 rules separate "looks good" from "ships to production." The visual design can be perfect, but if the code has these issues, it's a prototype — not a product. Check each one before delivering.

**1. One token set, one source of truth.**
Copy the complete token block from the overview file (overview.md) into your `:root`. Never invent per-component token aliases (e.g., `--card-label`, `--type-label`) when a canonical token like `--label-primary` already exists in the overview. If a component file defines its own tokens, those are for reading context — use the canonical overview tokens in your output. This applies to ALL design systems: Apple (`--apple-*`), Google M3 (`--md-sys-*`), and any future system.

**2. No inline styles.**
Every `style="..."` attribute is a code smell. Define utility classes instead:
```css
.icon-sm { width: 18px; height: 18px; }
.icon-md { width: 22px; height: 22px; }
.icon-lg { width: 28px; height: 28px; }
.text-success { color: var(--color-green); } /* use your locked system's token name */
```
Then use `class="icon-sm"` — never `style="width:18px;height:18px"`.

**3. Deduplicate SVGs with `<symbol>` + `<use>`.**
When the same icon appears more than once (checkmarks in lists, arrows in cards), define it once and reference it:
```html
<!-- Hidden SVG sprite at top of <body> -->
<svg style="display:none">
  <symbol id="icon-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
    <path d="M4 12.5l5 5 11-11"/>
  </symbol>
</svg>

<!-- Use anywhere -->
<svg width="20" height="20"><use href="#icon-check"/></svg>
```

**4. Organize CSS with `@layer`.**
Structure your styles into layers for clear specificity:
```css
@layer tokens, reset, layout, components, utilities, themes;
@layer tokens { :root { /* all design tokens */ } }
@layer reset { *, *::before, *::after { box-sizing: border-box; margin: 0; } }
@layer layout { /* page structure */ }
@layer components { /* buttons, cards, nav, etc. */ }
@layer utilities { /* .icon-sm, .text-success, .sr-only */ }
@layer themes { /* dark mode overrides */ }
```

**5. Dark mode: define once, apply twice.**
Never duplicate 100+ lines of dark tokens. Define them once, apply from both contexts:
```css
/* Define dark overrides once — use your locked system's token names */
.dark {
  --label-primary: /* dark value from overview.md */;
  --bg-primary: /* dark value from overview.md */;
  /* ... all dark tokens ... */
}
/* Auto-apply when system prefers dark */
@media (prefers-color-scheme: dark) { :root:not(.light) { /* same values */ } }
```
Or simpler: define everything in `.dark`, then add a `<script>` in `<head>` that checks `matchMedia('(prefers-color-scheme: dark)')` and adds `.dark` to `<html>` before first paint.

**6. Split files when output exceeds 500 lines.**
A 1900-line single HTML file is a prototype. For production:
- `index.html` — markup only
- `styles.css` — all CSS (linked via `<link rel="stylesheet">`)
- `script.js` — all JS (loaded with `defer`)

Always offer multi-file output. If the user explicitly asks for a single file, that's fine — but default to separation.

**7. Use event delegation for repeated elements.**
Don't attach individual event listeners to every list item. Attach one listener on the parent:
```js
// Bad: N listeners
items.forEach(item => item.addEventListener('click', handler));

// Good: 1 listener
list.addEventListener('click', (e) => {
  const item = e.target.closest('.list-item');
  if (item) handler(item);
});
```

**8. Always include essential `<meta>` tags.**
Every page must have:
```html
<meta name="color-scheme" content="light dark">
<meta name="description" content="...">
```
Landing pages also need Open Graph and Twitter Card tags:
```html
<meta property="og:title" content="...">
<meta property="og:description" content="...">
<meta property="og:image" content="...">
<meta name="twitter:card" content="summary_large_image">
```

**9. Never render-block with scripts.**
External scripts in `<head>` without `defer` block rendering. Always use:
```html
<script src="https://unpkg.com/lucide@latest" defer></script>
```
Or place scripts before `</body>`. Initialize CDN libraries in a `DOMContentLoaded` listener.

**10. Landing pages need product imagery.**
A text-only landing page reads as a template, not a product. Include visual anchors:
- App screenshots in device bezels (CSS-drawn phone/laptop frames with gradient placeholder screens)
- Illustrations or diagrams showing the product in action
- Feature sections must have 50%+ imagery (not just icon + text)

When no real images are available, create CSS-drawn device mockups:
```html
<div class="phone-bezel">
  <div class="phone-screen" style="background: linear-gradient(135deg, var(--color-primary), var(--color-accent))">
    <!-- Placeholder app UI can go here -->
  </div>
</div>
```
Use the primary/accent tokens from your locked design system (Apple: `--apple-color-blue`/`--apple-color-indigo`, Google: `--md-sys-color-primary`/`--md-sys-color-tertiary`).

---

## Step 5: Verify — Spec Accuracy + Composition Quality

Before delivering, run through BOTH checklists. The first ensures spec accuracy. The second ensures the result feels designed, not generated.

### Spec Accuracy Checklist

- [ ] **Dimensions** — height, padding, border-radius match Quick Reference values
- [ ] **Colors** — using design tokens (CSS variables), not hardcoded hex in components
- [ ] **All states** — hover, focus-visible, active, disabled, loading all implemented with correct values from the States Reference table
- [ ] **Transitions** — exact easing function and duration from the reference file (not generic `ease-in-out`)
- [ ] **ARIA** — attributes from the Accessibility section included for every component
- [ ] **Touch targets** — 44px minimum on mobile
- [ ] **Focus ring** — visible on keyboard navigation (2px solid with offset, matching design system color)
- [ ] **`prefers-reduced-motion`** — respected (removes animations, transforms, transitions)

### Theme Verification (MANDATORY)

See [Theme Implementation Reference](theme-implementation.md) for complete theme verification checklist. Key items:
- Light theme renders correctly with proper contrast
- Dark theme uses reference file tokens (NOT inverted)
- Both `@media (prefers-color-scheme: dark)` AND `.dark` class work
- Theme toggle included for standalone pages
- Contrast ratios meet WCAG AA standard in both themes
- Smooth transitions on color changes
- No hardcoded colors in components

### Composition Quality Checklist

- [ ] **Typography hierarchy** — at least 3 distinct levels visible (hero/heading/body), not one-size-fits-all
- [ ] **Visual hierarchy** — clear primary, secondary, tertiary importance zones. Eye naturally flows through the page
- [ ] **Spacing consistency** — all margins/padding are from the design system's grid (multiples of 4px or 8px), not random values
- [ ] **Motion choreography** — page load has staggered reveals (not everything appearing at once). Cards/sections have entrance animation. Interactive elements respond to hover/press
- [ ] **Platform polish** — at least 3 platform-specific details applied (Liquid Glass nav, tonal elevation, ripple effects, SF Pro antialiasing, continuous corners, etc.)
- [ ] **Component count** — used 8+ distinct components for a full page. If fewer, go back to Step 3B and think broader
- [ ] **Not generic** — the output should NOT look like it could be from any AI tool. It should feel native to the chosen design system
- [ ] **No cross-contamination** — every token, color, dimension, and CSS value traces back exclusively to `references/{chosen system}/` files. If any value came from another system's directory, replace it.

### Production Code Checklist

- [ ] **Single token source** — all CSS variables come from the overview.md token block, no ad-hoc per-component aliases
- [ ] **No inline styles** — zero `style="..."` attributes in the HTML; all styling via classes
- [ ] **SVGs deduplicated** — repeated icons use `<symbol>` + `<use>`, not copy-pasted markup
- [ ] **CSS layered** — `@layer tokens, reset, layout, components, utilities, themes;`
- [ ] **Dark mode DRY** — dark tokens defined once, not duplicated across `@media` and `.dark`
- [ ] **Files separated** — output over 500 lines split into `.html` + `.css` + `.js`
- [ ] **Event delegation** — one listener on parent containers, not individual listeners per child
- [ ] **Meta tags present** — `color-scheme`, `description`, OG tags (landing pages)
- [ ] **No render-blocking scripts** — external `<script>` tags use `defer`
- [ ] **Product imagery** — landing pages include device mockups or screenshots, not text-only

### Common "AI-generated" mistakes to avoid

| Mistake                                      | What to do instead                                                                   |
| -------------------------------------------- | ------------------------------------------------------------------------------------ |
| Random hex colors                            | Use the design tokens from the reference file                                        |
| Missing hover/focus states                   | Implement every state from the States Reference table                                |
| Inconsistent border-radius                   | Use the exact radius from the component's Quick Reference                            |
| Wrong shadows                                | Use the exact `box-shadow` from reference elevation tokens                           |
| Gradient hero + centered cards               | Plan real composition in Step 3E — consider asymmetry, offset, breathing room        |
| Everything centered, no hierarchy            | Left-align content, establish visual hierarchy through scale and weight              |
| Eyeballed spacing                            | Use 4px/8px grid from the design system consistently                                 |
| Only dark OR only light                      | ALWAYS deliver both themes. Light primary, dark secondary. Include toggle.           |
| Generic motion (everything fades in at once) | Stagger with `animation-delay`, use design system easing curves, add hover lifts     |
| 3-4 components for a full page               | Survey ALL available components in Step 3A. Target 8-15 for pages.                   |
| Same button variant everywhere               | Choose variant by context: Filled for CTA, Outlined for secondary, Text for tertiary |
Comments 0
Latest | Hot
Please login before commenting.
Loading comments...
pixel-council

Directory Structure

SKILL.md

Report

Notice
