DesignPROPRO REQUIREDFC-DES-013
Spacing Claw
spacing-claw
v0.2.0May 25, 2026Turn add some padding into a disciplined system — 4px scales, baseline grids, and an audit that catches every hardcoded 17px
Turns "add some padding" into a disciplined system. Mathematical spacing scales (4px base, power-of-two ratios), baseline grids for vertical rhythm, responsive spacing that tightens intentionally at breakpoints, and an audit that catches every hardcoded 17px.
OpenClaw
Hermes
Claude Code
Codex
Cursor
Windsurf
Aider
OllamaPRIMARY ACTION
Unlock with ProCOMPATIBLE WITH
OpenClawHermesClaude CodeCodex+4
8 compatible tools5 output formats
When to Use
- Improve UX consistency and readability
- Audit accessibility and interaction states
- Refine spacing and hierarchy quickly
- Apply reusable design system patterns
Compatible Frameworks
OpenClawHermesClaude CodeCodexCursorWindsurfAiderOllama8 TOOLS
Quality Gates
- Spacing scale follows consistent ratio (e.g., 4px/8px base)
- Responsive spacing adapts at each breakpoint
- Vertical rhythm aligned to baseline grid
- Component spacing consistent across system
- Whitespace balanced — no crowding or excessive gaps
4 GATES DEFINED
Expected Outputs
Spacing Scale (4px/8px base)Baseline Grid SystemResponsive Spacing MapComponent Spacing AuditCSS Custom Properties
Native exports per tool
OpenClaw10 files
openclaw/AGENTS.mdopenclaw/SOUL.mdopenclaw/TOOLS.md+7 moreHermes5 files
hermes/skills/flickclaw/spacing-claw/SKILL.mdhermes/skills/flickclaw/spacing-claw/references/workflow.mdhermes/skills/flickclaw/spacing-claw/references/quality-gates.md+2 moreClaude Code6 files
claude-code/CLAUDE.mdclaude-code/.claude/skills/spacing-claw/SKILL.mdclaude-code/.claude/skills/spacing-claw/references/workflow.md+3 moreCodex5 files
codex/AGENTS.mdcodex/.flickclaw/agents/spacing-claw/codex.mdcodex/.flickclaw/agents/spacing-claw/workflow.md+2 moreCursor3 files
cursor/.cursor/rules/flickclaw-spacing-claw.mdccursor/.cursor/rules/flickclaw-spacing-claw-workflow.mdccursor/.cursor/rules/flickclaw-spacing-claw-quality-gates.mdcWindsurf3 files
windsurf/.windsurf/rules/flickclaw-spacing-claw.mdwindsurf/.windsurf/rules/flickclaw-spacing-claw-workflow.mdwindsurf/.windsurf/rules/flickclaw-spacing-claw-quality-gates.mdAider3 files
aider/CONVENTIONS.mdaider/aider.mdaider/.aider.conf.ymlOllama4 files
ollama/Modelfileollama/system-prompt.mdollama/template.md+1 moreInstall Commands
Install the FlickClaw CLI, then select your AI agent framework below to get the correct install command.
Step 1: Install CLI (one-time)
npm install -g @flickclaw/cli@latestStep 2: Select Framework
OpenClaw
npm exec --yes @flickclaw/cli@latest -- install spacing-claw --target openclawDownload as ZIP
Example Prompt
Try this prompt with Spacing Claw to see what it can do:
Audit the UI for accessibility (WCAG 2.1 AA). Check color contrast, keyboard navigation, and screen reader compatibility. Produce Spacing Scale (4px/8px base), Baseline Grid System, Responsive Spacing Map.Example Output
IllustrativeWhat a typical Spacing Claw report looks like:
# Spacing Claw — Assessment Report **Project**: dashboard-ui **Context**: a React dashboard with charts, filters, and real-time updates **Generated**: 2026-07-10 ## Executive Summary The Spacing Claw completed its review of dashboard-ui (a React dashboard with charts, filters, and real-time updates). 3 findings were identified with concrete remediation steps. All quality gates were verified before delivery. ## Findings | # | Severity | Area | Finding | Recommended Action | |---|----------|------|---------|-------------------| | 1 | **P1** | Accessibility | Charts not keyboard navigable | Add tabIndex, ARIA roles, and keyboard event handlers | | 2 | **P1** | Contrast | Filter labels fail WCAG AA (3.2:1 ratio) | Update label color to meet 4.5:1 minimum | | 3 | **P2** | Responsive | Data table overflows on mobile (<375px) | Add horizontal scroll and sticky first column | ## Quality Gates - [✓] Spacing scale follows consistent ratio (4px/8px base) - [✓] Vertical rhythm aligned to baseline grid - [✓] Responsive spacing adapts at each breakpoint ## Outputs Generated - **Spacing Scale (4px/8px base)**: Included in the report above. - **Baseline Grid System**: Included in the report above. - **Responsive Spacing Map**: Included in the report above. - **Component Spacing Audit**: Included in the report above. - **CSS Custom Properties**: Included in the report above. ## Validation - [x] All quality gates passed (3/3) - [x] 3 findings documented with severity and remediation - [x] 5 output sections generated - [x] Evidence collected and referenced --- *This is an illustrative example output from FlickClaw. Results vary based on project context.*
RELATED AGENTS