Design Engineering Catalogue

Domain navigator for UI craft, visual design, brand, color, typography, mobile design, and interactive design engineering skills. Routes to skills for taste-driven UI, platform design (iOS/Android), components, color science, and the full visual design stack.

podo cccb277 2 files · 7.3 KB Updated Sep 9, 2026

Install

Press C to copy

$ npx skillmds add podo/design-engineering-catalogue

Installs into ~/.claude/skills (or .claude/skills inside a project). Restart Claude Code to pick it up.

＋ Add to collection

README badge

[![SkillMD](https://skillmd.com/badge/podo/design-engineering-catalogue.svg)](https://skillmd.com/skills/podo/design-engineering-catalogue)

Trust & safety

Audits pending

Not yet audited · commit cccb277

Permissions this skill uses

Reads secrets
The instructions read tokens, keys, or other credentials.

Works with: Claude Code Claude.ai OpenAI Codex +

File contents

design-engineering-catalogue

Domain navigator for visual design, UI craft, brand, color, typography, and mobile design. Activate when the user asks for a skill that shapes how something looks and feels.

→ For the full catalogue across all domains: use design-catalogue.

When to use

Activate when the user:

Wants opinionated UI taste or aesthetic anchors
Needs brand identity, color science, or typography
Designs for iOS, Android, or cross-platform mobile
Wants component systems or design system foundations
Asks for interactive design exploration tools

Design Engineering (opinionated UI taste)

Skill	Best for
`taste-skill`	Premium, non-generic UI — variance, motion, density dials
`impeccable`	23 commands, Chrome extension, Live Mode browser iteration
`make-interfaces-better`	Polish: micro-interactions, typography details, visual refinement
`ui-craft`	18 slash commands, anti-slop CLI, 3 style variants — deepest design engineering skill
`frontend-design`	8 aesthetic anchors (Brutalist, Nordic, Cyberpunk…) with locked CSS tokens per theme
`huashu-design`	Magazine-grade typography, CSS Grid, animated prototypes, MP4 export
`brand-design-md`	Fetches exact tokens for 62 world-class brands (Stripe, Linear, Apple…) at runtime
`ai-graphic-design-skill`	Maps 15 AI tools to design scenarios + 2025-26 Creative Director roadmap
`logo-designer-skill`	Brand interview → 3-5 SVG concepts → PNG export 16px–2048px
`distinctive-frontend`	4 themed design systems (Cyberpunk, Brutalist, Vaporwave, Nordic) with staggered animations
`design-for-ai`	CHECKER (7-category audit) + APPLIER (6-phase creation) dual-mode
`superdesign-skill`	Infinite-canvas ideation: brand extraction, design drafts, IDE-native
`styleseed`	69 design rules, 60+ brand skins (Toss, Stripe, Linear, Vercel…), 13 slash commands
`awesome-design-skills`	67-style aesthetic registry: glassmorphism, brutalism, bento, editorial, riso…
`interaction-design`	IxD principles, component states, micro-interactions, affordances, task flows — Norman + Tognazzini
`format-storybook`	Storybook file structure, template composition, controls, Chromatic visual regression, CSF patterns
`localization-design`	RTL mirroring, per-language text expansion, non-Latin type, cultural color/icon traps
`design-system-governance`	Ownership models, contribution lifecycle, semver contract, deprecation policy

Color, Typography & Components

Skill	Best for
`color-expert`	OKLCH/OKLAB color science, palette generation, contrast
`baseline-ui`	Animation durations, typography scale, Tailwind anti-patterns
`shadcn-ui`	shadcn/ui component workflow
`ui-ux-pro-max`	50+ styles, 97 palettes, 9 tech stacks
`google-fonts-skill`	1,923 Google Fonts with mood tags + 73 pairings + CSS vars + Tailwind config
`design-tokens-skill`	W3C DTCG token spec: OKLCH, references/aliasing, Terrazzo, Figma exports
`ink-google`	Ink-style editorial design for artifacts
`open-design`	31 skills + 71 brand design systems — local-first Claude Design alternative
`material-3-skill`	Material Design 3 / Material You: dynamic color, tonal surfaces, 30+ components (Compose + Flutter)

Mobile & Platform Design

Skill	Best for
`mobile-app-design`	iOS HIG + Android MD3 + RN best practices — 26K words
`mobile-app-ui-design`	Professional mobile UI: intentional, smooth, alive interfaces
`apple-hig-skills`	Apple HIG: iOS, macOS, visionOS, watchOS, tvOS
`hig-doctor`	Diagnose and fix Apple HIG violations
`swiftui-patterns`	SwiftUI view and component best practices
`swiftui-claude-skills`	WWDC 2025 verified SwiftUI, iOS 26.4 RC, Xcode 26
`swiftui-design-skill`	SwiftUI visual design craft — anti-AI-slop, typography, color, brand
`liquid-glass-skill`	iOS 26 Liquid Glass: .glassEffect(), GlassEffectContainer, migration patterns
`platform-design-skills`	300+ HIG/MD3/WCAG rules for cross-platform
`sleek-design-mobile-apps`	Sleek platform: design screens, projects, assets (account req.)

Interaction & Polish

Skill	Best for
`taste-design-stitch`	Aesthetic judgment for Google Stitch output
`design-lab`	Interactive design exploration, variant generation
`interface-design-dammyjay`	Dashboards, admin panels, SaaS information-dense UI
`bencium-ux-designer`	Distinctive, production-grade frontend
`neo-user-journey`	UX journey mapping + Playwright testing + 50+ patterns + Nielsen scoring
`simota-agent-skills`	15 design sub-skills: Vision, Frame (Figma bridge), Pixel, Clay, Ink, Sketch
`design-auditor`	19-category audit: typography, dark mode, RTL, dark patterns; 0-100 score
`composio-artifacts`	Artifacts connected to GitHub/Slack/Linear via Composio
`search-ux`	Search input, autocomplete, ranking, faceted filters, zero-results, search analytics
`interfaces-that-feel`	Emotional design: felt-state → physical analogue → motion/copy/spacing changes
`information-architecture-and-navigation`	Polar-bear IA: organization/labeling/nav/search, taxonomy, wayfinding, findability

---name: design-engineering-cataloguedescription: Domain navigator for UI craft, visual design, brand, color, typography, mobile design, and interactive design engineering skills. Routes to skills for taste-driven UI, platform design (iOS/Android), components, color science, and the full visual design stack.--- # design-engineering-catalogue Domain navigator for visual design, UI craft, brand, color, typography, and mobile design. Activate when the user asks for a skill that shapes how something looks and feels. → For the full catalogue across all domains: use `design-catalogue`. ## When to use Activate when the user: - Wants opinionated UI taste or aesthetic anchors - Needs brand identity, color science, or typography - Designs for iOS, Android, or cross-platform mobile - Wants component systems or design system foundations - Asks for interactive design exploration tools ## Design Engineering (opinionated UI taste) | Skill | Best for | |-------|----------| | [`taste-skill`](../taste-skill/SKILL.md) | Premium, non-generic UI — variance, motion, density dials | | [`impeccable`](../impeccable/SKILL.md) | 23 commands, Chrome extension, Live Mode browser iteration | | [`make-interfaces-better`](../make-interfaces-better/SKILL.md) | Polish: micro-interactions, typography details, visual refinement | | [`ui-craft`](../ui-craft/SKILL.md) | 18 slash commands, anti-slop CLI, 3 style variants — deepest design engineering skill | | [`frontend-design`](../frontend-design/SKILL.md) | 8 aesthetic anchors (Brutalist, Nordic, Cyberpunk…) with locked CSS tokens per theme | | [`huashu-design`](../huashu-design/SKILL.md) | Magazine-grade typography, CSS Grid, animated prototypes, MP4 export | | [`brand-design-md`](../brand-design-md/SKILL.md) | Fetches exact tokens for 62 world-class brands (Stripe, Linear, Apple…) at runtime | | [`ai-graphic-design-skill`](../ai-graphic-design-skill/SKILL.md) | Maps 15 AI tools to design scenarios + 2025-26 Creative Director roadmap | | [`logo-designer-skill`](../logo-designer-skill/SKILL.md) | Brand interview → 3-5 SVG concepts → PNG export 16px–2048px | | [`distinctive-frontend`](../distinctive-frontend/SKILL.md) | 4 themed design systems (Cyberpunk, Brutalist, Vaporwave, Nordic) with staggered animations | | [`design-for-ai`](../design-for-ai/SKILL.md) | CHECKER (7-category audit) + APPLIER (6-phase creation) dual-mode | | [`superdesign-skill`](../superdesign-skill/SKILL.md) | Infinite-canvas ideation: brand extraction, design drafts, IDE-native | | [`styleseed`](../styleseed/SKILL.md) | 69 design rules, 60+ brand skins (Toss, Stripe, Linear, Vercel…), 13 slash commands | | [`awesome-design-skills`](../awesome-design-skills/SKILL.md) | 67-style aesthetic registry: glassmorphism, brutalism, bento, editorial, riso… | | [`interaction-design`](../interaction-design/SKILL.md) | IxD principles, component states, micro-interactions, affordances, task flows — Norman + Tognazzini | | [`format-storybook`](../format-storybook/SKILL.md) | Storybook file structure, template composition, controls, Chromatic visual regression, CSF patterns | | [`localization-design`](../localization-design/SKILL.md) | RTL mirroring, per-language text expansion, non-Latin type, cultural color/icon traps | | [`design-system-governance`](../design-system-governance/SKILL.md) | Ownership models, contribution lifecycle, semver contract, deprecation policy | ## Color, Typography & Components | Skill | Best for | |-------|----------| | [`color-expert`](../color-expert/SKILL.md) | OKLCH/OKLAB color science, palette generation, contrast | | [`baseline-ui`](../baseline-ui/SKILL.md) | Animation durations, typography scale, Tailwind anti-patterns | | [`shadcn-ui`](../shadcn-ui/SKILL.md) | shadcn/ui component workflow | | [`ui-ux-pro-max`](../ui-ux-pro-max/SKILL.md) | 50+ styles, 97 palettes, 9 tech stacks | | [`google-fonts-skill`](../google-fonts-skill/SKILL.md) | 1,923 Google Fonts with mood tags + 73 pairings + CSS vars + Tailwind config | | [`design-tokens-skill`](../design-tokens-skill/SKILL.md) | W3C DTCG token spec: OKLCH, references/aliasing, Terrazzo, Figma exports | | [`ink-google`](../ink-google/SKILL.md) | Ink-style editorial design for artifacts | | [`open-design`](../open-design/SKILL.md) | 31 skills + 71 brand design systems — local-first Claude Design alternative | | [`material-3-skill`](../material-3-skill/SKILL.md) | Material Design 3 / Material You: dynamic color, tonal surfaces, 30+ components (Compose + Flutter) | ## Mobile & Platform Design | Skill | Best for | |-------|----------| | [`mobile-app-design`](../mobile-app-design/SKILL.md) | iOS HIG + Android MD3 + RN best practices — 26K words | | [`mobile-app-ui-design`](../mobile-app-ui-design/SKILL.md) | Professional mobile UI: intentional, smooth, alive interfaces | | [`apple-hig-skills`](../apple-hig-skills/SKILL.md) | Apple HIG: iOS, macOS, visionOS, watchOS, tvOS | | [`hig-doctor`](../hig-doctor/SKILL.md) | Diagnose and fix Apple HIG violations | | [`swiftui-patterns`](../swiftui-patterns/SKILL.md) | SwiftUI view and component best practices | | [`swiftui-claude-skills`](../swiftui-claude-skills/SKILL.md) | WWDC 2025 verified SwiftUI, iOS 26.4 RC, Xcode 26 | | [`swiftui-design-skill`](../swiftui-design-skill/SKILL.md) | SwiftUI visual design craft — anti-AI-slop, typography, color, brand | | [`liquid-glass-skill`](../liquid-glass-skill/SKILL.md) | iOS 26 Liquid Glass: .glassEffect(), GlassEffectContainer, migration patterns | | [`platform-design-skills`](../platform-design-skills/SKILL.md) | 300+ HIG/MD3/WCAG rules for cross-platform | | [`sleek-design-mobile-apps`](../sleek-design-mobile-apps/SKILL.md) | Sleek platform: design screens, projects, assets (account req.) | ## Interaction & Polish | Skill | Best for | |-------|----------| | [`taste-design-stitch`](../taste-design-stitch/SKILL.md) | Aesthetic judgment for Google Stitch output | | [`design-lab`](../design-lab/SKILL.md) | Interactive design exploration, variant generation | | [`interface-design-dammyjay`](../interface-design-dammyjay/SKILL.md) | Dashboards, admin panels, SaaS information-dense UI | | [`bencium-ux-designer`](../bencium-ux-designer/SKILL.md) | Distinctive, production-grade frontend | | [`neo-user-journey`](../neo-user-journey/SKILL.md) | UX journey mapping + Playwright testing + 50+ patterns + Nielsen scoring | | [`simota-agent-skills`](../simota-agent-skills/SKILL.md) | 15 design sub-skills: Vision, Frame (Figma bridge), Pixel, Clay, Ink, Sketch | | [`design-auditor`](../design-auditor/SKILL.md) | 19-category audit: typography, dark mode, RTL, dark patterns; 0-100 score | | [`composio-artifacts`](../composio-artifacts/SKILL.md) | Artifacts connected to GitHub/Slack/Linear via Composio | | [`search-ux`](../search-ux/SKILL.md) | Search input, autocomplete, ranking, faceted filters, zero-results, search analytics | | [`interfaces-that-feel`](../interfaces-that-feel/SKILL.md) | Emotional design: felt-state → physical analogue → motion/copy/spacing changes | | [`information-architecture-and-navigation`](../information-architecture-and-navigation/SKILL.md) | Polar-bear IA: organization/labeling/nav/search, taxonomy, wayfinding, findability |

podo/design-agent-skills/tree/main/skills/design-engineering-catalogue commit cccb277d51

Frequently asked questions

npx skillmds add podo/design-engineering-catalogue