devskill 2.0.6 → 2.0.8

package/skills/pdftk-server/references/third-party-materials.md

@@ -0,0 +1,103 @@
+# Third-Party Materials
+
+PDFtk Server (pdftk) uses third-party libraries. Depending on the target operating system, some of these are linked or distributed with pdftk. These are their licensing terms.
+
+## GCC libgcj
+
+The libgcj library is licensed under the terms of the GNU General Public License.
+
+Linking this library statically or dynamically with other modules is making a combined work based on this library. Thus, the terms and conditions of the GNU General Public License cover the whole combination.
+
+As a special exception, the copyright holders of this library give you permission to link this library with independent modules to produce an executable, regardless of the license terms of these independent modules, and to copy and distribute the resulting executable under terms of your choice, provided that you also meet, for each linked independent module, the terms and conditions of the license of that module. An independent module is a module which is not derived from or based on this library. If you modify this library, you may extend this exception to your version of the library, but you are not obligated to do so. If you do not wish to do so, delete this exception statement from your version.
+
+[Click to read the GNU General Public License Version 2.](https://www.pdflabs.com/docs/pdftk-license/gnu_general_public_license_2.txt)
+
+Libgcj is part of GCC, so you can find its source code in the GCC [source code](https://gcc.gnu.org/gcc-4.5/).
+
+## GCC libgcc and libstdc++
+
+GCC is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 3, or (at your option) any later version.
+
+GCC is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+
+Under Section 7 of GPL version 3, you are granted additional permissions described in the GCC Runtime Library Exception, version 3.1, as published by the Free Software Foundation.
+
+[Click to read the GNU General Public License Version 3](https://www.pdflabs.com/docs/pdftk-license/gnu_general_public_license_3.0.txt).
+
+[Click to read the GCC Runtime Library Exception Version 3.1](https://www.pdflabs.com/docs/pdftk-license/gcc_runtime_library_exception_3.1.txt).
+
+Libgcc and libstdc++ are part of GCC, so you can find their source code in the GCC [source code](https://gcc.gnu.org/gcc-4.5/).
+
+## GNU Classpath
+
+GNU Classpath is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2, or (at your option) any later version.
+
+GNU Classpath is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License along with GNU Classpath; see the file COPYING. If not, write to the Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA.
+
+Linking this library statically or dynamically with other modules is making a combined work based on this library. Thus, the terms and conditions of the GNU General Public License cover the whole combination.
+
+As a special exception, the copyright holders of this library give you permission to link this library with independent modules to produce an executable, regardless of the license terms of these independent modules, and to copy and distribute the resulting executable under terms of your choice, provided that you also meet, for each linked independent module, the terms and conditions of the license of that module. An independent module is a module which is not derived from or based on this library. If you modify this library, you may extend this exception to your version of the library, but you are not obligated to do so. If you do not wish to do so, delete this exception statement from your version.
+
+[Click to read the GNU General Public License Version 2](https://www.pdflabs.com/docs/pdftk-license/gnu_general_public_license_2.txt).
+
+Classpath is part of GCC, so you can find its source code in the [GCC source code](https://gcc.gnu.org/gcc-4.5/).
+
+## Bouncy Castle
+
+The Bouncy Castle License
+
+Copyright (c) 2000-2008 The Legion Of The Bouncy Castle (http://www.bouncycastle.org)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Download the Bouncy Castle source code from: http://www.bouncycastle.org/.
+
+## iText (itext-paulo)
+
+This library is free software; you can redistribute it and/or modify it under the terms of the GNU Library General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.
+
+This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Library General Public License for more details.
+
+[Click to read the GNU Library General Public License Version 2](https://www.pdflabs.com/docs/pdftk-license/gnu_lgpl_license_2.txt).
+
+The iText source code used in pdftk is slightly modified from its original version. This modified version is included with the [pdftk source code](https://www.pdflabs.com/tools/pdftk-the-pdf-toolkit/).
+
+## MinGW Runtimes (Windows Only)
+
+MinGW runtime: The MinGW base runtime package has been placed in the public domain, and is not governed by copyright. This basically means that you can do what you like with the code.
+
+w32api: You are free to use, modify and copy this package. No restrictions are imposed on programs or object files linked with this library. You may not restrict the usage of this library. You may distribute this library as part of another package or as a modified package if, and only if, you do not restrict the usage of the portions consisting of this (optionally modified) library. If distributed as a modified package, then a copy of this notice must be included.
+
+This library is distributed in the hope that it will be useful, but WITHOUT WARRANTY OF ANY KIND; without even the implied warranties of MERCHANTABILITY or of FITNESS FOR A PARTICULAR PURPOSE.
+
+Download the MinGW runtime source code from: http://mingw.org/.
+
+## Libiconv
+
+The GNU LIBICONV Library is free software; you can redistribute it and/or modify it under the terms of the GNU Library General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.
+
+The GNU LIBICONV Library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Library General Public License for more details.
+
+[Click to read the GNU Library General Public License](https://www.pdflabs.com/docs/pdftk-license/gnu_lgpl_license_2.txt).
+
+Download the libiconv source code from: http://www.gnu.org/software/libiconv/
+
+## Apache Batik
+
+Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to You under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+
+[Click to read the Apache License Version 2.0](https://www.pdflabs.com/docs/pdftk-license/apache_license_2.txt).
+
+[Click to read the Apache Batik NOTICE file](https://www.pdflabs.com/docs/pdftk-license/apache_batik_NOTICE.txt).
+
+Download the Apache Batik source code from: http://xmlgraphics.apache.org/batik/.

package/skills/penpot-uiux-design/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright GitHub, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/skills/penpot-uiux-design/SKILL.md

@@ -0,0 +1,342 @@
+---
+name: penpot-uiux-design
+description: 'Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library".'
+---
+
+# Penpot UI/UX Design Guide
+
+Create professional, user-centered designs in Penpot using the `penpot/penpot-mcp` MCP server and proven UI/UX principles.
+
+## Available MCP Tools
+
+| Tool | Purpose |
+| ---- | ------- |
+| `mcp__penpot__execute_code` | Run JavaScript in Penpot plugin context to create/modify designs |
+| `mcp__penpot__export_shape` | Export shapes as PNG/SVG for visual inspection |
+| `mcp__penpot__import_image` | Import images (icons, photos, logos) into designs |
+| `mcp__penpot__penpot_api_info` | Retrieve Penpot API documentation |
+
+## MCP Server Setup
+
+The Penpot MCP tools require the `penpot/penpot-mcp` server running locally. For detailed installation and troubleshooting, see [setup-troubleshooting.md](references/setup-troubleshooting.md).
+
+### Before Setup: Check If Already Running
+
+**Always check if the MCP server is already available before attempting setup:**
+
+1. **Try calling a tool first**: Attempt `mcp__penpot__penpot_api_info` - if it succeeds, the server is running and connected. No setup needed.
+
+2. **If the tool fails**, ask the user:
+   > "The Penpot MCP server doesn't appear to be connected. Is the server already installed and running? If so, I can help troubleshoot. If not, I can guide you through the setup."
+
+3. **Only proceed with setup instructions if the user confirms the server is not installed.**
+
+### Quick Start (Only If Not Installed)
+
+```bash
+# Clone and install
+git clone https://github.com/penpot/penpot-mcp.git
+cd penpot-mcp
+npm install
+
+# Build and start servers
+npm run bootstrap
+```
+
+Then in Penpot:
+1. Open a design file
+2. Go to **Plugins** → **Load plugin from URL**
+3. Enter: `http://localhost:4400/manifest.json`
+4. Click **"Connect to MCP server"** in the plugin UI
+
+### VS Code Configuration
+
+Add to `settings.json`:
+```json
+{
+  "mcp": {
+    "servers": {
+      "penpot": {
+        "url": "http://localhost:4401/sse"
+      }
+    }
+  }
+}
+```
+
+### Troubleshooting (If Server Is Installed But Not Working)
+
+| Issue | Solution |
+| ----- | -------- |
+| Plugin won't connect | Check servers are running (`npm run start:all` in penpot-mcp dir) |
+| Browser blocks localhost | Allow local network access prompt, or disable Brave Shield, or try Firefox |
+| Tools not appearing in client | Restart VS Code/Claude completely after config changes |
+| Tool execution fails/times out | Ensure Penpot plugin UI is open and shows "Connected" |
+| "WebSocket connection failed" | Check firewall allows ports 4400, 4401, 4402 |
+
+## Quick Reference
+
+| Task | Reference File |
+| ---- | -------------- |
+| MCP server installation & troubleshooting | [setup-troubleshooting.md](references/setup-troubleshooting.md) |
+| Component specs (buttons, forms, nav) | [component-patterns.md](references/component-patterns.md) |
+| Accessibility (contrast, touch targets) | [accessibility.md](references/accessibility.md) |
+| Screen sizes & platform specs | [platform-guidelines.md](references/platform-guidelines.md) |
+
+## Core Design Principles
+
+### The Golden Rules
+
+1. **Clarity over cleverness**: Every element must have a purpose
+2. **Consistency builds trust**: Reuse patterns, colors, and components
+3. **User goals first**: Design for tasks, not features
+4. **Accessibility is not optional**: Design for everyone
+5. **Test with real users**: Validate assumptions early
+
+### Visual Hierarchy (Priority Order)
+
+1. **Size**: Larger = more important
+2. **Color/Contrast**: High contrast draws attention
+3. **Position**: Top-left (LTR) gets seen first
+4. **Whitespace**: Isolation emphasizes importance
+5. **Typography weight**: Bold stands out
+
+## Design Workflow
+
+1. **Check for design system first**: Ask user if they have existing tokens/specs, or discover from current Penpot file
+2. **Understand the page**: Call `mcp__penpot__execute_code` with `penpotUtils.shapeStructure()` to see hierarchy
+3. **Find elements**: Use `penpotUtils.findShapes()` to locate elements by type or name
+4. **Create/modify**: Use `penpot.createBoard()`, `penpot.createRectangle()`, `penpot.createText()` etc.
+5. **Apply layout**: Use `addFlexLayout()` for responsive containers
+6. **Validate**: Call `mcp__penpot__export_shape` to visually check your work
+
+## Design System Handling
+
+**Before creating designs, determine if the user has an existing design system:**
+
+1. **Ask the user**: "Do you have a design system or brand guidelines to follow?"
+2. **Discover from Penpot**: Check for existing components, colors, and patterns
+
+```javascript
+// Discover existing design patterns in current file
+const allShapes = penpotUtils.findShapes(() => true, penpot.root);
+
+// Find existing colors in use
+const colors = new Set();
+allShapes.forEach(s => {
+  if (s.fills) s.fills.forEach(f => colors.add(f.fillColor));
+});
+
+// Find existing text styles (font sizes, weights)
+const textStyles = allShapes
+  .filter(s => s.type === 'text')
+  .map(s => ({ fontSize: s.fontSize, fontWeight: s.fontWeight }));
+
+// Find existing components
+const components = penpot.library.local.components;
+
+return { colors: [...colors], textStyles, componentCount: components.length };
+```
+
+**If user HAS a design system:**
+
+- Use their specified colors, spacing, typography
+- Match their existing component patterns
+- Follow their naming conventions
+
+**If user has NO design system:**
+
+- Use the default tokens below as a starting point
+- Offer to help establish consistent patterns
+- Reference specs in [component-patterns.md](references/component-patterns.md)
+
+## Key Penpot API Gotchas
+
+- `width`/`height` are READ-ONLY → use `shape.resize(w, h)`
+- `parentX`/`parentY` are READ-ONLY → use `penpotUtils.setParentXY(shape, x, y)`
+- Use `insertChild(index, shape)` for z-ordering (not `appendChild`)
+- Flex children array order is REVERSED for `dir="column"` or `dir="row"`
+- After `text.resize()`, reset `growType` to `"auto-width"` or `"auto-height"`
+
+## Positioning New Boards
+
+**Always check existing boards before creating new ones** to avoid overlap:
+
+```javascript
+// Find all existing boards and calculate next position
+const boards = penpotUtils.findShapes(s => s.type === 'board', penpot.root);
+let nextX = 0;
+const gap = 100; // Space between boards
+
+if (boards.length > 0) {
+  // Find rightmost board edge
+  boards.forEach(b => {
+    const rightEdge = b.x + b.width;
+    if (rightEdge + gap > nextX) {
+      nextX = rightEdge + gap;
+    }
+  });
+}
+
+// Create new board at calculated position
+const newBoard = penpot.createBoard();
+newBoard.x = nextX;
+newBoard.y = 0;
+newBoard.resize(375, 812);
+```
+
+**Board spacing guidelines:**
+
+- Use 100px gap between related screens (same flow)
+- Use 200px+ gap between different sections/flows
+- Align boards vertically (same y) for visual organization
+- Group related screens horizontally in user flow order
+
+## Default Design Tokens
+
+**Use these defaults only when user has no design system. Always prefer user's tokens if available.**
+
+### Spacing Scale (8px base)
+
+| Token | Value | Usage |
+| ----- | ----- | ----- |
+| `spacing-xs` | 4px | Tight inline elements |
+| `spacing-sm` | 8px | Related elements |
+| `spacing-md` | 16px | Default padding |
+| `spacing-lg` | 24px | Section spacing |
+| `spacing-xl` | 32px | Major sections |
+| `spacing-2xl` | 48px | Page-level spacing |
+
+### Typography Scale
+
+| Level | Size | Weight | Usage |
+| ----- | ---- | ------ | ----- |
+| Display | 48-64px | Bold | Hero headlines |
+| H1 | 32-40px | Bold | Page titles |
+| H2 | 24-28px | Semibold | Section headers |
+| H3 | 20-22px | Semibold | Subsections |
+| Body | 16px | Regular | Main content |
+| Small | 14px | Regular | Secondary text |
+| Caption | 12px | Regular | Labels, hints |
+
+### Color Usage
+
+| Purpose | Recommendation |
+| ------- | -------------- |
+| Primary | Main brand color, CTAs |
+| Secondary | Supporting actions |
+| Success | #22C55E range (confirmations) |
+| Warning | #F59E0B range (caution) |
+| Error | #EF4444 range (errors) |
+| Neutral | Gray scale for text/borders |
+
+## Common Layouts
+
+### Mobile Screen (375×812)
+
+```text
+┌─────────────────────────────┐
+│ Status Bar (44px)           │
+├─────────────────────────────┤
+│ Header/Nav (56px)           │
+├─────────────────────────────┤
+│                             │
+│ Content Area                │
+│ (Scrollable)                │
+│ Padding: 16px horizontal    │
+│                             │
+├─────────────────────────────┤
+│ Bottom Nav/CTA (84px)       │
+└─────────────────────────────┘
+
+```
+
+### Desktop Dashboard (1440×900)
+
+```text
+┌──────┬──────────────────────────────────┐
+│      │ Header (64px)                    │
+│ Side │──────────────────────────────────│
+│ bar  │ Page Title + Actions             │
+│      │──────────────────────────────────│
+│ 240  │ Content Grid                     │
+│ px   │ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │
+│      │ │Card │ │Card │ │Card │ │Card │ │
+│      │ └─────┘ └─────┘ └─────┘ └─────┘ │
+│      │                                  │
+└──────┴──────────────────────────────────┘
+
+```
+
+## Component Checklist
+
+### Buttons
+
+- [ ] Clear, action-oriented label (2-3 words)
+- [ ] Minimum touch target: 44×44px
+- [ ] Visual states: default, hover, active, disabled, loading
+- [ ] Sufficient contrast (3:1 against background)
+- [ ] Consistent border radius across app
+
+### Forms
+
+- [ ] Labels above inputs (not just placeholders)
+- [ ] Required field indicators
+- [ ] Error messages adjacent to fields
+- [ ] Logical tab order
+- [ ] Input types match content (email, tel, etc.)
+
+### Navigation
+
+- [ ] Current location clearly indicated
+- [ ] Consistent position across screens
+- [ ] Maximum 7±2 top-level items
+- [ ] Touch-friendly on mobile (48px targets)
+
+## Accessibility Quick Checks
+
+1. **Color contrast**: Text 4.5:1, Large text 3:1
+2. **Touch targets**: Minimum 44×44px
+3. **Focus states**: Visible keyboard focus indicators
+4. **Alt text**: Meaningful descriptions for images
+5. **Hierarchy**: Proper heading levels (H1→H2→H3)
+6. **Color independence**: Never rely solely on color
+
+## Design Review Checklist
+
+Before finalizing any design:
+
+- [ ] Visual hierarchy is clear
+- [ ] Consistent spacing and alignment
+- [ ] Typography is readable (16px+ body text)
+- [ ] Color contrast meets WCAG AA
+- [ ] Interactive elements are obvious
+- [ ] Mobile-friendly touch targets
+- [ ] Loading/empty/error states considered
+- [ ] Consistent with design system
+
+## Validating Designs
+
+Use these validation approaches with `mcp__penpot__execute_code`:
+
+| Check | Method |
+| ----- | ------ |
+| Elements outside bounds | `penpotUtils.analyzeDescendants()` with `isContainedIn()` |
+| Text too small (<12px) | `penpotUtils.findShapes()` filtering by `fontSize` |
+| Missing contrast | Call `mcp__penpot__export_shape` and visually inspect |
+| Hierarchy structure | `penpotUtils.shapeStructure()` to review nesting |
+
+### Export CSS
+
+Use `penpot.generateStyle(selection, { type: 'css', includeChildren: true })` via `mcp__penpot__execute_code` to extract CSS from designs.
+
+## Tips for Great Designs
+
+1. **Start with content**: Real content reveals layout needs
+2. **Design mobile-first**: Constraints breed creativity
+3. **Use a grid**: 8px base grid keeps things aligned
+4. **Limit colors**: 1 primary + 1 secondary + neutrals
+5. **Limit fonts**: 1-2 typefaces maximum
+6. **Embrace whitespace**: Breathing room improves comprehension
+7. **Be consistent**: Same action = same appearance everywhere
+8. **Provide feedback**: Every action needs a response

package/skills/penpot-uiux-design/SYNC.md

@@ -0,0 +1,5 @@
+# Sync Info
+
+- **Source:** `vendor/awesome-copilot/skills/penpot-uiux-design`
+- **Git SHA:** `23fb7006c132a0bba75b0e5af7a35cab11272812`
+- **Synced:** 2026-03-24