القائمة
Create aesthetically beautiful interfaces following proven design principles. Use when building UI that needs visual polish, micro-interactions, or design system refinement.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Produce .pptx architecture presentations (title, context, component, sequence, deployment slides) with python-pptx. Use when the user asks for an architecture deck, solution presentation, design review slides, or any .pptx deliverable about a system design.
Produce .docx Solution Architecture Documents (SAD) with python-docx — context, requirements, views, decisions, NFRs. Use when the user asks for an architecture document, solution design document, HLD/LLD, or any .docx deliverable describing a system design.
Author Mermaid diagrams for architecture work — C4 context/container/component, sequence, deployment, flowchart, and state diagrams with copy-paste examples and CLI validation. Use when the user wants a text-based diagram, a diagram embedded in Markdown, or a quick architecture sketch.
Create production-grade frontend interfaces when backend services need admin panels, dashboards, or API documentation UIs. Use when building web interfaces for backend services.
Process multimedia files with FFmpeg and ImageMagick for encoding, conversion, and manipulation. Use when working with video, audio, or image processing pipelines.
Template for creating new skills. Copy this directory and customize for your specific use case.
| name | aesthetic |
| description | Create aesthetically beautiful interfaces following proven design principles. Use when building UI that needs visual polish, micro-interactions, or design system refinement. |
Activate this skill when interfaces need visual refinement, micro-interactions, or design system polish.
/* Smooth transitions */
.interactive {
transition: transform 150ms ease, box-shadow 150ms ease;
}
.interactive:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.interactive:active {
transform: scale(0.98);
}