Agent skill

Frontend Design

Design implementation-ready frontend solutions with UX intent, component structure, responsive behavior, accessibility, and handoff criteria.

MITAuto-check passedFrontend & Design

Install Frontend Design

skills CLI

$ npx skills add itseffi/agentic-os --skill frontend-design -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install itseffi/agentic-os frontend-design --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/itseffi/agentic-os.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/frontend-design .claude/skills/frontend-design && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "frontend-design" agent skill from https://github.com/itseffi/agentic-os/tree/main/.agents/skills/frontend-design into .claude/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/itseffi/agentic-os/tree/main/.agents/skills/frontend-design

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add itseffi/agentic-os --skill frontend-design -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install itseffi/agentic-os frontend-design --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/itseffi/agentic-os.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/frontend-design .agents/skills/frontend-design && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "frontend-design" agent skill from https://github.com/itseffi/agentic-os/tree/main/.agents/skills/frontend-design into .agents/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add itseffi/agentic-os --skill frontend-design -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install itseffi/agentic-os frontend-design --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/itseffi/agentic-os.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/frontend-design .cursor/skills/frontend-design && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "frontend-design" agent skill from https://github.com/itseffi/agentic-os/tree/main/.agents/skills/frontend-design into .cursor/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/itseffi/agentic-os.git --path .agents/skills/frontend-design

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add itseffi/agentic-os --skill frontend-design -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install itseffi/agentic-os frontend-design --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/itseffi/agentic-os.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/frontend-design .gemini/skills/frontend-design && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "frontend-design" agent skill from https://github.com/itseffi/agentic-os/tree/main/.agents/skills/frontend-design into .gemini/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install itseffi/agentic-os frontend-design

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add itseffi/agentic-os --skill frontend-design -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/itseffi/agentic-os.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/frontend-design .github/skills/frontend-design && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "frontend-design" agent skill from https://github.com/itseffi/agentic-os/tree/main/.agents/skills/frontend-design into .github/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add itseffi/agentic-os --skill frontend-design -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install itseffi/agentic-os frontend-design --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/itseffi/agentic-os.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/frontend-design .opencode/skills/frontend-design && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "frontend-design" agent skill from https://github.com/itseffi/agentic-os/tree/main/.agents/skills/frontend-design into .opencode/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: frontend-design
GitHub stars: 115
Token cost: ~470 tokens
SKILL.md length: 162 words
Files: 2
Skills in repo: 29
Repo updated: Oct 7, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Design implementation-ready frontend solutions with UX intent, component structure, responsive behavior, accessibility, and handoff criteria.

Works in 5 steps: Define UX objective → Specify UI architecture → Specify design system decisions → …
Tasks that involve Accessibility
SKILL.md covers The Process, Output Format, Quality Bar and When to Use, plus 1 more section
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Frontend Design is an agent skill from itseffi/agentic-os. Design implementation-ready frontend solutions with UX intent, component structure, responsive behavior, accessibility, and handoff criteria.

Its SKILL.md is about 470 tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `agents/openai.yaml`).

It sits in Frontend & Design, covering Accessibility. The repository describes itself as: Agentic personal OS to automate high-leverage workflows with Codex, Claude Code, Pi, OpenClaw and other coding agents/ runtime platforms. The licence is MIT.

When your agent uses it

Tasks that involve Accessibility

Example prompts

“/frontend-design”

Workflow steps

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

Define UX objective
Specify UI architecture
Specify design system decisions
Specify responsive and accessibility requirements
Define implementation handoff

What it can do on your machine

Read from SKILL.md and the folder at commit e54d0ac. 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 markdown).
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 470 tokens when it runs. Until then it costs about 39 tokens; SKILL.md has 162 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~39
When it runs · the whole SKILL.md, loaded when a task matches: ~470

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

Auto-check passed

The automated check found no risky patterns in SKILL.md.

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 itseffi/agentic-os at commit e54d0ac, republished under its MIT licence (© itseffi). 162 words, ~470 tokens.

Download SKILL.mdSave it as .claude/skills/frontend-design/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.

name: frontend-design
description: Design implementation-ready frontend solutions with UX intent, component structure, responsive behavior, accessibility, and handoff criteria.

Frontend Design

Use this skill to design frontend behavior and UI structure before or alongside implementation.

The Process

Step 1: Define UX objective

Capture:

user goal
primary user flow
success state and failure states

Step 2: Specify UI architecture

Define:

screen/layout structure
component hierarchy
state model (loading, empty, error, success)

Step 3: Specify design system decisions

Set:

typography and spacing rules
color/contrast constraints
interaction patterns

Step 4: Specify responsive and accessibility requirements

Include:

breakpoints and behavior changes
keyboard navigation expectations
ARIA/semantic requirements
contrast and focus visibility requirements

Step 5: Define implementation handoff

Provide:

component list and props/state contract
acceptance criteria
verification checklist

Output Format

markdown

# [Feature Name] Frontend Design Spec

## UX Objective
- User goal:
- Primary flow:
- Success/failure states:

## UI Architecture
- Layout:
- Component hierarchy:
- State model:

## Responsive Behavior
- Desktop:
- Tablet:
- Mobile:

## Accessibility Requirements
- Keyboard:
- Semantics/ARIA:
- Contrast/focus:

## Handoff
- Components to implement:
- Acceptance criteria:
- Verification checklist:

Quality Bar

Design decisions must map to user goals
Accessibility section is mandatory
Handoff must be implementable without extra interpretation

When to Use

Use this skill when the task directly matches the workflow described above.

When Not to Use

Do not use this skill when the request is unrelated, low-stakes, or better handled by a simpler direct response.

Files

SKILL.md and 1 other file in .agents/skills/frontend-design of itseffi/agentic-os.

SKILL.md
agents/openai.yaml

Open the folder on GitHubat commit e54d0ac

Compare with similar skills

Frontend Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Frontend Design compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Frontend Design this skillitseffi/agentic-os	115	—	~470	Automated safety check: Pass	MIT	yesterday
Web Interface Guidelines Reviewervercel-labs/openreview	1.7k	98 repos	~308	Automated safety check: Pass	None	7 mo ago
Accessibility Reviewmarkmead/hyperui	12k	1 repos	~1.1k	Automated safety check: Pass	MIT	12 days ago
Web Animation DesignbaptisteArno/typebot.io	11k	2 repos	~2.7k	Automated safety check: Pass	Custom licence	yesterday
Accessibility Fixeribelick/ui-skills	9.5k	4 repos	~1.2k	Automated safety check: Pass	MIT	yesterday
Wcag Audit PatternsvmDeshpande/ai-agent-automation	178	11 repos	~610	Automated safety check: Pass	Apache-2.0	26 days ago

Similar skills

Web Interface Guidelines Reviewer
vercel-labs/openreview
Official
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…
1.7k GitHub starsUsed in 98 repos~308 tokens
Frontend & DesignAuto-check passed
Accessibility Review
markmead/hyperui
Run a WCAG 2.1 AA accessibility audit on a design or page. An agent skill from markmead/hyperui.
12k GitHub starsUsed in 1 repo~1.1k tokens
Frontend & DesignAuto-check passed
Web Animation Design
baptisteArno/typebot.io
Guides easing, timing and animation choices for UI motion, based on a web animation course, and reviews existing animations in a before-and-after table.
11k GitHub starsUsed in 2 repos~2.7k tokens
Frontend & DesignAuto-check passed
Accessibility Fixer
ibelick/ui-skills
Audits and fixes HTML accessibility problems such as ARIA labels, keyboard navigation, focus management, contrast and form errors with minimal changes.
9.5k GitHub starsUsed in 4 repos~1.2k tokens
Frontend & DesignAuto-check passed
Wcag Audit Patterns
vmDeshpande/ai-agent-automation
Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance.
178 GitHub starsUsed in 11 repos~610 tokens
Frontend & DesignAuto-check passed
Baseline UI
ibelick/ui-skills
Applies a fixed set of UI rules for stack, components, interaction, animation, typography and layout, or reviews a file against them with concrete fixes.
9.5k GitHub starsUsed in 8 repos~855 tokens
Frontend & DesignAuto-check passed

Questions about Frontend Design

What does Frontend Design do?

Design implementation-ready frontend solutions with UX intent, component structure, responsive behavior, accessibility, and handoff criteria. Frontend Design is an agent skill from itseffi/agentic-os. Design implementation-ready frontend solutions with UX intent, component structure, responsive behavior, accessibility, and handoff criteria.

When should I use Frontend Design?

Frontend Design fits situations like: tasks that involve Accessibility.

How do I install Frontend Design in Claude Code?

Run `npx skills add itseffi/agentic-os --skill frontend-design -a claude-code`. Or copy the skill folder (.agents/skills/frontend-design in itseffi/agentic-os) into .claude/skills/frontend-design in your project. Claude Code loads it when a task matches its description.

How do I install Frontend Design in Codex?

Run `npx skills add itseffi/agentic-os --skill frontend-design -a codex`. Or copy the skill folder (.agents/skills/frontend-design in itseffi/agentic-os) into .agents/skills/frontend-design in your project. Codex loads it when a task matches its description.

Can I use Frontend Design in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add itseffi/agentic-os --skill frontend-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend-design, .gemini/skills/frontend-design, .github/skills/frontend-design and .opencode/skills/frontend-design in your project.

What does Frontend Design need to run?

SKILL.md names no scripts, command-line tools or credentials: Frontend Design is instructions for the agent only.

Does Frontend Design access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Frontend Design safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Frontend Design use?

Frontend Design is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Frontend Design use?

About 470 tokens (SKILL.md is roughly 1.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Frontend Design?

Skills that share tags, products or a category with Frontend Design: Web Interface Guidelines Reviewer (vercel-labs/openreview, 1.7k stars), Accessibility Review (markmead/hyperui, 12k stars), Web Animation Design (baptisteArno/typebot.io, 11k stars) and Accessibility Fixer (ibelick/ui-skills, 9.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Frontend Design?

itseffi (a GitHub user) maintains it in itseffi/agentic-os, which has 115 GitHub stars. The repository holds 29 skills in this directory. The repository was last updated on October 7, 2026.

Source: itseffi/agentic-os on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Frontend Design

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Frontend Design

The Process

Step 1: Define UX objective

Step 2: Specify UI architecture

Step 3: Specify design system decisions

Step 4: Specify responsive and accessibility requirements

Step 5: Define implementation handoff

Output Format

Quality Bar

When to Use

When Not to Use

Files

Compare with similar skills

Similar skills

More from itseffi/agentic-os

Related

Questions about Frontend Design