Add Skills Reference page documenting all 5 installed agent skills
wmj2024
+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
|
||||||
|
```
|
||||||
Reference in New Issue
Block a user