xoai/design-check
core/capabilities/verification/design-check/SKILL.md
Quick design quality scan of changed frontend files. Checks for hardcoded colors (when design system exists), missing interactive states, and AI slop indicators. Code-only — does not use Lightpanda. Advisory only — never blocks. Invisible when no frontend files in diff.
$ install --global
skillsauthnpx skillsauth add xoai/sage design-checkInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 25, 2026, 1:59 PM132.3s1 file scanned
SKILL.md
- name:
- design-check
- description:
- >
- version:
- 1.0.0
- modes:
- [build]
<!-- sage-metadata
cost-tier: sonnet
activation: auto
tags: [verification, design, quality, frontend]
inputs: [diff]
outputs: [pass-warnings]
requires: []
-->
Design Check (Light Mode)
Quick scan within quality-gates. Catches common design quality issues in changed frontend files. Code-only — does not require a browser.
Availability Check
FIRST: Check if the diff contains frontend files: .html, .css, .scss, .less, .jsx, .tsx, .vue, .svelte, .astro
If NO frontend files in diff:
- Return immediately
- No output, no warning, INVISIBLE
Design System Detection
Scan in order (stop at first match):
- Design system skill in
sage/skills/or.claude/skills/ DESIGN.mdordesign-system.mdin project root or.sage/docs/- CSS custom properties pattern (
--color-*,--spacing-*,--font-*)
If found → enable token compliance checks. If not found → skip token checks, still run general quality checks.
Detection is automatic and INVISIBLE — do not announce whether a design system was found. Just use it (or don't) silently.
What It Checks (15 seconds max)
1. Hardcoded colors (when design system detected)
Scan changed files for raw hex colors (#fff, #333, rgb(), hsl()) that should be design system token references.
Finding: note — "N hardcoded colors in [file] (consider using tokens)"
2. Missing interactive states
Search changed component files for:
:hoverstyles on interactive elements (buttons, links, cards):focusor:focus-visibleon focusable elementsdisabledattribute handling with visual distinction- Loading/empty/error state handling in components
Finding: note — "[file] has no :focus style on [element]"
3. AI slop indicators
In new or heavily modified components, check for:
- Purple-to-blue gradient hero sections
- 3-column icon grids with uniform card styling
- Uniform large border-radius on every element
- Centered text on every section
- Decorative background shapes with no function
- Excessive shadow/elevation on flat content
Each indicator: warning (awareness, not judgment)
Report
If findings exist:
✓ Design check: PASS ({N} notes)
- Note: {finding 1}
- Note: {finding 2}
- Warning: {AI slop indicator}
If clean:
✓ Design check: PASS
If no frontend files:
No output. Invisible.
Enforcement
- Advisory ONLY — never blocks the build
- Findings are notes and warnings, never issues
- Do NOT fabricate findings — if you didn't read the file, don't claim
- Do NOT invent a design system — if none detected, skip token checks
- Do NOT auto-fix design decisions — report only
- AI slop indicators are WARNINGS, not issues. Count, don't grade.
Related Skills
xoai/git-discipline
development
VerifiedTrustedCommunity
Branch-per-initiative git discipline for all delivery workflows. Defines branch naming by workflow, the propose-confirm creation protocol, dirty-tree and detached-HEAD handling, the always user-gated merge protocol, worktree support for parallel sessions, and abandonment cleanup. Activates only in git repositories — silently inactive everywhere else. Use when starting /build, /fix, /architect, or /build-x at Standard+ scope, when resuming an initiative, when offering a merge at a completion checkpoint, or when the user wants a second concurrent initiative.
18SKILL.mdUpdated Jun 13, 2026
xoai/build-loop
development
VerifiedTrustedCommunity
Drives task-by-task execution from an approved plan with quality gates between each task. Reads the plan, finds the next incomplete task, dispatches implementation, validates, updates progress, and continues. Use after a plan is approved and the user says "go", "start building", "execute the plan", or "implement the feature".
18SKILL.mdUpdated Apr 25, 2026
xoai/session-bridge
testing
VerifiedTrustedCommunity
Preserves and restores context across agent sessions using plan file checkboxes as source of truth. Use when starting a new session, resuming previous work, ending a session, or when the user says "continue from last time", "what was I doing", or "save progress".
18SKILL.mdUpdated Apr 25, 2026
xoai/sage-self-learning
tools
VerifiedTrustedCommunity
Captures agent mistakes, corrections, and discovered gotchas so they are not repeated. Use when: (1) a command or operation fails unexpectedly, (2) the user corrects the agent, (3) the agent discovers non-obvious behavior through debugging, (4) an API or tool behaves differently than expected, (5) a better approach is found for a recurring task. Also searches past learnings before starting tasks to avoid known pitfalls. Activate alongside the sage-memory skill — they share the same MCP backend but serve different purposes (sage-memory = codebase knowledge, sage-self-learning = agent mistakes and gotchas).
17SKILL.mdUpdated May 20, 2026