abhisheksharma-17/design-engineering
skills/design-engineering/SKILL.md
Comprehensive frontend design engineering system covering the full design lifecycle — planning, building, styling, reviewing, refining, hardening, and upgrading interfaces. MANDATORY TRIGGERS: design, UI, UX, frontend, interface, component, layout, typography, color, animation, responsive, accessibility, critique, audit, polish, redesign, design system, onboarding, micro-interactions, visual design. Also trigger when user asks to build a page, create a component, review a design, improve typography, add animation, fix layout, audit accessibility, redesign an existing project, add delight, make it look professional, or any frontend visual/interaction task. When in doubt about whether to use this skill for any design or frontend task, use it.
development
Updated Apr 11, 2026
$ install --global
skillsauthnpx skillsauth add abhisheksharma-17/skills-graph design-engineeringInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 11, 2026, 3:42 AM14.8s32 files scanned
SKILL.md
- name:
- design-engineering
- description:
- Comprehensive frontend design engineering system covering the full design lifecycle — planning, building, styling, reviewing, refining, hardening, and upgrading interfaces. MANDATORY TRIGGERS: design, UI, UX, frontend, interface, component, layout, typography, color, animation, responsive, accessibility, critique, audit, polish, redesign, design system, onboarding, micro-interactions, visual design. Also trigger when user asks to build a page, create a component, review a design, improve typography, add animation, fix layout, audit accessibility, redesign an existing project, add delight, make it look professional, or any frontend visual/interaction task. When in doubt about whether to use this skill for any design or frontend task, use it.
- license:
- MIT
- version:
- 1.0.0
- author:
- Abhishek Sharma
- tags:
- ["design", "frontend", "ui", "ux", "typography", "color", "layout", "animation", "accessibility", "design-system"]
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
Related Skills
abhisheksharma-17/vllm
development
VerifiedTrustedCommunity
High-throughput LLM inference and serving engine with PagedAttention, continuous batching, and OpenAI-compatible API. MANDATORY TRIGGERS: vLLM, vllm, LLM serving, LLM inference engine, PagedAttention. Also trigger when the user wants to serve LLMs in production, deploy models with tensor parallelism, use speculative decoding, quantize models for inference, build OpenAI-compatible API servers, or optimize LLM throughput and latency. When in doubt about whether to use this skill for LLM serving tasks, use it.
1SKILL.mdUpdated Jun 12, 2026
abhisheksharma-17/pydantic-ai
tools
VerifiedTrustedCommunity
Type-safe Python agent framework for building production-grade GenAI applications with Pydantic validation, structured outputs, and dependency injection. MANDATORY TRIGGERS: pydantic-ai, pydantic_ai, PydanticAI, pydantic ai agent. Also trigger when the user wants to build type-safe AI agents in Python, create structured LLM outputs with Pydantic models, implement dependency injection for agents, use tools/capabilities with LLMs, or build multi-agent systems with Python type safety. When in doubt about whether to use this skill for Python AI agent tasks, use it.
1SKILL.mdUpdated Jun 11, 2026
abhisheksharma-17/temporal
development
VerifiedTrustedCommunity
Durable execution platform for building fault-tolerant workflows, long-running processes, and resilient distributed applications. MANDATORY TRIGGERS: temporal, temporal.io, temporalio, durable execution, workflow orchestration engine. Also trigger when the user wants to build fault-tolerant workflows, implement saga patterns, create long-running distributed processes, orchestrate microservices with retries and timeouts, or build durable AI agent pipelines. When in doubt about whether to use this skill for workflow orchestration or durable execution tasks, use it.
1SKILL.mdUpdated Jun 9, 2026
abhisheksharma-17/llamaindex
tools
VerifiedTrustedCommunity
AI framework for building RAG pipelines, agents, workflows, and data-augmented LLM applications with 300+ integrations. MANDATORY TRIGGERS: llamaindex, llama-index, llama_index, LlamaIndex, VectorStoreIndex, SimpleDirectoryReader, LlamaHub, LlamaParse. Also trigger when the user wants to build RAG applications with LlamaIndex, create document indexing pipelines, build agentic workflows with tool calling, implement structured data extraction from documents, or connect LLMs to custom data sources. When in doubt about whether to use this skill for RAG, document indexing, or LLM data augmentation tasks, use it.
1SKILL.mdUpdated Jun 7, 2026