devskill 2.0.7 → 2.0.8

package/skills/web-coder/references/web-protocols-standards.md

@@ -0,0 +1,265 @@
+# Web Protocols & Standards Reference
+
+Organizations, specifications, and standards that govern the web.
+
+## Standards Organizations
+
+### W3C (World Wide Web Consortium)
+
+International community developing web standards.
+
+**Key Standards**:
+- HTML
+- CSS
+- XML
+- SVG
+- WCAG (Accessibility)
+- Web APIs
+
+**Website**: https://www.w3.org/
+
+### WHATWG (Web Hypertext Application Technology Working Group)
+
+Community maintaining HTML and DOM Living Standards.
+
+**Key Standards**:
+- HTML Living Standard
+- DOM Living Standard
+- Fetch Standard
+- URL Standard
+
+**Website**: https://whatwg.org/
+
+### IETF (Internet Engineering Task Force)
+
+Develops internet standards.
+
+**Key Standards**:
+- HTTP
+- TLS
+- TCP/IP
+- DNS
+- WebRTC protocols
+
+**Website**: https://www.ietf.org/
+
+### ECMA International
+
+Standards organization for information systems.
+
+**Key Standards**:
+- ECMAScript (JavaScript)
+- JSON
+
+**Website**: https://www.ecma-international.org/
+
+### TC39 (Technical Committee 39)
+
+ECMAScript standardization committee.
+
+**Proposal Stages**:
+- **Stage 0**: Strawperson
+- **Stage 1**: Proposal
+- **Stage 2**: Draft
+- **Stage 3**: Candidate
+- **Stage 4**: Finished (included in next version)
+
+### IANA (Internet Assigned Numbers Authority)
+
+Coordinates internet protocol resources.
+
+**Responsibilities**:
+- MIME types
+- Port numbers
+- Protocol parameters
+- TLDs (Top-Level Domains)
+
+### ICANN (Internet Corporation for Assigned Names and Numbers)
+
+Coordinates DNS and IP addresses.
+
+## Web Standards
+
+### HTML Standards
+
+**HTML5 Features**:
+- Semantic elements (`<article>`, `<section>`, etc.)
+- Audio and video elements
+- Canvas and SVG
+- Form enhancements
+- LocalStorage and SessionStorage
+- Web Workers
+- Geolocation API
+
+### CSS Specifications
+
+**CSS Modules** (each specification is a module):
+- CSS Selectors Level 4
+- CSS Flexbox Level 1
+- CSS Grid Level 2
+- CSS Animations
+- CSS Transitions
+- CSS Custom Properties
+
+### JavaScript Standards
+
+**ECMAScript Versions**:
+- **ES5** (2009): Strict mode, JSON
+- **ES6/ES2015**: Classes, modules, arrow functions, promises
+- **ES2016**: Array.includes(), exponentiation operator (`**`)
+- **ES2017**: async/await, Object.values/entries
+- **ES2018**: Rest/spread for objects, async iteration
+- **ES2019**: Array.flat(), Object.fromEntries
+- **ES2020**: Optional chaining, nullish coalescing, BigInt
+- **ES2021**: Logical assignment, Promise.any
+- **ES2022**: Top-level await, class fields
+- **ES2023**: Array.findLast(), Object.groupBy
+
+### Web API Specifications
+
+**Common APIs**:
+- DOM (Document Object Model)
+- Fetch API
+- Service Workers
+- Web Storage
+- IndexedDB
+- WebRTC
+- WebGL
+- Web Audio API
+- Payment Request API
+- Web Authentication API
+
+## Specifications
+
+### Normative vs Non-Normative
+
+- **Normative**: Required for compliance
+- **Non-normative**: Informative only (examples, notes)
+
+### Specification Lifecycle
+
+1. **Editor's Draft**: Work in progress
+2. **Working Draft**: Community review
+3. **Candidate Recommendation**: Implementation and testing
+4. **Proposed Recommendation**: Final review
+5. **W3C Recommendation**: Official standard
+
+## Browser Compatibility
+
+### Feature Detection
+
+```javascript
+// Check feature support
+if ('serviceWorker' in navigator) {
+  // Use service workers
+}
+
+if (window.IntersectionObserver) {
+  // Use Intersection Observer
+}
+
+if (CSS.supports('display', 'grid')) {
+  // Use CSS Grid
+}
+```
+
+### Baseline Compatibility
+
+Newly standardized features achieving widespread browser support.
+
+**Widely Available**: Firefox, Chrome, Edge, Safari support
+
+### Polyfills
+
+Code providing modern functionality in older browsers:
+
+```javascript
+// Promise polyfill
+if (!window.Promise) {
+  window.Promise = PromisePolyfill;
+}
+
+// Fetch polyfill
+if (!window.fetch) {
+  window.fetch = fetchPolyfill;
+}
+```
+
+### Progressive Enhancement
+
+Build for basic browsers, enhance for modern ones:
+
+```css
+/* Base styles */
+.container {
+  display: block;
+}
+
+/* Enhanced for Grid support */
+@supports (display: grid) {
+  .container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+```
+
+## IDL (Interface Definition Language)
+
+**WebIDL**: Defines Web APIs
+
+```webidl
+interface Element : Node {
+  readonly attribute DOMString? tagName;
+  DOMString? getAttribute(DOMString qualifiedName);
+  undefined setAttribute(DOMString qualifiedName, DOMString value);
+};
+```
+
+## Specifications to Know
+
+- **HTML Living Standard**
+- **CSS Specifications** (modular)
+- **ECMAScript Language Specification**
+- **HTTP/1.1 (RFC 9112)**
+- **HTTP/2 (RFC 9113)**
+- **HTTP/3 (RFC 9114)**
+- **TLS 1.3 (RFC 8446)**
+- **WebSocket Protocol (RFC 6455)**
+- **CORS (Fetch Standard)**
+- **Service Workers**
+- **Web Authentication (WebAuthn)**
+
+## Glossary Terms
+
+**Key Terms Covered**:
+- Baseline (compatibility)
+- BCP 47 language tag
+- ECMA
+- ECMAScript
+- HTML5
+- IANA
+- ICANN
+- IDL
+- IETF
+- ISO
+- ITU
+- Non-normative
+- Normative
+- Polyfill
+- Shim
+- Specification
+- W3C
+- WAI
+- WCAG
+- WHATWG
+- Web standards
+- WebIDL
+
+## Additional Resources
+
+- [W3C Standards](https://www.w3.org/TR/)
+- [WHATWG Living Standards](https://spec.whatwg.org/)
+- [MDN Web Docs](https://developer.mozilla.org/)
+- [Can I Use](https://caniuse.com/)
+- [TC39 Proposals](https://github.com/tc39/proposals)

package/skills/web-design-reviewer/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/web-design-reviewer/SKILL.md

@@ -0,0 +1,368 @@
+---
+name: web-design-reviewer
+description: 'This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.'
+---
+
+# Web Design Reviewer
+
+This skill enables visual inspection and validation of website design quality, identifying and fixing issues at the source code level.
+
+## Scope of Application
+
+- Static sites (HTML/CSS/JS)
+- SPA frameworks such as React / Vue / Angular / Svelte
+- Full-stack frameworks such as Next.js / Nuxt / SvelteKit
+- CMS platforms such as WordPress / Drupal
+- Any other web application
+
+## Prerequisites
+
+### Required
+
+1. **Target website must be running**
+   - Local development server (e.g., `http://localhost:3000`)
+   - Staging environment
+   - Production environment (for read-only reviews)
+
+2. **Browser automation must be available**
+   - Screenshot capture
+   - Page navigation
+   - DOM information retrieval
+
+3. **Access to source code (when making fixes)**
+   - Project must exist within the workspace
+
+## Workflow Overview
+
+```mermaid
+flowchart TD
+    A[Step 1: Information Gathering] --> B[Step 2: Visual Inspection]
+    B --> C[Step 3: Issue Fixing]
+    C --> D[Step 4: Re-verification]
+    D --> E{Issues Remaining?}
+    E -->|Yes| B
+    E -->|No| F[Completion Report]
+```
+
+---
+
+## Step 1: Information Gathering Phase
+
+### 1.1 URL Confirmation
+
+If the URL is not provided, ask the user:
+
+> Please provide the URL of the website to review (e.g., `http://localhost:3000`)
+
+### 1.2 Understanding Project Structure
+
+When making fixes, gather the following information:
+
+| Item | Example Question |
+|------|------------------|
+| Framework | Are you using React / Vue / Next.js, etc.? |
+| Styling Method | CSS / SCSS / Tailwind / CSS-in-JS, etc. |
+| Source Location | Where are style files and components located? |
+| Review Scope | Specific pages only or entire site? |
+
+### 1.3 Automatic Project Detection
+
+Attempt automatic detection from files in the workspace:
+
+```
+Detection targets:
+├── package.json     → Framework and dependencies
+├── tsconfig.json    → TypeScript usage
+├── tailwind.config  → Tailwind CSS
+├── next.config      → Next.js
+├── vite.config      → Vite
+├── nuxt.config      → Nuxt
+└── src/ or app/     → Source directory
+```
+
+### 1.4 Identifying Styling Method
+
+| Method | Detection | Edit Target |
+|--------|-----------|-------------|
+| Pure CSS | `*.css` files | Global CSS or component CSS |
+| SCSS/Sass | `*.scss`, `*.sass` | SCSS files |
+| CSS Modules | `*.module.css` | Module CSS files |
+| Tailwind CSS | `tailwind.config.*` | className in components |
+| styled-components | `styled.` in code | JS/TS files |
+| Emotion | `@emotion/` imports | JS/TS files |
+| CSS-in-JS (other) | Inline styles | JS/TS files |
+
+---
+
+## Step 2: Visual Inspection Phase
+
+### 2.1 Page Traversal
+
+1. Navigate to the specified URL
+2. Capture screenshots
+3. Retrieve DOM structure/snapshot (if possible)
+4. If additional pages exist, traverse through navigation
+
+### 2.2 Inspection Items
+
+#### Layout Issues
+
+| Issue | Description | Severity |
+|-------|-------------|----------|
+| Element Overflow | Content overflows from parent element or viewport | High |
+| Element Overlap | Unintended overlapping of elements | High |
+| Alignment Issues | Grid or flex alignment problems | Medium |
+| Inconsistent Spacing | Padding/margin inconsistencies | Medium |
+| Text Clipping | Long text not handled properly | Medium |
+
+#### Responsive Issues
+
+| Issue | Description | Severity |
+|-------|-------------|----------|
+| Non-mobile Friendly | Layout breaks on small screens | High |
+| Breakpoint Issues | Unnatural transitions when screen size changes | Medium |
+| Touch Targets | Buttons too small on mobile | Medium |
+
+#### Accessibility Issues
+
+| Issue | Description | Severity |
+|-------|-------------|----------|
+| Insufficient Contrast | Low contrast ratio between text and background | High |
+| No Focus State | Cannot determine state during keyboard navigation | High |
+| Missing alt Text | No alternative text for images | Medium |
+
+#### Visual Consistency
+
+| Issue | Description | Severity |
+|-------|-------------|----------|
+| Font Inconsistency | Mixed font families | Medium |
+| Color Inconsistency | Non-unified brand colors | Medium |
+| Spacing Inconsistency | Non-uniform spacing between similar elements | Low |
+
+### 2.3 Viewport Testing (Responsive)
+
+Test at the following viewports:
+
+| Name | Width | Representative Device |
+|------|-------|----------------------|
+| Mobile | 375px | iPhone SE/12 mini |
+| Tablet | 768px | iPad |
+| Desktop | 1280px | Standard PC |
+| Wide | 1920px | Large display |
+
+---
+
+## Step 3: Issue Fixing Phase
+
+### 3.1 Issue Prioritization
+
+```mermaid
+block-beta
+    columns 1
+    block:priority["Priority Matrix"]
+        P1["P1: Fix Immediately\n(Layout issues affecting functionality)"]
+        P2["P2: Fix Next\n(Visual issues degrading UX)"]
+        P3["P3: Fix If Possible\n(Minor visual inconsistencies)"]
+    end
+```
+
+### 3.2 Identifying Source Files
+
+Identify source files from problematic elements:
+
+1. **Selector-based Search**
+   - Search codebase by class name or ID
+   - Explore style definitions with `grep_search`
+
+2. **Component-based Search**
+   - Identify components from element text or structure
+   - Explore related files with `semantic_search`
+
+3. **File Pattern Filtering**
+   ```
+   Style files: src/**/*.css, styles/**/*
+   Components: src/components/**/*
+   Pages: src/pages/**, app/**
+   ```
+
+### 3.3 Applying Fixes
+
+#### Framework-specific Fix Guidelines
+
+See [references/framework-fixes.md](references/framework-fixes.md) for details.
+
+#### Fix Principles
+
+1. **Minimal Changes**: Only make the minimum changes necessary to resolve the issue
+2. **Respect Existing Patterns**: Follow existing code style in the project
+3. **Avoid Breaking Changes**: Be careful not to affect other areas
+4. **Add Comments**: Add comments to explain the reason for fixes where appropriate
+
+---
+
+## Step 4: Re-verification Phase
+
+### 4.1 Post-fix Confirmation
+
+1. Reload browser (or wait for development server HMR)
+2. Capture screenshots of fixed areas
+3. Compare before and after
+
+### 4.2 Regression Testing
+
+- Verify that fixes haven't affected other areas
+- Confirm responsive display is not broken
+
+### 4.3 Iteration Decision
+
+```mermaid
+flowchart TD
+    A{Issues Remaining?}
+    A -->|Yes| B[Return to Step 2]
+    A -->|No| C[Proceed to Completion Report]
+```
+
+**Iteration Limit**: If more than 3 fix attempts are needed for a specific issue, consult the user
+
+---
+
+## Output Format
+
+### Review Results Report
+
+```markdown
+# Web Design Review Results
+
+## Summary
+
+| Item | Value |
+|------|-------|
+| Target URL | {URL} |
+| Framework | {Detected framework} |
+| Styling | {CSS / Tailwind / etc.} |
+| Tested Viewports | Desktop, Mobile |
+| Issues Detected | {N} |
+| Issues Fixed | {M} |
+
+## Detected Issues
+
+### [P1] {Issue Title}
+
+- **Page**: {Page path}
+- **Element**: {Selector or description}
+- **Issue**: {Detailed description of the issue}
+- **Fixed File**: `{File path}`
+- **Fix Details**: {Description of changes}
+- **Screenshot**: Before/After
+
+### [P2] {Issue Title}
+...
+
+## Unfixed Issues (if any)
+
+### {Issue Title}
+- **Reason**: {Why it was not fixed/could not be fixed}
+- **Recommended Action**: {Recommendations for user}
+
+## Recommendations
+
+- {Suggestions for future improvements}
+```
+
+---
+
+## Required Capabilities
+
+| Capability | Description | Required |
+|------------|-------------|----------|
+| Web Page Navigation | Access URLs, page transitions | ✅ |
+| Screenshot Capture | Page image capture | ✅ |
+| Image Analysis | Visual issue detection | ✅ |
+| DOM Retrieval | Page structure retrieval | Recommended |
+| File Read/Write | Source code reading and editing | Required for fixes |
+| Code Search | Code search within project | Required for fixes |
+
+---
+
+## Reference Implementation
+
+### Implementation with Playwright MCP
+
+[Playwright MCP](https://github.com/microsoft/playwright-mcp) is recommended as the reference implementation for this skill.
+
+| Capability | Playwright MCP Tool | Purpose |
+|------------|---------------------|---------|
+| Navigation | `browser_navigate` | Access URLs |
+| Snapshot | `browser_snapshot` | Retrieve DOM structure |
+| Screenshot | `browser_take_screenshot` | Images for visual inspection |
+| Click | `browser_click` | Interact with interactive elements |
+| Resize | `browser_resize` | Responsive testing |
+| Console | `browser_console_messages` | Detect JS errors |
+
+#### Configuration Example (MCP Server)
+
+```json
+{
+  "mcpServers": {
+    "playwright": {
+      "command": "npx",
+      "args": ["-y", "@playwright/mcp@latest", "--caps=vision"]
+    }
+  }
+}
+```
+
+### Other Compatible Browser Automation Tools
+
+| Tool | Features |
+|------|----------|
+| Selenium | Broad browser support, multi-language support |
+| Puppeteer | Chrome/Chromium focused, Node.js |
+| Cypress | Easy integration with E2E testing |
+| WebDriver BiDi | Standardized next-generation protocol |
+
+The same workflow can be implemented with these tools. As long as they provide the necessary capabilities (navigation, screenshot, DOM retrieval), the choice of tool is flexible.
+
+---
+
+## Best Practices
+
+### DO (Recommended)
+
+- ✅ Always save screenshots before making fixes
+- ✅ Fix one issue at a time and verify each
+- ✅ Follow the project's existing code style
+- ✅ Confirm with user before major changes
+- ✅ Document fix details thoroughly
+
+### DON'T (Not Recommended)
+
+- ❌ Large-scale refactoring without confirmation
+- ❌ Ignoring design systems or brand guidelines
+- ❌ Fixes that ignore performance
+- ❌ Fixing multiple issues at once (difficult to verify)
+
+---
+
+## Troubleshooting
+
+### Problem: Style files not found
+
+1. Check dependencies in `package.json`
+2. Consider the possibility of CSS-in-JS
+3. Consider CSS generated at build time
+4. Ask user about styling method
+
+### Problem: Fixes not reflected
+
+1. Check if development server HMR is working
+2. Clear browser cache
+3. Rebuild if project requires build
+4. Check CSS specificity issues
+
+### Problem: Fixes affecting other areas
+
+1. Rollback changes
+2. Use more specific selectors
+3. Consider using CSS Modules or scoped styles
+4. Consult user to confirm impact scope

package/skills/web-design-reviewer/SYNC.md

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