# Check Design

> Audit OpenStride design compliance (colors, emojis, icons, forbidden imports) Use when this capability is needed.

- Skill: `tomevault-io/check-design` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/check-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/check-design/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Security
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/check-design

---


Check OpenStride design compliance. Run the following verifications:

1. **Hardcoded colors**: Search in `src/` and `plugins/` for forbidden colors (#88aa00, #6d8a00, #10b981, #059669, or any hex color in .vue files that isn't in variables.css). Use Grep.

2. **Emojis in code**: Search for Unicode emojis in .vue and .ts files under `src/` and `plugins/`. Emojis are forbidden in production code (OK in doc comments).

3. **Icons without aria-hidden**: Search for `<i class="fa` elements missing `aria-hidden="true"` in .vue files.

4. **Forbidden imports in plugins**: Search in `plugins/` for direct imports of core services:
   - `import.*from.*@/services/ActivityDBService`
   - `import.*from.*@/services/IndexedDBService`
   - `import.*from.*@/services/ToastService`

For each violation found:

- Show the file, line number, and content
- Explain why it's forbidden
- Suggest the fix (reference docs/DESIGN_GUIDELINES.md or docs/PLUGIN_GUIDELINES.md)

At the end, show a summary: X violations found (Y colors, Z emojis, W icons, V imports).
If 0 violations: "Design check passed"

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/openstride) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->