Frontend Design

What it does

When your agent uses it

• Tasks that involve iOS development
• Tasks that involve Accessibility
• Tasks that involve CSS and styling

Example prompts

• “/frontend-design”

Workflow steps

4 steps, taken from the step headings in SKILL.md.

1. 1Иерархия важнее красоты
2. 2Консистентность убивает хаос
3. 3Детали создают профессионализм
4. 4Mobile-first — не опция, а стандарт

What it can do on your machine

Read from SKILL.md and the folder at commit 67709af. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  No scripts in the folder and no shell commands in SKILL.md (its code samples are css).

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  No URLs in SKILL.md.

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Frontend Design loads about 1.1k tokens when it runs, and up to ~10k if it reads all its reference files. Until then it costs about 225 tokens; SKILL.md has 278 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~225

When it runs · the whole SKILL.md, loaded when a task matches

~1.1k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~10k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from AnastasiyaW/codex-claude-code-config at commit 67709af, republished under its MIT licence (© AnastasiyaW). 278 words, ~1,124 tokens.

name

frontend-design

description

Создание высококачественных, визуально выдающихся фронтенд-интерфейсов. Используй ВСЕГДА когда пользователь просит создать веб-страницу, компонент, лендинг, дашборд, UI-кит, форму, карточки, навигацию, анимации, или любой другой веб-интерфейс. Скилл покрывает: HTML/CSS/JS компоненты, React/Vue/Svelte, Tailwind CSS, адаптивный и мобильный дизайн, визуальные стили (glassmorphism, neomorphism, material, flat, градиенты, тёмная тема), интерактивность (drag-and-drop, анимации, hover-эффекты, transitions), верстку (Flexbox, Grid, Container Queries), производительность, доступность (WCAG/ARIA), дизайн-системы и токены. Если пользователь хочет что-то "красивое", "современное", "стильное" в вебе — обязательно используй этот скилл. НЕ используй для нативных мобильных приложений (iOS/Swift/SwiftUI, Android) — для iOS бери скилл ios-development; этот скилл только про веб-UI (браузер).

/* Плохо — резкие переходы */
button { background: blue; }
button:hover { background: darkblue; }

/* Хорошо — всё плавно */
button {
  background: #3b82f6;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
button:hover {
  background: #2563eb;
  box-shadow: 0 4px 12px rgba(59,130,246,0.4);
  transform: translateY(-1px);
}

:root {
  --bg: #0f0f11;
  --surface: #1a1a1f;
  --border: rgba(255,255,255,0.08);
  --text: #e4e4e7;
  --muted: #71717a;
  --accent: #6366f1;
}

.glass {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
}

.neu {
  background: #e0e5ec;
  border-radius: 16px;
  box-shadow: 6px 6px 14px #b8bec7, -6px -6px 14px #ffffff;
}

.gradient-text {
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

© AnastasiyaW, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 4 other files (references) in skills/frontend/frontend-design of AnastasiyaW/codex-claude-code-config.

• SKILL.md
• references/components-frameworks.md
• references/layout-css.md
• references/performance-a11y.md
• references/visual-styles.md

Open the folder on GitHubat commit 67709af