- name
- eva-ui
- description
- Use this skill when creating, reviewing, or extending interfaces inspired by Evangelion monitor, tactical screen, and control-room aesthetics. It guides color selection, typography, pattern language, data density, motion, and component composition so outputs keep EVA's industrial red-orange instrument feel instead of drifting into generic sci-fi or SaaS dashboards.
- version
- 1.0.1
EVA UI Skill
Current version: 1.0.1
Use this skill for EVA-inspired UI design systems, frontend implementation, component generation, prompt authoring, or design review.
Workflow
- Start with
references/style-principles.mdto lock the visual direction. - Apply the system rules from
references/tokens.md,references/typography.md, andreferences/motion.md. - Use
references/pattern-language.mdandreferences/data-elements.mdto build the non-typographic visual grammar. - Build or review UI against
references/component-rules.md. - Use
references/prompt-recipes.mdto generate new pages or components. - Reject outputs that match any failure mode in
references/anti-patterns.md.
Required Style Principles
- High information density
- Hard-edged framing
- Red-orange status-driven color system
- Technical condensed typography
- Instrument-style motion
- Pattern language built from stripes, ticks, brackets, meshes, and calibration motifs
- Borders, rails, labels, and measurement marks should do more visual work than spacing or soft shadows
Reference Map
references/style-principles.mdreferences/tokens.mdreferences/typography.mdreferences/motion.mdreferences/pattern-language.mdreferences/data-elements.mdreferences/component-rules.mdreferences/prompt-recipes.mdreferences/anti-patterns.md
Assets
assets/example-lab/index.htmlassets/example-lab/styles.css
Use the example lab as a starting point for prototypes, demos, or component extraction.
Output Constraints
- Avoid soft SaaS cards, large radii, and friendly product-dashboard spacing.
- Avoid relying on typography alone; reinforce hierarchy with stripe bands, ticks, reticles, threshold bars, and rails.
- Treat red and orange as primary EVA command colors; use other hues only when they communicate a specific data mode.
- Prefer repeated structured modules over hero-card layouts.
- Decorative gradients are allowed only when they communicate field state, heat, scan, or energy behavior.