The vocabulary you didn't know you needed. 1 skill, 17 commands, and curated anti-patterns for impeccable style. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.
Maintain a single source of truth for design-focused skills and commands, then automatically transform them into provider-specific formats. Each provider has different capabilities (frontmatter, arguments, modular files), so we use a build system to generate appropriate outputs.
We use a feature-rich source format that gets transformed for each provider:
- Source files (
source/): Full metadata with YAML frontmatter, args, descriptions - Build system (
scripts/): Transforms source → provider-specific formats - Distribution (
dist/): Committed output files for 4 providers
Cursor doesn't support frontmatter or arguments (lowest common denominator). Instead of limiting all providers, we:
- Author with full metadata in source files
- Generate full-featured versions for providers that support it (Claude Code, Gemini, Codex)
- Generate downgraded versions for Cursor (strip frontmatter, rely on appending)
impeccable/
├── source/ # EDIT THESE! Single source of truth
│ ├── commands/ # Command definitions with frontmatter
│ │ └── normalize.md
│ └── skills/ # Skill definitions with frontmatter
│ └── frontend-design.md
├── dist/ # Generated outputs (committed for users)
│ ├── cursor/ # Commands + Agent Skills
│ │ └── .cursor/
│ │ ├── commands/*.md
│ │ └── skills/*/SKILL.md
│ ├── claude-code/ # Full featured
│ │ └── .claude/
│ │ ├── commands/*.md
│ │ └── skills/*/SKILL.md
│ ├── gemini/ # TOML commands + modular skills
│ │ ├── .gemini/
│ │ │ └── commands/*.toml
│ │ ├── GEMINI.md
│ │ └── GEMINI.*.md
│ └── codex/ # Custom prompts + Agent Skills
│ └── .codex/
│ ├── prompts/*.md
│ └── skills/*/SKILL.md
├── api/ # Vercel Functions (production)
│ ├── skills.js # GET /api/skills
│ ├── commands.js # GET /api/commands
│ └── download/
│ ├── [type]/[provider]/[id].js # Individual downloads
│ └── bundle/[provider].js # Bundle downloads
├── public/ # Website for impeccable.style
│ ├── index.html # Main page
│ ├── css/ # Modular CSS (9 files)
│ │ ├── main.css # Entry point with imports
│ │ ├── tokens.css # Design system
│ │ └── ... # Component styles
│ └── app.js # Vanilla JS
├── server/ # Bun server (local dev only)
│ ├── index.js # Serves website + API routes
│ └── lib/
│ └── api-handlers.js # Shared API logic (used by both server & functions)
├── scripts/ # Build system (Bun)
│ ├── build.js # Main orchestrator
│ ├── lib/
│ │ ├── utils.js # Shared utilities
│ │ ├── zip.js # ZIP generation
│ │ └── transformers/ # Provider-specific transformers
│ │ ├── cursor.js
│ │ ├── claude-code.js
│ │ ├── gemini.js
│ │ └── codex.js
├── README.md # End user documentation
├── DEVELOP.md # Contributor documentation
└── package.json # Bun scripts
Tech Stack:
- Vanilla JavaScript (no frameworks)
- Modern CSS with Bun's bundler (nesting, OKLCH colors, @import)
- Local Development: Bun server with native routes (
server/index.js) - Production: Vercel Functions with Bun runtime (
/apidirectory) - Deployed on Vercel with Bun runtime
Dual Setup:
/apidirectory contains individual Vercel Functions for production/serverdirectory contains monolithic Bun server for local development/server/lib/api-handlers.jscontains shared logic used by both- Zero duplication: API functions and dev server import the same handlers
Design:
- Editorial precision aesthetic
- Cormorant Garamond (display) + Instrument Sans (body)
- OKLCH color space for vibrant, perceptually uniform colors
- Editorial sidebar layout (title left, content right)
- Modular CSS architecture (9 files)
API Endpoints (Vercel Functions):
/- Homepage (static HTML)/api/skills- JSON list of all skills/api/commands- JSON list of all commands/api/download/[type]/[provider]/[id]- Individual file download/api/download/bundle/[provider]- ZIP bundle download
---
name: command-name
description: Clear description of what this command does
args:
- name: argname
description: Argument description
required: false
---
Command prompt here. Use {{argname}} placeholders for arguments.---
name: skill-name
description: Clear description of what this skill provides
license: License info (optional)
---
Skill instructions for the LLM here.Uses Bun for fast builds. Modular architecture:
utils.js: Shared functions (parseFrontmatter, readSourceFiles, writeFile, etc.)- Transformer pattern: Each provider has one focused file
- Registry:
transformers/index.jsexports all transformers - Main script:
build.jsorchestrates everything (~50 lines)
Run: bun run build
- Commands: Body only →
dist/cursor/.cursor/commands/*.md(no frontmatter support) - Skills: Agent Skills standard →
dist/cursor/.cursor/skills/{name}/SKILL.md- Full YAML frontmatter with name/description
- Reference files in skill subdirectories
- Installation: Extract ZIP into your project root, creates
.cursor/folder - Note: Agent Skills require Cursor nightly channel
- Commands: Full YAML frontmatter →
dist/claude-code/.claude/commands/*.md - Skills: Full YAML frontmatter →
dist/claude-code/.claude/skills/{name}/SKILL.md - Preserves: All metadata, all args
- Format: Matches Anthropic Skills spec
- Installation: Extract ZIP into your project root, creates
.claude/folder
- Commands: TOML format →
dist/gemini/.gemini/commands/*.toml- Uses
descriptionandpromptkeys - Transforms
{{argname}}→{{args}}(Gemini uses single args string)
- Uses
- Skills: Modular with imports →
dist/gemini/GEMINI.{name}.md(root level)- Main
GEMINI.mduses@./GEMINI.{name}.mdimport syntax - Gemini automatically loads imported files
- Main
- Installation: Extract ZIP into your project root, creates
.gemini/folder + skill files
- Commands: Custom prompt format →
dist/codex/.codex/prompts/*.md- Uses
descriptionandargument-hintin frontmatter - Transforms
{{argname}}→$ARGNAME(uppercase variables) - Invoked as
/prompts:<name>
- Uses
- Skills: Agent Skills standard →
dist/codex/.codex/skills/{name}/SKILL.md- Same SKILL.md format as Claude Code with YAML frontmatter
- Reference files in skill subdirectories
- Installation: Extract ZIP into your project root, creates
.codex/folder
End users can copy files directly without needing build tools.
- Each provider ~30-85 lines, easy to understand
- Can modify one without affecting others
- Easy to add new providers
- Much faster than Node.js (2-4x)
- All-in-one toolkit (runtime + package manager)
- Zero config, TypeScript native
- Node.js compatible (works with existing code)
- Better context management (load only what's needed)
- Cleaner file organization
- Gemini: Uses native
@file.mdimport feature - Codex: Uses routing pattern with AGENTS.md guide
- No build complexity
- Bun handles everything natively
- Modern features (ES6+, CSS nesting, OKLCH colors)
- Fast, lean, maintainable
- Create source file in
source/commands/orsource/skills/ - Add frontmatter with name, description, args (for commands) or license (for skills)
- Write body with instructions/prompt
- Build:
bun run build - Test with your provider
- Commit both source and dist files
- Source is truth: Always edit
source/, never editdist/directly - Test across providers: Changes affect 4 different outputs
- Argument handling: Write prompts that work with both placeholders and appending
- Cursor limitations: No frontmatter/args, so design for graceful degradation
- README.md: End user guide (installation, usage, quick dev setup)
- DEVELOP.md: Contributor guide (architecture, build system, adding content)
- This file (AGENTS.md): Context for AI assistants and new developers