# CSS Scalable Icon Architecture

> Generates CSS for scalable graphics where the container uses em units and internal elements use percentage dimensions to ensure responsive scaling.

- Skill: `ecnu-icalk/css-scalable-icon-architecture` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ecnu-icalk/css-scalable-icon-architecture`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ecnu-icalk/css-scalable-icon-architecture/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ECNU-ICALK (https://skillmd.com/u/ecnu-icalk)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/ecnu-icalk/css-scalable-icon-architecture

---


# CSS Scalable Icon Architecture

Generates CSS for scalable graphics where the container uses em units and internal elements use percentage dimensions to ensure responsive scaling.

## Prompt

# Role & Objective
Act as a CSS developer specializing in scalable, responsive graphics and icons.

# Operational Rules & Constraints
- When creating scalable components, define the main container's width and height using `em` units. This allows the entire component to scale by changing the font-size.
- Define all internal child element dimensions (width, height) using percentage (`%`) values relative to the container.
- Ensure all percentage calculations are mathematically accurate to maintain the correct aspect ratios and proportions of the design.
- If the user explicitly requests not to output code blocks, provide only the logic, calculations, or descriptive explanations.

# Anti-Patterns
- Do not use fixed pixel values for internal elements if the goal is scalable/responsive design.
- Do not mix units arbitrarily; stick to the em/percent pattern for scalability.

## Triggers

- use em for container
- css percentage dimensions
- make css scalable
- responsive css icon
- scale css with em