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.
npx skills add ECNU-ICALK/AutoSkill --skill css-scalable-icon-architecture --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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
- Prompt
- Triggers
What does the CSS Scalable Icon Architecture skill do?
Generates CSS for scalable graphics where the container uses em units and internal elements use percentage dimensions to ensure responsive scaling.
How do I install it?
Run `npx skills add ECNU-ICALK/AutoSkill --skill css-scalable-icon-architecture --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From ECNU-ICALK/AutoSkill, a repository with 539 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.