mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-11 21:57:14 +03:00
Add build-time count validation, fix all stale count references
Build system now computes authoritative counts from source (22 commands, 24 detection rules) and warns about mismatches in HTML, README, plugin configs. Generates public/js/generated/counts.js for frontend use. Fixed 15 stale references across index.html, cheatsheet.html, README.md, NOTICE.md, AGENTS.md, plugin.json, and marketplace.json. Changed all "20 commands" to "22", "25 rules" to "24". Fixed v1.6.0 changelog date (was March 24, after v2.0.0's March 20; now March 18). Changelog entries are excluded from validation since historical counts were correct at time of release. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.6
parent
99bc9d48ad
commit
0d4d6b4f56
@@ -2,7 +2,7 @@
|
||||
"$schema": "https://anthropic.com/claude-code/marketplace.schema.json",
|
||||
"name": "impeccable",
|
||||
"metadata": {
|
||||
"description": "Design fluency for AI harnesses. 1 skill, 20 commands, and curated anti-patterns for impeccable frontend design."
|
||||
"description": "Design fluency for AI harnesses. 1 skill, 22 commands, and curated anti-patterns for impeccable frontend design."
|
||||
},
|
||||
"owner": {
|
||||
"name": "Paul Bakaus",
|
||||
@@ -11,7 +11,7 @@
|
||||
"plugins": [
|
||||
{
|
||||
"name": "impeccable",
|
||||
"description": "Design vocabulary and skills for frontend development. Includes 20 commands (/polish, /distill, /audit, /typeset, /overdrive, etc.) and an enhanced impeccable skill with curated anti-patterns.",
|
||||
"description": "Design vocabulary and skills for frontend development. Includes 22 commands (/polish, /distill, /audit, /typeset, /overdrive, etc.) and an enhanced impeccable skill with curated anti-patterns.",
|
||||
"version": "2.0.2",
|
||||
"author": {
|
||||
"name": "Paul Bakaus",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "impeccable",
|
||||
"description": "Design vocabulary and skills for frontend development. Includes 21 skills (20 user-invocable: /polish, /distill, /audit, /typeset, /overdrive, etc.) and an enhanced impeccable skill with curated anti-patterns.",
|
||||
"description": "Design vocabulary and skills for frontend development. Includes 22 commands (/polish, /distill, /audit, /typeset, /overdrive, etc.) and an enhanced impeccable skill with curated anti-patterns.",
|
||||
"version": "2.0.2",
|
||||
"author": {
|
||||
"name": "Paul Bakaus",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# Impeccable
|
||||
|
||||
The vocabulary you didn't know you needed. 1 skill, 20 commands, and curated anti-patterns for impeccable style. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.
|
||||
The vocabulary you didn't know you needed. 1 skill, 22 commands, and curated anti-patterns for impeccable style. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.
|
||||
|
||||
## Repository Purpose
|
||||
|
||||
|
||||
@@ -13,5 +13,5 @@ The `impeccable` skill in this project builds on Anthropic's original frontend-d
|
||||
|
||||
This project extends the original with:
|
||||
- 7 domain-specific reference files (typography, color-and-contrast, spatial-design, motion-design, interaction-design, responsive-design, ux-writing)
|
||||
- 20 steering commands
|
||||
- 22 steering commands
|
||||
- Expanded patterns and anti-patterns
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# Impeccable
|
||||
|
||||
The vocabulary you didn't know you needed. 1 skill, 20 commands, and curated anti-patterns for impeccable frontend design.
|
||||
The vocabulary you didn't know you needed. 1 skill, 22 commands, and curated anti-patterns for impeccable frontend design.
|
||||
|
||||
> **Quick start:** Visit [impeccable.style](https://impeccable.style) to download ready-to-use bundles.
|
||||
|
||||
@@ -12,7 +12,7 @@ Every LLM learned from the same generic templates. Without guidance, you get the
|
||||
|
||||
Impeccable fights that bias with:
|
||||
- **An expanded skill** with 7 domain-specific reference files ([view source](source/skills/impeccable/))
|
||||
- **20 steering commands** to audit, review, polish, distill, animate, and more
|
||||
- **22 steering commands** to audit, review, polish, distill, animate, and more
|
||||
- **Curated anti-patterns** that explicitly tell the AI what NOT to do
|
||||
|
||||
## What's Included
|
||||
@@ -31,7 +31,7 @@ A comprehensive design skill with 7 domain-specific references ([view skill](sou
|
||||
| [responsive-design](source/skills/impeccable/reference/responsive-design.md) | Mobile-first, fluid design, container queries |
|
||||
| [ux-writing](source/skills/impeccable/reference/ux-writing.md) | Button labels, error messages, empty states |
|
||||
|
||||
### 20 Commands
|
||||
### 22 Commands
|
||||
|
||||
| Command | What it does |
|
||||
|---------|--------------|
|
||||
@@ -208,7 +208,7 @@ bun bin/impeccable detect https://example.com # scan a URL (Puppeteer)
|
||||
bun bin/impeccable detect --fast --json . # regex-only, JSON output
|
||||
```
|
||||
|
||||
The detector catches 25 issues across AI slop (side-tab borders, purple gradients, bounce easing, dark glows) and general design quality (line length, cramped padding, small touch targets, skipped headings, and more).
|
||||
The detector catches 24 issues across AI slop (side-tab borders, purple gradients, bounce easing, dark glows) and general design quality (line length, cramped padding, small touch targets, skipped headings, and more).
|
||||
|
||||
## Supported Tools
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Impeccable Command Cheatsheet</title>
|
||||
<meta name="description" content="Quick reference for all 20 Impeccable commands. Print-friendly cheatsheet for design fluency in AI harnesses.">
|
||||
<meta name="description" content="Quick reference for all 22 Impeccable commands. Print-friendly cheatsheet for design fluency in AI harnesses.">
|
||||
<link rel="icon" type="image/svg+xml" href="./favicon.svg">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
@@ -169,7 +169,7 @@
|
||||
<body>
|
||||
<header>
|
||||
<h1>Impeccable Commands</h1>
|
||||
<p class="subtitle">Quick reference for all 20 design commands</p>
|
||||
<p class="subtitle">Quick reference for all 22 design commands</p>
|
||||
<a href="/" class="back-link">← Back to impeccable.style</a>
|
||||
</header>
|
||||
|
||||
|
||||
+6
-6
@@ -13,7 +13,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Impeccable: The missing upgrade to Anthropic's impeccable skill</title>
|
||||
<meta name="description" content="1 skill, 20 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.">
|
||||
<meta name="description" content="1 skill, 22 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.">
|
||||
<meta name="theme-color" content="#fafafa">
|
||||
<link rel="canonical" href="https://impeccable.style">
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://impeccable.style">
|
||||
<meta property="og:title" content="Impeccable: Design skills for AI harnesses">
|
||||
<meta property="og:description" content="1 skill, 20 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.">
|
||||
<meta property="og:description" content="1 skill, 22 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.">
|
||||
<meta property="og:image" content="https://impeccable.style/og-image.jpg">
|
||||
|
||||
<!-- Twitter -->
|
||||
@@ -29,7 +29,7 @@
|
||||
<meta name="twitter:site" content="@pbakaus">
|
||||
<meta name="twitter:creator" content="@pbakaus">
|
||||
<meta name="twitter:title" content="Impeccable: Design skills for AI harnesses">
|
||||
<meta name="twitter:description" content="1 skill, 20 commands, and curated anti-patterns for impeccable frontend design.">
|
||||
<meta name="twitter:description" content="1 skill, 22 commands, and curated anti-patterns for impeccable frontend design.">
|
||||
<meta name="twitter:image" content="https://impeccable.style/og-image.jpg">
|
||||
|
||||
<link rel="icon" type="image/svg+xml" href="./favicon.svg">
|
||||
@@ -313,7 +313,7 @@
|
||||
<div class="install-path install-path-primary">
|
||||
<span class="install-path-label"><span class="install-path-step">1</span></span>
|
||||
<h3 class="install-path-title">Install the skills <span class="install-path-badge">Recommended</span></h3>
|
||||
<p class="install-path-desc">24 commands that steer your AI toward better design, in real time. The full Impeccable experience.</p>
|
||||
<p class="install-path-desc">22 commands that steer your AI toward better design, in real time. The full Impeccable experience.</p>
|
||||
|
||||
<div class="install-path-terminal">
|
||||
<div class="glass-terminal">
|
||||
@@ -486,7 +486,7 @@
|
||||
<span class="changelog-date">March 20, 2026</span>
|
||||
</div>
|
||||
<ul class="changelog-items">
|
||||
<li>Anti-pattern detection engine: 25 rules across typography, color, layout, visual details, motion, and design quality</li>
|
||||
<li>Anti-pattern detection engine: 24 rules across typography, color, layout, visual details, motion, and design quality</li>
|
||||
<li>CLI tool: <code>npx impeccable detect [target]</code> for standalone scanning outside AI harnesses</li>
|
||||
<li>Browser visualizer: live overlays highlighting detected anti-patterns directly on the page</li>
|
||||
<li><code>/critique</code> overhaul: sub-agent architecture with scoring, personas, and cognitive load assessment</li>
|
||||
@@ -497,7 +497,7 @@
|
||||
<div class="changelog-entry">
|
||||
<div class="changelog-version-header">
|
||||
<span class="changelog-version">v1.6.0</span>
|
||||
<span class="changelog-date">March 24, 2026</span>
|
||||
<span class="changelog-date">March 18, 2026</span>
|
||||
</div>
|
||||
<ul class="changelog-items">
|
||||
<li>New provider: <strong>Trae</strong> (China + International)</li>
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
// GENERATED by build.js — do not edit
|
||||
export const COMMAND_COUNT = 22;
|
||||
export const DETECTION_COUNT = 24;
|
||||
@@ -22,6 +22,86 @@ import { createTransformer, PROVIDERS } from './lib/transformers/index.js';
|
||||
import { createAllZips } from './lib/zip.js';
|
||||
import { execSync } from 'child_process';
|
||||
|
||||
/**
|
||||
* Generate authoritative counts from source data and write to public/js/generated/counts.js.
|
||||
* Also validates that key HTML files reference the correct numbers.
|
||||
*/
|
||||
function generateCounts(rootDir, skills, buildDir) {
|
||||
// Count active (non-deprecated) user-invocable commands
|
||||
const activeCommands = skills.filter(s => {
|
||||
if (!s.userInvocable) return false;
|
||||
const content = fs.readFileSync(s.filePath, 'utf-8');
|
||||
return !content.includes('DEPRECATED');
|
||||
});
|
||||
const commandCount = activeCommands.length;
|
||||
|
||||
// Count detection rules from source
|
||||
const detectorSrc = fs.readFileSync(
|
||||
path.join(rootDir, 'source/skills/critique/scripts/detect-antipatterns.mjs'), 'utf-8'
|
||||
);
|
||||
const ruleIds = new Set();
|
||||
for (const match of detectorSrc.matchAll(/^\s+id: '([^']+)'/gm)) {
|
||||
ruleIds.add(match[1]);
|
||||
}
|
||||
const detectionCount = ruleIds.size;
|
||||
|
||||
// Write generated counts module
|
||||
const genDir = path.join(rootDir, 'public/js/generated');
|
||||
fs.mkdirSync(genDir, { recursive: true });
|
||||
fs.writeFileSync(path.join(genDir, 'counts.js'),
|
||||
`// GENERATED by build.js — do not edit\n` +
|
||||
`export const COMMAND_COUNT = ${commandCount};\n` +
|
||||
`export const DETECTION_COUNT = ${detectionCount};\n`
|
||||
);
|
||||
|
||||
// Validate counts in key files
|
||||
const filesToCheck = [
|
||||
'public/index.html',
|
||||
'public/cheatsheet.html',
|
||||
'README.md',
|
||||
'NOTICE.md',
|
||||
'AGENTS.md',
|
||||
'.claude-plugin/plugin.json',
|
||||
'.claude-plugin/marketplace.json',
|
||||
];
|
||||
|
||||
let warnings = 0;
|
||||
for (const relPath of filesToCheck) {
|
||||
const absPath = path.join(rootDir, relPath);
|
||||
if (!fs.existsSync(absPath)) continue;
|
||||
const content = fs.readFileSync(absPath, 'utf-8');
|
||||
|
||||
// Check for stale command counts (look for "N commands" or "N skills" patterns)
|
||||
// Strip changelog list content to avoid flagging historical counts
|
||||
const strippedContent = content.replace(/<ul class="changelog-items">[\s\S]*?<\/ul>/g, '');
|
||||
const countPattern = /\b(\d+)\s+(design\s+)?(commands|skills|steering commands)/gi;
|
||||
for (const match of strippedContent.matchAll(countPattern)) {
|
||||
const num = parseInt(match[1]);
|
||||
// Allow 1 (for "1 skill") and the correct count
|
||||
if (num !== commandCount && num !== 1) {
|
||||
console.warn(` ⚠️ ${relPath}: found "${match[0]}" but active command count is ${commandCount}`);
|
||||
warnings++;
|
||||
}
|
||||
}
|
||||
|
||||
// Check for stale detection counts
|
||||
const detectPattern = /\b(\d+)\s+(deterministic\s+)?(checks|patterns|rules|detections)/gi;
|
||||
for (const match of content.matchAll(detectPattern)) {
|
||||
const num = parseInt(match[1]);
|
||||
if (num !== detectionCount && num > 10) { // ignore small numbers like "3 patterns"
|
||||
console.warn(` ⚠️ ${relPath}: found "${match[0]}" but detection count is ${detectionCount}`);
|
||||
warnings++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (warnings > 0) {
|
||||
console.warn(`\n⚠️ ${warnings} stale count reference(s) found. Update them to match source of truth.`);
|
||||
}
|
||||
|
||||
console.log(`✓ Generated counts: ${commandCount} commands, ${detectionCount} detection rules`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Copy directory recursively
|
||||
*/
|
||||
@@ -361,6 +441,9 @@ async function build() {
|
||||
console.log(`📋 Synced skills to: ${syncConfigs.map(p => p.configDir).join(', ')}`);
|
||||
|
||||
|
||||
// Generate authoritative counts and validate references
|
||||
generateCounts(ROOT_DIR, skills, buildDir);
|
||||
|
||||
// Generate browser anti-pattern detector (after skill sync so it doesn't get overwritten)
|
||||
try {
|
||||
execSync('node scripts/build-browser-detector.js', { cwd: ROOT_DIR, stdio: 'inherit' });
|
||||
|
||||
Reference in New Issue
Block a user