Generated banner for Solar Duotone Bold
Generated logo for Solar Duotone Bold

Solar Duotone Bold

Meng ToCommunityCreated by Meng To

  • Skill
  • Guidelines
  • Design and creative
  • MIT
  • Medium risk

From the author

Use Iconify Solar Duotone Bold icon style.
— the description by Meng To

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured approach to using the Solar Duotone Bold icon family from Iconify. It focuses on maintaining visual consistency, proper pairing with labels, and intentional use of duotone opacity to enhance UI clarity and aesthetic cohesion.

What it does

  • Establishes Solar Duotone Bold as the primary icon set for UI components.
  • Provides rules for consistent icon sizing within groups.
  • Guides the pairing of icons with text labels for improved accessibility.
  • Defines best practices for managing duotone opacity and fill effects.
  • Ensures icon styling aligns with surface contrast requirements.

When to use it

  • When designing UI components that require a richer, more modern icon aesthetic.
  • When building navigation menus, feature cards, or control panels.
  • When you need to ensure visual consistency across a design system.

Advantages

  • Promotes a cohesive and professional visual language.
  • Prevents visual clutter by discouraging the mixing of disparate icon styles.
  • Improves user comprehension by emphasizing the need for text labels alongside icons.

Usage examples

“How should I style the icons in my new navigation bar?”
The agent will recommend using the Solar Duotone Bold set, ensuring consistent sizing and pairing each icon with a clear text label.
“Can I mix these icons with my existing outline icon set?”
The agent will advise against mixing styles to maintain visual integrity and suggest standardizing on the Solar Duotone Bold family.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/mengto/solar-duotone-bold/download
  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip solar-duotone-bold.zip -d .agents/skills

Documentation by Meng To

Solar Duotone Bold Skill

Use When

  • A UI needs cohesive icons with a richer look than generic outline icons.

Workflow

  1. Use Iconify Solar Duotone Bold as the default icon family.

  2. Keep icon sizes consistent within a component group.

  3. Pair icons with clear labels for navigation, controls, and feature cards.

  4. Use duotone opacity intentionally so secondary fills support the main glyph shape.

  5. Match stroke, fill, and color treatment to the surrounding surface contrast.

Guardrails

  • Do not mix Solar Duotone Bold with unrelated outline icon families in the same control set.

  • Do not rely on icons alone for unfamiliar actions.

Files

demo/PROMPT.md

Solar Duotone Bold Demo Prompts

Minimal prompt

Use $solar-duotone-bold to create a responsive standalone HTML design with the same visual confidence, hierarchy, and interaction finish as the included Neuform reference.

Recreate the demo

Use $solar-duotone-bold to recreate the design quality and behavior of Squish — Turn Your Ideas Into Stunning Visuals as a complete responsive HTML document. Treat the included demo/index.html as the visual and interaction reference, not as a loose mood board.

Product brief
  • Page concept: Squish — Turn Your Ideas Into Stunning Visuals.

  • Purpose: Squish Turn Background Effect is designed for delivering a visual treatment or immersive background effect. Key features include atmospheric visuals, motion depth, and flexible presentation layering. It is suitable for visual-first pages, motion studies, and atmospheric hero treatments.

  • Content anchors: Turn Your Ideas Into Stunning Visuals.

  • Useful subject tags: section, animated, webgl, threejs, dither, effect, billing, branding.

Skill direction
  • Use Iconify Solar Duotone Bold icon style.

    • Solar Duotone Bold: Use Iconify Solar Duotone Bold icon style.

Fidelity target
  • Match the reference's composition, information density, type scale, spacing rhythm, surface treatment, color relationships, and motion restraint.

  • Preserve the strongest interaction and animated background behavior instead of replacing it with generic fades or decorative movement.

  • Keep the first screen art-directed, then carry the same design logic through every supporting section.

  • Make the result responsive from mobile to desktop, keyboard accessible, and stable when reduced motion is enabled.

  • Deliver a full index.html. Put page-owned images, video, models, and textures in demo/assets/. External runtime libraries may stay as pinned CDN dependencies when the source relies on them.

Reference snapshot

Remix prompt

Use $solar-duotone-bold and the included Neuform demo as the quality bar, but replace the brand, subject, copy, palette, and content. Preserve the underlying layout logic, signature visual treatment, interaction choreography, responsive behavior, and performance constraints so the remix still clearly demonstrates the skill.

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

What our scanner noticed· Medium risk

  • Large base64-encoded blobs

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Meng To
Publisher
Meng To (Community)
Source
MengTo/Skills · agent-skills/web-design/solar-duotone-bold · commit 5ea1661
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Meng To.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download solar-duotone-bold.zip