aiblueprint-cli 1.4.102 → 1.4.103
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: audit
|
|
3
|
+
description: Perform comprehensive audit of interface quality across accessibility, performance, theming, and responsive design. Generates detailed report of issues with severity ratings and recommendations.
|
|
4
|
+
user-invocable: true
|
|
5
|
+
argument-hint: "[area]"
|
|
6
|
+
disable-model-invocation: true
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
Run systematic quality checks and generate a comprehensive audit report with prioritized issues and actionable recommendations. Don't fix issues - document them for other commands to address.
|
|
10
|
+
|
|
11
|
+
**First**: Use the frontend-design skill for design principles and anti-patterns.
|
|
12
|
+
|
|
13
|
+
## Diagnostic Scan
|
|
14
|
+
|
|
15
|
+
Run comprehensive checks across multiple dimensions:
|
|
16
|
+
|
|
17
|
+
1. **Accessibility (A11y)** - Check for:
|
|
18
|
+
- **Contrast issues**: Text contrast ratios < 4.5:1 (or 7:1 for AAA)
|
|
19
|
+
- **Missing ARIA**: Interactive elements without proper roles, labels, or states
|
|
20
|
+
- **Keyboard navigation**: Missing focus indicators, illogical tab order, keyboard traps
|
|
21
|
+
- **Semantic HTML**: Improper heading hierarchy, missing landmarks, divs instead of buttons
|
|
22
|
+
- **Alt text**: Missing or poor image descriptions
|
|
23
|
+
- **Form issues**: Inputs without labels, poor error messaging, missing required indicators
|
|
24
|
+
|
|
25
|
+
2. **Performance** - Check for:
|
|
26
|
+
- **Layout thrashing**: Reading/writing layout properties in loops
|
|
27
|
+
- **Expensive animations**: Animating layout properties (width, height, top, left) instead of transform/opacity
|
|
28
|
+
- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change
|
|
29
|
+
- **Bundle size**: Unnecessary imports, unused dependencies
|
|
30
|
+
- **Render performance**: Unnecessary re-renders, missing memoization
|
|
31
|
+
|
|
32
|
+
3. **Theming** - Check for:
|
|
33
|
+
- **Hard-coded colors**: Colors not using design tokens
|
|
34
|
+
- **Broken dark mode**: Missing dark mode variants, poor contrast in dark theme
|
|
35
|
+
- **Inconsistent tokens**: Using wrong tokens, mixing token types
|
|
36
|
+
- **Theme switching issues**: Values that don't update on theme change
|
|
37
|
+
|
|
38
|
+
4. **Responsive Design** - Check for:
|
|
39
|
+
- **Fixed widths**: Hard-coded widths that break on mobile
|
|
40
|
+
- **Touch targets**: Interactive elements < 44x44px
|
|
41
|
+
- **Horizontal scroll**: Content overflow on narrow viewports
|
|
42
|
+
- **Text scaling**: Layouts that break when text size increases
|
|
43
|
+
- **Missing breakpoints**: No mobile/tablet variants
|
|
44
|
+
|
|
45
|
+
5. **Anti-Patterns (CRITICAL)** - Check against ALL the **DON'T** guidelines in the frontend-design skill. Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy).
|
|
46
|
+
|
|
47
|
+
**CRITICAL**: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit.
|
|
48
|
+
|
|
49
|
+
## Generate Comprehensive Report
|
|
50
|
+
|
|
51
|
+
Create a detailed audit report with the following structure:
|
|
52
|
+
|
|
53
|
+
### Anti-Patterns Verdict
|
|
54
|
+
**Start here.** Pass/fail: Does this look AI-generated? List specific tells from the skill's Anti-Patterns section. Be brutally honest.
|
|
55
|
+
|
|
56
|
+
### Executive Summary
|
|
57
|
+
- Total issues found (count by severity)
|
|
58
|
+
- Most critical issues (top 3-5)
|
|
59
|
+
- Overall quality score (if applicable)
|
|
60
|
+
- Recommended next steps
|
|
61
|
+
|
|
62
|
+
### Detailed Findings by Severity
|
|
63
|
+
|
|
64
|
+
For each issue, document:
|
|
65
|
+
- **Location**: Where the issue occurs (component, file, line)
|
|
66
|
+
- **Severity**: Critical / High / Medium / Low
|
|
67
|
+
- **Category**: Accessibility / Performance / Theming / Responsive
|
|
68
|
+
- **Description**: What the issue is
|
|
69
|
+
- **Impact**: How it affects users
|
|
70
|
+
- **WCAG/Standard**: Which standard it violates (if applicable)
|
|
71
|
+
- **Recommendation**: How to fix it
|
|
72
|
+
- **Suggested command**: Which command to use (prefer: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /critique, /colorize — or other installed skills you're sure exist)
|
|
73
|
+
|
|
74
|
+
#### Critical Issues
|
|
75
|
+
[Issues that block core functionality or violate WCAG A]
|
|
76
|
+
|
|
77
|
+
#### High-Severity Issues
|
|
78
|
+
[Significant usability/accessibility impact, WCAG AA violations]
|
|
79
|
+
|
|
80
|
+
#### Medium-Severity Issues
|
|
81
|
+
[Quality issues, WCAG AAA violations, performance concerns]
|
|
82
|
+
|
|
83
|
+
#### Low-Severity Issues
|
|
84
|
+
[Minor inconsistencies, optimization opportunities]
|
|
85
|
+
|
|
86
|
+
### Patterns & Systemic Issues
|
|
87
|
+
|
|
88
|
+
Identify recurring problems:
|
|
89
|
+
- "Hard-coded colors appear in 15+ components, should use design tokens"
|
|
90
|
+
- "Touch targets consistently too small (<44px) throughout mobile experience"
|
|
91
|
+
- "Missing focus indicators on all custom interactive components"
|
|
92
|
+
|
|
93
|
+
### Positive Findings
|
|
94
|
+
|
|
95
|
+
Note what's working well:
|
|
96
|
+
- Good practices to maintain
|
|
97
|
+
- Exemplary implementations to replicate elsewhere
|
|
98
|
+
|
|
99
|
+
### Recommendations by Priority
|
|
100
|
+
|
|
101
|
+
Create actionable plan:
|
|
102
|
+
1. **Immediate**: Critical blockers to fix first
|
|
103
|
+
2. **Short-term**: High-severity issues (this sprint)
|
|
104
|
+
3. **Medium-term**: Quality improvements (next sprint)
|
|
105
|
+
4. **Long-term**: Nice-to-haves and optimizations
|
|
106
|
+
|
|
107
|
+
### Suggested Commands for Fixes
|
|
108
|
+
|
|
109
|
+
Map issues to available commands. Prefer these: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /critique, /colorize. You may also suggest other installed skills you're sure exist, but never invent commands.
|
|
110
|
+
|
|
111
|
+
Examples:
|
|
112
|
+
- "Use `/normalize` to align with design system (addresses N theming issues)"
|
|
113
|
+
- "Use `/optimize` to improve performance (addresses N performance issues)"
|
|
114
|
+
- "Use `/harden` to improve resilience (addresses N edge cases)"
|
|
115
|
+
|
|
116
|
+
**IMPORTANT**: Be thorough but actionable. Too many low-priority issues creates noise. Focus on what actually matters.
|
|
117
|
+
|
|
118
|
+
**NEVER**:
|
|
119
|
+
- Report issues without explaining impact (why does this matter?)
|
|
120
|
+
- Mix severity levels inconsistently
|
|
121
|
+
- Skip positive findings (celebrate what works)
|
|
122
|
+
- Provide generic recommendations (be specific and actionable)
|
|
123
|
+
- Forget to prioritize (everything can't be critical)
|
|
124
|
+
- Report false positives without verification
|
|
125
|
+
|
|
126
|
+
Remember: You're a quality auditor with exceptional attention to detail. Document systematically, prioritize ruthlessly, and provide clear paths to improvement. A good audit makes fixing easy.
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
interface:
|
|
2
|
+
display_name: "Audit"
|
|
3
|
+
short_description: "Perform comprehensive audit of interface quality across..."
|
|
4
|
+
icon_small: "./assets/codex-icon.svg"
|
|
5
|
+
icon_large: "./assets/codex-icon.svg"
|
|
6
|
+
brand_color: "#615AA8"
|
|
7
|
+
default_prompt: "Use $audit to help with this task."
|
|
8
|
+
|
|
9
|
+
policy:
|
|
10
|
+
allow_implicit_invocation: false
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<!-- @license lucide-static v1.24.0 - ISC -->
|
|
2
|
+
<svg role="img" aria-label="audit skill icon"
|
|
3
|
+
class="lucide lucide-scan-search"
|
|
4
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
5
|
+
width="128"
|
|
6
|
+
height="128"
|
|
7
|
+
viewBox="0 0 24 24"
|
|
8
|
+
fill="none"
|
|
9
|
+
stroke="#F5F5F5"
|
|
10
|
+
stroke-width="2"
|
|
11
|
+
stroke-linecap="round"
|
|
12
|
+
stroke-linejoin="round"
|
|
13
|
+
>
|
|
14
|
+
<path d="M3 7V5a2 2 0 0 1 2-2h2" />
|
|
15
|
+
<path d="M17 3h2a2 2 0 0 1 2 2v2" />
|
|
16
|
+
<path d="M21 17v2a2 2 0 0 1-2 2h-2" />
|
|
17
|
+
<path d="M7 21H5a2 2 0 0 1-2-2v-2" />
|
|
18
|
+
<circle cx="12" cy="12" r="3" />
|
|
19
|
+
<path d="m16 16-1.9-1.9" />
|
|
20
|
+
</svg>
|