Menu
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/deathrashed/agents --skill designThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Showing SKILL.md
Based on SOC occupation classification
| name | design |
| description | Design UI/UX with multiple modes (Designer Agent) |
Design request:
Task: {{args}}
| Mode | Trigger | Speed | Output |
|---|---|---|---|
| FAST | "fast", "quick" | 60-120s | Rapid mockup |
| GOOD | "good", "production" | 3-5min | Production-ready |
| UI | "ui", "visual" | 2-3min | Wireframes, layout |
| UX | "ux", "flow" | 2-3min | User flows |
| 3D | "3d", "three" | 3-5min | Three.js scene |
| DESCRIBE | "describe", "extract" | 1min | Extract from image |
| AUDIT | "audit", "wcag" | 2min | Accessibility check |
| SYSTEM | "system", "tokens" | 3min | Design tokens |
Quick mockup with:
Full implementation with:
// Three.js setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, w/h, 0.1, 1000);
// Orbit controls
const controls = new OrbitControls(camera, renderer.domElement);
// PBR Materials + HDR Lighting
const material = new THREE.MeshStandardMaterial({
map: texture,
roughness: 0.5,
metalness: 0.3
});
Output: 360° rotation, zoom/pan, color variants
Input: Screenshot/image path Output:
| Property | Value |
|---|---|
| Primary Color | #3B82F6 |
| Secondary | #10B981 |
| Font | Inter |
| Heading Size | 48px |
| Spacing | 8px grid |
| Border Radius | 8px |
backdrop-blur-md bg-white/10| Metric | Target | How |
|---|---|---|
| LCP | <2.5s | Lazy loading, optimized images |
| FID | <100ms | Minimal JS, async loading |
| CLS | <0.1 | Reserved space, font-display |
+-----------------------------------+
| [Logo] [Profile] |
|-----------------------------------|
| Hero Title |
| [ CTA Button ] |
|-----------------------------------|
| [Card 1] [Card 2] [Card 3] |
+-----------------------------------+
graph TD
A[Start] --> B{Condition}
B -- Yes --> C[Screen 1]
B -- No --> D[Screen 2]
C --> E[End]
interface ButtonProps {
variant: 'primary' | 'secondary' | 'ghost';
size: 'sm' | 'md' | 'lg';
}
Tailwind:
bg-blue-600 hover:bg-blue-700 text-whitegrid grid-cols-4 gap-4 auto-rows-[200px]backdrop-blur-md bg-white/10 border border-white/20Key Takeaway: Ship award-winning interfaces in minutes. WCAG + Lighthouse 90+ out of the box.