How do I install the Frontend Design skill?

Run npx skillmds add podo/frontend-design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Frontend Design safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Frontend Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Frontend Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Frontend Design?

podo (@podo) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Frontend Design by podo — Agent Skill

Name: Frontend Design
Rating: 4.5 (4 reviews)
Author: podo

Frontend Design

8 aesthetic anchors (Brutalist, Nordic, Cyberpunk, Vaporwave, Organic, Luxury, Editorial, Industrial), each locking palette, typography, and texture to specific CSS tokens. Pick one per brief and the skill generates matching code.

podo 75e5cce 2 files · 2.5 KB Updated Sep 9, 2026

File contents

frontend-design

Catalogue stub — full skill: Ilm-Alan/frontend-design

Decision tree

Is the full skill already installed? Check whether the skill at this location still has a das: block:
- Global: grep -q "^das:" ~/.agents/skills/frontend-design/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
- Project: grep -q "^das:" .agents/skills/frontend-design/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
- No das: block → full skill installed, invoke it and proceed
- das: block present → go to step 2

Detect scope, then install:

To detect scope:

[ -e ~/.agents/skills/frontend-design ] && echo "global" || echo "project"

Global (installed with -g):

npx skills add Ilm-Alan/frontend-design --skill frontend-design -g -y

Project (installed without -g):

npx skills add Ilm-Alan/frontend-design --skill frontend-design -y

Claude Code: send either command as a chat message starting with ! to run it without leaving the conversation.

Invoke after install

Skill name: frontend-design
Trigger phrases: "aesthetic anchor", "brutalist design", "nordic design", "themed UI", "frontend-design"

What it does

Provides 8 named aesthetic anchors — Brutalist, Nordic, Cyberpunk, Vaporwave, Organic, Luxury, Editorial, and Industrial — each defined by a locked set of CSS custom properties covering palette, typography scale, and texture tokens. The user picks one anchor per brief and the skill generates component code that strictly adheres to those tokens. This prevents aesthetic drift across a project by making the design system the constraint, not a suggestion.

When NOT to use

When you need multi-stack support across React, Vue, and Svelte simultaneously (use ui-ux-pro-max)
When the primary deliverable is animation-heavy or video (use remotion)
When no specific aesthetic direction has been chosen and you need exploration first (use design-consultation)

---name: frontend-designdescription: 8 aesthetic anchors (Brutalist, Nordic, Cyberpunk, Vaporwave, Organic, Luxury, Editorial, Industrial), each locking palette, typography, and texture to specific CSS tokens. Pick one per brief and the skill generates matching code.--- # frontend-design > Catalogue stub — full skill: [Ilm-Alan/frontend-design](https://github.com/Ilm-Alan/frontend-design) ## Decision tree 1. **Is the full skill already installed?** Check whether the skill at this location still has a `das:` block: - Global: `grep -q "^das:" ~/.agents/skills/frontend-design/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"` - Project: `grep -q "^das:" .agents/skills/frontend-design/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"` - No `das:` block → full skill installed, invoke it and proceed - `das:` block present → go to step 2 2. **Detect scope, then install:** To detect scope: ```bash [ -e ~/.agents/skills/frontend-design ] && echo "global" || echo "project" ``` **Global** (installed with `-g`): ```bash npx skills add Ilm-Alan/frontend-design --skill frontend-design -g -y ``` **Project** (installed without `-g`): ```bash npx skills add Ilm-Alan/frontend-design --skill frontend-design -y ``` > **Claude Code:** send either command as a chat message starting with `!` to run it without leaving the conversation. ## Invoke after install - Skill name: `frontend-design` - Trigger phrases: "aesthetic anchor", "brutalist design", "nordic design", "themed UI", "frontend-design" ## What it does Provides 8 named aesthetic anchors — Brutalist, Nordic, Cyberpunk, Vaporwave, Organic, Luxury, Editorial, and Industrial — each defined by a locked set of CSS custom properties covering palette, typography scale, and texture tokens. The user picks one anchor per brief and the skill generates component code that strictly adheres to those tokens. This prevents aesthetic drift across a project by making the design system the constraint, not a suggestion. ## When NOT to use - When you need multi-stack support across React, Vue, and Svelte simultaneously (use `ui-ux-pro-max`) - When the primary deliverable is animation-heavy or video (use `remotion`) - When no specific aesthetic direction has been chosen and you need exploration first (use `design-consultation`)

Frequently asked questions