diff --git a/Skills-Reference.md b/Skills-Reference.md new file mode 100644 index 0000000..f888aee --- /dev/null +++ b/Skills-Reference.md @@ -0,0 +1,260 @@ +# Skills Reference + +This page documents all AI coding agent skills installed in the project's pi agent environment. Skills are on-demand capability packages that the agent loads automatically when relevant tasks arise. + +--- + +## ๐Ÿ“ฆ Installed Skills + +| # | Skill | Source | Sub-Skills | +|---|-------|--------|------------| +| 1 | ๐ŸŽจ ui-ux-pro-max | nextlevelbuilder | Design intelligence โ€” 50+ styles, 161 color palettes, 57 font pairings | +| 2 | ๐Ÿงช skills-testing-qa | qajonatasmartins | 19 QA/testing sub-skills | +| 3 | ๐Ÿ”’ security-audit | cloudflare | 6-phase security audit pipeline | +| 4 | ๐Ÿ–Œ๏ธ design-auditor | Ashutos1997 | Design QA scoring across 19 categories | +| 5 | โš™๏ธ cc-devops-skills | akin-ozer | 31 DevOps generator & validator skills | + +--- + +## 1. ๐ŸŽจ ui-ux-pro-max + +**Source:** `github.com/nextlevelbuilder/ui-ux-pro-max-skill` +**Purpose:** Full-stack UI/UX design intelligence for web and mobile applications across 10 technology stacks. + +### Capabilities + +- **50+ design styles** โ€” glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design +- **161 color palettes** organized by product type +- **57 font pairings** with Google Fonts integration +- **161 product types** with reasoning rules +- **99 UX guidelines** across 10 priority categories +- **25 chart types** with recommendations +- **10 tech stacks** โ€” React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, HTML/CSS + +### Design Sub-Skills + +| Sub-Skill | Purpose | +|-----------|---------| +| brand | Brand identity, voice, assets | +| design-system | Token architecture, specs | +| ui-styling | Component implementation | +| logo-design | AI logo generation (55 styles, 30 palettes) | +| cip-design | Corporate Identity Program (50 deliverables) | +| slides | HTML presentations with Chart.js | +| banner-design | Banners for social, ads, web, print (22 styles) | +| icon-design | SVG icon generation (15 styles) | + +### Priority Rule Categories + +| Priority | Category | Impact | +|----------|----------|--------| +| 1 | Accessibility | CRITICAL | +| 2 | Touch & Interaction | CRITICAL | +| 3 | Performance | HIGH | +| 4 | Style Selection | HIGH | +| 5 | Layout & Responsive | HIGH | +| 6 | Typography & Color | MEDIUM | +| 7 | Animation | MEDIUM | +| 8 | Forms & Feedback | MEDIUM | +| 9 | Navigation Patterns | HIGH | +| 10 | Charts & Data | LOW | + +### Search Engine + +```bash +# Design system (full recommendations) +python3 skills/ui-ux-pro-max/scripts/search.py "" --design-system -p "Project Name" + +# Domain-specific search +python3 skills/ui-ux-pro-max/scripts/search.py "" --domain + +# Stack best practices +python3 skills/ui-ux-pro-max/scripts/search.py "" --stack +``` + +### Available Domains + +`product`, `style`, `typography`, `color`, `landing`, `chart`, `ux`, `gsap`, `google-fonts`, `react`, `web`, `prompt` + +### Available Stacks + +`react`, `nextjs`, `vue`, `nuxtjs`, `nuxt-ui`, `svelte`, `astro`, `shadcn`, `html-tailwind`, `angular`, `laravel`, `swiftui`, `flutter`, `jetpack-compose`, `react-native`, `threejs` + +--- + +## 2. ๐Ÿงช skills-testing-qa + +**Source:** `github.com/qajonatasmartins/skills-testing-qa` +**Purpose:** Comprehensive QA and testing skill pack with 19 sub-skills covering the full testing lifecycle. + +### Sub-Skills + +| Sub-Skill | Purpose | +|-----------|---------| +| bug-traking | Bug tracking workflows and best practices | +| clickup-task-context | ClickUp integration for QA tasks | +| design-pattner | Design pattern verification | +| domain-storytelling-plantuml | Domain storytelling with PlantUML | +| figma-context | Figma design context for QA | +| framework-context | Framework-specific testing context | +| jira-task-context | Jira integration for QA tasks | +| owasp-context | OWASP security testing context | +| prisma-risk-testing | PRISMA risk-based testing methodology | +| prompt-craft | Test prompt engineering | +| refinament | Test refinement techniques | +| setup | Test environment setup | +| slack-context | Slack integration for QA workflows | +| strategy-testing-context | Test strategy development | +| teams-context | Microsoft Teams integration | +| test-design | Test design techniques and patterns | +| test-heuristic | Heuristic testing approaches | +| test-verifier | Test verification and validation | +| write-test-case | Test case writing standards | + +--- + +## 3. ๐Ÿ”’ security-audit + +**Source:** `github.com/cloudflare/security-audit-skill` +**Purpose:** Multi-phase security audit skill that turns the agent into a security auditor. Orchestrates parallel agents through a structured pipeline to find exploitable vulnerabilities. + +### Six-Phase Pipeline + +| Phase | Name | Description | +|-------|------|-------------| +| 1 | **Recon** | Parallel research agents map application architecture, trust boundaries, and input surfaces. Produces `architecture.md`. | +| 2 | **Hunt** | Parallel general agents attack the codebase from different angles (injection, access control, business logic, cryptography, feature abuse, chained attacks, wildcard). Each can spawn sub-agents. | +| 3 | **Validate** | Separate agents try to **disprove** each finding. Adversarial review kills false positives. | +| 4 | **Report** | Produces `REPORT.md` (human-readable) and `FINDINGS-DETAIL.md` (detailed traces for MEDIUM+ findings). | +| 5 | **Structured Output** | Writes `findings.json` conforming to `report-schema.json`, validated by `validate-findings.cjs`. | +| 6 | **Independent Verification** | Fresh agents verify every factual claim in the structured output against actual source code. | + +### Key Files + +| File | Purpose | +|------|---------| +| `SKILL.md` | Setup, core principles, workflow overview, audit anti-patterns | +| `RECONNAISSANCE.md` | Phase 1 reconnaissance prompts and synthesis instructions | +| `HUNTING.md` | Phase 2 orchestration, hunting methodology, validation rules | +| `ATTACK-CLASSES.md` | Core, wildcard, and obvious-things attack prompts | +| `MEMORY-SAFETY-AND-BINARY.md` | Memory-safety, binary, and kernel hunting for native targets | +| `AI-AND-LLM.md` | Prompt-injection, agent/tool, output-handling hunting for LLM-backed targets | +| `WEB-PROTOCOL-AND-AUTH.md` | HTTP request-framing, cache, and auth-protocol hunting classes | + +### Features + +- Multiple runs are **additive** โ€” each run explores different code paths +- Reads prior `findings.json` files to skip known issues and target gaps +- Independent verification ensures claim accuracy + +--- + +## 4. ๐Ÿ–Œ๏ธ design-auditor + +**Source:** `github.com/Ashutos1997/claude-design-auditor-skill` +**Purpose:** Audits designs against 19 professional design categories. Works with Figma files, code (HTML/CSS/React/Vue), screenshots, wireframes, and written descriptions. + +### Scoring System + +| Score | Description | +|-------|-------------| +| **Overall Score** | /100 with per-category breakdown (mini bar chart per row) | +| **Accessibility Score** | WCAG coverage across categories 2, 6, 7, 15, 16 | +| **Ethics Score** | Dark patterns and manipulative design (Category 18) | +| **Usability Score** | Nielsen heuristics cross-reference (Categories 1, 2, 3, 6, 7, 10) | + +### Severity Levels + +| Level | Label | +|-------|-------| +| ๐Ÿšซ | Blocker โ€” legal/compliance violations (WCAG AA, GDPR, PECR) | +| ๐Ÿ”ด | Critical | +| ๐ŸŸก | Warning | +| ๐ŸŸข | Tip | + +### Special Features + +- **Color blindness context** โ€” every failing color pair annotated with affected blindness type +- **SVG accessibility checks** โ€” decorative vs. meaningful SVG patterns, aria-hidden, role="img" +- **Design System detection** โ€” MUI, Chakra, shadcn/ui, Ant Design, Radix, Bootstrap (system-specific fixes) +- Supports **English and Korean** +- Compatible with Claude, Manus, and other SKILL.md-compatible agents + +--- + +## 5. โš™๏ธ cc-devops-skills + +**Source:** `github.com/akin-ozer/cc-devops-skills` +**Purpose:** Practical DevOps skill pack with 31 skills โ€” 16 generators for scaffolding production-ready configs, 14 validators for linting/security/dry-run validation, and 1 debugger for cluster troubleshooting. + +### Generator Skills (16) + +| Skill | Generates | +|-------|-----------| +| ansible-generator | Ansible playbooks and configurations | +| azure-pipelines-generator | Azure DevOps pipeline YAML | +| bash-script-generator | Shell scripts with best practices | +| dockerfile-generator | Dockerfiles with multi-stage builds | +| fluentbit-generator | Fluent Bit configurations | +| github-actions-generator | GitHub Actions workflow YAML | +| gitlab-ci-generator | GitLab CI pipeline configuration | +| helm-generator | Helm charts for Kubernetes | +| jenkinsfile-generator | Jenkins pipeline scripts | +| k8s-yaml-generator | Kubernetes manifests | +| logql-generator | LogQL queries for Loki | +| loki-config-generator | Loki configuration | +| makefile-generator | Makefiles with targets | +| promql-generator | PromQL queries | +| terraform-generator | Terraform configurations | +| terragrunt-generator | Terragrunt configurations | + +### Validator Skills (14) + +| Skill | Validates | +|-------|-----------| +| ansible-validator | Ansible playbook syntax and structure | +| azure-pipelines-validator | Azure DevOps pipeline correctness | +| bash-script-validator | Shell script linting and best practices | +| dockerfile-validator | Dockerfile best practices and security | +| fluentbit-validator | Fluent Bit configuration correctness | +| github-actions-validator | GitHub Actions workflow validity | +| gitlab-ci-validator | GitLab CI configuration correctness | +| helm-validator | Helm chart linting and structure | +| jenkinsfile-validator | Jenkins pipeline syntax | +| k8s-yaml-validator | Kubernetes manifest validation | +| makefile-validator | Makefile syntax and structure | +| promql-validator | PromQL query correctness | +| terraform-validator | Terraform configuration and security | +| terragrunt-validator | Terragrunt configuration validation | + +### Debugger Skill (1) + +| Skill | Purpose | +|-------|---------| +| k8s-debug | Kubernetes cluster troubleshooting and diagnosis | + +--- + +## ๐Ÿ“‹ Quick Reference + +### When to Use Each Skill + +| Task | Use Skill | +|------|-----------| +| Design a new page/component | ๐ŸŽจ ui-ux-pro-max | +| Review UI quality | ๐Ÿ–Œ๏ธ design-auditor | +| Write/run tests | ๐Ÿงช skills-testing-qa | +| Security audit codebase | ๐Ÿ”’ security-audit | +| Generate infra configs | โš™๏ธ cc-devops-skills (generators) | +| Validate infra configs | โš™๏ธ cc-devops-skills (validators) | +| Debug K8s cluster | โš™๏ธ cc-devops-skills (k8s-debug) | + +### Installation Sources + +``` +git:github.com/nextlevelbuilder/ui-ux-pro-max-skill +git:github.com/qajonatasmartins/skills-testing-qa +git:github.com/cloudflare/security-audit-skill +git:github.com/Ashutos1997/claude-design-auditor-skill +git:github.com/akin-ozer/cc-devops-skills +```