Skills DirectorySkills Directory
SkillsLearnSecurityCategoriesDocsCommunityBlog
Sign InSubmit Skill
Skills Directory

Security-tested agent skills for Claude, coding agents, and AI workflows.

Directory

  • Browse Skills
  • All Skills A–Z
  • Claude Skills
  • Claude Code Skills
  • Agent Skills
  • Categories
  • Submit a Skill

Learn

  • Learn Hub
  • Install Claude Skills
  • Write SKILL.md
  • Skills vs MCP
  • Directories Compared

Security

  • Security
  • Methodology
  • Secure Claude Skills
  • Security Badges

Company

  • About
  • Community
  • Blog
  • API Docs
  • Advertise

2026 Skills Directory. All rights reserved.

Back to skills

Mira Visual System

ASecurity

**Mode skill.** Default-enabled on the Brand specialist.

6 stars
0 votes
0 copies
0 views
Added 9/20/2026
designrustgo

Works with

cli

Security Analysis

A100/100

Scanned 9/20/2026

Install to Claude Code

$npx -y skills add FerroxLabs/murage --skill mira-visual-system --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Mira Visual System?

Add the live security badge to your README — it updates automatically with every re-scan.

Security grade badge for Mira Visual System
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/ferroxlabs-mira-visual-system/badge)](https://www.skillsdirectory.com/skills/ferroxlabs-mira-visual-system)

More formats (shields.io, HTML) on the badges page.

Download Zip
Files
SKILL.md
---
name: mira-visual-system
description: "**Mode skill.** Default-enabled on the Brand specialist."
metadata:
  author: wayland
  version: "1.0.0"
  category: "mira"
---

# visual-system

**Mode skill.** Default-enabled on the Brand specialist.

## When to use

Use after the onlyness statement is locked in `TEAM_MEMORY.md` and the team needs a working visual system: typography, color, layout density, motif, plus the voice rules Copy writes inside. Use when a user asks for "the look," a logo direction, a palette, a font pairing, or a style guide. If onlyness is not locked, run `brand-foundation` first.

Trigger phrases: "Give me a palette." / "What fonts should we use?" / "Build a mini style guide." / "What's our visual identity?"

## Procedure

**1. Re-anchor on the dominant attribute.** Read the locked onlyness statement and its dominant attribute back to the user. Every choice below must signal that one word.

**2. Typography first — it carries the personality.** Pick **two type voices**: one for display (headlines, hero, logotype) and one for body (paragraphs, UI, captions). Decide in this order:

- **Display face voice.** Serif = considered, editorial. Geometric sans = engineered, modern. Humanist sans = warm, approachable. Slab = sturdy, declarative. Mono = technical, raw, honest. Display/custom = high-attitude, niche.
- **Body face.** Different family, compatible x-height. Body carries trust; pick legibility before character.
- **One contrast move.** Either weight contrast (thin display against regular body) or family contrast (serif display against sans body). Not both — two moves becomes noise.

State the *why* in one sentence per choice. *"Slab display because the attribute is unflinchingly honest, and slab carries declarative weight without smiling."*

**3. Color — one ownable hue, then a working set.**

- **One ownable hue.** Pick one chromatic color the brand owns. Avoid default category colors (blue for SaaS, green for sustainability, black for luxury) unless you have a reason to fight inside the cliché.
- **One supporting accent.** A second color that does the work the primary won't (warm CTA against cool primary, muted neutral against saturated lead).
- **Working neutrals.** A near-black (almost never #000), one off-white background, one mid-gray for borders and secondary text. Three, not five.
- **One reason per choice.** *"Desaturated and slightly green — signals clinical precision over corporate familiarity."*

**4. Layout density.** Choose one: **dense** (small type, tight tracking, lots of information on screen — signals expertise and seriousness) or **spacious** (large type, generous whitespace, one idea per view — signals confidence and calm). Density is a brand statement. Mixing reads as indecision.

**5. Motif and image style.** Pick **one** visual mark, pattern, illustration system, or photographic treatment. Plus one written "never" rule for images the brand won't use. The "never" list stops drift better than any "always" list.

**6. Voice rules for Copy.** Define, in five lines:

- **Register** (formal / conversational / blunt / warm).
- **Sentence length default** (short, mixed, long-flowing).
- **First person** (we / I / none).
- **Three banned words or phrases** specific to this brand.
- **One thing the brand never says** (a position, a posture, a claim).

Post all six outputs to `## Brand` in `TEAM_MEMORY.md` under a dated entry. Hand the voice-rules block to the Copy specialist explicitly.

## Decision rules

- **Two type voices, period.** A third face is almost always a wrapped solution to a layout problem the pairing should have solved.
- **The ownable hue must survive at 24px and at 24ft.** If it muddies at either end, it's wrong.
- **If the attribute is *quiet*, the system gets quieter than feels comfortable.** Most brands under-commit.
- **Recognizability beats prettiness.** Slightly-off-but-unmistakable beats polished-and-generic.
- **No mood boards without three pinned references.** "Clean and modern" without pictures is a discussion, not a brief.

## Anti-patterns

- Three or four typefaces because each is individually nice. The brand reads as a font store.
- Locking a palette before the price tier is set. *Premium* and *budget* look nothing alike.
- Borrowing an admired brand's system wholesale. You end up with their recognizability.
- Accessibility as a final-pass check. Contrast and minimum body size are first-pass constraints.
- Voice defined in adjectives ("friendly, smart"). Voice is rules — banned words beat mood words.
- Skipping the "never" list. Without it, every new asset drifts and brand decay starts.

## Before / after

**Brief:** *"We need a visual system. Onlyness: only daily planner that forces creatives to schedule the messy middle. Dominant attribute: unflinchingly honest."*

**Before** (default category move): geometric sans, cream background, soft pastels, friendly icon set.

**After** (system answering the attribute): slab serif display in near-black, mono for captions and timestamps, a single oxidized rust as the ownable hue against off-white, dense layout, no illustrations — only marked-up date grids. Voice rules: no exclamation marks, no "just," no future-tense aspiration. The system stops smiling, and the buyer recognizes the planner inside a thumbnail.

Attribution

FerroxLabsFerroxLabs
View sourceMore from FerroxLabs →
SSkills DirectorySkills Directory

Your tool, in front of Claude Code builders.

3 founder slots · $299/mo · GSC-verified traffic · sponsors can never buy grades.

See placements

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments (0)

No comments yet. Be the first to comment!

SSkills DirectorySkills Directory

Your tool, in front of Claude Code builders.

3 founder slots · $299/mo · GSC-verified traffic · sponsors can never buy grades.

See placements

Related Skills

Responsive Design

Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior.

393432 votes

Mermaid Diagrams

Creating and refining Mermaid diagrams with live reload. Use when users want flowcharts, sequence diagrams, class diagrams, ER diagrams, state diagrams, or any other Mermaid visualization. Provides best practices for syntax, styling, and the iterative workflow using mermaid_preview and mermaid_save tools.

2032 votes

sleek-design-mobile-apps

Use when the user wants to design a mobile app, create screens, build UI, or interact with their Sleek projects. Covers high-level requests ("design an app that does X") and specific ones ("list my projects", "create a new project", "screenshot that screen").

5711 votes

swiftui-design-skill

SwiftUI frontend visual design skill. Creates beautiful, distinctive iOS/macOS interfaces that avoid generic AI slop patterns. Covers design direction, layout systems, typography, color, spacing, brand integration, and design review. Use when designing new SwiftUI views, reviewing UI quality, creating iOS prototypes, choosing visual styles, improving app aesthetics, or when the UI looks generic or AI-generated.

1801 votes

Ios Hig

Use when designing iOS interfaces, implementing accessibility (VoiceOver, Dynamic Type), handling dark mode, ensuring adequate touch targets, providing animation/haptic feedback, or requesting user permissions. Apple Human Interface Guidelines for iOS compliance.

761 votes
View all in design →