design-agent-skills 1.4.2

package/skills/apple-hig-skills/SKILL.md

@@ -0,0 +1,66 @@
+---
+name: apple-hig-skills
+description: |
+  Apple Human Interface Guidelines as 14 agent skills covering iOS, macOS,
+  visionOS, watchOS, and tvOS. From raintree-technology, makers of the
+  Apple HIG compliance website.
+triggers:
+  - "Apple HIG"
+  - "Human Interface Guidelines"
+  - "iOS design"
+  - "macOS design"
+  - "visionOS"
+  - "watchOS design"
+  - "tvOS design"
+  - "Apple design guidelines"
+das:
+  category: visual-components
+  upstream: "https://github.com/raintree-technology/apple-hig-skills"
+  version: latest
+  install: false
+---
+
+# apple-hig-skills
+
+> Catalogue stub — full package: [raintree-technology/apple-hig-skills](https://github.com/raintree-technology/apple-hig-skills)
+
+## Decision tree
+
+Run this before any Apple platform UI design:
+
+1. **Is an HIG skill already installed?**
+   Check: `~/.design-agent-skills/skills/hig-foundations/SKILL.md` exists.
+   - Yes → invoke the specific platform 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/apple-hig-skills
+```
+
+Website: [apple.raintree.technology](https://apple.raintree.technology/)
+
+## Invoke after install
+
+14 skills covering the full HIG — invoke by platform or component area:
+- `hig-foundations` — color, typography, layout, materials
+- `hig-platforms` — iOS, macOS, visionOS, watchOS, tvOS specifics
+- `hig-components-controls` — buttons, toggles, sliders
+- `hig-components-layout` — navigation bars, tab bars, toolbars
+- `hig-components-menus` — context menus, action sheets, pickers
+- `hig-components-dialogs` — alerts, confirmations, sheets
+- `hig-inputs` — text fields, search, forms
+- `hig-patterns` — loading, onboarding, modality
+- `hig-technologies` — SwiftUI, Accessibility, Handoff, etc.
+- And more...
+
+Trigger phrases: "Apple HIG", "iOS design", "macOS design", "visionOS"
+
+## What it does
+
+Apple's Human Interface Guidelines encoded as 14 structured agent skills. Covers every Apple platform (iOS, macOS, visionOS, watchOS, tvOS) with platform-specific component behaviors, navigation patterns, typography scales, accessibility requirements, and HIG compliance checks. From the team behind apple.raintree.technology.

package/skills/apple-hig-skills/stub.yaml

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

package/skills/baseline-ui/SKILL.md

@@ -0,0 +1,54 @@
+---
+name: baseline-ui
+description: |
+  Validates animation durations, enforces typography scale, checks component
+  accessibility, and prevents layout anti-patterns in Tailwind CSS. Ensures
+  UI work meets baseline quality standards before shipping.
+triggers:
+  - "baseline UI"
+  - "animation validation"
+  - "typography scale"
+  - "Tailwind anti-patterns"
+das:
+  category: accessibility-quality
+  upstream: "https://github.com/ibelick/baseline-ui"
+  upstream_path: "SKILL.md"
+  version: latest
+  install: true
+---
+
+# baseline-ui
+
+> Catalogue stub — full skill: [ibelick/baseline-ui](https://github.com/ibelick/baseline-ui)
+
+## Decision tree
+
+Run this before any baseline UI validation work:
+
+1. **Is the full skill already installed?**
+   Check: `~/.design-agent-skills/skills/baseline-ui/SKILL.md` exists AND does NOT contain a `das:` block.
+   - Yes → invoke `baseline-ui` 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 ibelick/baseline-ui
+```
+
+Or per-agent:
+- Claude Code: `claude skills add ibelick/baseline-ui`
+- Cursor/OpenCode: `npx skills add ibelick/baseline-ui`
+
+## Invoke after install
+
+- Skill name: `baseline-ui`
+- Trigger phrases: "baseline UI", "animation validation", "typography scale", "Tailwind anti-patterns"
+
+## What it does
+
+Validates animation durations against design system standards, enforces typography scale consistency, and checks component accessibility. Prevents common layout anti-patterns in Tailwind CSS to keep UI output consistent and production-ready.

package/skills/baseline-ui/stub.yaml

@@ -0,0 +1,5 @@
+type: package
+tier: community
+upstream: https://github.com/ibelick/baseline-ui
+version: latest
+install_default: "npx skills add ibelick/baseline-ui"

package/skills/bencium-ux-designer/SKILL.md

@@ -0,0 +1,54 @@
+---
+name: bencium-ux-designer
+description: |
+  Produces distinctive, production-grade frontend interfaces with high design
+  quality and a strong point of view. Actively avoids generic AI-generated
+  aesthetics in favour of considered, original UI decisions.
+triggers:
+  - "innovative UX"
+  - "bencium"
+  - "distinctive UI"
+  - "production frontend"
+das:
+  category: interaction-polish
+  upstream: "https://github.com/bencium/bencium-innovative-ux-designer"
+  upstream_path: "SKILL.md"
+  version: latest
+  install: true
+---
+
+# bencium-ux-designer
+
+> Catalogue stub — full skill: [bencium/bencium-innovative-ux-designer](https://github.com/bencium/bencium-innovative-ux-designer)
+
+## Decision tree
+
+Run this before any frontend interface work requiring distinctive design quality:
+
+1. **Is the full skill already installed?**
+   Check: `~/.design-agent-skills/skills/bencium-ux-designer/SKILL.md` exists AND does NOT contain a `das:` block.
+   - Yes → invoke `bencium-ux-designer` 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 bencium/bencium-innovative-ux-designer
+```
+
+Or per-agent:
+- Claude Code: `claude skills add bencium/bencium-innovative-ux-designer`
+- Cursor/OpenCode: `npx skills add bencium/bencium-innovative-ux-designer`
+
+## Invoke after install
+
+- Skill name: `bencium-ux-designer`
+- Trigger phrases: "innovative UX", "bencium", "distinctive UI", "production frontend"
+
+## What it does
+
+Guides the creation of distinctive, production-ready frontend interfaces that avoid the bland patterns common in AI-generated UI. Applies principled design decisions around layout, typography, spacing, and interaction to deliver original interfaces ready for real products.

package/skills/bencium-ux-designer/stub.yaml

@@ -0,0 +1,5 @@
+type: package
+tier: experimental
+upstream: https://github.com/bencium/bencium-innovative-ux-designer
+version: latest
+install_default: "npx skills add bencium/bencium-innovative-ux-designer"

package/skills/brand-design-md/SKILL.md

@@ -0,0 +1,65 @@
+---
+name: brand-design-md
+description: |
+  Fetches exact design tokens (colors, type weights, letter-spacing) for 62 world-class brands
+  including Stripe, Linear, Apple, Figma, Notion, and Nike at runtime, then applies them to
+  your project.
+triggers:
+  - "brand tokens"
+  - "brand design"
+  - "match Stripe design"
+  - "62 brands"
+  - "brand-design-md"
+das:
+  type: skill
+  category: design-systems
+  upstream: "https://github.com/zephyrwang6/brand-design-md"
+  upstream_path: "SKILL.md"
+  version: latest
+  install: true
+---
+
+# brand-design-md
+
+> Catalogue stub — full skill: [zephyrwang6/brand-design-md](https://github.com/zephyrwang6/brand-design-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/brand-design-md/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"`
+   - Project: `grep -q "^das:" .agents/skills/brand-design-md/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/brand-design-md ] && echo "global" || echo "project"
+   ```
+
+   **Global** (installed with `-g`):
+   ```bash
+   npx skills add zephyrwang6/brand-design-md --skill brand-design-md -g -y
+   ```
+
+   **Project** (installed without `-g`):
+   ```bash
+   npx skills add zephyrwang6/brand-design-md --skill brand-design-md -y
+   ```
+
+## Invoke after install
+
+- Skill name: `brand-design-md`
+- Trigger phrases: "brand tokens", "brand design", "match Stripe design", "62 brands", "brand-design-md"
+
+## What it does
+
+At runtime, fetches the precise design tokens — primary and accent colors, type weights, letter-spacing, border-radius, and shadow values — for any of 62 documented world-class brands including Stripe, Linear, Apple, Figma, Notion, Vercel, Airbnb, and Nike. Once fetched, applies those tokens to the current project's CSS variables or Tailwind config so the output accurately reflects the chosen brand's visual language. Useful for building demos, pitch materials, or brand-matched prototypes quickly without manual research.
+
+## When NOT to use
+
+- When you need to develop a custom brand identity from scratch (this skill matches existing brands, not creates new ones)
+- When none of the 62 brands match your target (use `design-consultation` to build a bespoke system)
+- When brand token accuracy is legally or contractually sensitive (always verify tokens against official brand guidelines)

package/skills/brand-design-md/stub.yaml

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

package/skills/callstack-agent-skills/SKILL.md

@@ -0,0 +1,56 @@
+---
+name: callstack-agent-skills
+description: |
+  Official Callstack React Native skills covering best practices (profiling,
+  FPS, re-renders, Turbo Modules), GitHub PR workflows, GitHub Actions build
+  artifacts, React Native upgrading templates, and brownfield migration strategy.
+triggers:
+  - "Callstack"
+  - "callstack-agent-skills"
+  - "React Native profiling"
+  - "Turbo Modules"
+  - "brownfield migration"
+  - "React Native upgrade"
+  - "React Native FPS"
+das:
+  type: package
+  category: official-suites
+  upstream: "https://github.com/callstackincubator/agent-skills"
+  version: latest
+  install: false
+---
+
+# callstack-agent-skills
+
+> Catalogue stub — full package: [callstackincubator/agent-skills](https://github.com/callstackincubator/agent-skills)
+
+## Decision tree
+
+1. **Is the skill already installed?** Check `~/.design-agent-skills/skills/` for Callstack skill directories.
+   - Yes → invoke and proceed
+   - No → go to step 2
+
+2. **Shell access?** Yes → install below. No → show user the command.
+
+## Install command
+
+```bash
+/plugin install react-native-best-practices@callstack-agent-skills
+```
+
+> See the [GitHub README](https://github.com/callstackincubator/agent-skills) for alternative install methods and the full skill list.
+
+## Invoke after install
+
+- Skill names: check `ls ~/.design-agent-skills/skills/` for installed skill names after install
+- Triggers: "Callstack", "React Native profiling", "Turbo Modules", "brownfield migration", "React Native upgrade"
+
+## What it does
+
+Official Callstack React Native skill suite covering production best practices: performance profiling, FPS optimization, eliminating unnecessary re-renders, and building Turbo Modules. Also covers GitHub PR review workflows, GitHub Actions CI/CD for build artifacts, version upgrade templates and strategies, and brownfield migration (embedding React Native into existing native iOS/Android apps).
+
+## When NOT to use
+
+- Expo projects — use `expo-skills`
+- Animation-heavy and gesture-heavy work — use `software-mansion-skills`
+- Figma or UI design work — use `mobile-app-design` or `work-with-design-systems`

package/skills/callstack-agent-skills/stub.yaml

@@ -0,0 +1,6 @@
+type: package
+tier: official
+upstream: https://github.com/callstackincubator/agent-skills
+version: latest
+install_default: "/plugin install react-native-best-practices@callstack-agent-skills"
+installed_as: react-native-best-practices

package/skills/cc-slidev/SKILL.md

@@ -0,0 +1,54 @@
+---
+name: cc-slidev
+description: |
+  Claude Code plugin for creating developer-focused technical presentations (tech talks,
+  conference content) using Slidev with evidence-based design guardrails for slide quality.
+  Adds opinionated constraints on top of raw Slidev for presentation polish.
+triggers:
+  - "cc-slidev"
+  - "rhuss slidev"
+  - "conference slides"
+  - "tech talk slides"
+das:
+  category: presentations
+  upstream: "https://github.com/rhuss/cc-slidev"
+  version: latest
+  install: false
+---
+
+# cc-slidev
+
+> Catalogue stub — full package: [rhuss/cc-slidev](https://github.com/rhuss/cc-slidev)
+
+## Decision tree
+
+1. **Is the package already installed?**
+   Check: `~/.design-agent-skills/skills/cc-slidev/SKILL.md` exists.
+   - Yes → invoke `cc-slidev` 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 rhuss/cc-slidev
+```
+
+## Invoke after install
+
+- Skill name: `cc-slidev`
+- Trigger phrases: "cc-slidev", "conference slides", "tech talk slides", "rhuss slidev"
+
+## What it does
+
+A Claude Code plugin that wraps Slidev for technical conference and developer talk slide creation. Adds evidence-based design guardrails — enforcing appropriate information density, visual hierarchy, and slide structure quality — on top of Slidev's flexible Markdown format. Best for developer advocates, engineers preparing conference talks, or teams producing standardized technical presentation content.
+
+## When NOT to use
+
+- Non-technical presentations where the constraints would be limiting
+- When raw Slidev flexibility is preferred over guardrails — use slidev-skill instead
+- Marp output — use marp-slides instead
+- Reveal.js output — use revealjs-skill instead

package/skills/cc-slidev/stub.yaml

@@ -0,0 +1,5 @@
+type: package
+tier: community
+upstream: https://github.com/rhuss/cc-slidev
+version: latest
+install_default: "/plugin marketplace add rhuss/cc-slidev"

package/skills/claud3/SKILL.md

@@ -0,0 +1,54 @@
+---
+name: claud3
+description: |
+  D3.js data visualization skill based on Edward Tufte principles. Selects the right chart
+  type from 80+ options by analyzing the data question, then generates single-file HTML with
+  D3 v7, dark theme, responsive layout, direct labels, and annotations.
+triggers:
+  - "claud3"
+  - "D3 Tufte"
+  - "80 chart types"
+  - "dtran320 D3"
+  - "D3 dark theme"
+das:
+  category: data-visualization
+  upstream: "https://github.com/dtran320/claud3"
+  version: latest
+  install: false
+---
+
+# claud3
+
+> Catalogue stub — full package: [dtran320/claud3](https://github.com/dtran320/claud3)
+
+## Decision tree
+
+1. **Is the package already installed?**
+   Check: `~/.design-agent-skills/skills/claud3/SKILL.md` exists.
+   - Yes → invoke `claud3` 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 dtran320/claud3
+```
+
+## Invoke after install
+
+- Skill name: `claud3`
+- Trigger phrases: "claud3", "D3 Tufte", "80 chart types", "D3 dark theme"
+
+## What it does
+
+Applies Edward Tufte's data visualization principles to D3.js chart generation. Analyzes the underlying data question to select the most appropriate chart type from a library of 80+ options, then produces self-contained single-file HTML using D3 v7 with a dark theme, responsive layout, direct data labels (no separate legend), and contextual annotations. Includes a playground mode for interactive exploration and refinement.
+
+## When NOT to use
+
+- Multi-library visualization agents — use data-viz-agent instead
+- AntV/G2 charts — use antvis-chart-skills instead
+- Quick single charts without Tufte constraints — use d3js-skill instead

package/skills/claud3/stub.yaml

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

package/skills/claude-pm-skills/SKILL.md

@@ -0,0 +1,53 @@
+---
+name: claude-pm-skills
+description: |
+  Production-grade skills for product thinking, discovery, prioritization, and launch
+  decisions. Covers the full PM lifecycle with a different author and focus than other
+  PM skill packages in the catalogue.
+triggers:
+  - "claude PM skills"
+  - "pratikshadake PM"
+  - "product management skill"
+  - "product thinking"
+das:
+  category: product-pm
+  upstream: "https://github.com/pratikshadake/claude-product-management-skills"
+  version: latest
+  install: false
+---
+
+# claude-pm-skills
+
+> Catalogue stub — full package: [pratikshadake/claude-product-management-skills](https://github.com/pratikshadake/claude-product-management-skills)
+
+## Decision tree
+
+1. **Is the package already installed?**
+   Check: `~/.design-agent-skills/skills/claude-pm-skills/SKILL.md` exists.
+   - Yes → invoke the relevant 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 pratikshadake/claude-product-management-skills
+```
+
+## Invoke after install
+
+- Skill name: `claude-pm-skills`
+- Trigger phrases: "claude PM skills", "pratikshadake PM", "product management skill", "product thinking"
+
+## What it does
+
+Production-ready product management skills covering the core PM workflow: product thinking and framing, customer discovery, prioritization frameworks, and launch decision-making. Built by pratikshadake with a distinct focus and opinionated approach compared to the pm-skills and phuryn-pm-skills packages. Use when you want actionable PM artifacts with clear decision frameworks rather than a full methodology suite.
+
+## When NOT to use
+
+- UX research and journey mapping — use phuryn-pm-skills instead
+- Full Triple Diamond methodology — use pm-skills instead
+- Marketing and CRO tasks — use coreyhaines-marketing instead

package/skills/claude-pm-skills/stub.yaml

@@ -0,0 +1,5 @@
+type: package
+tier: experimental
+upstream: https://github.com/pratikshadake/claude-product-management-skills
+version: latest
+install_default: "npx skills add pratikshadake/claude-product-management-skills"

package/skills/claude-wireframe-skill/SKILL.md

@@ -0,0 +1,63 @@
+---
+name: claude-wireframe-skill
+description: |
+  Generates 5 UX design approaches as interactive prototypes — 1 safe design-system extension
+  and 4 exploratory variants — starting as B&W wireframes then producing color variants via
+  parallel agents. Scans codebase on first run to build persistent design context.
+triggers:
+  - "claude-wireframe-skill"
+  - "5 UX approaches"
+  - "exploratory wireframe"
+  - "Magdoub wireframe"
+das:
+  type: skill
+  category: diagrams
+  upstream: "https://github.com/Magdoub/claude-wireframe-skill"
+  upstream_path: "SKILL.md"
+  version: latest
+  install: true
+---
+
+# claude-wireframe-skill
+
+> Catalogue stub — full skill: [Magdoub/claude-wireframe-skill](https://github.com/Magdoub/claude-wireframe-skill)
+
+## 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/claude-wireframe-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"`
+   - Project: `grep -q "^das:" .agents/skills/claude-wireframe-skill/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/claude-wireframe-skill ] && echo "global" || echo "project"
+   ```
+
+   **Global** (installed with `-g`):
+   ```bash
+   npx skills add Magdoub/claude-wireframe-skill --skill claude-wireframe-skill -g -y
+   ```
+
+   **Project** (installed without `-g`):
+   ```bash
+   npx skills add Magdoub/claude-wireframe-skill --skill claude-wireframe-skill -y
+   ```
+
+## Invoke after install
+
+Skill name: `claude-wireframe-skill`, triggers: "claude-wireframe-skill", "5 UX approaches", "exploratory wireframe", "Magdoub wireframe"
+
+## What it does
+
+Launches a multi-agent wireframing workflow that produces 5 distinct UX design approaches for any given UI problem: 1 safe variant that extends the existing design system and 4 exploratory variants that challenge conventions. The skill first scans the codebase to extract persistent design context (colors, components, patterns), then produces black-and-white wireframes before generating color variants in parallel. Useful when you need divergent thinking, not just a single best guess.
+
+## When NOT to use
+
+- Single wireframe output — use wireframe-skill or wireframer instead
+- Excalidraw diagrams — use excalidraw-diagram instead
+- When you want a fast single-pass result without parallel agent overhead

package/skills/claude-wireframe-skill/stub.yaml

@@ -0,0 +1,5 @@
+type: skill
+tier: experimental
+upstream: https://github.com/Magdoub/claude-wireframe-skill
+upstream_path: SKILL.md
+version: latest

package/skills/claude2figma/SKILL.md

@@ -0,0 +1,54 @@
+---
+name: claude2figma
+description: |
+  Four-skill enforcement layer for design system compliance in Figma: ensures
+  components are instances of master components, and colors/fonts/spacing/radii
+  bind to Figma variables and styles. Every canvas write is auto-verified for
+  token compliance.
+triggers:
+  - "claude2figma"
+  - "Figma token compliance"
+  - "Figma variables enforcement"
+  - "design system Figma"
+  - "senlindesign"
+  - "Figma design system enforcement"
+das:
+  type: package
+  category: figma-code
+  upstream: "https://github.com/senlindesign/claude2figma"
+  version: latest
+  install: false
+---
+
+# claude2figma
+
+> Catalogue stub — full package: [senlindesign/claude2figma](https://github.com/senlindesign/claude2figma)
+
+## Decision tree
+
+1. **Is the skill already installed?** Check `~/.design-agent-skills/skills/` for `claude2figma` or related skill directories.
+   - Yes → invoke and proceed
+   - No → go to step 2
+
+2. **Shell access?** Yes → install below. No → show user the command.
+
+## Install command
+
+```bash
+npx skills add senlindesign/claude2figma
+```
+
+## Invoke after install
+
+- Skill name: `claude2figma`
+- Triggers: "claude2figma", "Figma token compliance", "Figma variables enforcement", "design system Figma"
+
+## What it does
+
+An enforcement layer comprising four skills that ensure every Figma canvas write complies with your design system. Verifies that placed components are instances of master components (not detached), and that all color, typography, spacing, and border-radius values are bound to Figma variables and styles rather than raw values. Auto-verifies compliance after every canvas operation.
+
+## When NOT to use
+
+- Reading or auditing existing Figma designs — use `figma-official-skills` (Figma MCP)
+- Code-to-design without a token-based design system
+- Token architecture outside Figma — use `design-tokens-skill`

package/skills/claude2figma/stub.yaml

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