design-agent-skills 1.4.2

package/skills/hig-doctor/SKILL.md

@@ -0,0 +1,59 @@
+---
+name: hig-doctor
+description: |
+  Diagnose Apple HIG compliance issues with targeted guidance and fixes.
+  14 specialized skills covering HIG component categories — identifies
+  non-compliant patterns and provides specific remediation steps.
+triggers:
+  - "HIG doctor"
+  - "HIG compliance"
+  - "Apple HIG audit"
+  - "HIG diagnosis"
+  - "fix Apple HIG"
+das:
+  category: visual-components
+  upstream: "https://github.com/raintree-technology/hig-doctor"
+  version: latest
+  install: false
+---
+
+# hig-doctor
+
+> Catalogue stub — full package: [raintree-technology/hig-doctor](https://github.com/raintree-technology/hig-doctor)
+
+## Decision tree
+
+Run this to diagnose and fix Apple HIG violations:
+
+1. **Is the HIG Doctor skill already installed?**
+   Check: `~/.design-agent-skills/skills/hig-foundations/SKILL.md` exists.
+   - Yes → invoke the relevant hig-doctor skill and proceed
+   - No → go to step 2
+
+2. **Do you have shell access?**
+   - Yes → run the install command below, then invoke the skill
+   - No → show the user the install command, ask them to run it, then proceed once confirmed
+
+## Install command
+
+```bash
+npx skills add raintree-technology/hig-doctor
+```
+
+Website: [apple.raintree.technology](https://apple.raintree.technology/)
+
+## Invoke after install
+
+Skills diagnose by component category — invoke the one matching your problem area:
+- `hig-components-controls` — button, toggle, slider violations
+- `hig-components-layout` — navigation bar, tab bar violations
+- `hig-components-menus` — context menu, picker violations
+- `hig-components-dialogs` — alert, sheet violations
+- `hig-inputs` — text field, form violations
+- `hig-foundations` — color, typography, spacing violations
+
+Trigger phrases: "HIG compliance", "Apple HIG audit", "diagnose HIG"
+
+## What it does
+
+HIG Doctor is a multi-skill diagnostic tool for Apple HIG compliance. Each skill covers a category of HIG components, identifies violations in your UI code or design, explains the specific guideline being broken, and provides targeted fixes. Companion to apple-hig-skills (which teaches guidelines) — this diagnoses and repairs.

package/skills/hig-doctor/stub.yaml

@@ -0,0 +1,6 @@
+type: package
+tier: community
+upstream: https://github.com/raintree-technology/hig-doctor
+version: latest
+install_default: "npx skills add raintree-technology/hig-doctor"
+installed_as: hig-foundations

package/skills/huashu-design/SKILL.md

@@ -0,0 +1,64 @@
+---
+name: huashu-design
+description: |
+  HTML-native design skill producing magazine-grade typography, precise CSS Grid, animated
+  prototypes with 20 design philosophies, 5-dimension self-review, and MP4 export.
+  Agent-agnostic and works without external component libraries.
+triggers:
+  - "huashu"
+  - "magazine typography"
+  - "CSS Grid design"
+  - "animated prototype"
+  - "MP4 export"
+das:
+  type: skill
+  category: design-systems
+  upstream: "https://github.com/alchaincyf/huashu-design"
+  upstream_path: "SKILL.md"
+  version: latest
+  install: true
+---
+
+# huashu-design
+
+> Catalogue stub — full skill: [alchaincyf/huashu-design](https://github.com/alchaincyf/huashu-design)
+
+## Decision tree
+
+1. **Is the full skill already installed?**
+   Check whether the skill at this location still has a `das:` block:
+   - Global: `grep -q "^das:" ~/.agents/skills/huashu-design/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"`
+   - Project: `grep -q "^das:" .agents/skills/huashu-design/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"`
+   - No `das:` block → full skill installed, invoke it and proceed
+   - `das:` block present → go to step 2
+
+2. **Detect scope, then install:**
+
+   To detect scope:
+   ```bash
+   [ -e ~/.agents/skills/huashu-design ] && echo "global" || echo "project"
+   ```
+
+   **Global** (installed with `-g`):
+   ```bash
+   npx skills add alchaincyf/huashu-design --skill huashu-design -g -y
+   ```
+
+   **Project** (installed without `-g`):
+   ```bash
+   npx skills add alchaincyf/huashu-design --skill huashu-design -y
+   ```
+
+## Invoke after install
+
+- Skill name: `huashu-design`
+- Trigger phrases: "huashu", "magazine typography", "CSS Grid design", "animated prototype", "MP4 export"
+
+## What it does
+
+Produces publication-quality HTML/CSS designs with magazine-grade typography and precise CSS Grid layouts, drawing on 20 named design philosophies. Includes a built-in 5-dimension self-review loop that critiques its own output across readability, hierarchy, proportion, rhythm, and contrast before delivering. Supports animated interactive prototypes and MP4 export for sharing or presenting motion designs. Entirely agent-agnostic — no external component libraries or framework dependencies required.
+
+## When NOT to use
+
+- Non-HTML targets such as React Native, SwiftUI, or backend rendering (the skill is HTML/CSS native)
+- When you need a pre-built component library or design system scaffold (use `shadcn-ui` or `design-consultation`)

package/skills/huashu-design/stub.yaml

@@ -0,0 +1,5 @@
+type: skill
+tier: experimental
+upstream: https://github.com/alchaincyf/huashu-design
+upstream_path: SKILL.md
+version: latest

package/skills/hyperframes/SKILL.md

@@ -0,0 +1,60 @@
+---
+name: hyperframes
+description: |
+  "Write HTML. Render video." — 11 skills for composition authoring, TTS/transcription,
+  CLI workflow, asset registry, URL capture, and GSAP/Anime.js/CSS/Lottie/Three.js/WAAPI
+  animation. Built specifically for AI coding agents. Requires HeyGen account for media
+  generation.
+triggers:
+  - "hyperframes"
+  - "HTML to video"
+  - "HeyGen"
+  - "render video from HTML"
+  - "Anime.js"
+das:
+  type: package
+  category: motion-animation
+  upstream: "https://github.com/heygen-com/hyperframes"
+  version: latest
+  install: false
+---
+
+# hyperframes
+
+> Catalogue stub — full package: [heygen-com/hyperframes](https://github.com/heygen-com/hyperframes)
+
+> **Note:** Requires a HeyGen account for TTS and media generation features.
+
+## Decision tree
+
+1. **Is the package already installed?**
+   Check: your agent's skills directory contains `hyperframes` with content beyond this stub.
+   - Yes → invoke `hyperframes` and proceed
+   - No → go to step 2
+
+2. **Which agent are you on?**
+   - Claude Code → `npx skills add heygen-com/hyperframes`
+   - Cursor → `npx skills add heygen-com/hyperframes`
+   - Other → `npx skills add heygen-com/hyperframes` or see [GitHub README](https://github.com/heygen-com/hyperframes)
+
+## Install command
+
+```bash
+npx skills add heygen-com/hyperframes
+```
+
+> A HeyGen account is required for TTS, transcription, and video rendering features. Animation authoring works without an account.
+
+## Invoke after install
+
+- Skill name: `hyperframes`
+- Trigger phrases: "hyperframes", "HTML to video", "HeyGen", "render video from HTML", "Anime.js"
+
+## What it does
+
+"Write HTML. Render video." — a suite of 11 skills built specifically for AI coding agents that need to produce video output from HTML compositions. Covers: composition authoring (building HTML/CSS/JS scenes), text-to-speech and transcription via HeyGen, a CLI-driven render workflow, an asset registry for reusable media, URL capture for grabbing live web content, and six animation sub-skills spanning GSAP, Anime.js, plain CSS animations, Lottie playback, Three.js 3D, and the Web Animations API (WAAPI). Designed ground-up for agent-driven video production pipelines.
+
+## When NOT to use
+
+- Static animation without video output (use `gsap-skills`, `framer-motion-skills`, or `animate-css-skill`)
+- When you do not have a HeyGen account — media generation features (TTS, video render) will not function

package/skills/hyperframes/stub.yaml

@@ -0,0 +1,5 @@
+type: package
+tier: official
+upstream: https://github.com/heygen-com/hyperframes
+version: latest
+install_default: "npx skills add heygen-com/hyperframes"

package/skills/impeccable/SKILL.md

@@ -0,0 +1,75 @@
+---
+name: impeccable
+description: |
+  Design fluency for frontend development. 1 skill with 23 slash commands
+  (/impeccable polish, /impeccable audit, /impeccable critique, etc.),
+  curated anti-pattern detection CLI, and runtime node scripts.
+  Covers UI design, redesign, critique, accessibility, motion, theming,
+  typography, and component craft across websites, dashboards, and apps.
+triggers:
+  - "impeccable"
+  - "polish UI"
+  - "audit design"
+  - "critique interface"
+  - "design commands"
+  - "anti-pattern detection"
+das:
+  category: design-systems
+  type: platform
+  upstream: "https://github.com/pbakaus/impeccable"
+  version: latest
+---
+
+# impeccable
+
+> Catalogue stub — full platform: [pbakaus/impeccable](https://github.com/pbakaus/impeccable)  
+> Type: platform — do NOT curl SKILL.md directly (contains unresolved template variables)
+
+## Decision tree
+
+Run this before any design work:
+
+1. **Is impeccable already installed for your agent?**
+   - Claude Code: does `/impeccable` slash command exist in this session?
+   - Other agents: check if `impeccable` skill is loaded
+   - Yes → invoke `/impeccable <command>` and proceed
+   - No → go to step 2
+
+2. **Install via your agent's preferred method:**
+
+| Agent | Install command |
+|-------|----------------|
+| Claude Code | `claude plugin install pbakaus/impeccable` |
+| All agents | `npx skills add impeccable` |
+| npm (global) | `npm install -g impeccable` |
+
+3. **After install, restart your agent session** so the skill and commands are loaded.
+
+> **Why not curl?** `impeccable`'s SKILL.md contains `{{scripts_path}}`,
+> `{{command_prefix}}`, and other template variables resolved at install time.
+> A raw curl produces a broken skill with unresolved placeholders.
+
+## What it does
+
+1 skill + 23 slash commands. Invoke as `/impeccable <command>`:
+
+| Command | Purpose |
+|---------|---------|
+| `polish` | Refine visual hierarchy, spacing, and details |
+| `audit` | Accessibility and UX pattern review |
+| `critique` | Honest design criticism |
+| `shape` | Layout and composition work |
+| `animate` | Motion and transition guidance |
+| `colorize` | Palette and contrast |
+| `typeset` | Typography decisions |
+| `harden` | Edge cases and error states |
+| `distill` | Simplify and reduce |
+| + 14 more | See upstream README |
+
+Also ships `npx impeccable` CLI for anti-pattern detection in CI/CD pipelines.
+
+## What it does NOT do
+
+- Backend, API, or data pipeline work
+- Non-UI tasks (routing, auth, database)
+- Works without PRODUCT.md context (it loads this file at startup — see upstream docs)

package/skills/impeccable/stub.yaml

@@ -0,0 +1,8 @@
+type: platform
+tier: community
+upstream: https://github.com/pbakaus/impeccable
+version: latest
+install_default: "npx skills add impeccable"
+install_claude: "claude plugin install pbakaus/impeccable"
+install_npm: "npm install -g impeccable"
+note: "SKILL.md contains unresolved template vars — do not curl directly"

package/skills/ink-google/SKILL.md

@@ -0,0 +1,58 @@
+---
+name: ink-google
+description: |
+  Ink-style visual design skill for Claude artifacts. Applies a distinctive
+  editorial aesthetic — high contrast, strong typographic voice, restrained
+  color — to artifact output from Google Labs.
+triggers:
+  - "ink design"
+  - "ink style"
+  - "editorial design"
+  - "ink visual"
+  - "artifact design"
+das:
+  category: visual-components
+  upstream: "https://github.com/google-labs-code/design.md"
+  upstream_path: ".agents/skills/ink/SKILL.md"
+  version: latest
+  install: true
+---
+
+# ink-google
+
+> Catalogue stub — full skill: [google-labs-code/design.md](https://github.com/google-labs-code/design.md/blob/main/.agents/skills/ink/SKILL.md)
+
+## Decision tree
+
+1. **Is the full skill already installed?**
+   Check whether the skill at this location still has a `das:` block:
+   - Global: `grep -q "^das:" ~/.agents/skills/ink-google/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"`
+   - Project: `grep -q "^das:" .agents/skills/ink-google/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"`
+   - No `das:` block → full skill installed, invoke it and proceed
+   - `das:` block present → go to step 2
+
+2. **Detect scope, then install:**
+
+   To detect scope:
+   ```bash
+   [ -e ~/.agents/skills/ink-google ] && echo "global" || echo "project"
+   ```
+
+   **Global** (installed with `-g`):
+   ```bash
+   npx skills add google-labs-code/design.md --skill ink-google -g -y
+   ```
+
+   **Project** (installed without `-g`):
+   ```bash
+   npx skills add google-labs-code/design.md --skill ink-google -y
+   ```
+
+## Invoke after install
+
+- Skill name: `ink-google`
+- Trigger phrases: "ink design", "ink style", "editorial design", "artifact design"
+
+## What it does
+
+Applies a distinctive ink-style editorial aesthetic to Claude artifact output: high contrast, strong typographic voice, minimal restrained color, and clean structural composition. From Google Labs' design.md project — a system for encoding visual design intent into agent-readable format.

package/skills/ink-google/stub.yaml

@@ -0,0 +1,5 @@
+type: skill
+tier: official
+upstream: https://github.com/google-labs-code/design.md
+upstream_path: .agents/skills/ink/SKILL.md
+version: latest

package/skills/interface-design-dammyjay/SKILL.md

@@ -0,0 +1,55 @@
+---
+name: interface-design-dammyjay
+description: |
+  Specialised for dashboards, admin panels, and SaaS applications where
+  information density is high. Applies craft and consistency principles to
+  produce interfaces that are both functional and visually coherent.
+triggers:
+  - "interface design"
+  - "dashboard design"
+  - "admin panel"
+  - "SaaS interface"
+  - "dense UI"
+das:
+  category: interaction-polish
+  upstream: "https://github.com/Dammyjay93/interface-design"
+  upstream_path: "SKILL.md"
+  version: latest
+  install: true
+---
+
+# interface-design-dammyjay
+
+> Catalogue stub — full skill: [Dammyjay93/interface-design](https://github.com/Dammyjay93/interface-design)
+
+## Decision tree
+
+Run this before designing dashboards or admin interfaces:
+
+1. **Is the full skill already installed?**
+   Check: `~/.design-agent-skills/skills/interface-design-dammyjay/SKILL.md` exists AND does NOT contain a `das:` block.
+   - Yes → invoke `interface-design-dammyjay` and proceed
+   - No → go to step 2
+
+2. **Do you have shell access?**
+   - Yes → run the install command below, then invoke the skill
+   - No → show the user the install command, ask them to run it, then proceed once confirmed
+
+## Install command
+
+```bash
+npx skills add Dammyjay93/interface-design
+```
+
+Or per-agent:
+- Claude Code: `claude skills add Dammyjay93/interface-design`
+- Cursor/OpenCode: `npx skills add Dammyjay93/interface-design`
+
+## Invoke after install
+
+- Skill name: `interface-design-dammyjay`
+- Trigger phrases: "interface design", "dashboard design", "admin panel", "SaaS interface", "dense UI"
+
+## What it does
+
+Specialises in crafting dashboards, admin panels, and SaaS interfaces where large amounts of information must be presented clearly. Applies consistency systems and craft principles to ensure information-dense layouts remain usable, scannable, and visually polished.

package/skills/interface-design-dammyjay/stub.yaml

@@ -0,0 +1,5 @@
+type: package
+tier: experimental
+upstream: https://github.com/Dammyjay93/interface-design
+version: latest
+install_default: "npx skills add Dammyjay93/interface-design"

package/skills/liquid-glass-skill/SKILL.md

@@ -0,0 +1,54 @@
+---
+name: liquid-glass-skill
+description: |
+  Deep knowledge of Apple's Liquid Glass design system (iOS 26+/macOS 26+): .glassEffect()
+  modifier, .buttonStyle(.glass), GlassEffectContainer, platform-specific implementations,
+  migration from existing apps, and common pitfalls with tested solutions.
+triggers:
+  - "Liquid Glass"
+  - "iOS 26 design"
+  - "glassEffect"
+  - "GlassEffectContainer"
+  - "liquid-glass-skill"
+das:
+  category: visual-components
+  upstream: "https://github.com/haider-nawaz/liquid-glass-skill"
+  version: latest
+  install: false
+---
+
+# liquid-glass-skill
+
+> Catalogue stub — full package: [haider-nawaz/liquid-glass-skill](https://github.com/haider-nawaz/liquid-glass-skill)
+
+## Decision tree
+
+1. **Is the package already installed?**
+   Check: `~/.design-agent-skills/skills/liquid-glass-skill/SKILL.md` exists.
+   - Yes → invoke `liquid-glass-skill` and proceed
+   - No → go to step 2
+
+2. **Do you have shell access?**
+   - Yes → run the install command below, then invoke the skill
+   - No → show the user the install command, ask them to run it, then proceed once confirmed
+
+## Install command
+
+```bash
+/plugin marketplace add haider-nawaz/liquid-glass-skill
+```
+
+## Invoke after install
+
+- Skill name: `liquid-glass-skill`
+- Trigger phrases: "Liquid Glass", "iOS 26 design", "glassEffect", "GlassEffectContainer"
+
+## What it does
+
+Provides comprehensive knowledge of Apple's Liquid Glass material system introduced in iOS 26 and macOS 26. Covers the SwiftUI `.glassEffect()` view modifier, `.buttonStyle(.glass)` for interactive elements, `GlassEffectContainer` for grouping glass surfaces, platform-specific behavioral differences between iOS, macOS, tvOS, and visionOS, step-by-step migration paths for apps upgrading from pre-26 designs, and a catalogue of known pitfalls (performance, layering, contrast) with tested solutions.
+
+## When NOT to use
+
+- Apps targeting iOS versions before iOS 26 — Liquid Glass APIs are unavailable
+- Android or cross-platform design — use mobile-app-design instead
+- General SwiftUI patterns beyond Liquid Glass — use swiftui-claude-skills or swiftui-patterns

package/skills/liquid-glass-skill/stub.yaml

@@ -0,0 +1,5 @@
+type: package
+tier: experimental
+upstream: https://github.com/haider-nawaz/liquid-glass-skill
+version: latest
+install_default: "/plugin marketplace add haider-nawaz/liquid-glass-skill"

package/skills/logo-designer-skill/SKILL.md

@@ -0,0 +1,56 @@
+---
+name: logo-designer-skill
+description: |
+  Conducts a brand interview, proposes 3-5 distinct SVG logo concepts, refines the chosen
+  direction, and exports PNGs at 16px-2048px. Requires resvg, Inkscape, or librsvg for
+  PNG export.
+triggers:
+  - "logo design"
+  - "SVG logo"
+  - "brand mark"
+  - "logo concepts"
+  - "logo-designer"
+das:
+  type: package
+  category: design-systems
+  upstream: "https://github.com/neonwatty/logo-designer-skill"
+  version: latest
+  install: false
+---
+
+# logo-designer-skill
+
+> Catalogue stub — full package: [neonwatty/logo-designer-skill](https://github.com/neonwatty/logo-designer-skill)
+
+## Decision tree
+
+1. **Is the package already installed?**
+   Check: your agent's skills directory contains `logo-designer-skill` with content beyond this stub.
+   - Yes → invoke `logo-designer-skill` and proceed
+   - No → go to step 2
+
+2. **Which agent are you on?**
+   - Claude Code → `claude plugin add neonwatty/logo-designer-skill`
+   - Cursor → `claude plugin add neonwatty/logo-designer-skill`
+   - Other → `claude plugin add neonwatty/logo-designer-skill` or see [GitHub README](https://github.com/neonwatty/logo-designer-skill)
+
+## Install command
+
+```bash
+claude plugin add neonwatty/logo-designer-skill
+```
+
+## Invoke after install
+
+- Skill name: `logo-designer-skill`
+- Trigger phrases: "logo design", "SVG logo", "brand mark", "logo concepts", "logo-designer"
+
+## What it does
+
+Runs a structured brand interview to capture values, audience, and visual direction before generating 3-5 distinct SVG logo concepts. After the user selects a direction, iterates through refinement rounds to tighten proportions, weight, and scalability. Exports final SVGs and PNGs across the full size spectrum from 16px favicon to 2048px high-res. PNG export requires one of resvg, Inkscape, or librsvg to be available in the environment.
+
+## When NOT to use
+
+- Full brand system design including color, type, and spacing guidelines (use `brand-design-md` to apply an existing brand's tokens)
+- When PNG export tools (resvg, Inkscape, librsvg) are not available and raster output is required
+- When the deliverable is a complete marketing or product UI rather than a standalone mark

package/skills/logo-designer-skill/stub.yaml

@@ -0,0 +1,5 @@
+type: package
+tier: community
+upstream: https://github.com/neonwatty/logo-designer-skill
+version: latest
+install_default: "claude plugin add neonwatty/logo-designer-skill"

package/skills/make-interfaces-better/SKILL.md

@@ -0,0 +1,60 @@
+---
+name: make-interfaces-better
+description: |
+  Design engineering principles for making interfaces feel polished and alive.
+  Covers micro-interactions, typography details, visual refinement, and the small
+  decisions that separate "it works" from "it feels right". By Jakub Krehel
+  (Interfere, Interfaces magazine, oklch.fyi).
+triggers:
+  - "make interfaces better"
+  - "interface polish"
+  - "micro-interactions"
+  - "interface feel"
+  - "polished UI"
+  - "UI refinement"
+das:
+  category: interaction-polish
+  upstream: "https://github.com/jakubkrehel/make-interfaces-feel-better"
+  upstream_path: "SKILL.md"
+  version: latest
+  install: true
+---
+
+# make-interfaces-better
+
+> Catalogue stub — full skill: [jakubkrehel/make-interfaces-feel-better](https://github.com/jakubkrehel/make-interfaces-feel-better)
+
+## Decision tree
+
+1. **Is the full skill already installed?**
+   Check whether the skill at this location still has a `das:` block:
+   - Global: `grep -q "^das:" ~/.agents/skills/make-interfaces-better/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"`
+   - Project: `grep -q "^das:" .agents/skills/make-interfaces-better/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"`
+   - No `das:` block → full skill installed, invoke it and proceed
+   - `das:` block present → go to step 2
+
+2. **Detect scope, then install:**
+
+   To detect scope:
+   ```bash
+   [ -e ~/.agents/skills/make-interfaces-better ] && echo "global" || echo "project"
+   ```
+
+   **Global** (installed with `-g`):
+   ```bash
+   npx skills add jakubkrehel/make-interfaces-feel-better --skill make-interfaces-better -g -y
+   ```
+
+   **Project** (installed without `-g`):
+   ```bash
+   npx skills add jakubkrehel/make-interfaces-feel-better --skill make-interfaces-better -y
+   ```
+
+## Invoke after install
+
+- Skill name: `make-interfaces-better`
+- Trigger phrases: "make interfaces better", "interface polish", "micro-interactions", "polished UI"
+
+## What it does
+
+Applies Jakub Krehel's design engineering principles to make interfaces feel genuinely polished — not just functional. Covers micro-interactions, precise typography choices, visual hierarchy refinement, motion timing, and the subtle details (hover states, transitions, spacing rhythm) that distinguish well-crafted UI from generic output. By the creator of oklch.fyi and the Interfaces publication.

package/skills/make-interfaces-better/stub.yaml

@@ -0,0 +1,5 @@
+type: skill
+tier: experimental
+upstream: https://github.com/jakubkrehel/make-interfaces-feel-better
+upstream_path: SKILL.md
+version: latest