About design-engineering-catalogue
A domain navigator that catalogs skills for visual design, UI, branding, color, typography, and mobile design. It helps users find a focused skill for design tasks and points to `design-catalogue` for the broader catalogue.
Key features
- 01Visual design and UI skill directory
- 02Brand, color, and typography references
- 03Mobile and platform design skills
- 04Interaction and polish resources
Use cases
- 01Finding a skill for a UI redesign
- 02Exploring typography or color guidance
- 03Choosing mobile design references
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/design-engineering-cataloguein Claude Code to confirm it loaded.
Bundled filesstub.yaml
Details
From the project READMEdesign-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 |
Comments
Markdown supported