Initial: pi-skill — 68 skills, 43 extensions, 11 themes for Pi

2026-05-25 16:38:02 +07:00
commit 69f7d8bdda
1689 changed files with 342427 additions and 0 deletions
--- a/skills/design-workflow/SKILL.md
+++ b/skills/design-workflow/SKILL.md
@@ -0,0 +1,132 @@
+---
+name: pi:design-workflow
+description: "Design workflow for prototyping, landing pages, dashboards, mobile apps. Uses 5-step process: Discover → Direction → Build → Critique → Export. Triggers on: design, prototype, mockup, landing page, mobile app, UI, wireframe, dashboard."
+argument-hint: "[design-type] [context]"
+license: MIT
+---
+
+# Design Workflow Skill
+
+Agent-native design workflow extracted from Open Design patterns. 
+Use when user wants design work (landing page, prototype, dashboard, etc.)
+
+## Trigger Keywords
+
+design, prototype, mockup, landing page, mobile app, UI, wireframe, Figma, dashboard, deck, slide
+
+## Workflow: 5 Steps
+
+### Step 1: DISCOVER
+Ask user for brief using this form:
+
+```
+<question-form id="design-brief">
+{
+  "description": "Design brief — 30 seconds to lock the direction",
+  "questions": [
+    {
+      "id": "taskType",
+      "label": "What should I build?",
+      "type": "radio",
+      "required": true,
+      "options": ["Prototype", "Landing page", "Slide deck", "Dashboard", "Mobile app", "Other"]
+    },
+    {
+      "id": "audience",
+      "label": "Who is this for?",
+      "type": "text",
+      "placeholder": "e.g. early-stage investors, dev-tools buyers"
+    },
+    {
+      "id": "brand",
+      "label": "Brand context",
+      "type": "radio",
+      "options": [
+        { "label": "Pick direction for me", "value": "pick_direction" },
+        { "label": "I have a brand spec", "value": "brand_spec" },
+        { "label": "Match a reference", "value": "reference_match" }
+      ]
+    },
+    {
+      "id": "scale",
+      "label": "Roughly how much?",
+      "type": "text",
+      "placeholder": "e.g. 8 slides, 1 landing + 3 pages, 4 mobile screens"
+    },
+    {
+      "id": "constraints",
+      "label": "Any constraints?",
+      "type": "textarea",
+      "placeholder": "Audience, format, length, references, things to avoid..."
+    }
+  ]
+}
+</question-form>
+```
+
+### Step 2: DIRECTION
+If user chose "Pick direction for me", present 5 visual schools:
+
+| School | Mood | Fonts | Palette |
+|--------|------|-------|---------|
+| **Editorial Monocle** | Print-magazine, generous whitespace | Iowan Old Style + system | Neutral paper + ink + editorial red |
+| **Modern Minimal** | Software-native, precise | SF Pro + system | Crisp whites + cobalt accent |
+| **Warm Soft** | Approachable, friendly | Plus Jakarta Sans + system | Warm cream + coral/sage |
+| **Tech Utility** | Dense, information-focused | JetBrains Mono + system | Dark bg + electric accent |
+| **Brutalist Experimental** | Raw, bold, unconventional | Archivo Black + system | High contrast + neon |
+
+### Step 3: BUILD
+
+1. Set up project folder
+2. Create HTML with design system CSS
+3. Use appropriate template pattern
+4. Generate artifact
+
+Design System CSS pattern:
+```css
+:root {
+  --bg: oklch(98% 0.004 95);
+  --surface: oklch(100% 0.002 95);
+  --fg: oklch(20% 0.018 70);
+  --muted: oklch(48% 0.012 70);
+  --border: oklch(90% 0.006 95);
+  --accent: oklch(52% 0.10 28);
+}
+```
+
+### Step 4: CRITIQUE (5 Dimensions)
+
+1. **Philosophy** — Does it match brand/audience?
+2. **Visual Hierarchy** — Is information structured correctly?
+3. **Detail Execution** — Are elements polished?
+4. **Functional** — Does it work across devices?
+5. **Innovation** — Does it feel fresh, not generic?
+
+### Step 5: EXPORT
+
+Formats: HTML (primary), PDF, PPTX, MP4
+
+## Design Systems Available
+
+Use these as starting points:
+- Linear, Vercel, Stripe, Notion (minimal)
+- Apple, Airbnb, Tesla (product)
+- Anthropic, Figma, Supabase (tech)
+- Or create custom with OKLch palette
+
+## Commands
+
+```
+/design         - Start design workflow
+/design-brief   - Show brief form
+/design-dir     - Show direction options
+/design-build   - Build with current brief
+```
+
+## Anti-AI-Slop Checklist
+
+- [ ] No generic stock-photo aesthetic
+- [ ] Typography is intentional (not just "elegant")
+- [ ] Colors have semantic purpose, not decoration
+- [ ] Layout creates hierarchy, not just fills space
+- [ ] Interaction states are designed, not missing