Add Skills Reference page documenting all 5 installed agent skills

wmj2024
2026-07-07 15:02:54 +08:00
parent 3140b22e59
commit 22b94505ed
+260
@@ -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 "<query>" --design-system -p "Project Name"
# Domain-specific search
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain>
# Stack best practices
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack <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
```