design-engineering
Design Engineering — Skill Router
Full-lifecycle design engineering: plan, build, style, review, refine, harden, and ship production-grade interfaces that avoid generic AI aesthetics.
Consolidated from: 28 specialized design skills | Architecture: 24 reference files across 6 lifecycle phases
Reference Files
| Reference | File | Read When |
|---|---|---|
| Overview & Philosophy | references/00-overview.md |
Core principles, anti-slop manifesto, config dials, "what is this" |
| Context Gathering | references/01-context-gathering.md |
First time on project, no design context, setup, "teach me the project" |
| Shape & Discovery | references/02-shape-discovery.md |
Plan a feature before coding, UX planning, discovery interview, design brief |
| Craft Flow | references/03-craft-flow.md |
Step-by-step build process, implementation order, "how do I build this" |
| Typography | references/04-typography.md |
Fonts, type hierarchy, readability, sizing, weight, font selection |
| Color System | references/05-color-system.md |
Color, palette, theme, accent, contrast, dark mode, OKLCH |
| Layout & Spacing | references/06-layout-spacing.md |
Layout, spacing, grid, alignment, rhythm, composition, visual hierarchy |
| Motion & Delight | references/07-motion-delight.md |
Animation, transitions, micro-interactions, delight, wow, spring physics |
| Interaction Design | references/08-interaction.md |
Forms, buttons, states, focus, modals, dropdowns, accessibility patterns |
| UX Copy & Onboarding | references/09-ux-copy.md |
Copy, labels, errors, empty states, onboarding, microcopy, UX writing |
| Responsive Design | references/10-responsive.md |
Mobile, breakpoints, touch, viewport, adaptation, cross-device |
| Style Archetypes | references/11-style-archetypes.md |
Minimalist, brutalist, editorial, agency, high-end — routes to sub-files |
| Critique & Evaluation | references/12-critique-evaluate.md |
Critique, review, audit, evaluate, score, heuristics — routes to sub-files |
| Refine & Intensity | references/13-refine-intensity.md |
Polish, bolder, quieter, simplify, distill, finishing touches |
| Design System | references/14-design-system.md |
Design tokens, normalize, extract components, reusable patterns |
| Harden & Production | references/15-harden-production.md |
Edge cases, i18n, performance, production-ready, optimize, Core Web Vitals |
| Redesign & Upgrade | references/16-redesign-upgrade.md |
Redesign existing project, upgrade generic UI, fix AI-looking patterns |
| Anti-Patterns Bible | references/17-anti-patterns.md |
"What NOT to do", banned patterns, AI tells, slop detection checklist |
Quick Reference
- Starting a new project? Read 01 → 02 → 03
- Building a feature? Read 03 + relevant build refs (04-10)
- Want a specific style? Read 11 → pick archetype
- Reviewing/critiquing? Read 12 → pick evaluation type
- Finishing/shipping? Read 13 → 15
- Fixing existing UI? Read 16 + 17
Install This Skill
# Via Smithery (any platform)
smithery install design-engineering
# Manual — copy this folder to your platform's skill directory:
# Claude Code: .claude/skills/design-engineering/ or ~/.claude/skills/design-engineering/
# Gemini CLI: .gemini/skills/design-engineering/ or ~/.gemini/skills/design-engineering/
# Cursor: .cursor/skills/design-engineering/ or ~/.cursor/skills/design-engineering/
# Windsurf: .windsurf/skills/design-engineering/ or ~/.codeium/windsurf/skills/design-engineering/
# Codex: .codex/skills/design-engineering/ or ~/.codex/skills/design-engineering/
# Trae: .trae/skills/design-engineering/ or ~/.trae/skills/design-engineering/
# Antigravity: .agent/skills/design-engineering/ or ~/.gemini/antigravity/skills/design-engineering/
Version Tracking
- Skill version: 1.0.0 | Snapshot: 2026-04-09
- Version metadata:
VERSION.json - Update checker:
python scripts/check-updates.py - Changelog:
CHANGELOG.md
More from abhisheksharma-17/skills-graph
agno
Build AI agents, multi-agent teams, and agentic workflows using the Agno framework. MANDATORY TRIGGERS: Agno, agno-agi, AgentOS, any mention of the Agno framework. Also trigger when the user wants to build AI agents with tools/memory/knowledge, create multi-agent systems, RAG pipelines, reasoning agents, agentic workflows, or deploy agents to production. Trigger even if the user just says 'build me an agent', 'create an AI assistant', or 'make a chatbot' — if Agno is anywhere in their stack or project dependencies. When in doubt about whether to use this skill for agent-building tasks, use it.
10remotion-prompt-generator
Generate detailed, production-ready prompts for the Remotion Dev skill to create programmatic React-based videos. MANDATORY TRIGGERS: remotion prompt, video prompt, generate video prompt, remotion video, create video prompt, video brief, video specification, make a video, create a video. Also trigger when user wants to create any kind of video using Remotion, needs help describing a video project, wants a prompt for a video generation tool, or asks for a video brief/spec. When in doubt, use it.
7litellm
Unified LLM gateway and SDK for calling 100+ LLM providers (OpenAI, Anthropic, Bedrock, Vertex, Azure, Ollama, etc.) with a single OpenAI-compatible interface. MANDATORY TRIGGERS: litellm, litellm proxy, litellm router, litellm.completion, llm gateway, multi-provider llm, openai-compatible proxy, model fallback, llm cost tracking, llm load balancing. Also trigger when user wants to switch LLM providers without rewriting code, route requests across multiple models, add fallbacks/retries to LLM calls, track token costs, run a self-hosted OpenAI-compatible proxy, or unify observability across providers. When in doubt about whether to use this skill for any multi-provider LLM task, use it.
1livekit
Build realtime voice, video, and AI agent applications with LiveKit. MANDATORY TRIGGERS: livekit, live kit, voice agent, voice AI, realtime audio, realtime video, WebRTC agent, speech-to-speech, voice pipeline, voice assistant framework. Also trigger when user wants to build voice AI agents, realtime communication apps, telephony integrations, video conferencing, or multimodal AI agents with audio/video. When in doubt about whether to use this skill for realtime media or voice AI tasks, use it.
1claude-agent-sdk
Build AI agents programmatically with the Claude Agent SDK (Python and TypeScript). Provides the same tools, agent loop, and context management that power Claude Code, but as a library. MANDATORY TRIGGERS: claude-agent-sdk, claude agent sdk, claude_agent_sdk, @anthropic-ai/claude-agent-sdk, ClaudeAgentOptions, ClaudeSDKClient. Also trigger when user wants to build AI agents with Claude programmatically, create agent loops with tools, use Claude Code SDK, orchestrate subagents, or deploy autonomous coding agents. When in doubt about whether to use this skill for agent SDK tasks, use it.
1